From cb58c1d5f20dee82bbd4e0d1dcb2882d28998165 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 21 Apr 2023 14:20:33 +0200
Subject: [PATCH 1/4] fix(Table) clean up 'Expand collapse all' demo

---
 .../demos/table-demos/ExpandCollapseAll.jsx   | 188 ++++++++----------
 1 file changed, 83 insertions(+), 105 deletions(-)

diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
index a3bac93aaa2..59d01f674a9 100644
--- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
@@ -1,20 +1,11 @@
 import React from 'react';
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { expandable } from '@patternfly/react-table';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import { TextVariants } from '@patternfly/react-core';
 
-const expandableColumns = [
-  {
-    title: 'Servers',
-    cellFormatters: [expandable]
-  },
-  'Threads',
-  'Applications',
-  'Workspaces',
-  'Status'
-];
+const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 
 const serverData = [
   {
@@ -22,7 +13,7 @@ const serverData = [
     threads: 18,
     applications: 42,
     workspaces: 7,
-    status: { title: <Label color="orange">Stopped</Label> },
+    status: { title: <Label color="green">Running</Label> },
     details: (
       <TextContent>
         <Text component={TextVariants.p}>
@@ -121,101 +112,88 @@ const serverData = [
 
 const initialExpandedServerNames = ['US-Node 2']; // Default to expanded
 
-class ExpandCollapseAllTableDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: false,
-      selectedRows: 0,
-      expandedRows: 0,
-      expandCollapseToggle: 'expand',
-      collapseAllAriaLabel: 'Expand all',
-      expandedServerNames: initialExpandedServerNames
-    };
-  }
+const ExpandCollapseAllTableDemo = () => {
+  const [areAllExpanded, setAreAllExpanded] = React.useState(false);
+  const [collapseAllAriaLabel, setCollapseAllAriaLabel] = React.useState('Expand all');
+  const [expandedServerNames, setExpandedServerNames] = React.useState(initialExpandedServerNames);
 
-  setServerExpanded = (server, isExpanding) => {
-    this.setState(() => {
-      const otherExpandedServerNames = this.state.expandedServerNames.filter(r => r !== server.name);
-      return {
-        expandedServerNames: isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames
-      };
-    });
+  const setServerExpanded = (server, isExpanding) => {
+    const otherExpandedServerNames = expandedServerNames.filter((r) => r !== server.name);
+    setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames);
   };
 
-  render() {
-    const { collapseAllAriaLabel } = this.state;
-
-    const isServerExpanded = server => this.state.expandedServerNames.includes(server.name);
-    // We want to be able to reference the original data object based on row index. But because an expanded
-    // row takes up two row indexes, servers[rowIndex] will not be accurate like it would in a normal table.
-    // One solution to this is to create an array of data objects indexed by the displayed row index.
-    const serversByRowIndex = [];
-
-    const rows = [];
-    serverData.forEach(server => {
-      rows.push({
-        ...{ isOpen: isServerExpanded(server) },
-        cells: [server.name, server.threads, server.applications, server.workspaces, server.status]
-      });
-      serversByRowIndex.push(server);
-      if (server.details) {
-        const cells = [];
-
-        cells.push({
-          title: server.details
-        });
-
-        rows.push({
-          parent: rows.length - 1,
-          cells
-        });
-        serversByRowIndex.push(null);
-      }
-    });
-
-    const onCollapse = (_e, rowIndex, isOpen) => {
-      const collapseAll = rowIndex === undefined;
-
-      if (collapseAll) {
-        this.setState(() => {
-          return {
-            expandedServerNames: isOpen ? [...serverData.map((server) => server.name)] : []
-          };
-        });
+  const isServerExpanded = (server) => {
+    return expandedServerNames.includes(server.name);
+  };
+  // We want to be able to reference the original data object based on row index. But because an expanded
+  // row takes up two row indexes, servers[rowIndex] will not be accurate like it would in a normal table.
+  // One solution to this is to create an array of data objects indexed by the displayed row index.
 
-      }
-      else if (serversByRowIndex[rowIndex]) {
-        this.setServerExpanded(serversByRowIndex[rowIndex], isOpen);
-      }
-    }
+  const onCollapseAll = (_event, _rowIndex, isOpen) => {
+    setExpandedServerNames(isOpen ? [...serverData.map((server) => server.name)] : []);
+    setAreAllExpanded(!isOpen);
+    setCollapseAllAriaLabel(areAllExpanded ? 'Expand all' : 'Collapse all');
+  };
+  return (
+    <React.Fragment>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection
+          padding={{
+            default: 'noPadding',
+            xl: 'padding'
+          }}
+        >
+          <Card component="div">
+            <Table aria-label="Collapsible table">
+              <Thead>
+                <Tr>
+                  <Th
+                    expand={{
+                      areAllExpanded: areAllExpanded,
+                      collapseAllAriaLabel: collapseAllAriaLabel,
+                      onToggle: onCollapseAll
+                    }}
+                  ></Th>
+                  {expandableColumns.map((column) => (
+                    <Th key={column}>{column}</Th>
+                  ))}
+                </Tr>
+              </Thead>
 
-    return (
-      <React.Fragment>
-        <DashboardWrapper hasPageTemplateTitle>
-          <PageSection
-            padding={{
-              default: 'noPadding',
-              xl: 'padding'
-            }}
-          >
-            <Card component="div">
-              <Table
-                aria-label="Collapsible table"
-                onCollapse={onCollapse}
-                rows={rows}
-                cells={expandableColumns}
-                canCollapseAll={true}
-                collapseAllAriaLabel={collapseAllAriaLabel}
-                expandId="expand-collapse-all-demo"
-              >
-                <TableHeader />
-                <TableBody />
-              </Table>
-            </Card>
-          </PageSection>
-        </DashboardWrapper>
-      </React.Fragment>
-    );
-  }
-}
+              {serverData.map((server, serverIndex) => (
+                <Tbody key={server.name} isExpanded={isServerExpanded(server)}>
+                  <Tr>
+                    <Td
+                      expand={
+                        server.details
+                          ? {
+                              rowIndex: serverIndex,
+                              isExpanded: isServerExpanded(server),
+                              onToggle: () => setServerExpanded(server, !isServerExpanded(server))
+                            }
+                          : undefined
+                      }
+                    >
+                      <ExpandableRowContent>{server.details}</ExpandableRowContent>
+                    </Td>
+                    <Td>{server?.name}</Td>
+                    <Td>{server?.threads}</Td>
+                    <Td>{server?.applications}</Td>
+                    <Td>{server?.workspaces}</Td>
+                    <Td>{server?.status?.title}</Td>
+                  </Tr>
+                  <Tr isExpanded={isServerExpanded(server)}>
+                    <Td></Td>
+                    <Td colSpan={expandableColumns.length}>
+                      <ExpandableRowContent>{server?.details}</ExpandableRowContent>
+                    </Td>
+                  </Tr>
+                </Tbody>
+              ))}
+            </Table>
+          </Card>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};

From f5a9ebb7ee889ae9b53067ddfe0b31c0d210218c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 27 Apr 2023 16:34:51 +0200
Subject: [PATCH 2/4] update allExpanded on single row toggle

---
 .../react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
index 59d01f674a9..78f7e4238a1 100644
--- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
@@ -120,6 +120,7 @@ const ExpandCollapseAllTableDemo = () => {
   const setServerExpanded = (server, isExpanding) => {
     const otherExpandedServerNames = expandedServerNames.filter((r) => r !== server.name);
     setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames);
+    setAreAllExpanded(expandedServerNames.length == serverData.length);
   };
 
   const isServerExpanded = (server) => {

From deddb1d2b16792d947781207cf86efe0f5e92a23 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 16 May 2023 17:04:50 -0400
Subject: [PATCH 3/4] address outstanding comments

---
 .../src/docs/demos/table-demos/ExpandCollapseAll.jsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
index 78f7e4238a1..282d59059ef 100644
--- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { Card, Label, PageSection } from '@patternfly/react-core';
-import { expandable } from '@patternfly/react-table';
+import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import { TextVariants } from '@patternfly/react-core';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 
@@ -120,7 +118,7 @@ const ExpandCollapseAllTableDemo = () => {
   const setServerExpanded = (server, isExpanding) => {
     const otherExpandedServerNames = expandedServerNames.filter((r) => r !== server.name);
     setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames);
-    setAreAllExpanded(expandedServerNames.length == serverData.length);
+    setAreAllExpanded(expandedServerNames.length !== 0 || expandedServerNames.length === serverData.length);
   };
 
   const isServerExpanded = (server) => {

From b582ffb7a029788b45da30c4c17ecaa423189f07 Mon Sep 17 00:00:00 2001
From: gitdallas <dallas.nicol@gmail.com>
Date: Thu, 18 May 2023 13:09:45 -0500
Subject: [PATCH 4/4] refactor collapse/expand all using effect

---
 .../docs/demos/table-demos/ExpandCollapseAll.jsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
index 282d59059ef..72f4aa4079b 100644
--- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
@@ -115,24 +115,29 @@ const ExpandCollapseAllTableDemo = () => {
   const [collapseAllAriaLabel, setCollapseAllAriaLabel] = React.useState('Expand all');
   const [expandedServerNames, setExpandedServerNames] = React.useState(initialExpandedServerNames);
 
+  React.useEffect(() => {
+    const allExpanded = expandedServerNames.length === serverData.length;
+    setAreAllExpanded(allExpanded);
+    setCollapseAllAriaLabel(allExpanded ? 'Collapse all' : 'Expand all');
+  }, [expandedServerNames]);
+
   const setServerExpanded = (server, isExpanding) => {
     const otherExpandedServerNames = expandedServerNames.filter((r) => r !== server.name);
     setExpandedServerNames(isExpanding ? [...otherExpandedServerNames, server.name] : otherExpandedServerNames);
-    setAreAllExpanded(expandedServerNames.length !== 0 || expandedServerNames.length === serverData.length);
   };
 
   const isServerExpanded = (server) => {
     return expandedServerNames.includes(server.name);
   };
+
   // We want to be able to reference the original data object based on row index. But because an expanded
   // row takes up two row indexes, servers[rowIndex] will not be accurate like it would in a normal table.
   // One solution to this is to create an array of data objects indexed by the displayed row index.
 
   const onCollapseAll = (_event, _rowIndex, isOpen) => {
     setExpandedServerNames(isOpen ? [...serverData.map((server) => server.name)] : []);
-    setAreAllExpanded(!isOpen);
-    setCollapseAllAriaLabel(areAllExpanded ? 'Expand all' : 'Collapse all');
   };
+
   return (
     <React.Fragment>
       <DashboardWrapper hasPageTemplateTitle>
@@ -148,7 +153,7 @@ const ExpandCollapseAllTableDemo = () => {
                 <Tr>
                   <Th
                     expand={{
-                      areAllExpanded: areAllExpanded,
+                      areAllExpanded: !areAllExpanded,
                       collapseAllAriaLabel: collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}