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

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)}
+            />
+        </>
+    );
+};

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,
+    };
+};