From 509c9fe2077dbcd29765e6c2d7aa236cb997eab5 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 22 Aug 2022 17:18:52 -0400
Subject: [PATCH 1/7] sticky header PR feedback

---
 packages/react-table/src/docs/demos/Table.md  | 56 +++++++++++++------
 .../react-table/src/docs/examples/Data.jsx    |  2 +-
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 1c4e2906f2d..18989d376e0 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -5,6 +5,7 @@ section: components
 
 import {
 Checkbox,
+Label,
 PageSection,
 ToolbarExpandIconWrapper,
 ToolbarContent,
@@ -46,6 +47,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import { rows, columns } from '../examples/Data.jsx';
 
 ## Demos
 
@@ -2796,6 +2798,7 @@ import {
   DropdownToggle,
   DropdownItem,
   KebabToggle,
+  Label,
   Nav,
   NavItem,
   NavList,
@@ -2817,6 +2820,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { rows, columns } from '../examples/Data.jsx';
 
 class PageLayoutDefaultNav extends React.Component {
   constructor(props) {
@@ -2824,8 +2828,7 @@ class PageLayoutDefaultNav extends React.Component {
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
-      activeItem: 0,
-      res: []
+      activeItem: 0
     };
     this.onDropdownToggle = isDropdownOpen => {
       this.setState({
@@ -2858,20 +2861,8 @@ class PageLayoutDefaultNav extends React.Component {
     };
   }
 
-  fetch(page, perPage) {
-    this.setState({ loading: true });
-    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page, total: 100 }))
-      .catch(err => this.setState({ error: err, perPage: 0, page: 0, total: 0 }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page || 1, this.state.perPage || 20);
-  }
-
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem, res } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
@@ -2980,6 +2971,19 @@ class PageLayoutDefaultNav extends React.Component {
       </Breadcrumb>
     );
 
+    const renderLabel = labelText => {
+      switch (labelText) {
+        case 'Running':
+          return <Label color="green">{labelText}</Label>;
+        case 'Stopped':
+          return <Label color="orange">{labelText}</Label>;
+        case 'Needs Maintenance':
+          return <Label color="blue">{labelText}</Label>;
+        case 'Down':
+          return <Label color="red">{labelText}</Label>;
+      }
+    };
+
     return (
       <React.Fragment>
         <Page
@@ -3001,8 +3005,26 @@ class PageLayoutDefaultNav extends React.Component {
           </PageSection>
           <PageSection>
             <Table
-              cells={['Title', 'Body']}
-              rows={res.map(post => [post.title, post.body])}
+              cells={[
+                { title: 'Servers', transforms: [cellWidth(10)] },
+                { title: 'Threads', transforms: [cellWidth(10)] },
+                { title: 'Applications', transforms: [cellWidth(10)] },
+                { title: 'Location', transforms: [cellWidth(10)] },
+                { title: 'Status', transforms: [cellWidth(10)] },
+                { title: 'Location', transforms: [cellWidth(10)] },
+                { title: 'Last Modified', transforms: [cellWidth(10)] },
+                { title: 'URL', transforms: [cellWidth(10)] }
+              ]}
+              rows={rows.map(row => [
+                row.name,
+                row.threads,
+                row.applications,
+                row.workspaces,
+                { title: renderLabel(row.status) },
+                row.location,
+                row.lastModified,
+                { title: <a href="#">{row.url}</a> }
+              ])}
               aria-label="Sticky Header Table Demo"
               isStickyHeader
             >
diff --git a/packages/react-table/src/docs/examples/Data.jsx b/packages/react-table/src/docs/examples/Data.jsx
index a999a49ab4c..060c4a71857 100644
--- a/packages/react-table/src/docs/examples/Data.jsx
+++ b/packages/react-table/src/docs/examples/Data.jsx
@@ -173,7 +173,7 @@ export const rows = [
     applications: getRandomInteger(1, 50),
     workspaces: getRandomInteger(1, 30),
     status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
-    status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
+    location: ['Raleigh', 'Boston', 'Atlanta', 'San Francisco'][getRandomInteger(0, 3)],
     lastModified: '5 minutes ago',
     url: 'http://www.redhat.com/en/office-locations/US-node16'
   },

From da767816e2baba1c4f69d01d2a1c431d959688f2 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 22 Aug 2022 17:23:55 -0400
Subject: [PATCH 2/7] adjust spacing

---
 packages/react-table/src/docs/demos/Table.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 18989d376e0..9a979c13792 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -3006,10 +3006,10 @@ class PageLayoutDefaultNav extends React.Component {
           <PageSection>
             <Table
               cells={[
-                { title: 'Servers', transforms: [cellWidth(10)] },
-                { title: 'Threads', transforms: [cellWidth(10)] },
-                { title: 'Applications', transforms: [cellWidth(10)] },
-                { title: 'Location', transforms: [cellWidth(10)] },
+                { title: 'Servers', transforms: [cellWidth(15)] },
+                { title: 'Threads' },
+                { title: 'Applications' },
+                { title: 'Workspaces', transforms: [cellWidth(10)] },
                 { title: 'Status', transforms: [cellWidth(10)] },
                 { title: 'Location', transforms: [cellWidth(10)] },
                 { title: 'Last Modified', transforms: [cellWidth(10)] },

From b135411fed7630be1c6ca9b46bf1f19634936569 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 23 Aug 2022 10:45:18 -0400
Subject: [PATCH 3/7] use dashboard wrapper

---
 packages/react-table/src/docs/demos/Table.md | 177 +------------------
 1 file changed, 7 insertions(+), 170 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 9a979c13792..c367e4564ae 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2822,155 +2822,8 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { rows, columns } from '../examples/Data.jsx';
 
-class PageLayoutDefaultNav extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0
-    };
-    this.onDropdownToggle = isDropdownOpen => {
-      this.setState({
-        isDropdownOpen
-      });
-    };
-
-    this.onDropdownSelect = event => {
-      this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
-      });
-    };
-
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
-      this.setState({
-        isKebabDropdownOpen
-      });
-    };
-
-    this.onKebabDropdownSelect = event => {
-      this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
-      });
-    };
-
-    this.onNavSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
+class StickyHeaderTableDemo extends React.Component {
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const kebabDropdownItems = [
-      <DropdownItem>
-        <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
-        <HelpIcon /> Help
-      </DropdownItem>
-    ];
-    const userDropdownItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
-          User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>
-    ];
-    const headerTools = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: 'hidden',
-            lg: 'visible'
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <QuestionCircleIcon />
-            </Button>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              lg: 'hidden'
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
-              isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-          >
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onDropdownSelect}
-              isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
-      </PageHeaderTools>
-    );
-
-    const Header = (
-      <PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} showNavToggle />
-    );
-    const Sidebar = <PageSidebar nav={PageNav} />;
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
     const renderLabel = labelText => {
       switch (labelText) {
         case 'Running':
@@ -2985,25 +2838,9 @@ class PageLayoutDefaultNav extends React.Component {
     };
 
     return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">
-                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-                of its relative line height of 1.5.
-              </Text>
-            </TextContent>
-          </PageSection>
-          <PageSection>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+          <Card component="div">
             <Table
               cells={[
                 { title: 'Servers', transforms: [cellWidth(15)] },
@@ -3031,9 +2868,9 @@ class PageLayoutDefaultNav extends React.Component {
               <TableHeader />
               <TableBody />
             </Table>
-          </PageSection>
-        </Page>
-      </React.Fragment>
+          </Card>
+        </PageSection>
+      </DashboardWrapper>
     );
   }
 }

From 40cf2c63a25f6032ed2bbbf845c0be28c8d915b9 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 23 Aug 2022 11:49:30 -0400
Subject: [PATCH 4/7] unused imports

---
 packages/react-table/src/docs/demos/Table.md | 31 +-------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index c367e4564ae..df144f0caab 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2787,40 +2787,11 @@ class ComplexPaginationTableDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import {
-  Avatar,
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
-  KebabToggle,
   Label,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageHeader,
   PageSection,
-  PageSectionVariants,
-  PageSidebar,
-  SkipToContent,
-  TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
 } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
-import { rows, columns } from '../examples/Data.jsx';
+import { rows } from '../examples/Data.jsx';
 
 class StickyHeaderTableDemo extends React.Component {
   render() {

From 894f88cad61d1889b0571fe708afe51ee81d6a7d Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 23 Aug 2022 15:50:55 -0400
Subject: [PATCH 5/7] add truncate modifiers and cell widths

---
 packages/react-table/src/docs/demos/Table.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index df144f0caab..04dd14b2824 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2815,13 +2815,13 @@ class StickyHeaderTableDemo extends React.Component {
             <Table
               cells={[
                 { title: 'Servers', transforms: [cellWidth(15)] },
-                { title: 'Threads' },
-                { title: 'Applications' },
-                { title: 'Workspaces', transforms: [cellWidth(10)] },
+                { title: 'Threads',  transforms: [cellWidth(10)] },
+                { title: 'Applications', transforms: [cellWidth(15)] },
+                { title: 'Workspaces', transforms: [cellWidth(15)] },
                 { title: 'Status', transforms: [cellWidth(10)] },
                 { title: 'Location', transforms: [cellWidth(10)] },
-                { title: 'Last Modified', transforms: [cellWidth(10)] },
-                { title: 'URL', transforms: [cellWidth(10)] }
+                { title: 'Last Modified', transforms: [cellWidth(15)] },
+                { title: 'URL', transforms: [cellWidth(10)], cellTransforms: [truncate] }
               ]}
               rows={rows.map(row => [
                 row.name,

From 3457808c333d01eecb975cec530c8570b0a157f4 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 23 Aug 2022 16:10:07 -0400
Subject: [PATCH 6/7] widen location column

---
 packages/react-table/src/docs/demos/Table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 04dd14b2824..23096bf2031 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2819,7 +2819,7 @@ class StickyHeaderTableDemo extends React.Component {
                 { title: 'Applications', transforms: [cellWidth(15)] },
                 { title: 'Workspaces', transforms: [cellWidth(15)] },
                 { title: 'Status', transforms: [cellWidth(10)] },
-                { title: 'Location', transforms: [cellWidth(10)] },
+                { title: 'Location', transforms: [cellWidth(15)] },
                 { title: 'Last Modified', transforms: [cellWidth(15)] },
                 { title: 'URL', transforms: [cellWidth(10)], cellTransforms: [truncate] }
               ]}

From d0b0fdb26e3fd190a8f90cbd9ae525989fab57d0 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 23 Aug 2022 16:30:31 -0400
Subject: [PATCH 7/7] add support for tooltips

---
 packages/react-table/src/docs/demos/Table.md | 21 +++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 23096bf2031..e5dbdba7ce1 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2786,10 +2786,7 @@ class ComplexPaginationTableDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Label,
-  PageSection,
-} from '@patternfly/react-core';
+import { Label, PageSection } from '@patternfly/react-core';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { rows } from '../examples/Data.jsx';
 
@@ -2815,13 +2812,13 @@ class StickyHeaderTableDemo extends React.Component {
             <Table
               cells={[
                 { title: 'Servers', transforms: [cellWidth(15)] },
-                { title: 'Threads',  transforms: [cellWidth(10)] },
-                { title: 'Applications', transforms: [cellWidth(15)] },
-                { title: 'Workspaces', transforms: [cellWidth(15)] },
+                { title: 'Threads', transforms: [cellWidth(10)] },
+                { title: 'Applications', transforms: [cellWidth(10)] },
+                { title: 'Workspaces', transforms: [cellWidth(10)] },
                 { title: 'Status', transforms: [cellWidth(10)] },
                 { title: 'Location', transforms: [cellWidth(15)] },
                 { title: 'Last Modified', transforms: [cellWidth(15)] },
-                { title: 'URL', transforms: [cellWidth(10)], cellTransforms: [truncate] }
+                { title: 'URL', transforms: [cellWidth(10)] }
               ]}
               rows={rows.map(row => [
                 row.name,
@@ -2831,7 +2828,13 @@ class StickyHeaderTableDemo extends React.Component {
                 { title: renderLabel(row.status) },
                 row.location,
                 row.lastModified,
-                { title: <a href="#">{row.url}</a> }
+                {
+                  title: (
+                    <a href="#">
+                      <TableText wrapModifier="truncate">{row.url} </TableText>
+                    </a>
+                  )
+                }
               ])}
               aria-label="Sticky Header Table Demo"
               isStickyHeader