@orchestrator-ui/orchestrator-ui-components 1.38.1 → 2.0.0

package/src/components/WfoTable/{WfoTableWithFilter/WfoTableWithFilter.tsx → WfoAdvancedTable/WfoAdvancedTable.tsx}

@@ -3,94 +3,70 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import {
-    Criteria,
     EuiButton,
     EuiButtonIcon,
     EuiFlexGroup,
     EuiFlexItem,
     EuiSpacer,
     EuiText,
-    Pagination,
 } from '@elastic/eui';
 
-import { WfoErrorWithMessage } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowsExpand } from '@/icons';
-import { WfoGraphqlError } from '@/rtk';
-import { getDefaultTableConfig } from '@/utils/getDefaultTableConfig';
-
-import { getTypedFieldFromObject } from '../../../utils';
 import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    TableColumnKeys,
+    TableSettingsColumnConfig,
+    TableSettingsConfig,
+    TableSettingsModal,
+    WfoErrorWithMessage,
+    WfoInformationModal,
     WfoKeyValueTable,
     WfoKeyValueTableDataType,
-} from '../../WfoKeyValueTable/WfoKeyValueTable';
-import { WfoSearchField } from '../../WfoSearchBar';
-import { WfoInformationModal } from '../../WfoSettingsModal';
-import {
-    WfoBasicTable,
-    WfoBasicTableColumnsWithControlColumns,
-} from '../WfoBasicTable';
-import {
-    ColumnConfig,
-    TableConfig,
-    TableSettingsModal,
-} from '../WfoTableSettingsModal';
-import {
-    TableColumnKeys,
-    WfoDataSorting,
-    WfoTableColumns,
-    WfoTableControlColumnConfig,
-    WfoTableDataColumnConfig,
-} from '../utils/columns';
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from '../utils/constants';
-import {
+    WfoSearchField,
     clearTableConfigFromLocalStorage,
     setTableConfigToLocalStorage,
-} from '../utils/tableConfigPersistence';
-import { updateQueryString } from './updateQueryString';
+} from '@/components';
+import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoArrowsExpand } from '@/icons';
+import { WfoGraphqlError } from '@/rtk';
+import { getDefaultTableConfig } from '@/utils';
+
+import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
+import { updateQueryString } from '../WfoTableWithFilter/updateQueryString';
+import { WfoAdvancedTableColumnConfig } from './types';
 
-export type WfoTableWithFilterProps<T extends object> = {
-    data: T[];
-    tableColumns: WfoTableColumns<T>;
-    leadingControlColumns?: WfoTableControlColumnConfig<T>;
-    trailingControlColumns?: WfoTableControlColumnConfig<T>;
+export type WfoAdvancedTableProps<T extends object> = Omit<
+    WfoTableProps<T>,
+    'columnConfig'
+> & {
+    tableColumnConfig: WfoAdvancedTableColumnConfig<T>;
     defaultHiddenColumns?: TableColumnKeys<T>;
-    dataSorting: WfoDataSorting<T>;
-    pagination: Pagination;
     queryString?: string;
-    isLoading: boolean;
     localStorageKey: string;
     detailModal?: boolean;
     detailModalTitle?: string;
-    onUpdateQueryString: (queryString: string) => void;
-    onUpdatePage: (criterion: Criteria<T>['page']) => void;
-    onUpdateDataSort: (dataSorting: WfoDataSorting<T>) => void;
+    exportDataIsLoading?: boolean;
     error?: WfoGraphqlError[];
+    onUpdateQueryString: (queryString: string) => void;
     onExportData?: () => void;
-    exportDataIsLoading?: boolean;
 };
 
-export const WfoTableWithFilter = <T extends object>({
-    data,
-    tableColumns,
-    leadingControlColumns,
-    trailingControlColumns,
+export const WfoAdvancedTable = <T extends object>({
+    tableColumnConfig,
     defaultHiddenColumns = [],
-    dataSorting,
-    pagination,
     queryString,
-    isLoading,
     localStorageKey,
     detailModal = true,
     detailModalTitle = 'Details',
-    onUpdateQueryString,
-    onUpdatePage,
-    onUpdateDataSort,
+    exportDataIsLoading,
     error,
+    onUpdateQueryString,
     onExportData,
-    exportDataIsLoading = false,
-}: WfoTableWithFilterProps<T>) => {
+    ...tableProps
+}: WfoAdvancedTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
+
     const [hiddenColumns, setHiddenColumns] =
         useState<TableColumnKeys<T>>(defaultHiddenColumns);
     const [showSettingsModal, setShowSettingsModal] = useState(false);
@@ -105,11 +81,13 @@ export const WfoTableWithFilter = <T extends object>({
         }
     }, [defaultHiddenColumns]);
 
-    const detailsIconColumn: WfoTableControlColumnConfig<T> = {
+    const { pagination } = tableProps;
+
+    const detailsIconColumn: WfoAdvancedTableColumnConfig<T> = {
         viewDetails: {
-            field: 'viewDetails',
+            columnType: ColumnType.CONTROL,
             width: '36px',
-            render: (_, row) => (
+            renderControl: (row) => (
                 <EuiFlexItem
                     css={{ cursor: 'pointer' }}
                     onClick={() => setSelectedDataForDetailModal(row)}
@@ -120,54 +98,30 @@ export const WfoTableWithFilter = <T extends object>({
         },
     };
 
-    const tableColumnsWithControlColumns: WfoBasicTableColumnsWithControlColumns<T> =
-        {
-            ...leadingControlColumns,
-            ...tableColumns,
-            ...trailingControlColumns,
-            ...(detailModal ? detailsIconColumn : []),
-        };
+    const tableColumnsWithControlColumns: WfoAdvancedTableColumnConfig<T> = {
+        ...(detailModal && detailsIconColumn),
+        ...tableColumnConfig,
+    };
+
+    const tableSettingsColumns: TableSettingsColumnConfig<T>[] = Object.entries(
+        tableColumnConfig,
+    ).map(([key, { label }]): TableSettingsColumnConfig<T> => {
+        const field = key as keyof T;
 
-    const tableSettingsColumns: ColumnConfig<T>[] = Object.entries<
-        WfoTableDataColumnConfig<T, keyof T>
-    >(tableColumns).map((keyValuePair) => {
-        const { field, name } = keyValuePair[1];
         return {
             field,
-            name,
+            name: label,
             isVisible: hiddenColumns.indexOf(field) === -1,
         };
     });
 
     const rowDetailData: WfoKeyValueTableDataType[] | undefined =
         selectedDataForDetailModal &&
-        Object.entries(tableColumns).map(([key]): WfoKeyValueTableDataType => {
-            const dataField = getTypedFieldFromObject(key, tableColumns);
-            if (dataField === null) {
-                return {
-                    key,
-                    value: undefined,
-                };
-            }
+        getRowDetailData(selectedDataForDetailModal, tableColumnConfig);
 
-            const { renderDetails, render, clipboardText, name } =
-                tableColumns[dataField];
-            const dataValue = selectedDataForDetailModal[dataField];
-            return {
-                key: name ?? dataField.toString(),
-                value: (renderDetails &&
-                    renderDetails(dataValue, selectedDataForDetailModal)) ??
-                    (render &&
-                        render(dataValue, selectedDataForDetailModal)) ?? (
-                        <>{dataValue}</>
-                    ),
-                textToCopy:
-                    clipboardText?.(dataValue, selectedDataForDetailModal) ??
-                    (typeof dataValue === 'string' ? dataValue : undefined),
-            };
-        });
-
-    const handleUpdateTableConfig = (updatedTableConfig: TableConfig<T>) => {
+    const handleUpdateTableConfig = (
+        updatedTableConfig: TableSettingsConfig<T>,
+    ) => {
         const updatedHiddenColumns = updatedTableConfig.columns
             .filter((column) => !column.isVisible)
             .map((hiddenColumn) => hiddenColumn.field);
@@ -177,10 +131,8 @@ export const WfoTableWithFilter = <T extends object>({
             hiddenColumns: updatedHiddenColumns,
             selectedPageSize: updatedTableConfig.selectedPageSize,
         });
-        onUpdatePage({
-            index: 0,
-            size: updatedTableConfig.selectedPageSize,
-        });
+        pagination?.onChangeItemsPerPage?.(updatedTableConfig.selectedPageSize);
+        pagination?.onChangePage?.(0);
     };
 
     const handleResetToDefaults = () => {
@@ -188,16 +140,10 @@ export const WfoTableWithFilter = <T extends object>({
         setHiddenColumns(defaultTableConfig.hiddenColumns);
         setShowSettingsModal(false);
         clearTableConfigFromLocalStorage(localStorageKey);
-        onUpdatePage({
-            index: 0,
-            size: defaultTableConfig.selectedPageSize ?? DEFAULT_PAGE_SIZE,
-        });
-    };
-
-    const onCriteriaChange = (criterion: Criteria<T>) => {
-        if (criterion.page) {
-            onUpdatePage(criterion.page);
-        }
+        pagination?.onChangeItemsPerPage?.(
+            defaultTableConfig.selectedPageSize ?? DEFAULT_PAGE_SIZE,
+        );
+        pagination?.onChangePage?.(0);
     };
 
     const searchModalText = t.rich('searchModalText', {
@@ -240,16 +186,10 @@ export const WfoTableWithFilter = <T extends object>({
             </EuiFlexGroup>
             {error && <WfoErrorWithMessage error={error} />}
             <EuiSpacer size="m" />
-            <WfoBasicTable
-                data={data}
-                columns={tableColumnsWithControlColumns}
+            <WfoTable
+                columnConfig={tableColumnsWithControlColumns}
                 hiddenColumns={hiddenColumns}
-                dataSorting={dataSorting}
-                onUpdateDataSorting={onUpdateDataSort}
-                pagination={pagination}
-                isLoading={isLoading}
-                onCriteriaChange={onCriteriaChange}
-                onDataSearch={({ field, searchText }) =>
+                onUpdateDataSearch={({ field, searchText }) =>
                     onUpdateQueryString(
                         updateQueryString(
                             queryString ?? '',
@@ -258,16 +198,18 @@ export const WfoTableWithFilter = <T extends object>({
                         ),
                     )
                 }
+                {...tableProps}
             />
+
             {showSettingsModal && (
                 <TableSettingsModal
                     tableConfig={{
                         columns: tableSettingsColumns,
                         selectedPageSize:
-                            pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+                            pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
                     }}
                     pageSizeOptions={
-                        pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES
+                        pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZES
                     }
                     onClose={() => setShowSettingsModal(false)}
                     onUpdateTableConfig={handleUpdateTableConfig}

package/src/components/WfoTable/WfoAdvancedTable/getRowDetailData.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {
+    WfoAdvancedTableColumnConfig,
+    WfoAdvancedTableDataColumnConfigItem,
+} from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    WfoTableControlColumnConfigItem,
+} from '@/components/WfoTable/WfoTable';
+import { getTypedFieldFromObject } from '@/utils';
+
+export const getRowDetailData = <T extends object>(
+    selectedDataForDetailModal: T,
+    tableColumnConfig: WfoAdvancedTableColumnConfig<T>,
+) => {
+    const tableColumnConfigEntries: [
+        string,
+        (
+            | WfoTableControlColumnConfigItem<T>
+            | WfoAdvancedTableDataColumnConfigItem<T, keyof T>
+        ),
+    ][] = Object.entries(tableColumnConfig);
+
+    const dataColumnEntries = tableColumnConfigEntries.filter(
+        ([, tableColumnConfig]) =>
+            tableColumnConfig.columnType === ColumnType.DATA,
+    ) as [string, WfoAdvancedTableDataColumnConfigItem<T, keyof T>][];
+
+    return dataColumnEntries.map(([key, value]) => {
+        const dataField = getTypedFieldFromObject(key, tableColumnConfig);
+        if (dataField === null) {
+            return {
+                key,
+                value: undefined,
+            };
+        }
+
+        const { renderDetails, renderData, clipboardText, label } = value;
+        const dataValue = selectedDataForDetailModal[dataField];
+
+        return {
+            key: label ?? dataField.toString(),
+            value: (renderDetails &&
+                renderDetails(dataValue, selectedDataForDetailModal)) ??
+                (renderData &&
+                    renderData(dataValue, selectedDataForDetailModal)) ?? (
+                    <>{dataValue}</>
+                ),
+            textToCopy:
+                clipboardText?.(dataValue, selectedDataForDetailModal) ??
+                (typeof dataValue === 'string' ? dataValue : undefined),
+        };
+    });
+};

package/src/components/WfoTable/WfoAdvancedTable/index.ts

@@ -0,0 +1,4 @@
+export * from './getRowDetailData';
+export * from './toSortedTableColumnConfig';
+export * from './types';
+export * from './WfoAdvancedTable';

package/src/components/WfoTable/WfoAdvancedTable/toSortedTableColumnConfig.ts

@@ -0,0 +1,12 @@
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+
+export const toSortedTableColumnConfig = <T extends object>(
+    columnConfig: WfoAdvancedTableColumnConfig<T>,
+    columnKeys: (keyof WfoAdvancedTableColumnConfig<T>)[],
+): WfoAdvancedTableColumnConfig<T> =>
+    columnKeys.reduce((sortedConfig, key) => {
+        if (key in columnConfig) {
+            sortedConfig[key] = columnConfig[key];
+        }
+        return sortedConfig;
+    }, {} as WfoAdvancedTableColumnConfig<T>);

package/src/components/WfoTable/WfoAdvancedTable/types.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import {
+    WfoTableControlColumnConfig,
+    WfoTableControlColumnConfigItem,
+    WfoTableDataColumnConfigItem,
+} from '@/components/WfoTable/WfoTable';
+
+export type WfoAdvancedTableDataColumnConfigItem<
+    T extends object,
+    Property extends keyof T,
+> = WfoTableDataColumnConfigItem<T, Property> & {
+    renderDetails?: (cellValue: T[Property], row: T) => ReactNode;
+    clipboardText?: (cellValue: T[Property], row: T) => string;
+};
+export type WfoAdvancedTableDataColumnConfig<T extends object> = {
+    [Property in keyof T]:
+        | WfoAdvancedTableDataColumnConfigItem<T, Property>
+        | WfoTableControlColumnConfigItem<T>;
+};
+export type WfoAdvancedTableColumnConfig<T extends object> = Partial<
+    WfoTableControlColumnConfig<T> | WfoAdvancedTableDataColumnConfig<T>
+>;

package/src/components/WfoTable/WfoStatusColorField/WfoStatusColorField.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { getWfoStatusColorFieldStyles } from '@/components/WfoTable/WfoStatusColorField/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export type WfoStatusColorFieldProps = {
+    color: string;
+};
+
+export const WfoStatusColorField = ({ color }: WfoStatusColorFieldProps) => {
+    const { getStatusColorFieldStyle } = useWithOrchestratorTheme(
+        getWfoStatusColorFieldStyles,
+    );
+
+    return <div css={getStatusColorFieldStyle(color)}></div>;
+};

package/src/components/WfoTable/WfoStatusColorField/index.ts

@@ -0,0 +1 @@
+export * from './WfoStatusColorField';

package/src/components/WfoTable/WfoStatusColorField/styles.ts

@@ -0,0 +1,20 @@
+import { tint } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+import { TABLE_ROW_HEIGHT } from '@/components';
+import { WfoTheme } from '@/hooks';
+
+export const getWfoStatusColorFieldStyles = ({ theme }: WfoTheme) => {
+    const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
+
+    const getStatusColorFieldStyle = (color: string) =>
+        css({
+            backgroundColor: toStatusColorFieldColor(color),
+            height: TABLE_ROW_HEIGHT,
+            width: theme.size.xs,
+        });
+
+    return {
+        getStatusColorFieldStyle,
+    };
+};

package/src/components/WfoTable/WfoTable/WfoExpandedRow.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+
+import { WfoTableProps } from './WfoTable';
+
+export type WfoExpandedRowProps<T extends object> = Pick<
+    WfoTableProps<T>,
+    'rowExpandingConfiguration'
+> & {
+    rowData: T;
+};
+
+export const WfoExpandedRow = <T extends object>({
+    rowExpandingConfiguration,
+    rowData,
+}: WfoExpandedRowProps<T>) => {
+    if (!rowExpandingConfiguration) {
+        return null;
+    }
+
+    return Object.entries(rowExpandingConfiguration.uniqueRowIdToExpandedRowMap)
+        .map(([key, value]): [key: string, value: ReactNode] => [
+            key.toLowerCase(),
+            value,
+        ])
+        .filter(
+            ([key]) =>
+                key ===
+                (
+                    rowData[rowExpandingConfiguration.uniqueRowId] as string
+                ).toLowerCase(),
+        )
+        .map(([, expandedRowComponent]) => expandedRowComponent);
+};

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

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonIcon, EuiText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getWfoGroupedTableStyles } from './styles';
+
+export type WfoExpandableRowProps = {
+    isExpanded: boolean;
+    groupName: string;
+    updateExpandedRows: (groupName: string) => void;
+    numberOfRowsInGroup: number;
+};
+
+export const WfoExpandableRow: FC<WfoExpandableRowProps> = ({
+    groupName,
+    numberOfRowsInGroup,
+    updateExpandedRows,
+    isExpanded,
+}) => {
+    const { expandableRowContainerStyle, expandableRowTextStyle } =
+        useWithOrchestratorTheme(getWfoGroupedTableStyles);
+    const t = useTranslations('wfoComponents');
+
+    const hasData = numberOfRowsInGroup > 0;
+
+    return (
+        <div css={expandableRowContainerStyle}>
+            <EuiButtonIcon
+                disabled={!hasData}
+                aria-label={isExpanded ? t('collapse') : t('expand')}
+                iconType={hasData && isExpanded ? 'arrowDown' : 'arrowRight'}
+                onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                    updateExpandedRows(groupName);
+                    event.stopPropagation();
+                }}
+            />
+
+            <EuiText
+                size="s"
+                css={expandableRowTextStyle}
+            >{`${groupName} (${numberOfRowsInGroup})`}</EuiText>
+        </div>
+    );
+};

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

@@ -0,0 +1,71 @@
+import React, { Ref } from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoTableDataRows } from '../WfoTableDataRows';
+import { WfoTableHeaderRow } from '../WfoTableHeaderRow';
+import { getWfoTableStyles } from '../styles';
+import { GroupedData } from './WfoGroupedTable';
+import {
+    WfoGroupedTableGroups,
+    WfoGroupedTableGroupsProps,
+    WfoGroupedTableGroupsRef,
+} from './WfoGroupedTableGroups';
+import { getWfoGroupedTableStyles } from './styles';
+
+export type WfoExpandedGroupRowProps<T extends object> = Pick<
+    WfoGroupedTableGroupsProps<T>,
+    'columnConfig' | 'nestingLevel' | 'groupNameLabel'
+> & {
+    data: GroupedData<T> | T[];
+    onExpandRowChange: (isAllExpanded: boolean) => void;
+};
+
+export const WfoExpandedGroupRow = React.forwardRef(
+    <T extends object>(
+        {
+            data,
+            columnConfig,
+            nestingLevel = 1,
+            groupNameLabel,
+            onExpandRowChange,
+        }: WfoExpandedGroupRowProps<T>,
+        reference: Ref<WfoGroupedTableGroupsRef>,
+    ) => {
+        const { expandedRowStyle } =
+            useWithOrchestratorTheme(getWfoTableStyles);
+        const { innerTableHeaderStyle, getNestingStyle } =
+            useWithOrchestratorTheme(getWfoGroupedTableStyles);
+
+        if (Array.isArray(data)) {
+            return (
+                <>
+                    <WfoTableHeaderRow
+                        css={[
+                            innerTableHeaderStyle,
+                            getNestingStyle(nestingLevel),
+                        ]}
+                        columnConfig={columnConfig}
+                    />
+                    <WfoTableDataRows
+                        css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
+                        data={data}
+                        columnConfig={columnConfig}
+                    />
+                </>
+            );
+        }
+
+        return (
+            <WfoGroupedTableGroups
+                ref={reference}
+                data={data}
+                columnConfig={columnConfig}
+                groupNameLabel={groupNameLabel}
+                nestingLevel={nestingLevel}
+                onExpandRowChange={onExpandRowChange}
+            />
+        );
+    },
+);
+WfoExpandedGroupRow.displayName = 'WfoExpandedGroupRow';

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

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonEmpty, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoTable, WfoTableProps } from '../WfoTable';
+import { getWfoTableStyles } from '../styles';
+import { useGroupedTableConfig } from './useGroupedTableConfig';
+
+export type GroupType = {
+    groupName: string;
+};
+
+export type GroupedData<T> = {
+    [Key: string]: T[] | GroupedData<T>;
+};
+
+export type WfoGroupedTableProps<T extends object> = Pick<
+    WfoTableProps<T>,
+    'columnConfig' | 'isLoading' | 'className'
+> & {
+    data: GroupedData<T>;
+    groupNameLabel: string;
+};
+
+export const WfoGroupedTable = <T extends object>({
+    data,
+    columnConfig,
+    groupNameLabel,
+    isLoading,
+    className,
+}: WfoGroupedTableProps<T>) => {
+    const { headerStyle, rowStyle, cellStyle } =
+        useWithOrchestratorTheme(getWfoTableStyles);
+
+    const t = useTranslations('wfoComponents.wfoGroupedTable');
+
+    const {
+        groups,
+        groupColumnConfig,
+        numberOfColumnsInnerTable,
+        uniqueRowIdToExpandedRowMap,
+        isAllGroupsAndSubgroupsExpanded,
+        toggleExpandedRow,
+        expandAllRows,
+        collapseAllRows,
+    } = useGroupedTableConfig({
+        data,
+        groupNameLabel,
+        columnConfig,
+    });
+
+    return (
+        <>
+            <EuiFlexGroup justifyContent="flexEnd">
+                <EuiButtonEmpty
+                    size="xs"
+                    onClick={() =>
+                        isAllGroupsAndSubgroupsExpanded
+                            ? collapseAllRows()
+                            : expandAllRows()
+                    }
+                >
+                    {isAllGroupsAndSubgroupsExpanded
+                        ? t('collapse')
+                        : t('expand')}
+                </EuiButtonEmpty>
+            </EuiFlexGroup>
+
+            <EuiSpacer size="xs" />
+
+            <WfoTable
+                className={className}
+                data={groups}
+                columnConfig={groupColumnConfig}
+                isLoading={isLoading}
+                overrideHeader={() => (
+                    <thead css={headerStyle}>
+                        <tr css={rowStyle}>
+                            <th
+                                colSpan={numberOfColumnsInnerTable}
+                                css={cellStyle}
+                            >
+                                {groupNameLabel}
+                            </th>
+                        </tr>
+                    </thead>
+                )}
+                rowExpandingConfiguration={{
+                    uniqueRowId: 'groupName',
+                    uniqueRowIdToExpandedRowMap,
+                }}
+                onRowClick={({ groupName }) => toggleExpandedRow(groupName)}
+            />
+        </>
+    );
+};