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

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';

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

@@ -0,0 +1,14 @@
+export * from './WfoTable';
+export * from './constants';
+export * from './styles';
+
+export * from './WfoGroupedTable/WfoGroupedTable';
+export * from './WfoGroupedTable/utils';
+export * from './WfoGroupedTable/styles';
+
+export * from './WfoMultilineCell';
+
+export * from './WfoTable';
+export * from './WfoTableHeaderCell';
+
+export * from './WfoTruncateCell';

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

@@ -0,0 +1,117 @@
+import { CSSProperties } from 'react';
+
+import { css, keyframes } from '@emotion/react';
+
+import { TABLE_ROW_HEIGHT } from '@/components/WfoTable';
+import { WfoTheme } from '@/hooks';
+
+export const getWfoTableStyles = ({ theme }: WfoTheme) => {
+    const radius = theme.border.radius.medium;
+
+    const tableLoadingLineKeyframes = keyframes({
+        from: {
+            left: 0,
+            width: 0,
+        },
+        '20%': {
+            left: 0,
+            width: '40%',
+        },
+        '80%': {
+            left: '60%',
+            width: '40%',
+        },
+        '100%': {
+            left: '100%',
+            width: 0,
+        },
+    });
+
+    const tableContainerStyle = css({
+        overflowX: 'auto',
+    });
+
+    const tableStyle = css({
+        width: '100%',
+    });
+
+    const headerStyle = css({
+        backgroundColor: theme.colors.lightShade,
+        fontSize: theme.size.m,
+        textAlign: 'left',
+        'tr>:first-child': {
+            borderTopLeftRadius: radius,
+        },
+        'tr>:last-child': {
+            borderTopRightRadius: radius,
+        },
+    });
+
+    const bodyLoadingStyle = css({
+        position: 'relative',
+        overflow: 'hidden',
+
+        '&::before': {
+            position: 'absolute',
+            content: '""',
+            height: theme.border.width.thick,
+            backgroundColor: theme.colors.primary,
+            animation: `${tableLoadingLineKeyframes} 1s linear infinite`,
+        },
+    });
+
+    const rowStyle = css({
+        height: TABLE_ROW_HEIGHT,
+        borderStyle: 'solid',
+        borderWidth: '0 0 1px 0',
+        borderColor: theme.colors.lightShade,
+    });
+
+    const dataRowStyle = css({
+        '&:hover': {
+            backgroundColor: theme.colors.lightestShade,
+        },
+    });
+
+    const expandedRowStyle = css({
+        backgroundColor: theme.colors.lightestShade,
+    });
+
+    const cellStyle = css({
+        paddingLeft: theme.size.m,
+        paddingRight: theme.size.m,
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+    });
+
+    const emptyTableMessageStyle = css({
+        textAlign: 'center',
+    });
+
+    const clickableStyle = css({
+        cursor: 'pointer',
+    });
+
+    const setWidth = (width?: CSSProperties['width']) =>
+        width !== undefined &&
+        css({
+            width: width,
+            minWidth: width,
+            maxWidth: width,
+            overflow: 'hidden',
+        });
+
+    return {
+        tableContainerStyle,
+        tableStyle,
+        headerStyle,
+        bodyLoadingStyle,
+        rowStyle,
+        dataRowStyle,
+        expandedRowStyle,
+        cellStyle,
+        emptyTableMessageStyle,
+        clickableStyle,
+        setWidth,
+    };
+};

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

@@ -0,0 +1,79 @@
+import {
+    ColumnType,
+    WfoTableColumnConfig,
+} from '@/components/WfoTable/WfoTable/WfoTable';
+
+import { mapSortableAndFilterableValuesToTableColumnConfig } from './utils';
+
+type TestObject = {
+    name: string;
+    age: number;
+};
+
+const tableColumnConfig: WfoTableColumnConfig<TestObject> = {
+    name: {
+        columnType: ColumnType.DATA,
+        label: 'tesName',
+    },
+    age: {
+        columnType: ColumnType.DATA,
+        label: 'testAge',
+    },
+};
+
+describe('mapSortableAndFilterableValuesToTableColumnConfig', () => {
+    it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
+        // Given
+        const sortableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+        const filterableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+
+        // When
+        const result =
+            mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
+                tableColumnConfig,
+                sortableFieldNames,
+                filterableFieldNames,
+            );
+
+        // Then
+        if (
+            result.name?.columnType === ColumnType.DATA &&
+            result.age?.columnType === ColumnType.DATA
+        ) {
+            expect(result.name.isSortable).toEqual(true);
+            expect(result.name.isFilterable).toEqual(true);
+            expect(result.age.isSortable).toEqual(true);
+            expect(result.age.isFilterable).toEqual(true);
+        } else {
+            // Preventing silently skipping above expects
+            throw Error('Some of the fields are not data fields');
+        }
+    });
+    it('sets the sortable and filterable properties for the columnConfig object to false when the colum name is not specified in the list', () => {
+        // Given
+        const sortableFieldNames = ['nonExistingFieldName'];
+        const filterableFieldNames: string[] = [];
+
+        // When
+        const result =
+            mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
+                tableColumnConfig,
+                sortableFieldNames,
+                filterableFieldNames,
+            );
+
+        // Then
+        if (
+            result.name?.columnType === ColumnType.DATA &&
+            result.age?.columnType === ColumnType.DATA
+        ) {
+            expect(result.name.isSortable).toEqual(false);
+            expect(result.name.isFilterable).toEqual(false);
+            expect(result.age.isSortable).toEqual(false);
+            expect(result.age.isFilterable).toEqual(false);
+        } else {
+            // Preventing silently skipping above expects
+            throw Error('Some of the fields are not data fields');
+        }
+    });
+});

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

@@ -0,0 +1,78 @@
+import { TableColumnKeys } from '@/components';
+import { toObjectWithSortedKeys } from '@/utils';
+
+import {
+    ColumnType,
+    WfoTableColumnConfig,
+    WfoTableControlColumnConfigItem,
+    WfoTableDataColumnConfigItem,
+} from './WfoTable';
+
+export const getSortedVisibleColumns = <T extends object>(
+    columnConfig: WfoTableColumnConfig<T>,
+    columnOrder: TableColumnKeys<T>,
+    hiddenColumns: TableColumnKeys<T>,
+) => {
+    const tableHeadersEntries: Array<
+        [
+            string,
+            (
+                | WfoTableControlColumnConfigItem<T>
+                | WfoTableDataColumnConfigItem<T, keyof T>
+            ),
+        ]
+    > = Object.entries(
+        toObjectWithSortedKeys(
+            columnConfig,
+            columnOrder.map((value) => value.toString()),
+        ),
+    );
+
+    return tableHeadersEntries.filter(
+        ([columnId]) => !hiddenColumns.includes(columnId as keyof T),
+    );
+};
+
+/**
+ * Maps from WfoTableColumnConfig to WfoTableColumnConfig.
+ * A generic type must be provided to prevent type errors
+ * @param tableColumnConfig
+ * @param sortableFieldNames
+ * @param filterableFieldNames
+ *
+ * @returns updated WfoTableColumnConfig with isSortable and isFilterable set
+ */
+export function mapSortableAndFilterableValuesToTableColumnConfig<
+    T extends object,
+>(
+    tableColumnConfig: WfoTableColumnConfig<T>,
+    sortableFieldNames: string[] = [],
+    filterableFieldNames: string[] = [],
+): WfoTableColumnConfig<T> {
+    const tableColumnConfigEntries: [
+        string,
+        (
+            | WfoTableControlColumnConfigItem<T>
+            | WfoTableDataColumnConfigItem<T, keyof T>
+        ),
+    ][] = Object.entries(tableColumnConfig);
+
+    const tableColumnConfigUpdatedEntries = tableColumnConfigEntries.map(
+        ([key, value]) => {
+            if (value.columnType === ColumnType.DATA) {
+                return [
+                    key,
+                    {
+                        ...value,
+                        isSortable: sortableFieldNames.includes(key),
+                        isFilterable: filterableFieldNames.includes(key),
+                    },
+                ];
+            }
+
+            return [key, value];
+        },
+    );
+
+    return Object.fromEntries(tableColumnConfigUpdatedEntries);
+}

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

@@ -15,22 +15,22 @@ import { WfoSettingsModal } from '@/components';
 import { getWfoTableSettingsModalStyles } from '@/components/WfoTable/WfoTableSettingsModal/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
-export type ColumnConfig<T> = {
+export type TableSettingsColumnConfig<T> = {
     field: keyof T;
     name: string;
     isVisible: boolean;
 };
 
-export type TableConfig<T> = {
-    columns: ColumnConfig<T>[];
+export type TableSettingsConfig<T> = {
+    columns: TableSettingsColumnConfig<T>[];
     selectedPageSize: number;
 };
 
 export type TableSettingsModalProps<T> = {
-    tableConfig: TableConfig<T>;
+    tableConfig: TableSettingsConfig<T>;
     pageSizeOptions: number[];
     onClose: () => void;
-    onUpdateTableConfig: (updatedTableConfig: TableConfig<T>) => void;
+    onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
     onResetToDefaults: () => void;
 };
 
@@ -57,13 +57,14 @@ export const TableSettingsModal = <T,>({
     }));
 
     const handleUpdateColumnVisibility = (field: keyof T) => {
-        const updatedColumns: ColumnConfig<T>[] = columns.map((column) =>
-            column.field === field
-                ? {
-                      ...column,
-                      isVisible: !column.isVisible,
-                  }
-                : column,
+        const updatedColumns: TableSettingsColumnConfig<T>[] = columns.map(
+            (column) =>
+                column.field === field
+                    ? {
+                          ...column,
+                          isVisible: !column.isVisible,
+                      }
+                    : column,
         );
         setColumns(updatedColumns);
     };

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

@@ -1 +1 @@
-export * from './WfoTableWithFilter';
+export * from './updateQueryString';

package/src/components/WfoTable/index.ts

@@ -1,18 +1,17 @@
-export * from './WfoDataGridTable/WfoDataGridTable';
-export * from './WfoDataGridTable/WfodataGridColumns';
-
 export * from './WfoTableSettingsModal';
 
 export * from './utils/columns';
 export * from './utils/constants';
-export * from './utils/mapSortableAndFilterableValuesToTableColumnConfig';
 
 export * from './utils/tableConfigPersistence';
 export * from './utils/tableUtils';
 
-export * from './WfoBasicTable';
+export * from './WfoStatusColorField';
 export * from './WfoTableWithFilter';
 
 export * from './WfoSortButtons';
 export * from './WfoFirstPartUUID';
 export * from './WfoInlineJson';
+
+export * from './WfoAdvancedTable';
+export * from './WfoTable';