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

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

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

@@ -0,0 +1,112 @@
+import React, { Fragment } from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { toOptionalArrayEntry } from '@/utils';
+
+import { WfoExpandedRow } from './WfoExpandedRow';
+import { ColumnType, WfoTableProps } from './WfoTable';
+import { getWfoTableStyles } from './styles';
+import { getSortedVisibleColumns } from './utils';
+
+export type WfoTableDataRowsProps<T extends object> = Pick<
+    WfoTableProps<T>,
+    | 'data'
+    | 'columnConfig'
+    | 'hiddenColumns'
+    | 'columnOrder'
+    | 'rowExpandingConfiguration'
+    | 'onRowClick'
+    | 'className'
+>;
+
+export const WfoTableDataRows = <T extends object>({
+    data,
+    columnConfig,
+    hiddenColumns = [],
+    columnOrder = [],
+    rowExpandingConfiguration,
+    onRowClick,
+    className,
+}: WfoTableDataRowsProps<T>) => {
+    const { cellStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
+        useWithOrchestratorTheme(getWfoTableStyles);
+
+    const sortedVisibleColumns = getSortedVisibleColumns(
+        columnConfig,
+        columnOrder,
+        hiddenColumns,
+    );
+
+    return (
+        <>
+            {data.map((row, index) => (
+                <Fragment key={`table-data-row-${index}`}>
+                    <tr
+                        className={className}
+                        css={[
+                            rowStyle,
+                            dataRowStyle,
+                            onRowClick && clickableStyle,
+                        ]}
+                        onClick={() => onRowClick?.(row)}
+                    >
+                        {sortedVisibleColumns.map(([key, columnConfig]) => {
+                            if (
+                                columnConfig.columnType === ColumnType.CONTROL
+                            ) {
+                                return (
+                                    <td
+                                        colSpan={
+                                            columnConfig.numberOfColumnsToSpan ??
+                                            1
+                                        }
+                                        key={key}
+                                        css={[
+                                            ...toOptionalArrayEntry(
+                                                cellStyle,
+                                                !columnConfig.disableDefaultCellStyle,
+                                            ),
+                                            setWidth(columnConfig.width),
+                                        ]}
+                                    >
+                                        <div>
+                                            {columnConfig.renderControl(row)}
+                                        </div>
+                                    </td>
+                                );
+                            }
+
+                            // Currently there is not a good way to tell Typescript that in some cases
+                            // key is of type "keyof T"
+                            const result = row[key as keyof T];
+                            return (
+                                <td
+                                    key={key}
+                                    css={[
+                                        ...toOptionalArrayEntry(
+                                            cellStyle,
+                                            !columnConfig.disableDefaultCellStyle,
+                                        ),
+                                        setWidth(columnConfig.width),
+                                    ]}
+                                >
+                                    <div>
+                                        {columnConfig.renderData?.(
+                                            result,
+                                            row,
+                                        ) ?? result?.toString()}
+                                    </div>
+                                </td>
+                            );
+                        })}
+                    </tr>
+
+                    <WfoExpandedRow
+                        rowExpandingConfiguration={rowExpandingConfiguration}
+                        rowData={row}
+                    />
+                </Fragment>
+            ))}
+        </>
+    );
+};

package/src/components/WfoTable/{WfoBasicTable → WfoTable/WfoTableHeaderCell}/WfoSortDirectionIcon.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp } from '../../../icons';
-import { SortOrder } from '../../../types';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoArrowNarrowDown, WfoArrowNarrowUp } from '@/icons';
+import { SortOrder } from '@/types';
 
 export type WfoSortDirectionIconProps = {
     sortDirection: SortOrder;

package/src/components/WfoTable/{WfoBasicTable → WfoTable/WfoTableHeaderCell}/WfoTableHeaderCell.tsx

@@ -10,9 +10,10 @@ import {
     useGeneratedHtmlId,
 } from '@elastic/eui';
 
-import { useWithOrchestratorTheme } from '../../../hooks';
-import { SortOrder } from '../../../types';
-import { WfoSortButtons } from '../WfoSortButtons';
+import { WfoSortButtons } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { SortOrder } from '@/types';
+
 import { WfoSortDirectionIcon } from './WfoSortDirectionIcon';
 import { getWfoBasicTableStyles } from './styles';
 

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

@@ -0,0 +1,2 @@
+export * from './WfoSortDirectionIcon';
+export * from './WfoTableHeaderCell';

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

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { toOptionalArrayEntry } from '@/utils';
+
+import { ColumnType, WfoTableProps } from './WfoTable';
+import { WfoTableHeaderCell } from './WfoTableHeaderCell';
+import { getWfoTableStyles } from './styles';
+import { getSortedVisibleColumns } from './utils';
+
+export type WfoTableHeaderRowProps<T extends object> = Pick<
+    WfoTableProps<T>,
+    | 'columnConfig'
+    | 'hiddenColumns'
+    | 'columnOrder'
+    | 'dataSorting'
+    | 'onUpdateDataSorting'
+    | 'onUpdateDataSearch'
+    | 'className'
+>;
+
+export const WfoTableHeaderRow = <T extends object>({
+    columnConfig,
+    columnOrder = [],
+    hiddenColumns = [],
+    dataSorting = [],
+    onUpdateDataSorting,
+    onUpdateDataSearch,
+    className,
+}: WfoTableHeaderRowProps<T>) => {
+    const { cellStyle, rowStyle, setWidth } =
+        useWithOrchestratorTheme(getWfoTableStyles);
+
+    const sortedVisibleColumns = getSortedVisibleColumns(
+        columnConfig,
+        columnOrder,
+        hiddenColumns,
+    );
+
+    return (
+        <>
+            <tr className={className} css={rowStyle}>
+                {sortedVisibleColumns.map(([key, columnConfig]) => {
+                    const dataSortingConfiguration = dataSorting.find(
+                        (dataSorting) => dataSorting.field === key,
+                    );
+
+                    if (columnConfig.columnType === ColumnType.DATA) {
+                        return (
+                            <th
+                                colSpan={columnConfig.numberOfColumnsToSpan}
+                                key={key}
+                                css={[
+                                    ...toOptionalArrayEntry(
+                                        cellStyle,
+                                        !columnConfig.disableDefaultCellStyle,
+                                    ),
+                                    setWidth(columnConfig.width),
+                                ]}
+                            >
+                                <WfoTableHeaderCell
+                                    fieldName={key}
+                                    sortOrder={
+                                        dataSortingConfiguration?.sortOrder
+                                    }
+                                    onSetSortOrder={
+                                        columnConfig.isSortable
+                                            ? (updatedSortOrder) =>
+                                                  onUpdateDataSorting?.({
+                                                      // Currently there is not a good way to tell Typescript that in some cases
+                                                      // key is of type "keyof T"
+                                                      field: key as keyof T,
+                                                      sortOrder:
+                                                          updatedSortOrder,
+                                                  })
+                                            : undefined
+                                    }
+                                    onSearch={
+                                        columnConfig.isFilterable
+                                            ? (searchText) =>
+                                                  onUpdateDataSearch?.({
+                                                      field: key as keyof T,
+                                                      searchText,
+                                                  })
+                                            : undefined
+                                    }
+                                >
+                                    {columnConfig.label?.toString()}
+                                </WfoTableHeaderCell>
+                            </th>
+                        );
+                    }
+
+                    // Control column
+                    return (
+                        <th
+                            key={key}
+                            colSpan={columnConfig.numberOfColumnsToSpan}
+                            css={[
+                                ...toOptionalArrayEntry(
+                                    cellStyle,
+                                    !columnConfig.disableDefaultCellStyle,
+                                ),
+                                setWidth(columnConfig.width),
+                            ]}
+                        >
+                            <div>{columnConfig.label?.toString() || ''}</div>
+                        </th>
+                    );
+                })}
+            </tr>
+        </>
+    );
+};

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

@@ -0,0 +1,23 @@
+import React, { FC, ReactElement } from 'react';
+
+export type WfoTruncateCellProps = {
+    children?: ReactElement | string | null;
+};
+
+export const WfoTruncateCell: FC<WfoTruncateCellProps> = ({ children }) => {
+    if (!children) {
+        return null;
+    }
+
+    return (
+        <p
+            css={{
+                textOverflow: 'ellipsis',
+                overflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            }}
+        >
+            {children}
+        </p>
+    );
+};

package/src/components/WfoTable/WfoTable/constants.ts

@@ -0,0 +1 @@
+export const TABLE_ROW_HEIGHT = '40px';