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

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

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

@@ -1,54 +1,7 @@
-import { ReactNode } from 'react';
-
-import { EuiBasicTableColumn } from '@elastic/eui';
-
-import { SortOrder } from '../../../types';
-
-// Todo need to Pick a few more props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
-// https://github.com/workfloworchestrator/orchestrator-ui/issues/130
-export type WfoEuiBasicTableColumn<T extends object> = Omit<
-    EuiBasicTableColumn<T>,
-    'render'
->;
-
-export type WfoTableDataColumnConfig<
-    T extends object,
-    Property,
-> = WfoEuiBasicTableColumn<T> & {
-    field: Property;
-    name: string;
-    sortable?: boolean;
-    filterable?: boolean;
-    truncateText?: boolean;
-};
+import { SortOrder } from '@/types';
 
 export const WFO_STATUS_COLOR_FIELD = 'statusColorField';
 
-// Todo need to Pick a few props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
-export type WfoTableColumnsWithExtraNonDataFields<T extends object> =
-    WfoTableColumns<T> & {
-        [key: string]: EuiBasicTableColumn<T> & {
-            field: string;
-            name?: string;
-        };
-    };
-
-export type WfoTableColumns<T extends object> = {
-    [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
-        render?: (cellValue: T[Property], row: T) => ReactNode;
-        renderDetails?: (cellValue: T[Property], row: T) => ReactNode;
-        clipboardText?: (cellValue: T[Property], row: T) => string;
-    };
-};
-
-export type WfoTableControlColumnConfig<T extends object> = {
-    [key: string]: WfoEuiBasicTableColumn<T> & {
-        field: string;
-        name?: string;
-        render: (cellValue: never, row: T) => ReactNode;
-    };
-};
-
 export type TableColumnKeys<T> = Array<keyof T>;
 
 export type WfoDataSorting<T> = {

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

@@ -1,7 +1,6 @@
-import type { Criteria } from '@elastic/eui';
+import type { DataDisplayReturnValues } from '@/hooks';
+import { SortOrder } from '@/types';
 
-import type { DataDisplayReturnValues } from '../../../hooks';
-import { SortOrder } from '../../../types';
 import { WfoDataSorting } from './columns';
 
 export const determinePageIndex = (pageIndex: number, pageSize: number) =>
@@ -32,16 +31,20 @@ export const getDataSortHandler =
         });
     };
 
-export const getPageChangeHandler =
+export const getPageSizeChangeHandler =
     <Type>(
         setDataDisplayParam: DataDisplayReturnValues<Type>['setDataDisplayParam'],
     ) =>
-    (page: Criteria<Type>['page']) => {
-        if (page) {
-            const { index, size } = page;
-            setDataDisplayParam('pageSize', size);
-            setDataDisplayParam('pageIndex', index);
-        }
+    (pageSize: number) => {
+        setDataDisplayParam('pageSize', pageSize);
+    };
+
+export const getPageIndexChangeHandler =
+    <Type>(
+        setDataDisplayParam: DataDisplayReturnValues<Type>['setDataDisplayParam'],
+    ) =>
+    (pageIndex: number) => {
+        setDataDisplayParam('pageIndex', pageIndex);
     };
 
 export const getQueryStringHandler =

package/src/components/WfoTree/WfoTreeBranch.tsx

@@ -2,7 +2,9 @@ import React, { FC } from 'react';
 
 import { EuiListGroup } from '@elastic/eui';
 
+import { getSubscriptionDetailStyles } from '@/components/WfoSubscription/styles';
 import { TreeContext, TreeContextType } from '@/contexts';
+import { useWithOrchestratorTheme } from '@/hooks';
 import { TreeBlock } from '@/types';
 
 import { WfoTreeNode } from './WfoTreeNode';
@@ -15,6 +17,9 @@ type WfoTreeBranchProps = {
 export const WfoTreeBranch: FC<WfoTreeBranchProps> = ({ item, level }) => {
     const { expandedIds } = React.useContext(TreeContext) as TreeContextType;
     const selected = expandedIds.includes(item.id);
+    const { productBlockTreeWidth } = useWithOrchestratorTheme(
+        getSubscriptionDetailStyles,
+    );
 
     const hasChildren = item.children && item.children.length !== 0;
 
@@ -32,7 +37,11 @@ export const WfoTreeBranch: FC<WfoTreeBranchProps> = ({ item, level }) => {
 
     return (
         <>
-            <EuiListGroup flush={true} color="primary" maxWidth={455}>
+            <EuiListGroup
+                flush={true}
+                color="primary"
+                maxWidth={productBlockTreeWidth}
+            >
                 <WfoTreeNode
                     item={item}
                     hasChildren={hasChildren}

package/src/components/WfoTree/WfoTreeNode.tsx

@@ -1,15 +1,8 @@
 import React, { FC } from 'react';
 
-import { useTranslations } from 'next-intl';
-
-import {
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiIcon,
-    EuiListGroupItem,
-    EuiToken,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToken } from '@elastic/eui';
 
+import { WfoTreeNodeListItem } from '@/components/WfoTree/WfoTreeNodeListItem';
 import { TreeContext, TreeContextType } from '@/contexts';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { TreeBlock } from '@/types';
@@ -28,19 +21,10 @@ export const WfoTreeNode: FC<WfoTreeNodeProps> = ({
     level,
 }) => {
     const { theme } = useOrchestratorTheme();
-    const {
-        expandIconContainerStyle,
-        treeContainerStyle,
-        treeItemOtherSubscriptionStyle,
-    } = useWithOrchestratorTheme(getStyles);
-    const t = useTranslations('common');
-    const {
-        expandedIds,
-        collapseNode,
-        expandNode,
-        selectedIds,
-        toggleSelectedId,
-    } = React.useContext(TreeContext) as TreeContextType;
+    const { expandIconContainerStyle, treeContainerStyle } =
+        useWithOrchestratorTheme(getStyles);
+    const { expandedIds, collapseNode, expandNode, selectedIds } =
+        React.useContext(TreeContext) as TreeContextType;
     const expanded = expandedIds.includes(item.id);
     const selected = selectedIds.includes(item.id);
 
@@ -65,41 +49,8 @@ export const WfoTreeNode: FC<WfoTreeNodeProps> = ({
                         <EuiToken iconType={item.icon} />
                     )}
                 </EuiFlexItem>
-                <EuiFlexItem grow={true}>
-                    {selected ? (
-                        <EuiListGroupItem
-                            onClick={() => toggleSelectedId(item.id)}
-                            label={item.label}
-                            isActive={selected}
-                            color={'primary'}
-                            style={{ borderRadius: 6 }}
-                            extraAction={{
-                                color: 'primary',
-                                onClick: () => toggleSelectedId(item.id),
-                                iconType: 'error',
-                                iconSize: 's',
-                                'aria-label': t('deselect'),
-                                alwaysShow: true,
-                            }}
-                            css={
-                                item.isOutsideCurrentSubscription &&
-                                treeItemOtherSubscriptionStyle
-                            }
-                        />
-                    ) : (
-                        <EuiListGroupItem
-                            onClick={() => toggleSelectedId(item.id)}
-                            label={item.label}
-                            isActive={selected}
-                            style={{
-                                borderRadius: 6,
-                            }}
-                            css={
-                                item.isOutsideCurrentSubscription &&
-                                treeItemOtherSubscriptionStyle
-                            }
-                        />
-                    )}
+                <EuiFlexItem>
+                    <WfoTreeNodeListItem item={item} selected={selected} />
                 </EuiFlexItem>
             </EuiFlexGroup>
         </div>

package/src/components/WfoTree/WfoTreeNodeListItem.tsx

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiText,
+    EuiTextTruncate,
+} from '@elastic/eui';
+
+import { getStyles } from '@/components/WfoTree/styles';
+import { TreeContext, TreeContextType } from '@/contexts';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoXMarkSmall } from '@/icons/WfoXMarkSmall';
+import { TreeBlock } from '@/types';
+
+interface WfoTreeNodeListItemProps {
+    item: TreeBlock;
+    selected: boolean;
+}
+
+export const WfoTreeNodeListItem = ({
+    item,
+    selected,
+}: WfoTreeNodeListItemProps) => {
+    const t = useTranslations('common');
+    const { toggleSelectedId } = useContext(TreeContext) as TreeContextType;
+    const { theme } = useOrchestratorTheme();
+    const { selectedTreeItemStyle, treeItemStyle } =
+        useWithOrchestratorTheme(getStyles);
+
+    const { isOutsideCurrentSubscription, id, label } = item;
+    const textLabel = label.toString();
+
+    return (
+        <EuiFlexGroup
+            alignItems="center"
+            css={
+                selected
+                    ? selectedTreeItemStyle(isOutsideCurrentSubscription)
+                    : treeItemStyle(isOutsideCurrentSubscription)
+            }
+            onClick={() => toggleSelectedId(id)}
+            gutterSize="xs"
+            justifyContent="spaceBetween"
+        >
+            <EuiFlexItem>
+                <EuiText title={textLabel}>
+                    <EuiTextTruncate text={textLabel} />
+                </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem css={{ maxWidth: theme.size.l }}>
+                <EuiButtonIcon
+                    color="primary"
+                    iconType={() => <WfoXMarkSmall color="currentColor" />}
+                    size="xs"
+                    aria-label={t('deselect')}
+                    css={{ display: selected ? 'block' : 'none' }}
+                />
+            </EuiFlexItem>
+        </EuiFlexGroup>
+    );
+};