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

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

@@ -0,0 +1,74 @@
+import React, { Ref, useImperativeHandle } from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoTableDataRows } from '../WfoTableDataRows';
+import { getWfoTableStyles } from '../styles';
+import { WfoGroupedTableProps } from './WfoGroupedTable';
+import { getWfoGroupedTableStyles } from './styles';
+import { useGroupedTableConfig } from './useGroupedTableConfig';
+
+export type WfoGroupedTableGroupsRef = {
+    expandAllRows: () => void;
+};
+
+export type WfoGroupedTableGroupsProps<T extends object> = Pick<
+    WfoGroupedTableProps<T>,
+    'columnConfig' | 'data' | 'groupNameLabel'
+> & {
+    nestingLevel?: number;
+    onExpandRowChange: (isAllExpanded: boolean) => void;
+};
+
+export const WfoGroupedTableGroups = React.forwardRef(
+    <T extends object>(
+        {
+            data,
+            groupNameLabel,
+            columnConfig,
+            nestingLevel = 1,
+            onExpandRowChange,
+        }: WfoGroupedTableGroupsProps<T>,
+        reference: Ref<WfoGroupedTableGroupsRef>,
+    ) => {
+        const { expandedRowStyle } =
+            useWithOrchestratorTheme(getWfoTableStyles);
+        const { getNestingStyle } = useWithOrchestratorTheme(
+            getWfoGroupedTableStyles,
+        );
+
+        const {
+            groups,
+            groupColumnConfig,
+            uniqueRowIdToExpandedRowMap,
+            toggleExpandedRow,
+            expandAllRows,
+        } = useGroupedTableConfig({
+            data,
+            groupNameLabel,
+            columnConfig,
+            nestingLevel,
+            notifyParent: onExpandRowChange,
+        });
+
+        useImperativeHandle(reference, () => ({
+            expandAllRows: () => {
+                expandAllRows();
+            },
+        }));
+
+        return (
+            <WfoTableDataRows
+                css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
+                data={groups}
+                columnConfig={groupColumnConfig}
+                onRowClick={(row) => toggleExpandedRow(row.groupName)}
+                rowExpandingConfiguration={{
+                    uniqueRowId: 'groupName',
+                    uniqueRowIdToExpandedRowMap,
+                }}
+            />
+        );
+    },
+);
+WfoGroupedTableGroups.displayName = 'WfoGroupedTableGroups';

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

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getWfoGroupedTableStyles = ({ theme }: WfoTheme) => {
+    // Matches the default width of a EuiButtonIcon component
+    const expandRowButtonWidth = '24px';
+    const marginBetweenButtonAndGroupLabel = theme.size.m;
+
+    const innerTableHeaderStyle = css({
+        fontSize: theme.size.m,
+        textAlign: 'left',
+        backgroundColor: theme.colors.lightestShade,
+    });
+
+    const expandableRowContainerStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+    });
+
+    const expandableRowTextStyle = css({
+        marginLeft: marginBetweenButtonAndGroupLabel,
+        fontWeight: theme.font.weight.medium,
+    });
+
+    const getNestingStyle = (nestingLevel: number) =>
+        css({
+            'th:first-child > *:first-child, td:first-child > *:first-child': {
+                marginLeft: `calc(${nestingLevel} * (${expandRowButtonWidth} + ${marginBetweenButtonAndGroupLabel}))`,
+            },
+        });
+
+    return {
+        innerTableHeaderStyle,
+        expandableRowContainerStyle,
+        expandableRowTextStyle,
+        getNestingStyle,
+    };
+};

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

@@ -0,0 +1,184 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { getObjectKeys } from '@/utils';
+
+import { ColumnType, WfoTableColumnConfig } from '../WfoTable';
+import { WfoExpandableRow } from './WfoExpandableRow';
+import { WfoExpandedGroupRow } from './WfoExpandedGroupRow';
+import { GroupType, WfoGroupedTableProps } from './WfoGroupedTable';
+import { WfoGroupedTableGroupsRef } from './WfoGroupedTableGroups';
+import { getTotalNumberOfRows } from './utils';
+
+export type UseGroupedTableConfigProps<T extends object> = Pick<
+    WfoGroupedTableProps<T>,
+    'columnConfig' | 'data' | 'groupNameLabel'
+> & {
+    nestingLevel?: number;
+    notifyParent?: (meAndAllMySubgroupsAreExpanded: boolean) => void;
+};
+
+export const useGroupedTableConfig = <T extends object>({
+    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);
+
+    useEffect(() => {
+        if (isExpanding) {
+            groupReferences.current.forEach((ref) => {
+                ref.expandAllRows();
+            });
+            setIsExpanding(false);
+        }
+    }, [isExpanding]);
+
+    useEffect(() => {
+        if (notifyParent) {
+            notifyParent(
+                isAllGroupsExpanded &&
+                    groups.every(({ groupName }) =>
+                        isAllSubgroupsExpanded.includes(groupName),
+                    ),
+            );
+        }
+    }, [isAllSubgroupsExpanded, isAllGroupsExpanded]);
+
+    const groups: GroupType[] = getObjectKeys(data).map((key) => ({
+        groupName: key.toString(),
+    }));
+    const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
+
+    const groupColumnConfig: WfoTableColumnConfig<GroupType> = {
+        groupName: {
+            columnType: ColumnType.CONTROL,
+            label: groupNameLabel,
+            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 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 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

@@ -0,0 +1,133 @@
+import { GroupedData } from './WfoGroupedTable';
+import { getTotalNumberOfRows, groupData } from './utils';
+
+type TestObject = {
+    name: string;
+    age: number;
+    group: 'group1' | 'group2';
+    subGroup: 'subGroup1' | 'subGroup2';
+};
+
+describe('WfoGroupedTable - utils', () => {
+    describe('groupData()', () => {
+        it('successfully groups the data', () => {
+            // Given
+            const testData: TestObject[] = [
+                {
+                    name: 'John',
+                    age: 25,
+                    group: 'group2',
+                    subGroup: 'subGroup1',
+                },
+                {
+                    name: 'Bob',
+                    age: 40,
+                    group: 'group2',
+                    subGroup: 'subGroup2',
+                },
+                {
+                    name: 'Jane',
+                    age: 30,
+                    group: 'group2',
+                    subGroup: 'subGroup2',
+                },
+                {
+                    name: 'Tom',
+                    age: 35,
+                    group: 'group1',
+                    subGroup: 'subGroup1',
+                },
+            ];
+
+            // When
+            const result = groupData(testData, [
+                (data) => data.group,
+                (data) => data.subGroup,
+            ]);
+
+            // Then
+            const expected: GroupedData<TestObject> = {
+                group1: {
+                    subGroup1: [
+                        {
+                            name: 'Tom',
+                            age: 35,
+                            group: 'group1',
+                            subGroup: 'subGroup1',
+                        },
+                    ],
+                },
+                group2: {
+                    subGroup1: [
+                        {
+                            name: 'John',
+                            age: 25,
+                            group: 'group2',
+                            subGroup: 'subGroup1',
+                        },
+                    ],
+                    subGroup2: [
+                        {
+                            name: 'Bob',
+                            age: 40,
+                            group: 'group2',
+                            subGroup: 'subGroup2',
+                        },
+                        {
+                            name: 'Jane',
+                            age: 30,
+                            group: 'group2',
+                            subGroup: 'subGroup2',
+                        },
+                    ],
+                },
+            };
+            expect(result).toEqual(expected);
+        });
+    });
+
+    describe('getTotalNumberOfRows()', () => {
+        it('counts the total number of data rows', () => {
+            const testData: GroupedData<TestObject> = {
+                group1: {
+                    subGroup1: [
+                        {
+                            name: 'John',
+                            age: 25,
+                            group: 'group1',
+                            subGroup: 'subGroup1',
+                        },
+                        {
+                            name: 'Bob',
+                            age: 40,
+                            group: 'group1',
+                            subGroup: 'subGroup1',
+                        },
+                    ],
+                    subGroup2: [
+                        {
+                            name: 'Jane',
+                            age: 30,
+                            group: 'group1',
+                            subGroup: 'subGroup2',
+                        },
+                    ],
+                },
+                group2: {
+                    subGroup1: [
+                        {
+                            name: 'Tom',
+                            age: 35,
+                            group: 'group1',
+                            subGroup: 'subGroup1',
+                        },
+                    ],
+                },
+            };
+
+            const result = getTotalNumberOfRows(testData);
+
+            expect(result).toEqual(4);
+        });
+    });
+});

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

@@ -0,0 +1,41 @@
+import { GroupedData } from './WfoGroupedTable';
+
+export const groupData = <T>(
+    data: T[],
+    groupByFunctions: Array<(data: T) => string>,
+): GroupedData<T> => {
+    const groupedData = data.reduce<Record<string, T[]>>(
+        (groupedData, relatedSubscription) => {
+            // In case the array of groupedByFunctions is empty
+            const groupName =
+                groupByFunctions[0]?.(relatedSubscription) ?? 'Ungrouped';
+
+            return {
+                ...groupedData,
+                [groupName]: [
+                    ...(groupedData[groupName] || []),
+                    relatedSubscription,
+                ],
+            };
+        },
+        {},
+    );
+
+    if (groupByFunctions.length <= 1) {
+        return groupedData;
+    }
+
+    const entries = Object.entries(groupedData).map(([key, value]) => [
+        key,
+        groupData(value, groupByFunctions.slice(1)),
+    ]);
+    return Object.fromEntries(entries);
+};
+
+export const getTotalNumberOfRows = <T>(groupedData: GroupedData<T>): number =>
+    Object.entries(groupedData).reduce((totalEntries, entry) => {
+        const value = entry[1];
+        return Array.isArray(value)
+            ? totalEntries + value.length
+            : totalEntries + getTotalNumberOfRows(value);
+    }, 0);

package/src/components/WfoTable/WfoTable/WfoMultilineCell.tsx

@@ -0,0 +1,13 @@
+import React, { FC, ReactElement } from 'react';
+
+export type WfoMultilineCellProps = {
+    children?: ReactElement | string | null;
+};
+
+export const WfoMultilineCell: FC<WfoMultilineCellProps> = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+
+    return <p css={{ textWrap: 'wrap' }}>{children}</p>;
+};

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

@@ -0,0 +1,201 @@
+import React, { CSSProperties, ReactNode } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiSpacer, EuiTablePagination, useEuiScrollBar } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import {
+    TableColumnKeys,
+    WfoDataSearch,
+    WfoDataSorting,
+} from '../utils/columns';
+import { DEFAULT_PAGE_SIZES } from '../utils/constants';
+import { WfoTableDataRows } from './WfoTableDataRows';
+import { WfoTableHeaderRow } from './WfoTableHeaderRow';
+import { getWfoTableStyles } from './styles';
+import { getSortedVisibleColumns } from './utils';
+
+export type Pagination = {
+    pageSize: number;
+    pageIndex: number;
+    totalItemCount: number;
+    pageSizeOptions?: number[];
+    onChangeItemsPerPage?: (pageSize: number) => void;
+    onChangePage?: (pageIndex: number) => void;
+};
+
+export enum ColumnType {
+    DATA = 'data',
+    CONTROL = 'control',
+}
+
+type CommonTableColumnConfigItemProps = {
+    numberOfColumnsToSpan?: number;
+    disableDefaultCellStyle?: boolean;
+    width?: CSSProperties['width'];
+};
+
+export type WfoTableDataColumnConfigItem<
+    T extends object,
+    Property extends keyof T,
+> = CommonTableColumnConfigItemProps & {
+    columnType: ColumnType.DATA;
+    label: string;
+    isSortable?: boolean;
+    isFilterable?: boolean;
+    renderData?: (cellValue: T[Property], row: T) => ReactNode;
+};
+
+export type WfoTableControlColumnConfigItem<T extends object> =
+    CommonTableColumnConfigItemProps & {
+        columnType: ColumnType.CONTROL;
+        label?: string;
+        renderControl: (row: T) => ReactNode;
+    };
+
+export type WfoTableDataColumnConfig<T extends object> = {
+    [Property in keyof T]:
+        | WfoTableDataColumnConfigItem<T, Property>
+        | WfoTableControlColumnConfigItem<T>;
+};
+
+export type WfoTableControlColumnConfig<T extends object> = {
+    [key: string]: WfoTableControlColumnConfigItem<T>; // from WfoTableColumnConfig -- consider extracting type
+};
+
+// Applying "Partial" since data should not always be shown in the table, but can still be needed for rendering
+// Not providing a config for a property of T means that the column will not be shown in the table
+export type WfoTableColumnConfig<T extends object> = Partial<
+    WfoTableDataColumnConfig<T> | WfoTableControlColumnConfig<T>
+>;
+
+export type WfoTableProps<T extends object> = {
+    data: T[];
+    columnConfig: WfoTableColumnConfig<T>;
+    hiddenColumns?: TableColumnKeys<T>;
+    columnOrder?: TableColumnKeys<T>;
+    isLoading?: boolean;
+    dataSorting?: WfoDataSorting<T>[];
+    rowExpandingConfiguration?: {
+        uniqueRowId: keyof WfoTableColumnConfig<T>;
+        uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
+    };
+    pagination?: Pagination;
+    overrideHeader?: (
+        tableHeaderEntries: Array<
+            [
+                string,
+                (
+                    | WfoTableControlColumnConfigItem<T>
+                    | WfoTableDataColumnConfigItem<T, keyof T>
+                ),
+            ]
+        >,
+    ) => ReactNode;
+    onRowClick?: (row: T) => void;
+    onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
+    onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
+    className?: string;
+};
+
+export const WfoTable = <T extends object>({
+    data,
+    columnConfig,
+    hiddenColumns = [],
+    columnOrder = [],
+    isLoading = false,
+    dataSorting = [],
+    rowExpandingConfiguration,
+    pagination,
+    overrideHeader,
+    onUpdateDataSorting,
+    onUpdateDataSearch,
+    onRowClick,
+    className,
+}: WfoTableProps<T>) => {
+    const {
+        tableContainerStyle,
+        tableStyle,
+        headerStyle,
+        bodyLoadingStyle,
+        cellStyle,
+        rowStyle,
+        emptyTableMessageStyle,
+    } = useWithOrchestratorTheme(getWfoTableStyles);
+    const t = useTranslations('common');
+
+    const sortedVisibleColumns = getSortedVisibleColumns(
+        columnConfig,
+        columnOrder,
+        hiddenColumns,
+    );
+
+    return (
+        <>
+            <div css={[tableContainerStyle, useEuiScrollBar()]}>
+                <table className={className} css={tableStyle}>
+                    {overrideHeader ? (
+                        overrideHeader(sortedVisibleColumns)
+                    ) : (
+                        <thead css={headerStyle}>
+                            <WfoTableHeaderRow
+                                columnConfig={columnConfig}
+                                hiddenColumns={hiddenColumns}
+                                columnOrder={columnOrder}
+                                dataSorting={dataSorting}
+                                onUpdateDataSorting={onUpdateDataSorting}
+                                onUpdateDataSearch={onUpdateDataSearch}
+                            />
+                        </thead>
+                    )}
+                    {data.length === 0 ? (
+                        <tbody css={isLoading && bodyLoadingStyle}>
+                            <tr css={rowStyle}>
+                                <td
+                                    colSpan={sortedVisibleColumns.length}
+                                    css={[cellStyle, emptyTableMessageStyle]}
+                                >
+                                    {isLoading
+                                        ? t('loading')
+                                        : t('noItemsFound')}
+                                </td>
+                            </tr>
+                        </tbody>
+                    ) : (
+                        <tbody css={isLoading && bodyLoadingStyle}>
+                            <WfoTableDataRows
+                                data={data}
+                                columnConfig={columnConfig}
+                                hiddenColumns={hiddenColumns}
+                                columnOrder={columnOrder}
+                                rowExpandingConfiguration={
+                                    rowExpandingConfiguration
+                                }
+                                onRowClick={onRowClick}
+                            />
+                        </tbody>
+                    )}
+                </table>
+            </div>
+            {pagination && (
+                <>
+                    <EuiSpacer size="xs" />
+                    <EuiTablePagination
+                        pageCount={Math.ceil(
+                            pagination.totalItemCount / pagination.pageSize,
+                        )}
+                        activePage={pagination.pageIndex}
+                        itemsPerPage={pagination.pageSize}
+                        itemsPerPageOptions={
+                            pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES
+                        }
+                        onChangePage={pagination.onChangePage}
+                        onChangeItemsPerPage={pagination.onChangeItemsPerPage}
+                    />
+                </>
+            )}
+        </>
+    );
+};