RHCLOUD-41872 add expandAll prop to DV TreeTable (#491)

* add expandAll prop

* lint fix

* Update packages/module/src/DataViewTableTree/DataViewTableTree.tsx

Co-authored-by: Karel Hala <ch4rlien@gmail.com>

---------

Co-authored-by: Karel Hala <ch4rlien@gmail.com>

Author: aferd

package-lock.json

@@ -4,6 +4,7 @@ import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-dat
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
 
+
 interface Repository {
   name: string;
   branches: string | null;

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableTreeExample.tsx

@@ -39,6 +39,8 @@ To define rows and columns for your table, use these props:
 
 It is also possible to disable row selection using the `isSelectDisabled` function, which can be passed to the wrapping `DataView` component through the `selection` prop.
 
+If you want to have all expandable nodes open on initial load pass the `expandAll` prop to the DataViewTable component
+
 ### Table example
 ```js file="./DataViewTableExample.tsx"
 

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

@@ -101,6 +101,15 @@ describe('DataViewTableTree component', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('should render tree table with all expandable nodes expanded', () => {
+    const { container } = render(
+      <DataView selection={mockSelection}>
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} expandAll rows={rows} leafIcon={<LeafIcon/>} expandedIcon={<FolderOpenIcon aria-hidden />} collapsedIcon={<FolderIcon aria-hidden />} />
+      </DataView>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   test('should render tree table with a loading state', () => {
     const { container } = render(
       <DataView activeState="loading">

packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useMemo, ReactNode } from 'react';
+import { FC, useState, useMemo, useEffect, ReactNode } from 'react';
 import {
   Table,
   TableProps,
@@ -67,6 +67,8 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   expandedIcon?: React.ReactNode;
   /** Optional icon for the collapsed parent rows */
   collapsedIcon?: React.ReactNode;
+  /** Expand all expandable nodes on initial load */
+  expandAll?: boolean;
   /** Custom OUIA ID */
   ouiaId?: string;
 }
@@ -79,6 +81,7 @@ export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   leafIcon = null,
   expandedIcon = null,
   collapsedIcon = null,
+  expandAll = false,
   ouiaId = 'DataViewTableTree',
   ...props
 }: DataViewTableTreeProps) => {
@@ -87,6 +90,37 @@ export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   const [ expandedNodeIds, setExpandedNodeIds ] = useState<string[]>([]);
   const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = useState<string[]>([]);
 
+  // Helper function to collect all node IDs that have children (are expandable)
+  const getExpandableNodeIds = (nodes: DataViewTrTree[]): string[] => {
+    const expandableIds: string[] = [];
+    
+    const traverse = (nodeList: DataViewTrTree[]) => {
+      nodeList.forEach(node => {
+        if (node.children && node.children.length > 0) {
+          expandableIds.push(node.id);
+          traverse(node.children);
+        }
+      });
+    };
+    
+    traverse(nodes);
+    return expandableIds;
+  };
+
+  // Effect to handle expandAll behavior
+  // Memoize the expandable IDs to avoid recalculating when rows object reference changes but structure is the same
+  const expandableIds = useMemo(() => getExpandableNodeIds(rows), [ rows ]);
+
+  // Effect to handle expandAll behavior - only runs when IDs actually change
+  useEffect(() => {
+    if (expandAll) {
+      setExpandedNodeIds(expandableIds);
+    } else {
+      setExpandedNodeIds([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ expandAll, expandableIds.join(',') ]);
+
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);