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

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

package/src/components/WfoTree/styles.ts

@@ -12,14 +12,38 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         marginRight: `-${theme.size.s}`,
     };
 
-    const treeItemOtherSubscriptionStyle = {
-        backgroundColor: toSecondaryColor(theme.colors.lightestShade),
-        border: `thin dashed ${theme.colors.lightShade}`,
+    const treeItemStyle = (isOutsideCurrentSubscription: boolean) => {
+        return {
+            cursor: 'pointer',
+            paddingBlock: theme.size.xs,
+            paddingInline: theme.size.s,
+            borderRadius: theme.base - 10,
+            textDecoration: 'none',
+            backgroundColor: 'transparent',
+            transition: 'background-color 0.2s ease, text-decoration 0.3s ease', // Smooth transition for background
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+            border: isOutsideCurrentSubscription
+                ? `1px dashed ${theme.colors.lightShade}`
+                : 'none',
+        };
+    };
+
+    const selectedTreeItemStyle = (isOutsideCurrentSubscription: boolean) => {
+        return {
+            ...treeItemStyle(isOutsideCurrentSubscription),
+            backgroundColor: isOutsideCurrentSubscription
+                ? theme.colors.lightShade
+                : toSecondaryColor(theme.colors.primary),
+            color: theme.colors.primaryText,
+        };
     };
 
     return {
         expandIconContainerStyle: expandIconContainerStyle,
         treeContainerStyle: treeContainerStyle,
-        treeItemOtherSubscriptionStyle,
+        selectedTreeItemStyle,
+        treeItemStyle,
     };
 };

package/src/components/index.ts

@@ -29,3 +29,4 @@ export * from './WfoStartButton';
 export * from './WfoSubscriptionsList';
 export * from './WfoSummary';
 export * from './WfoTitleWithWebsocketBadge';
+export * from './WfoRadioDropdown';

package/src/configuration/policy-resources.ts

@@ -17,4 +17,5 @@ export enum PolicyResource {
     TASKS_CREATE = '/orchestrator/processes/create/task',
     TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',
     SETTINGS_FLUSH_CACHE = '/orchestrator/settings/flush-cache',
+    SET_IN_SYNC = '/orchestrator/subscriptions/set-in-sync',
 }

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '1.38.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.0.0';

package/src/icons/WfoXMarkSmall.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoXMarkSmall: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 -2 16 16"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/x-mark</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+            </g>
+        </g>
+    </svg>
+);

package/src/messages/en-GB.json

@@ -357,6 +357,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription set in sync",
                 "text": "The subscription was successfully set in sync."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start with oldest first",
+                "startWithNewestLabel": "Start with newest first"
             }
         }
     },

package/src/messages/nl-NL.json

@@ -356,6 +356,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription inSync",
                 "text": "De subscription is in sync gezet."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start met oudste eerst",
+                "startWithNewestLabel": "Start met nieuwste eerst"
             }
         }
     },

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
 import {
     DEFAULT_PAGE_SIZE,
@@ -15,13 +14,15 @@ import {
     WfoFirstPartUUID,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
-    WfoTableColumns,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
     getQueryStringHandler,
-    mapSortableAndFilterableValuesToTableColumnConfig,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -47,21 +48,8 @@ import {
 
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition = 'productBlockId';
 const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
 
-const PRODUCT_BLOCK_FIELD_TAG: keyof ProductBlockDefinition = 'tag';
-const PRODUCT_BLOCK_FIELD_DESCRIPTION: keyof ProductBlockDefinition =
-    'description';
-const PRODUCT_BLOCK_FIELD_STATUS: keyof ProductBlockDefinition = 'status';
-const PRODUCT_BLOCK_FIELD_CREATED_AT: keyof ProductBlockDefinition =
-    'createdAt';
-const PRODUCT_BLOCK_FIELD_END_DATE: keyof ProductBlockDefinition = 'endDate';
-const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
-    'resourceTypes';
-const PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS: keyof ProductBlockDefinition =
-    'dependsOn';
-
 type ProductBlockDefinitionExportItem = Omit<
     ProductBlockDefinition,
     'resourceTypes' | 'dependsOn'
@@ -103,44 +91,42 @@ export const WfoProductBlocksPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ProductBlockDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ProductBlockDefinition> = {
         productBlockId: {
-            field: PRODUCT_BLOCK_FIELD_ID,
-            name: t('id'),
+            columnType: ColumnType.DATA,
+            label: t('id'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         name: {
-            field: PRODUCT_BLOCK_FIELD_NAME,
-            name: t('name'),
-            width: '200',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_BLOCK}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         tag: {
-            field: PRODUCT_BLOCK_FIELD_TAG,
-            name: t('tag'),
-            width: '140',
+            columnType: ColumnType.DATA,
+            label: t('tag'),
         },
         description: {
-            field: PRODUCT_BLOCK_FIELD_DESCRIPTION,
-            name: t('description'),
-            width: '400',
+            columnType: ColumnType.DATA,
+            label: t('description'),
+            width: '400px',
         },
         status: {
-            field: PRODUCT_BLOCK_FIELD_STATUS,
-            name: t('status'),
-            width: '90',
-            render: (value) => <WfoProductStatusBadge status={value} />,
+            columnType: ColumnType.DATA,
+            label: t('status'),
+            width: '90px',
+            renderData: (value) => <WfoProductStatusBadge status={value} />,
         },
         dependsOn: {
-            field: PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS,
-            name: t('dependingProductBlocks'),
-            render: (dependsOn) => (
+            columnType: ColumnType.DATA,
+            label: t('dependingProductBlocks'),
+            renderData: (dependsOn) => (
                 <>
                     {dependsOn.map((productBlock, index) => (
                         <WfoProductBlockBadge
@@ -154,9 +140,9 @@ export const WfoProductBlocksPage = () => {
             ),
         },
         resourceTypes: {
-            field: PRODUCT_BLOCK_FIELD_RESOURCE_TYPES,
-            name: t('resourceTypes'),
-            render: (resourceTypes) => (
+            columnType: ColumnType.DATA,
+            label: t('resourceTypes'),
+            renderData: (resourceTypes) => (
                 <>
                     {resourceTypes.map((resourceType, index) => (
                         <WfoProductBlockBadge
@@ -182,16 +168,16 @@ export const WfoProductBlocksPage = () => {
             ),
         },
         createdAt: {
-            field: PRODUCT_BLOCK_FIELD_CREATED_AT,
-            name: t('createdAt'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
         endDate: {
-            field: PRODUCT_BLOCK_FIELD_END_DATE,
-            name: t('endDate'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('endDate'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -223,10 +209,12 @@ export const WfoProductBlocksPage = () => {
     const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
     const pagination: Pagination = {
-        pageSize: pageSize,
-        pageIndex: pageIndex,
+        pageIndex,
+        pageSize,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -245,21 +233,16 @@ export const WfoProductBlocksPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ProductBlockDefinition>
+            <WfoAdvancedTable
                 data={data?.productBlocks || []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ProductBlockDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ProductBlockDefinition>(
-                    setDataDisplayParam,
-                )}
+                onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
                 onUpdateQueryString={getQueryStringHandler<ProductBlockDefinition>(
                     setDataDisplayParam,
                 )}