@orchestrator-ui/orchestrator-ui-components 0.2.3 → 0.2.5

package/src/components/{WFOTable → WfoTable}/utils/tableUtils.ts

@@ -1,10 +1,8 @@
 import type { Criteria } from '@elastic/eui';
-import { SortOrder } from '../../../types';
 
-import type {
-    DataDisplayReturnValues,
-    DataDisplayParams,
-} from '../../../hooks';
+import type { DataDisplayReturnValues } from '../../../hooks';
+import { SortOrder } from '../../../types';
+import { WfoDataSorting } from './columns';
 
 export const determinePageIndex = (pageIndex: number, pageSize: number) =>
     Math.floor(pageIndex / pageSize);
@@ -25,29 +23,12 @@ export const determineNewSortOrder = <T>(
 
 export const getDataSortHandler =
     <Type>(
-        dataDisplayParams: DataDisplayParams<Type>,
         setDataDisplayParam: DataDisplayReturnValues<Type>['setDataDisplayParam'],
     ) =>
-    (newSortField: keyof Type) => {
-        const newOrder = (() => {
-            if (
-                dataDisplayParams.sortBy &&
-                dataDisplayParams.sortBy.order &&
-                dataDisplayParams.sortBy.field
-            ) {
-                return determineNewSortOrder<Type>(
-                    dataDisplayParams.sortBy.field,
-                    dataDisplayParams.sortBy.order,
-                    newSortField,
-                );
-            }
-
-            return SortOrder.ASC;
-        })();
-
+    ({ field, sortOrder }: WfoDataSorting<Type>) => {
         setDataDisplayParam('sortBy', {
-            field: newSortField,
-            order: newOrder,
+            field: field,
+            order: sortOrder,
         });
     };
 

package/src/components/WfoTimeline/WfoTimeline.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { ReactNode } from 'react';
+
+import { useEuiScrollBar } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { StepStatus } from '../../types';
+import { WfoTimelineStep } from './WfoTimelineStep';
+import { getStyles } from './styles';
+import { getTimelinePosition } from './timelineUtils';
+
+export enum TimelinePosition {
+    PAST = 'past',
+    CURRENT = 'current',
+    FUTURE = 'future',
+}
+
+export type TimelineItem = {
+    id?: string;
+    processStepStatus: StepStatus;
+    stepDetail?: string | ReactNode;
+    value?: string | ReactNode;
+};
+
+export type WfoTimelineProps = {
+    timelineItems: TimelineItem[];
+    indexOfCurrentStep?: number;
+    onStepClick: (timelineItem: TimelineItem) => void;
+};
+
+export const WfoTimeline: FC<WfoTimelineProps> = ({
+    timelineItems,
+    indexOfCurrentStep = 0,
+    onStepClick,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { timelinePanelStyle } = getStyles(theme);
+
+    const mapTimelineItemToStep = (
+        timelineItem: TimelineItem,
+        index: number,
+        allTimelineItems: TimelineItem[],
+    ) => {
+        const { id, stepDetail, processStepStatus, value } = timelineItem;
+
+        return (
+            <WfoTimelineStep
+                key={index}
+                isFirstStep={index === 0}
+                isLastStep={index === allTimelineItems.length - 1}
+                stepStatus={processStepStatus}
+                tooltipContent={stepDetail}
+                timelinePosition={getTimelinePosition(
+                    index,
+                    indexOfCurrentStep,
+                )}
+                onClick={id ? () => onStepClick(timelineItem) : undefined}
+            >
+                {value}
+            </WfoTimelineStep>
+        );
+    };
+
+    return (
+        <div css={[timelinePanelStyle, useEuiScrollBar()]}>
+            {timelineItems.map(mapTimelineItemToStep)}
+        </div>
+    );
+};

package/src/components/WfoTimeline/WfoTimelineStep.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react';
+
+import { EuiToolTip } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../hooks';
+import { StepStatus } from '../../types';
+import { TimelinePosition } from './WfoTimeline';
+import { getStyles } from './styles';
+
+export type WfoTimelineStepProps = {
+    stepStatus: StepStatus;
+    timelinePosition: TimelinePosition;
+    tooltipContent?: string | ReactNode;
+    isFirstStep?: boolean;
+    isLastStep?: boolean;
+    children?: ReactNode;
+    onClick?: () => void;
+};
+
+export const WfoTimelineStep = ({
+    stepStatus,
+    timelinePosition,
+    tooltipContent,
+    isFirstStep = false,
+    isLastStep = false,
+    children,
+    onClick,
+}: WfoTimelineStepProps) => {
+    const { theme } = useOrchestratorTheme();
+    const {
+        stepStyle,
+        clickableStyle,
+        notClickableStyle,
+        getStepLineStyle,
+        getStepOuterCircleStyle,
+        getStepInnerCircleStyle,
+    } = getStyles(theme);
+
+    return (
+        <button
+            css={[
+                stepStyle,
+                onClick ? clickableStyle : notClickableStyle,
+                getStepLineStyle(timelinePosition, isFirstStep, isLastStep),
+            ]}
+            onClick={() => onClick && onClick()}
+        >
+            <EuiToolTip position="top" content={tooltipContent}>
+                <div css={getStepOuterCircleStyle(!!children)}>
+                    <div css={getStepInnerCircleStyle(stepStatus, !!children)}>
+                        {children}
+                    </div>
+                </div>
+            </EuiToolTip>
+        </button>
+    );
+};

package/src/components/WfoTimeline/index.ts

@@ -0,0 +1 @@
+export * from './WfoTimeline';

package/src/components/WfoTimeline/mapProcessStepStatusToEuiStepStatus.ts

@@ -0,0 +1,23 @@
+import { EuiStepStatus } from '@elastic/eui/src/components/steps/step_number';
+
+import { StepStatus } from '../../types';
+
+export const mapProcessStepStatusToEuiStepStatus = (
+    processStepStatus: StepStatus,
+): EuiStepStatus => {
+    switch (processStepStatus) {
+        case StepStatus.SUCCESS:
+        case StepStatus.SKIPPED:
+        case StepStatus.COMPLETE:
+            return 'complete';
+        case StepStatus.FAILED:
+            return 'danger';
+        case StepStatus.RUNNING:
+            return 'loading';
+        case StepStatus.SUSPEND:
+            return 'warning';
+        case StepStatus.PENDING:
+        default:
+            return 'incomplete';
+    }
+};

package/src/components/WfoTimeline/styles.ts

@@ -0,0 +1,165 @@
+import { makeHighContrastColor } from '@elastic/eui';
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+import { StepStatus } from '../../types';
+import { TimelinePosition } from './WfoTimeline';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const emptyStepOuterDiameter = theme.base;
+    const emptyStepInnerDiameter = theme.base / 2;
+    const stepWithValueOuterDiameter = theme.base * 1.5;
+    const stepWithValueInnerDiameter = theme.base;
+    const minimalLineLengthBetweenSteps = theme.base / 2;
+
+    const getColorForStepStatus = (processStepStatus: StepStatus) => {
+        switch (processStepStatus) {
+            case StepStatus.SUSPEND:
+                return theme.colors.warning;
+            case StepStatus.FAILED:
+                return theme.colors.danger;
+            case StepStatus.SUCCESS:
+            case StepStatus.SKIPPED:
+            case StepStatus.COMPLETE:
+                return theme.colors.primary;
+            case StepStatus.RUNNING:
+            case StepStatus.PENDING:
+            default:
+                return theme.colors.mediumShade;
+        }
+    };
+
+    const timelinePanelStyle = css({
+        backgroundColor: theme.colors.body,
+        borderRadius: theme.border.radius.medium,
+        overflow: 'auto',
+        scrollbarWidth: 'auto',
+        paddingTop: theme.font.baseline * 2,
+        paddingBottom: theme.font.baseline * 2,
+        paddingLeft: theme.font.baseline * 4,
+        paddingRight: theme.font.baseline * 4,
+        display: 'flex',
+
+        '& > button': {
+            flexGrow: 2,
+        },
+        '& > button:first-child, & > button:last-child': {
+            flexGrow: 1,
+        },
+    });
+
+    const getHorizontalLineStyle = (color: string) =>
+        css({
+            content: '""',
+            height: theme.border.width.thick,
+            backgroundColor: color,
+            flexGrow: 1,
+            minWidth: minimalLineLengthBetweenSteps,
+        });
+
+    const getStepLineStyle = (
+        timelinePosition: TimelinePosition,
+        isFirstStep: boolean,
+        isLastStep: boolean,
+    ) => {
+        const getBeforeLineColor = (timelinePosition: TimelinePosition) => {
+            switch (timelinePosition) {
+                case TimelinePosition.PAST:
+                case TimelinePosition.CURRENT:
+                    return theme.colors.primary;
+                case TimelinePosition.FUTURE:
+                default:
+                    return theme.colors.lightShade;
+            }
+        };
+
+        const getAfterLineColor = (timelinePosition: TimelinePosition) => {
+            switch (timelinePosition) {
+                case TimelinePosition.PAST:
+                    return theme.colors.primary;
+                case TimelinePosition.CURRENT:
+                case TimelinePosition.FUTURE:
+                default:
+                    return theme.colors.lightShade;
+            }
+        };
+
+        return css([
+            !isFirstStep && {
+                '::before': {
+                    ...getHorizontalLineStyle(
+                        getBeforeLineColor(timelinePosition),
+                    ),
+                },
+            },
+            !isLastStep && {
+                '::after': {
+                    ...getHorizontalLineStyle(
+                        getAfterLineColor(timelinePosition),
+                    ),
+                },
+            },
+        ]);
+    };
+
+    const getStepOuterCircleStyle = (hasContent: boolean) =>
+        css({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '50%',
+            backgroundColor: theme.colors.emptyShade,
+            height: hasContent
+                ? stepWithValueOuterDiameter
+                : emptyStepOuterDiameter,
+            width: hasContent
+                ? stepWithValueOuterDiameter
+                : emptyStepOuterDiameter,
+        });
+
+    const getStepInnerCircleStyle = (
+        stepStatus: StepStatus,
+        hasContent: boolean,
+    ) => {
+        const diameter = hasContent
+            ? stepWithValueInnerDiameter
+            : emptyStepInnerDiameter;
+
+        return css({
+            borderRadius: '50%',
+            backgroundColor: getColorForStepStatus(stepStatus),
+            height: diameter,
+            width: diameter,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: makeHighContrastColor(theme.colors.text)(
+                getColorForStepStatus(stepStatus),
+            ),
+        });
+    };
+
+    const stepStyle = css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    });
+
+    const clickableStyle = css({
+        cursor: 'pointer',
+    });
+
+    const notClickableStyle = css({
+        cursor: 'auto',
+    });
+
+    return {
+        timelinePanelStyle,
+        stepStyle,
+        clickableStyle,
+        notClickableStyle,
+        getStepLineStyle,
+        getStepOuterCircleStyle,
+        getStepInnerCircleStyle,
+    };
+};

package/src/components/WfoTimeline/timelineUtils.ts

@@ -0,0 +1,14 @@
+import { TimelinePosition } from './WfoTimeline';
+
+export const getTimelinePosition = (
+    index: number,
+    indexOfCurrentStep: number,
+) => {
+    if (index === indexOfCurrentStep) {
+        return TimelinePosition.CURRENT;
+    }
+
+    return index < indexOfCurrentStep
+        ? TimelinePosition.PAST
+        : TimelinePosition.FUTURE;
+};

package/src/components/WfoToastsList/WfoToastsList.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+import { EuiGlobalToastList } from '@elastic/eui';
+import type { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+
+import { ToastContext } from '../../contexts';
+
+export const ToastsList = () => {
+    const toastContext = useContext(ToastContext);
+
+    return (
+        toastContext.toasts && (
+            <EuiGlobalToastList
+                toasts={toastContext.toasts}
+                dismissToast={(toast: Toast) =>
+                    toastContext.removeToast(toast.id)
+                }
+                toastLifeTimeMs={5000}
+            />
+        )
+    );
+};

package/src/components/WfoToastsList/index.ts

@@ -0,0 +1 @@
+export * from './WfoToastsList';

package/src/components/WfoTree/WfoTree.tsx

@@ -0,0 +1,27 @@
+import React, { FC, useEffect } from 'react';
+
+import { TreeContext, TreeContextType } from '../../contexts';
+import { TreeBlock } from '../../types';
+import { WfoTreeBranch } from './WfoTreeBranch';
+
+type WfoTreeProps = {
+    data: TreeBlock[];
+    depthList: number[];
+};
+
+export const WfoTree: FC<WfoTreeProps> = ({ data, depthList }) => {
+    const { setDepths } = React.useContext(TreeContext) as TreeContextType;
+
+    useEffect(() => {
+        setDepths(depthList);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setDepths, TreeContext]);
+
+    return (
+        <div style={{ width: '500px' }}>
+            {data.map((item) => (
+                <WfoTreeBranch key={item.id} item={item} level={0} />
+            ))}
+        </div>
+    );
+};

package/src/components/{WFOTree/WFOTreeBranch.tsx → WfoTree/WfoTreeBranch.tsx}

@@ -1,16 +1,17 @@
 import React, { FC } from 'react';
+
 import { EuiListGroup } from '@elastic/eui';
 
-import { WFOTreeNode } from './WFOTreeNode';
+import { TreeContext, TreeContextType } from '../../contexts';
 import { TreeBlock } from '../../types';
-import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
+import { WfoTreeNode } from './WfoTreeNode';
 
-type WFOTreeBranchProps = {
+type WfoTreeBranchProps = {
     item: TreeBlock;
     level: number;
 };
 
-export const WFOTreeBranch: FC<WFOTreeBranchProps> = ({ item, level }) => {
+export const WfoTreeBranch: FC<WfoTreeBranchProps> = ({ item, level }) => {
     const { expandedIds } = React.useContext(TreeContext) as TreeContextType;
     const selected = expandedIds.includes(item.id);
 
@@ -21,7 +22,7 @@ export const WFOTreeBranch: FC<WFOTreeBranchProps> = ({ item, level }) => {
             const newLevel = level + 1;
 
             return item.children.map((child) => (
-                <WFOTreeBranch key={child.id} item={child} level={newLevel} />
+                <WfoTreeBranch key={child.id} item={child} level={newLevel} />
             ));
         }
 
@@ -31,7 +32,7 @@ export const WFOTreeBranch: FC<WFOTreeBranchProps> = ({ item, level }) => {
     return (
         <>
             <EuiListGroup flush={true} color="primary" maxWidth={455}>
-                <WFOTreeNode
+                <WfoTreeNode
                     item={item}
                     hasChildren={hasChildren}
                     level={level}

package/src/components/{WFOTree/WFOTreeNode.tsx → WfoTree/WfoTreeNode.tsx}

@@ -1,34 +1,46 @@
 import React, { FC } from 'react';
+
 import { useTranslations } from 'next-intl';
+
 import {
     EuiFlexGroup,
     EuiFlexItem,
-    EuiToken,
     EuiIcon,
     EuiListGroupItem,
+    EuiToken,
 } from '@elastic/eui';
-import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
+
+import { TreeContext, TreeContextType } from '../../contexts';
+import { useOrchestratorTheme } from '../../hooks';
+import { getStyles } from './styles';
 
 type Item = {
     id: number;
     icon: string;
-    label: string;
+    label: string | number | boolean;
 };
 
-type WFOTreeNodeProps = {
+type WfoTreeNodeProps = {
     item: Item;
     hasChildren: boolean;
     level: number;
 };
 
-export const WFOTreeNode: FC<WFOTreeNodeProps> = ({
+export const WfoTreeNode: FC<WfoTreeNodeProps> = ({
     item,
     hasChildren,
     level,
 }) => {
+    const { theme } = useOrchestratorTheme();
+    const { expandIconContainerStyle, treeContainerStyle } = getStyles(theme);
     const t = useTranslations('common');
-    const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } =
-        React.useContext(TreeContext) as TreeContextType;
+    const {
+        expandedIds,
+        collapseNode,
+        expandNode,
+        selectedIds,
+        toggleSelectedId,
+    } = React.useContext(TreeContext) as TreeContextType;
     const expanded = expandedIds.includes(item.id);
     const selected = selectedIds.includes(item.id);
 
@@ -38,16 +50,19 @@ export const WFOTreeNode: FC<WFOTreeNodeProps> = ({
     }
 
     return (
-        <div style={{ paddingLeft: `${level * 16}px` }}>
+        <div style={{ paddingLeft: `${level * parseInt(theme.size.m)}px` }}>
             <EuiFlexGroup>
-                <EuiFlexItem
-                    grow={false}
-                    style={{ width: 0, marginTop: 8, marginRight: -8 }}
-                >
+                <EuiFlexItem grow={false} css={treeContainerStyle}>
                     {hasChildren ? (
                         <EuiIcon
                             type={expandIcon}
-                            onClick={() => toggleExpandedId(item.id)}
+                            css={expandIconContainerStyle}
+                            cursor={'hand'}
+                            onClick={() =>
+                                expanded
+                                    ? collapseNode(item.id)
+                                    : expandNode(item.id)
+                            }
                         />
                     ) : (
                         <EuiToken iconType={item.icon} />

package/src/components/WfoTree/index.ts

@@ -0,0 +1,4 @@
+export * from './WfoTree';
+export * from './WfoTreeBranch';
+export * from './WfoTreeNode';
+export * from './treeUtils';

package/src/components/WfoTree/styles.ts

@@ -0,0 +1,18 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const expandIconContainerStyle = {
+        cursor: 'pointer',
+    };
+
+    const treeContainerStyle = {
+        width: 0,
+        marginTop: theme.size.s,
+        marginRight: `-${theme.size.s}`,
+    };
+
+    return {
+        expandIconContainerStyle: expandIconContainerStyle,
+        treeContainerStyle: treeContainerStyle,
+    };
+};

package/src/components/WfoTree/treeUtils.spec.ts

@@ -0,0 +1,100 @@
+import { FieldValue, TreeBlock } from '../../types';
+import { getWfoTreeNodeDepth } from './treeUtils';
+
+describe('getWfoTreeNodeDepth', () => {
+    const field: FieldValue = { field: 'test', value: 'test' };
+    const sampleTree: TreeBlock = {
+        id: 1,
+        ownerSubscriptionId: 'subscription-1',
+        subscriptionInstanceId: 'subscription-1',
+        parent: null,
+        icon: 'folder',
+        label: 'Root',
+        callback: jest.fn(),
+        productBlockInstanceValues: [field],
+        inUseByRelations: [],
+        children: [
+            {
+                id: 2,
+                ownerSubscriptionId: 'subscription-2',
+                subscriptionInstanceId: 'subscription-2',
+                parent: 1,
+                icon: 'file',
+                label: 'File 1',
+                callback: jest.fn(),
+                productBlockInstanceValues: [field],
+                inUseByRelations: [],
+                children: [],
+            },
+            {
+                id: 3,
+                ownerSubscriptionId: 'subscription-3',
+                subscriptionInstanceId: 'subscription-3',
+                parent: 1,
+                icon: 'file',
+                label: 'File 2',
+                callback: jest.fn(),
+                productBlockInstanceValues: [field],
+                inUseByRelations: [],
+                children: [
+                    {
+                        id: 4,
+                        ownerSubscriptionId: 'subscription-4',
+                        subscriptionInstanceId: 'subscription-4',
+                        parent: 3,
+                        icon: 'file',
+                        label: 'File 2.1',
+                        callback: jest.fn(),
+                        productBlockInstanceValues: [field],
+                        inUseByRelations: [],
+                        children: [],
+                    },
+                ],
+            },
+        ],
+    };
+
+    const idToNodeMap = {
+        1: sampleTree,
+        2: sampleTree.children[0],
+        3: sampleTree.children[1],
+        4: sampleTree.children[1].children[0],
+    };
+
+    it('should return 0 for the root node', () => {
+        const rootDepth = getWfoTreeNodeDepth(sampleTree, idToNodeMap);
+        expect(rootDepth).toBe(0);
+    });
+
+    it('should return the correct depth for a child node', () => {
+        const depth2 = getWfoTreeNodeDepth(sampleTree.children[0], idToNodeMap);
+        const depth3 = getWfoTreeNodeDepth(sampleTree.children[1], idToNodeMap);
+        const depth4 = getWfoTreeNodeDepth(
+            sampleTree.children[1].children[0],
+            idToNodeMap,
+        );
+
+        expect(depth2).toBe(1);
+        expect(depth3).toBe(1);
+        expect(depth4).toBe(2);
+    });
+
+    it('should throw an error if the parent node is not found', () => {
+        const invalidNode = {
+            id: 1,
+            ownerSubscriptionId: 'subscription-1',
+            subscriptionInstanceId: 'subscription-1',
+            parent: 99, // Parent ID that does not exist
+            icon: 'file',
+            label: 'Invalid Node',
+            callback: jest.fn(),
+            productBlockInstanceValues: [field],
+            inUseByRelations: [],
+            children: [],
+        };
+
+        expect(() =>
+            getWfoTreeNodeDepth(invalidNode, idToNodeMap),
+        ).toThrowError('Parent node for 1 not found.');
+    });
+});