From dee27da043901d6ae4e7f31dc9dd1c6df8ba57df Mon Sep 17 00:00:00 2001
From: Ugo Palatucci <upalatuc@redhat.com>
Date: Thu, 21 Mar 2024 14:56:02 +0100
Subject: [PATCH] CNV-39752: Button to expand all sections

---
 src/views/states/list/StatesList.tsx          | 70 +++++++++++--------
 .../list/components/InterfacesTable.tsx       |  8 ++-
 .../list/components/InterfacesTypeSection.tsx |  8 ++-
 src/views/states/list/components/StateRow.tsx | 19 +++--
 4 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/src/views/states/list/StatesList.tsx b/src/views/states/list/StatesList.tsx
index aa0e3269..3ea69beb 100644
--- a/src/views/states/list/StatesList.tsx
+++ b/src/views/states/list/StatesList.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import {
   NodeNetworkStateModelGroupVersionKind,
   NodeNetworkStateModelRef,
@@ -13,7 +13,7 @@ import {
   useK8sWatchResource,
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { Pagination } from '@patternfly/react-core';
+import { Button, Flex, Pagination } from '@patternfly/react-core';
 import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import { V1beta1NodeNetworkState } from '@types';
 import usePagination from '@utils/hooks/usePagination/usePagination';
@@ -36,6 +36,8 @@ const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
   const { selectedInterfaceName, selectedStateName, selectedInterfaceType } = useDrawerInterface();
 
+  const [expandAll, setExpandAll] = useState(false);
+
   const [states, statesLoaded, statesError] = useK8sWatchResource<V1beta1NodeNetworkState[]>({
     groupVersionKind: NodeNetworkStateModelGroupVersionKind,
     isList: true,
@@ -63,34 +65,40 @@ const StatesList: FC = () => {
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError}>
           <div className="nns-list-management-group">
-            <ListPageFilter
-              data={data}
-              loaded={statesLoaded}
-              rowFilters={filters.filter((filter) => filter?.type !== FILTER_TYPES.IP_ADDRESS)}
-              hideLabelFilter
-              nameFilterTitle={t('IP address')}
-              nameFilterPlaceholder={t('Search by IP address...')}
-              nameFilter={FILTER_TYPES.IP_ADDRESS}
-              onFilterChange={(...args) => {
-                onFilterChange(...args);
-                onPaginationChange({
-                  endIndex: pagination?.perPage,
-                  page: 1,
-                  perPage: pagination?.perPage,
-                  startIndex: 0,
-                });
-              }}
-              columnLayout={{
-                columns: columns?.map(({ id, title, additional }) => ({
-                  id,
-                  title,
-                  additional,
-                })),
-                id: NodeNetworkStateModelRef,
-                selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
-                type: t('NodeNetworkState'),
-              }}
-            />
+            <Flex>
+              <ListPageFilter
+                data={data}
+                loaded={statesLoaded}
+                rowFilters={filters.filter((filter) => filter?.type !== FILTER_TYPES.IP_ADDRESS)}
+                hideLabelFilter
+                nameFilterTitle={t('IP address')}
+                nameFilterPlaceholder={t('Search by IP address...')}
+                nameFilter={FILTER_TYPES.IP_ADDRESS}
+                onFilterChange={(...args) => {
+                  onFilterChange(...args);
+                  onPaginationChange({
+                    endIndex: pagination?.perPage,
+                    page: 1,
+                    perPage: pagination?.perPage,
+                    startIndex: 0,
+                  });
+                }}
+                columnLayout={{
+                  columns: columns?.map(({ id, title, additional }) => ({
+                    id,
+                    title,
+                    additional,
+                  })),
+                  id: NodeNetworkStateModelRef,
+                  selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
+                  type: t('NodeNetworkState'),
+                }}
+              />
+
+              <Button onClick={() => setExpandAll(!expandAll)}>
+                {expandAll ? t('Collapse all') : t('Expand all')}
+              </Button>
+            </Flex>
             <Pagination
               onPerPageSelect={(_e, perPage, page, startIndex, endIndex) =>
                 onPaginationChange({ endIndex, page, perPage, startIndex })
@@ -126,7 +134,7 @@ const StatesList: FC = () => {
                   key={nnstate?.metadata?.name}
                   obj={nnstate}
                   activeColumnIDs={new Set(activeColumns.map(({ id }) => id))}
-                  rowData={{ rowIndex: index, selectedFilters }}
+                  rowData={{ rowIndex: index, selectedFilters, expandAll }}
                 />
               ))}
             </Table>
diff --git a/src/views/states/list/components/InterfacesTable.tsx b/src/views/states/list/components/InterfacesTable.tsx
index 1e4f5725..ab995675 100644
--- a/src/views/states/list/components/InterfacesTable.tsx
+++ b/src/views/states/list/components/InterfacesTable.tsx
@@ -12,9 +12,14 @@ import './interfaces-table.scss';
 interface InterfacesTableProps {
   interfacesByType: { [interfaceType in string]: NodeNetworkConfigurationInterface[] };
   nodeNetworkState: V1beta1NodeNetworkState;
+  expandAll: boolean;
 }
 
-const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType, nodeNetworkState }) => {
+const InterfacesTable: FC<InterfacesTableProps> = ({
+  interfacesByType,
+  nodeNetworkState,
+  expandAll,
+}) => {
   const columns = useInterfaceColumns();
 
   return (
@@ -41,6 +46,7 @@ const InterfacesTable: FC<InterfacesTableProps> = ({ interfacesByType, nodeNetwo
               interfaceType={interfaceType}
               interfaces={interfacesByType[interfaceType]}
               nodeNetworkState={nodeNetworkState}
+              expandAll={expandAll}
             />
           ))}
       </Tbody>
diff --git a/src/views/states/list/components/InterfacesTypeSection.tsx b/src/views/states/list/components/InterfacesTypeSection.tsx
index 425b7975..90ff7c89 100644
--- a/src/views/states/list/components/InterfacesTypeSection.tsx
+++ b/src/views/states/list/components/InterfacesTypeSection.tsx
@@ -22,21 +22,23 @@ interface InterfacesTypeSectionProps {
   interfaces: NodeNetworkConfigurationInterface[];
   interfaceType: string;
   nodeNetworkState: V1beta1NodeNetworkState;
+  expandAll: boolean;
 }
 
 const InterfacesTypeSection: FC<InterfacesTypeSectionProps> = memo(
-  ({ interfaceType, interfaces, nodeNetworkState }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+  ({ interfaceType, interfaces, nodeNetworkState, expandAll }) => {
+    const [expand, setExpand] = useState(false);
 
     const { setSelectedInterfaceName } = useDrawerInterface();
 
+    const isExpanded = expandAll || expand;
     return (
       <>
         <Tr className="interfaces-table__interface-type-row">
           <Td colSpan={6}>
             <ExpandableSectionToggle
               isExpanded={isExpanded}
-              onToggle={setIsExpanded}
+              onToggle={setExpand}
               className="expandable-section-interface-type"
               data-test={`${interfaceType}-expandable-section-toggle`}
             >
diff --git a/src/views/states/list/components/StateRow.tsx b/src/views/states/list/components/StateRow.tsx
index 6f3bc4b5..fde56764 100644
--- a/src/views/states/list/components/StateRow.tsx
+++ b/src/views/states/list/components/StateRow.tsx
@@ -16,9 +16,12 @@ import { filterInterfaces, getInterfacesByType } from './utils';
 import './state-row.scss';
 
 const StateRow: FC<
-  RowProps<V1beta1NodeNetworkState, { rowIndex: number; selectedFilters: SelectedFilters }>
-> = ({ obj, activeColumnIDs, rowData: { rowIndex, selectedFilters } }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  RowProps<
+    V1beta1NodeNetworkState,
+    { rowIndex: number; selectedFilters: SelectedFilters; expandAll: boolean }
+  >
+> = ({ obj, activeColumnIDs, rowData: { rowIndex, selectedFilters, expandAll } }) => {
+  const [expand, setExpand] = useState(false);
   const { t } = useNMStateTranslation();
   const interfaces = obj?.status?.currentState?.interfaces as NodeNetworkConfigurationInterface[];
 
@@ -32,6 +35,8 @@ const StateRow: FC<
     [filteredInterfaces],
   );
 
+  const isExpanded = expandAll || expand;
+
   return (
     <Tbody key={obj.metadata.name} isExpanded={isExpanded} role="rowgroup" className="state-row">
       <Tr>
@@ -39,7 +44,7 @@ const StateRow: FC<
           expand={{
             rowIndex,
             isExpanded,
-            onToggle: (event, rowIndex, isOpen) => setIsExpanded(isOpen),
+            onToggle: (event, rowIndex, isOpen) => setExpand(isOpen),
             expandId: 'expand-interfaces-list',
           }}
         />
@@ -93,7 +98,11 @@ const StateRow: FC<
               </small>
             </Title>
 
-            <InterfacesTable interfacesByType={interfacesByType} nodeNetworkState={obj} />
+            <InterfacesTable
+              interfacesByType={interfacesByType}
+              nodeNetworkState={obj}
+              expandAll={expandAll}
+            />
           </ExpandableRowContent>
         </Td>
       </Tr>