@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.0

package/src/components/WfoTimeline/styles.ts

@@ -6,181 +6,164 @@ import { StepStatus } from '@/types';
 import { TimelinePosition } from './WfoTimeline';
 
 export const getTimelineStyles = ({ theme }: WfoThemeHelpers) => {
-    const TIMELINE_HEIGHT = theme.base * 2.5;
-    const TIMELINE_OUTLINE_WIDTH = theme.base * 0.75;
-
-    const timelineHeightPx = `${TIMELINE_HEIGHT}px`;
-    const timelineOutlineWidthPx = `${TIMELINE_OUTLINE_WIDTH}px`;
-    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.textDisabled;
-        }
-    };
-
-    const getTextColorForStepStatusIcon = (processStepStatus: StepStatus) => {
-        switch (processStepStatus) {
-            case StepStatus.SUSPEND:
-                return theme.colors.ink;
-            default:
-                return theme.colors.ghost;
-        }
-    };
-
-    const timelinePanelStyle = css({
-        backgroundColor: theme.colors.backgroundBaseSubdued,
-        borderRadius: theme.border.radius.medium,
-        outline: `${timelineOutlineWidthPx} solid ${theme.colors.backgroundBaseNeutral}`,
-        height: timelineHeightPx,
-        marginTop: timelineOutlineWidthPx,
-        marginBottom: timelineOutlineWidthPx,
-        overflow: 'auto',
-        scrollbarWidth: 'auto',
-        paddingTop: theme.font.baseline * 2,
-        paddingBottom: theme.font.baseline * 2,
-        paddingLeft: theme.font.baseline * 4,
-        paddingRight: theme.font.baseline * 4,
-        position: 'sticky',
-        top: timelineOutlineWidthPx,
-        zIndex: 2, // Some EUI components have a zIndex
-        display: 'flex',
-
-        '& > button': {
-            flexGrow: 2,
-        },
-        '& > button:first-child, & > button:last-child': {
-            flexGrow: 1,
-        },
+  const TIMELINE_HEIGHT = theme.base * 2.5;
+  const TIMELINE_OUTLINE_WIDTH = theme.base * 0.75;
+
+  const timelineHeightPx = `${TIMELINE_HEIGHT}px`;
+  const timelineOutlineWidthPx = `${TIMELINE_OUTLINE_WIDTH}px`;
+  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.textDisabled;
+    }
+  };
+
+  const getTextColorForStepStatusIcon = (processStepStatus: StepStatus) => {
+    switch (processStepStatus) {
+      case StepStatus.SUSPEND:
+        return theme.colors.textInk;
+      default:
+        return theme.colors.textGhost;
+    }
+  };
+
+  const timelinePanelStyle = css({
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+    borderRadius: theme.border.radius.medium,
+    outline: `${timelineOutlineWidthPx} solid ${theme.colors.backgroundBaseNeutral}`,
+    height: timelineHeightPx,
+    marginTop: timelineOutlineWidthPx,
+    marginBottom: timelineOutlineWidthPx,
+    overflow: 'auto',
+    scrollbarWidth: 'auto',
+    paddingTop: theme.font.baseline * 2,
+    paddingBottom: theme.font.baseline * 2,
+    paddingLeft: theme.font.baseline * 4,
+    paddingRight: theme.font.baseline * 4,
+    position: 'sticky',
+    top: timelineOutlineWidthPx,
+    zIndex: 2, // Some EUI components have a zIndex
+    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 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.borderBaseSubdued;
-            }
-        };
-
-        const getAfterLineColor = (timelinePosition: TimelinePosition) => {
-            switch (timelinePosition) {
-                case TimelinePosition.PAST:
-                    return theme.colors.primary;
-                case TimelinePosition.CURRENT:
-                case TimelinePosition.FUTURE:
-                default:
-                    return theme.colors.borderBaseSubdued;
-            }
-        };
-
-        return css([
-            !isFirstStep && {
-                '::before': {
-                    ...getHorizontalLineStyle(
-                        getBeforeLineColor(timelinePosition),
-                    ),
-                },
-            },
-            !isLastStep && {
-                '::after': {
-                    ...getHorizontalLineStyle(
-                        getAfterLineColor(timelinePosition),
-                    ),
-                },
-            },
-        ]);
+  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.borderBaseSubdued;
+      }
     };
 
-    const getStepOuterCircleStyle = (hasContent: boolean) =>
-        css({
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: '50%',
-            backgroundColor: theme.colors.backgroundBaseNeutral,
-            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: getTextColorForStepStatusIcon(stepStatus),
-        });
+    const getAfterLineColor = (timelinePosition: TimelinePosition) => {
+      switch (timelinePosition) {
+        case TimelinePosition.PAST:
+          return theme.colors.primary;
+        case TimelinePosition.CURRENT:
+        case TimelinePosition.FUTURE:
+        default:
+          return theme.colors.borderBaseSubdued;
+      }
     };
 
-    const stepStyle = css({
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-    });
-
-    const clickableStyle = css({
-        cursor: 'pointer',
+    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.backgroundBaseNeutral,
+      height: hasContent ? stepWithValueOuterDiameter : emptyStepOuterDiameter,
+      width: hasContent ? stepWithValueOuterDiameter : emptyStepOuterDiameter,
     });
 
-    const notClickableStyle = css({
-        cursor: 'auto',
+  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: getTextColorForStepStatusIcon(stepStatus),
     });
-
-    return {
-        TIMELINE_HEIGHT,
-        TIMELINE_OUTLINE_WIDTH,
-        timelinePanelStyle,
-        stepStyle,
-        clickableStyle,
-        notClickableStyle,
-        getStepLineStyle,
-        getStepOuterCircleStyle,
-        getStepInnerCircleStyle,
-    };
+  };
+
+  const stepStyle = css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  });
+
+  const clickableStyle = css({
+    cursor: 'pointer',
+  });
+
+  const notClickableStyle = css({
+    cursor: 'auto',
+  });
+
+  return {
+    TIMELINE_HEIGHT,
+    TIMELINE_OUTLINE_WIDTH,
+    timelinePanelStyle,
+    stepStyle,
+    clickableStyle,
+    notClickableStyle,
+    getStepLineStyle,
+    getStepOuterCircleStyle,
+    getStepInnerCircleStyle,
+  };
 };

package/src/components/WfoTimeline/timelineUtils.ts

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

package/src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx

@@ -6,21 +6,18 @@ import { WfoWebsocketStatusBadge } from '@/components';
 import { useGetOrchestratorConfig } from '@/hooks';
 
 interface WfoTitleWithWebsocketBadgeProps {
-    title: string;
+  title: string;
 }
 
-export const WfoTitleWithWebsocketBadge = ({
-    title,
-}: WfoTitleWithWebsocketBadgeProps) => {
-    const { useWebSockets } = useGetOrchestratorConfig();
+export const WfoTitleWithWebsocketBadge = ({ title }: WfoTitleWithWebsocketBadgeProps) => {
+  const { useWebSockets } = useGetOrchestratorConfig();
 
-    const pageTitle = useWebSockets ? (
-        <>
-            {title} <WfoWebsocketStatusBadge />
-        </>
-    ) : (
-        title
-    );
+  const pageTitle =
+    useWebSockets ?
+      <>
+        {title} <WfoWebsocketStatusBadge />
+      </>
+    : title;
 
-    return <EuiPageHeader pageTitle={pageTitle} />;
+  return <EuiPageHeader pageTitle={pageTitle} />;
 };

package/src/components/WfoToastsList/WfoToastsList.tsx

@@ -6,17 +6,15 @@ import { useAppDispatch, useAppSelector } from '@/rtk/hooks';
 import { removeToastMessage } from '@/rtk/slices';
 
 export const WfoToastsList = () => {
-    const toastMessages = useAppSelector(
-        (state) => state.toastMessages.messages,
-    );
-    const dispatch = useAppDispatch();
-    return (
-        toastMessages && (
-            <EuiGlobalToastList
-                toasts={toastMessages}
-                dismissToast={(toast) => dispatch(removeToastMessage(toast.id))}
-                toastLifeTimeMs={5000}
-            />
-        )
-    );
+  const toastMessages = useAppSelector((state) => state.toastMessages.messages);
+  const dispatch = useAppDispatch();
+  return (
+    toastMessages && (
+      <EuiGlobalToastList
+        toasts={toastMessages}
+        dismissToast={(toast) => dispatch(removeToastMessage(toast.id))}
+        toastLifeTimeMs={5000}
+      />
+    )
+  );
 };

package/src/components/WfoTree/WfoTree.tsx

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

package/src/components/WfoTree/WfoTreeBranch.tsx

@@ -10,46 +10,34 @@ import { TreeBlock } from '@/types';
 import { WfoTreeNode } from './WfoTreeNode';
 
 type WfoTreeBranchProps = {
-    item: TreeBlock;
-    level: number;
+  item: TreeBlock;
+  level: number;
 };
 
 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;
-
-    const renderBranches = () => {
-        if (hasChildren) {
-            const newLevel = level + 1;
-
-            return item.children.map((child) => (
-                <WfoTreeBranch key={child.id} item={child} level={newLevel} />
-            ));
-        }
-
-        return null;
-    };
-
-    return (
-        <>
-            <EuiListGroup
-                flush={true}
-                color="primary"
-                maxWidth={productBlockTreeWidth}
-            >
-                <WfoTreeNode
-                    item={item}
-                    hasChildren={hasChildren}
-                    level={level}
-                />
-            </EuiListGroup>
-
-            {selected && renderBranches()}
-        </>
-    );
+  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;
+
+  const renderBranches = () => {
+    if (hasChildren) {
+      const newLevel = level + 1;
+
+      return item.children.map((child) => <WfoTreeBranch key={child.id} item={child} level={newLevel} />);
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      <EuiListGroup flush={true} color="primary" maxWidth={productBlockTreeWidth}>
+        <WfoTreeNode item={item} hasChildren={hasChildren} level={level} />
+      </EuiListGroup>
+
+      {selected && renderBranches()}
+    </>
+  );
 };

package/src/components/WfoTree/WfoTreeNode.tsx

@@ -10,49 +10,37 @@ import { TreeBlock } from '@/types';
 import { getStyles } from './styles';
 
 type WfoTreeNodeProps = {
-    item: TreeBlock;
-    hasChildren: boolean;
-    level: number;
+  item: TreeBlock;
+  hasChildren: boolean;
+  level: number;
 };
 
-export const WfoTreeNode: FC<WfoTreeNodeProps> = ({
-    item,
-    hasChildren,
-    level,
-}) => {
-    const { theme } = useOrchestratorTheme();
-    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);
+export const WfoTreeNode: FC<WfoTreeNodeProps> = ({ item, hasChildren, level }) => {
+  const { theme } = useOrchestratorTheme();
+  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);
 
-    const expandIcon = expanded ? 'arrowDown' : 'arrowRight';
+  const expandIcon = expanded ? 'arrowDown' : 'arrowRight';
 
-    return (
-        <div style={{ paddingLeft: `${level * parseInt(theme.size.m)}px` }}>
-            <EuiFlexGroup>
-                <EuiFlexItem grow={false} css={treeContainerStyle}>
-                    {hasChildren ? (
-                        <EuiIcon
-                            type={expandIcon}
-                            css={expandIconContainerStyle}
-                            cursor={'hand'}
-                            onClick={() =>
-                                expanded
-                                    ? collapseNode(item.id)
-                                    : expandNode(item.id)
-                            }
-                        />
-                    ) : (
-                        <EuiToken iconType={item.icon} />
-                    )}
-                </EuiFlexItem>
-                <EuiFlexItem>
-                    <WfoTreeNodeListItem item={item} selected={selected} />
-                </EuiFlexItem>
-            </EuiFlexGroup>
-        </div>
-    );
+  return (
+    <div style={{ paddingLeft: `${level * parseInt(theme.size.m)}px` }}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false} css={treeContainerStyle}>
+          {hasChildren ?
+            <EuiIcon
+              type={expandIcon}
+              css={expandIconContainerStyle}
+              cursor={'hand'}
+              onClick={() => (expanded ? collapseNode(item.id) : expandNode(item.id))}
+            />
+          : <EuiToken iconType={item.icon} />}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <WfoTreeNodeListItem item={item} selected={selected} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
 };