@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoTable/WfoTable/WfoGroupedTable/useGroupedTableConfig.tsx

@@ -10,184 +10,163 @@ import { WfoGroupedTableGroupsRef } from './WfoGroupedTableGroups';
 import { getTotalNumberOfRows } from './utils';
 
 export type UseGroupedTableConfigProps<T extends object> = Pick<
-    WfoGroupedTableProps<T>,
-    'columnConfig' | 'data' | 'groupNameLabel'
+  WfoGroupedTableProps<T>,
+  'columnConfig' | 'data' | 'groupNameLabel'
 > & {
-    nestingLevel?: number;
-    notifyParent?: (meAndAllMySubgroupsAreExpanded: boolean) => void;
+  nestingLevel?: number;
+  notifyParent?: (meAndAllMySubgroupsAreExpanded: boolean) => void;
 };
 
 export const useGroupedTableConfig = <T extends object>({
-    data,
-    columnConfig,
-    groupNameLabel,
-    nestingLevel = 0,
-    notifyParent,
+  data,
+  columnConfig,
+  groupNameLabel,
+  nestingLevel = 0,
+  notifyParent,
 }: UseGroupedTableConfigProps<T>) => {
-    const groupReferences = useRef(new Map<string, WfoGroupedTableGroupsRef>());
-
-    const [expandedRowIds, setExpandedRowIds] = useState<string[]>([]);
-    const [isAllGroupsExpanded, setIsAllGroupsExpanded] = useState(false);
-    const [isAllSubgroupsExpanded, setIsAllSubgroupsExpanded] = useState<
-        string[]
-    >([]);
-
-    // Expanding all children needs another render cycle, because they do not exist in the DOM yet
-    const [isExpanding, setIsExpanding] = useState(false);
-
-    const groups: GroupType[] = getObjectKeys(data).map((key) => ({
-        groupName: key.toString(),
-    }));
-    const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
-
-    const notifyParentRef = useRef(notifyParent);
-    const groupsRef = useRef(groups);
-
-    useEffect(() => {
-        if (isExpanding) {
-            groupReferences.current.forEach((ref) => {
-                ref.expandAllRows();
-            });
-            setIsExpanding(false);
-        }
-    }, [isExpanding]);
-
-    useEffect(() => {
-        if (notifyParentRef.current) {
-            notifyParentRef.current(
-                isAllGroupsExpanded &&
-                    groupsRef.current.every(({ groupName }) =>
-                        isAllSubgroupsExpanded.includes(groupName),
-                    ),
-            );
-        }
-    }, [
-        isAllSubgroupsExpanded,
-        isAllGroupsExpanded,
-        notifyParentRef,
-        groupsRef,
-    ]);
-
-    const groupColumnConfig: WfoTableColumnConfig<GroupType> = {
-        groupName: {
-            columnType: ColumnType.CONTROL,
-            label: groupNameLabel,
-            width: 'calc(100vw - 300px)', //TODO: #1807
-            numberOfColumnsToSpan: numberOfColumnsInnerTable,
-            renderControl: ({ groupName }) => {
-                const isExpanded = expandedRowIds.includes(groupName);
-                const groupData = data[groupName];
-
-                const numberOfRowsInGroup = Array.isArray(groupData)
-                    ? groupData.length
-                    : getTotalNumberOfRows(groupData);
-
-                return (
-                    <WfoExpandableRow
-                        groupName={groupName}
-                        isExpanded={isExpanded}
-                        updateExpandedRows={toggleExpandedRow}
-                        numberOfRowsInGroup={numberOfRowsInGroup}
-                    />
-                );
-            },
-        },
-    };
-
-    const getReferenceCallbackForRow = (groupName: string) => {
-        return (ref: WfoGroupedTableGroupsRef | null) => {
-            if (ref) {
-                groupReferences.current.set(groupName, ref);
-            } else if (groupName && groupReferences.current.has(groupName)) {
-                groupReferences.current.delete(groupName);
-            }
-        };
-    };
-
-    const uniqueRowIdToExpandedRowMap = expandedRowIds.reduce<
-        Record<string, ReactNode>
-    >((accumulator, groupName) => {
+  const groupReferences = useRef(new Map<string, WfoGroupedTableGroupsRef>());
+
+  const [expandedRowIds, setExpandedRowIds] = useState<string[]>([]);
+  const [isAllGroupsExpanded, setIsAllGroupsExpanded] = useState(false);
+  const [isAllSubgroupsExpanded, setIsAllSubgroupsExpanded] = useState<string[]>([]);
+
+  // Expanding all children needs another render cycle, because they do not exist in the DOM yet
+  const [isExpanding, setIsExpanding] = useState(false);
+
+  const groups: GroupType[] = getObjectKeys(data).map((key) => ({
+    groupName: key.toString(),
+  }));
+  const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
+
+  const notifyParentRef = useRef(notifyParent);
+  const groupsRef = useRef(groups);
+
+  useEffect(() => {
+    if (isExpanding) {
+      groupReferences.current.forEach((ref) => {
+        ref.expandAllRows();
+      });
+      setIsExpanding(false);
+    }
+  }, [isExpanding]);
+
+  useEffect(() => {
+    if (notifyParentRef.current) {
+      notifyParentRef.current(
+        isAllGroupsExpanded && groupsRef.current.every(({ groupName }) => isAllSubgroupsExpanded.includes(groupName)),
+      );
+    }
+  }, [isAllSubgroupsExpanded, isAllGroupsExpanded, notifyParentRef, groupsRef]);
+
+  const groupColumnConfig: WfoTableColumnConfig<GroupType> = {
+    groupName: {
+      columnType: ColumnType.CONTROL,
+      label: groupNameLabel,
+      width: 'calc(100vw - 300px)', //TODO: #1807
+      numberOfColumnsToSpan: numberOfColumnsInnerTable,
+      renderControl: ({ groupName }) => {
+        const isExpanded = expandedRowIds.includes(groupName);
         const groupData = data[groupName];
 
-        accumulator[groupName] = (
-            <WfoExpandedGroupRow
-                key={groupName}
-                ref={getReferenceCallbackForRow(groupName)}
-                data={groupData}
-                columnConfig={columnConfig}
-                groupNameLabel={groupNameLabel}
-                nestingLevel={nestingLevel + 1}
-                onExpandRowChange={(isAllSubgroupsExpanded) =>
-                    setIsAllSubgroupsExpanded((prevState) => {
-                        if (isAllSubgroupsExpanded) {
-                            return [...prevState, groupName];
-                        }
-
-                        return prevState.filter((id) => id !== groupName);
-                    })
-                }
-            />
-        );
-
-        return accumulator;
-    }, {});
-
-    const toggleExpandedRow = (groupName: string) => {
-        const groupData = data[groupName];
-        const groupHasData = Array.isArray(groupData)
-            ? groupData.length > 0
-            : Object.keys(groupData).length > 0;
-
-        if (groupHasData) {
-            setExpandedRowIds((prevState) => {
-                // Collapse group
-                if (prevState.includes(groupName)) {
-                    setIsAllGroupsExpanded(false);
-                    return prevState.filter((value) => value !== groupName);
-                }
-
-                // Expand group
-                if (prevState.length + 1 >= groups.length) {
-                    setIsAllGroupsExpanded(true);
-                }
-                if (Array.isArray(groupData)) {
-                    setIsAllSubgroupsExpanded((prevState) => {
-                        return [...prevState, groupName];
-                    });
-                }
-                return [...prevState, groupName];
-            });
-        }
-    };
+        const numberOfRowsInGroup = Array.isArray(groupData) ? groupData.length : getTotalNumberOfRows(groupData);
 
-    const expandAllRows = () => {
-        setExpandedRowIds(() => groups.map(({ groupName }) => groupName));
-        setIsExpanding(true);
-        setIsAllGroupsExpanded(true);
-        setIsAllSubgroupsExpanded(() =>
-            groups.map(({ groupName }) => groupName),
+        return (
+          <WfoExpandableRow
+            groupName={groupName}
+            isExpanded={isExpanded}
+            updateExpandedRows={toggleExpandedRow}
+            numberOfRowsInGroup={numberOfRowsInGroup}
+          />
         );
+      },
+    },
+  };
+
+  const getReferenceCallbackForRow = (groupName: string) => {
+    return (ref: WfoGroupedTableGroupsRef | null) => {
+      if (ref) {
+        groupReferences.current.set(groupName, ref);
+      } else if (groupName && groupReferences.current.has(groupName)) {
+        groupReferences.current.delete(groupName);
+      }
     };
+  };
+
+  const uniqueRowIdToExpandedRowMap = expandedRowIds.reduce<Record<string, ReactNode>>((accumulator, groupName) => {
+    const groupData = data[groupName];
+
+    accumulator[groupName] = (
+      <WfoExpandedGroupRow
+        key={groupName}
+        ref={getReferenceCallbackForRow(groupName)}
+        data={groupData}
+        columnConfig={columnConfig}
+        groupNameLabel={groupNameLabel}
+        nestingLevel={nestingLevel + 1}
+        onExpandRowChange={(isAllSubgroupsExpanded) =>
+          setIsAllSubgroupsExpanded((prevState) => {
+            if (isAllSubgroupsExpanded) {
+              return [...prevState, groupName];
+            }
 
-    const collapseAllRows = () => {
-        setExpandedRowIds([]);
-        setIsAllGroupsExpanded(false);
-    };
-
-    const isAllGroupsAndSubgroupsExpanded =
-        isAllGroupsExpanded &&
-        groups.every(({ groupName }) =>
-            isAllSubgroupsExpanded.includes(groupName),
-        );
+            return prevState.filter((id) => id !== groupName);
+          })
+        }
+      />
+    );
+
+    return accumulator;
+  }, {});
+
+  const toggleExpandedRow = (groupName: string) => {
+    const groupData = data[groupName];
+    const groupHasData = Array.isArray(groupData) ? groupData.length > 0 : Object.keys(groupData).length > 0;
+
+    if (groupHasData) {
+      setExpandedRowIds((prevState) => {
+        // Collapse group
+        if (prevState.includes(groupName)) {
+          setIsAllGroupsExpanded(false);
+          return prevState.filter((value) => value !== groupName);
+        }
 
-    return {
-        groups,
-        numberOfColumnsInnerTable,
-        groupColumnConfig,
-        uniqueRowIdToExpandedRowMap,
-        isAllGroupsAndSubgroupsExpanded,
-        toggleExpandedRow,
-        expandAllRows,
-        collapseAllRows,
-    };
+        // Expand group
+        if (prevState.length + 1 >= groups.length) {
+          setIsAllGroupsExpanded(true);
+        }
+        if (Array.isArray(groupData)) {
+          setIsAllSubgroupsExpanded((prevState) => {
+            return [...prevState, groupName];
+          });
+        }
+        return [...prevState, groupName];
+      });
+    }
+  };
+
+  const expandAllRows = () => {
+    setExpandedRowIds(() => groups.map(({ groupName }) => groupName));
+    setIsExpanding(true);
+    setIsAllGroupsExpanded(true);
+    setIsAllSubgroupsExpanded(() => groups.map(({ groupName }) => groupName));
+  };
+
+  const collapseAllRows = () => {
+    setExpandedRowIds([]);
+    setIsAllGroupsExpanded(false);
+  };
+
+  const isAllGroupsAndSubgroupsExpanded =
+    isAllGroupsExpanded && groups.every(({ groupName }) => isAllSubgroupsExpanded.includes(groupName));
+
+  return {
+    groups,
+    numberOfColumnsInnerTable,
+    groupColumnConfig,
+    uniqueRowIdToExpandedRowMap,
+    isAllGroupsAndSubgroupsExpanded,
+    toggleExpandedRow,
+    expandAllRows,
+    collapseAllRows,
+  };
 };

package/src/components/WfoTable/WfoTable/WfoGroupedTable/utils.spec.ts

@@ -1,158 +1,151 @@
 import { GroupedData } from './WfoGroupedTable';
-import {
-    getTotalNumberOfRows,
-    groupData,
-    toObjectWithSortedProperties,
-} from './utils';
+import { getTotalNumberOfRows, groupData, toObjectWithSortedProperties } from './utils';
 
 type TestObject = {
-    name: string;
-    age: number;
-    group: 'groupA' | 'groupB';
-    subGroup: 'subGroupA' | 'subGroupB';
+  name: string;
+  age: number;
+  group: 'groupA' | 'groupB';
+  subGroup: 'subGroupA' | 'subGroupB';
 };
 
 describe('WfoGroupedTable - utils', () => {
-    describe('groupData()', () => {
-        it('successfully groups the data. Sorting alphabetically by group name', () => {
-            // Given
-            const testData: TestObject[] = [
-                {
-                    name: 'John',
-                    age: 25,
-                    group: 'groupB',
-                    subGroup: 'subGroupA',
-                },
-                {
-                    name: 'Bob',
-                    age: 40,
-                    group: 'groupB',
-                    subGroup: 'subGroupB',
-                },
-                {
-                    name: 'Jane',
-                    age: 30,
-                    group: 'groupB',
-                    subGroup: 'subGroupB',
-                },
-                {
-                    name: 'Tom',
-                    age: 35,
-                    group: 'groupA',
-                    subGroup: 'subGroupA',
-                },
-            ];
+  describe('groupData()', () => {
+    it('successfully groups the data. Sorting alphabetically by group name', () => {
+      // Given
+      const testData: TestObject[] = [
+        {
+          name: 'John',
+          age: 25,
+          group: 'groupB',
+          subGroup: 'subGroupA',
+        },
+        {
+          name: 'Bob',
+          age: 40,
+          group: 'groupB',
+          subGroup: 'subGroupB',
+        },
+        {
+          name: 'Jane',
+          age: 30,
+          group: 'groupB',
+          subGroup: 'subGroupB',
+        },
+        {
+          name: 'Tom',
+          age: 35,
+          group: 'groupA',
+          subGroup: 'subGroupA',
+        },
+      ];
 
-            // When
-            const result = groupData(testData, [
-                (data) => data.group,
-                (data) => data.subGroup,
-            ]);
+      // When
+      const result = groupData(testData, [(data) => data.group, (data) => data.subGroup]);
 
-            // Then
-            const expected: GroupedData<TestObject> = {
-                groupA: {
-                    subGroupA: [
-                        {
-                            name: 'Tom',
-                            age: 35,
-                            group: 'groupA',
-                            subGroup: 'subGroupA',
-                        },
-                    ],
-                },
-                groupB: {
-                    subGroupA: [
-                        {
-                            name: 'John',
-                            age: 25,
-                            group: 'groupB',
-                            subGroup: 'subGroupA',
-                        },
-                    ],
-                    subGroupB: [
-                        {
-                            name: 'Bob',
-                            age: 40,
-                            group: 'groupB',
-                            subGroup: 'subGroupB',
-                        },
-                        {
-                            name: 'Jane',
-                            age: 30,
-                            group: 'groupB',
-                            subGroup: 'subGroupB',
-                        },
-                    ],
-                },
-            };
-            expect(result).toEqual(expected);
-        });
+      // Then
+      const expected: GroupedData<TestObject> = {
+        groupA: {
+          subGroupA: [
+            {
+              name: 'Tom',
+              age: 35,
+              group: 'groupA',
+              subGroup: 'subGroupA',
+            },
+          ],
+        },
+        groupB: {
+          subGroupA: [
+            {
+              name: 'John',
+              age: 25,
+              group: 'groupB',
+              subGroup: 'subGroupA',
+            },
+          ],
+          subGroupB: [
+            {
+              name: 'Bob',
+              age: 40,
+              group: 'groupB',
+              subGroup: 'subGroupB',
+            },
+            {
+              name: 'Jane',
+              age: 30,
+              group: 'groupB',
+              subGroup: 'subGroupB',
+            },
+          ],
+        },
+      };
+      expect(result).toEqual(expected);
     });
+  });
 
-    describe('sort object by properties', () => {
-        // Given
-        const testObject = {
-            c: 'c',
-            a: 'a',
-            b: 'b',
-        };
+  describe('sort object by properties', () => {
+    // Given
+    const testObject = {
+      c: 'c',
+      a: 'a',
+      b: 'b',
+    };
 
-        // When
-        const sortedObject = toObjectWithSortedProperties(testObject);
+    // When
+    const sortedObject = toObjectWithSortedProperties(testObject);
 
-        // Then
-        it('sorts the object by properties', () => {
-            expect(sortedObject).toEqual({
-                a: 'a',
-                b: 'b',
-                c: 'c',
-            });
-        });
+    // Then
+    it('sorts the object by properties', () => {
+      expect(sortedObject).toEqual({
+        a: 'a',
+        b: 'b',
+        c: 'c',
+      });
     });
+  });
 
-    describe('getTotalNumberOfRows()', () => {
-        it('counts the total number of data rows', () => {
-            const testData: GroupedData<TestObject> = {
-                group1: {
-                    subGroup1: [
-                        {
-                            name: 'John',
-                            age: 25,
-                            group: 'groupA',
-                            subGroup: 'subGroupA',
-                        },
-                        {
-                            name: 'Bob',
-                            age: 40,
-                            group: 'groupA',
-                            subGroup: 'subGroupA',
-                        },
-                    ],
-                    subGroup2: [
-                        {
-                            name: 'Jane',
-                            age: 30,
-                            group: 'groupA',
-                            subGroup: 'subGroupB',
-                        },
-                    ],
-                },
-                group2: {
-                    subGroup1: [
-                        {
-                            name: 'Tom',
-                            age: 35,
-                            group: 'groupA',
-                            subGroup: 'subGroupA',
-                        },
-                    ],
-                },
-            };
+  describe('getTotalNumberOfRows()', () => {
+    it('counts the total number of data rows', () => {
+      const testData: GroupedData<TestObject> = {
+        group1: {
+          subGroup1: [
+            {
+              name: 'John',
+              age: 25,
+              group: 'groupA',
+              subGroup: 'subGroupA',
+            },
+            {
+              name: 'Bob',
+              age: 40,
+              group: 'groupA',
+              subGroup: 'subGroupA',
+            },
+          ],
+          subGroup2: [
+            {
+              name: 'Jane',
+              age: 30,
+              group: 'groupA',
+              subGroup: 'subGroupB',
+            },
+          ],
+        },
+        group2: {
+          subGroup1: [
+            {
+              name: 'Tom',
+              age: 35,
+              group: 'groupA',
+              subGroup: 'subGroupA',
+            },
+          ],
+        },
+      };
 
-            const result = getTotalNumberOfRows(testData);
+      const result = getTotalNumberOfRows(testData);
 
-            expect(result).toEqual(4);
-        });
+      expect(result).toEqual(4);
     });
+  });
 });