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

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -11,71 +11,55 @@ import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
 import { FormUserPermissions, InputForm } from '@/types';
 
 interface WfoStepFormProps {
-    userInputForm: InputForm;
-    isTask: boolean;
-    processId: string;
-    userPermissions: FormUserPermissions;
+  userInputForm: InputForm;
+  isTask: boolean;
+  processId: string;
+  userPermissions: FormUserPermissions;
 }
 
-export const WfoStepForm = ({
-    userInputForm,
-    isTask,
-    processId,
-    userPermissions,
-}: WfoStepFormProps) => {
-    const { theme } = useOrchestratorTheme();
+export const WfoStepForm = ({ userInputForm, isTask, processId, userPermissions }: WfoStepFormProps) => {
+  const { theme } = useOrchestratorTheme();
 
-    const [resumeProcess] = useResumeProcessMutation();
+  const [resumeProcess] = useResumeProcessMutation();
 
-    const getInitialStepInput = useMemo(() => userInputForm, [userInputForm]);
+  const getInitialStepInput = useMemo(() => userInputForm, [userInputForm]);
 
-    const getStepFormProvider = useCallback(
-        (): PydanticFormApiProvider =>
-            async ({ requestBody = [] }) => {
-                if (requestBody.length === 0) {
-                    return {
-                        form: getInitialStepInput,
-                        meta: { hasNext: false },
-                    };
-                }
+  const getStepFormProvider = useCallback(
+    (): PydanticFormApiProvider =>
+      async ({ requestBody = [] }) => {
+        if (requestBody.length === 0) {
+          return {
+            form: getInitialStepInput,
+            meta: { hasNext: false },
+          };
+        }
 
-                return resumeProcess({ processId, userInputs: requestBody })
-                    .unwrap()
-                    .catch((error) => {
-                        if (error.status === HttpStatus.BadGateway) {
-                            return {};
-                        } else if (
-                            error.status === HttpStatus.FormNotComplete
-                        ) {
-                            return error.data;
-                        } else if (error.status === HttpStatus.BadRequest) {
-                            return {
-                                ...error.data,
-                                status: error.status,
-                            };
-                        }
-                        throw error;
-                    });
-            },
-        [getInitialStepInput, processId, resumeProcess],
-    );
+        return resumeProcess({ processId, userInputs: requestBody })
+          .unwrap()
+          .catch((error) => {
+            if (error.status === HttpStatus.BadGateway) {
+              return {};
+            } else if (error.status === HttpStatus.FormNotComplete) {
+              return error.data;
+            } else if (error.status === HttpStatus.BadRequest) {
+              return {
+                ...error.data,
+                status: error.status,
+              };
+            }
+            throw error;
+          });
+      },
+    [getInitialStepInput, processId, resumeProcess],
+  );
 
-    const Footer = () => (
-        <StepFormFooter
-            isTask={isTask}
-            isResumeAllowed={userPermissions.resumeAllowed}
-        />
-    );
+  const Footer = () => <StepFormFooter isTask={isTask} isResumeAllowed={userPermissions.resumeAllowed} />;
 
-    const config = useGetPydanticFormsConfig(getStepFormProvider, Footer);
+  const config = useGetPydanticFormsConfig(getStepFormProvider, Footer);
 
-    return (
-        <EuiFlexItem css={{ margin: theme.size.m }}>
-            <PydanticForm
-                formKey={processId}
-                formId="wfo-step-form"
-                config={config}
-            />
-        </EuiFlexItem>
-    );
+  return (
+    <EuiFlexItem css={{ margin: theme.size.m }}>
+      <PydanticForm formKey={processId} formId="wfo-step-form" config={config} />
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormFooter.tsx

@@ -8,51 +8,40 @@ import { RenderFormErrors } from '@/components/WfoPydanticForm/RenderFormErrors'
 import { WfoPlayCircle } from '@/icons';
 
 interface StepFormFooterProps {
-    isTask: boolean;
-    isResumeAllowed?: boolean;
+  isTask: boolean;
+  isResumeAllowed?: boolean;
 }
 
-export const StepFormFooter = ({
-    isTask,
-    isResumeAllowed,
-}: StepFormFooterProps) => {
-    const t = useTranslations('pydanticForms.userInputForm');
-
-    const SubmitButton = () => {
-        const submitButtonLabel = isTask
-            ? t('resumeTask')
-            : t('resumeWorkflow');
-        return (
-            <EuiButton
-                data-testid="button-submit-form-submit"
-                id="button-submit-form-submit"
-                tabIndex={0}
-                fill
-                color="primary"
-                iconType={() => (
-                    <WfoPlayCircle
-                        color={'currentColor'}
-                        width="18"
-                        height="18"
-                    />
-                )}
-                iconSide="right"
-                type="submit"
-                aria-label={submitButtonLabel}
-                disabled={!isResumeAllowed}
-            >
-                {submitButtonLabel}
-            </EuiButton>
-        );
-    };
+export const StepFormFooter = ({ isTask, isResumeAllowed }: StepFormFooterProps) => {
+  const t = useTranslations('pydanticForms.userInputForm');
 
+  const SubmitButton = () => {
+    const submitButtonLabel = isTask ? t('resumeTask') : t('resumeWorkflow');
     return (
-        <div data-testid="pydantic-step-form-footer">
-            <RenderFormErrors />
-            <EuiHorizontalRule />
-            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                <SubmitButton />
-            </div>
-        </div>
+      <EuiButton
+        data-testid="button-submit-form-submit"
+        id="button-submit-form-submit"
+        tabIndex={0}
+        fill
+        color="primary"
+        iconType={() => <WfoPlayCircle color={'currentColor'} width="18" height="18" />}
+        iconSide="right"
+        type="submit"
+        aria-label={submitButtonLabel}
+        disabled={!isResumeAllowed}
+      >
+        {submitButtonLabel}
+      </EuiButton>
     );
+  };
+
+  return (
+    <div data-testid="pydantic-step-form-footer">
+      <RenderFormErrors />
+      <EuiHorizontalRule />
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <SubmitButton />
+      </div>
+    </div>
+  );
 };

package/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -10,121 +10,99 @@ import { getWorkflowStepsStyles } from '../styles';
 import { StepListItem } from './../WfoWorkflowStepList';
 
 export type WfoStepListRef = {
-    scrollToStep: (stepId: string) => void;
+  scrollToStep: (stepId: string) => void;
 };
 
 export type WfoStepListProps = {
-    stepListItems: StepListItem[];
-    showHiddenKeys: boolean;
-    onToggleExpandStepListItem: (stepListItem: StepListItem) => void;
-    onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
-    isTask: boolean;
-    processId: string;
-    userPermissions: FormUserPermissions;
+  stepListItems: StepListItem[];
+  showHiddenKeys: boolean;
+  onToggleExpandStepListItem: (stepListItem: StepListItem) => void;
+  onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
+  isTask: boolean;
+  processId: string;
+  userPermissions: FormUserPermissions;
 };
 
 export const WfoStepList = React.forwardRef(
-    (
-        {
-            stepListItems,
-            showHiddenKeys,
-            onToggleExpandStepListItem,
-            onTriggerExpandStepListItem,
-            isTask,
-            processId,
-            userPermissions,
-        }: WfoStepListProps,
-        reference: Ref<WfoStepListRef>,
-    ) => {
-        const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
-            getPageTemplateStyles,
-        );
-        const { TIMELINE_HEIGHT, TIMELINE_OUTLINE_WIDTH } =
-            useWithOrchestratorTheme(getTimelineStyles);
-        const { SPACE_BETWEEN_STEPS, stepSpacerStyle } =
-            useWithOrchestratorTheme(getWorkflowStepsStyles);
-        const scrollOffset =
-            NAVIGATION_HEIGHT +
-            TIMELINE_HEIGHT +
-            TIMELINE_OUTLINE_WIDTH +
-            SPACE_BETWEEN_STEPS;
+  (
+    {
+      stepListItems,
+      showHiddenKeys,
+      onToggleExpandStepListItem,
+      onTriggerExpandStepListItem,
+      isTask,
+      processId,
+      userPermissions,
+    }: WfoStepListProps,
+    reference: Ref<WfoStepListRef>,
+  ) => {
+    const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(getPageTemplateStyles);
+    const { TIMELINE_HEIGHT, TIMELINE_OUTLINE_WIDTH } = useWithOrchestratorTheme(getTimelineStyles);
+    const { SPACE_BETWEEN_STEPS, stepSpacerStyle } = useWithOrchestratorTheme(getWorkflowStepsStyles);
+    const scrollOffset = NAVIGATION_HEIGHT + TIMELINE_HEIGHT + TIMELINE_OUTLINE_WIDTH + SPACE_BETWEEN_STEPS;
 
-        const stepReferences = useRef(new Map<string, HTMLDivElement>());
+    const stepReferences = useRef(new Map<string, HTMLDivElement>());
 
-        const { contentRef } = useContentRef();
+    const { contentRef } = useContentRef();
 
-        useImperativeHandle(reference, () => ({
-            scrollToStep: async (stepId: string) => {
-                // Applied a promise construction to wait for the browser to expand the step before scrolling
-                try {
-                    await new Promise((resolve, reject) => {
-                        const foundStepListItem = stepListItems.find(
-                            (value) => value.step.stepId === stepId,
-                        );
+    useImperativeHandle(reference, () => ({
+      scrollToStep: async (stepId: string) => {
+        // Applied a promise construction to wait for the browser to expand the step before scrolling
+        try {
+          await new Promise((resolve, reject) => {
+            const foundStepListItem = stepListItems.find((value) => value.step.stepId === stepId);
 
-                        if (!foundStepListItem) {
-                            return reject(undefined);
-                        }
+            if (!foundStepListItem) {
+              return reject(undefined);
+            }
 
-                        return resolve(
-                            onTriggerExpandStepListItem(foundStepListItem),
-                        );
-                    });
+            return resolve(onTriggerExpandStepListItem(foundStepListItem));
+          });
 
-                    const targetRect = stepReferences.current
-                        .get(stepId)
-                        ?.getBoundingClientRect();
+          const targetRect = stepReferences.current.get(stepId)?.getBoundingClientRect();
 
-                    if (targetRect) {
-                        const { top } = targetRect;
-                        contentRef?.current?.scrollBy({
-                            top: top - scrollOffset,
-                            behavior: 'smooth',
-                        });
-                    }
-                } catch {
-                    console.error(
-                        'Error scrolling to step with stepId ',
-                        stepId,
-                    );
-                }
-            },
-        }));
+          if (targetRect) {
+            const { top } = targetRect;
+            contentRef?.current?.scrollBy({
+              top: top - scrollOffset,
+              behavior: 'smooth',
+            });
+          }
+        } catch {
+          console.error('Error scrolling to step with stepId ', stepId);
+        }
+      },
+    }));
 
-        const getReferenceCallbackForStepId =
-            (stepId: string) => (node: HTMLDivElement | null) => {
-                if (node) {
-                    stepReferences.current.set(stepId, node);
-                } else if (stepId && stepReferences.current.has(stepId)) {
-                    stepReferences.current.delete(stepId);
-                }
-            };
+    const getReferenceCallbackForStepId = (stepId: string) => (node: HTMLDivElement | null) => {
+      if (node) {
+        stepReferences.current.set(stepId, node);
+      } else if (stepId && stepReferences.current.has(stepId)) {
+        stepReferences.current.delete(stepId);
+      }
+    };
 
-        return (
-            <>
-                {stepListItems.map((stepListItem, index) => (
-                    <div key={`step-${index}`}>
-                        {index !== 0 && <div css={stepSpacerStyle} />}
-                        <WfoStep
-                            ref={getReferenceCallbackForStepId(
-                                stepListItem.step.stepId,
-                            )}
-                            onToggleStepDetail={() =>
-                                onToggleExpandStepListItem(stepListItem)
-                            }
-                            stepListItem={stepListItem}
-                            startedAt={stepListItem.step.started}
-                            completedAt={stepListItem.step.completed}
-                            showHiddenKeys={showHiddenKeys}
-                            isStartStep={index === 0}
-                            isTask={isTask}
-                            processId={processId}
-                            userPermissions={userPermissions}
-                        />
-                    </div>
-                ))}
-            </>
-        );
-    },
+    return (
+      <>
+        {stepListItems.map((stepListItem, index) => (
+          <div key={`step-${index}`}>
+            {index !== 0 && <div css={stepSpacerStyle} />}
+            <WfoStep
+              ref={getReferenceCallbackForStepId(stepListItem.step.stepId)}
+              onToggleStepDetail={() => onToggleExpandStepListItem(stepListItem)}
+              stepListItem={stepListItem}
+              startedAt={stepListItem.step.started}
+              completedAt={stepListItem.step.completed}
+              showHiddenKeys={showHiddenKeys}
+              isStartStep={index === 0}
+              isTask={isTask}
+              processId={processId}
+              userPermissions={userPermissions}
+            />
+          </div>
+        ))}
+      </>
+    );
+  },
 );
 WfoStepList.displayName = 'WfoStepList';

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.stories.tsx

@@ -3,14 +3,14 @@ import type { Meta } from '@storybook/react';
 import { WfoStepStatusIcon } from './WfoStepStatusIcon';
 
 const Story: Meta<typeof WfoStepStatusIcon> = {
-    component: WfoStepStatusIcon,
-    title: 'Steps/WfoStepStatusIcon',
+  component: WfoStepStatusIcon,
+  title: 'Steps/WfoStepStatusIcon',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        steps: 1,
-        status: 2,
-    },
+  args: {
+    steps: 1,
+    status: 2,
+  },
 };

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx

@@ -4,130 +4,91 @@ import { EuiFlexItem } from '@elastic/eui';
 
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
-    WfoCheckmarkCircleFill,
-    WfoCogFill,
-    WfoMinusCircleFill,
-    WfoPencilAlt,
-    WfoPlayFill,
-    WfoXCircleFill,
+  WfoCheckmarkCircleFill,
+  WfoCogFill,
+  WfoMinusCircleFill,
+  WfoPencilAlt,
+  WfoPlayFill,
+  WfoXCircleFill,
 } from '@/icons';
 import { StepStatus } from '@/types';
 
 import { getWorkflowStepsStyles } from '../styles';
 
 export interface WfoStepStatusIconProps {
-    stepStatus: StepStatus;
-    isStartStep?: boolean;
+  stepStatus: StepStatus;
+  isStartStep?: boolean;
 }
 
 interface IconProps {
-    stepStatus: StepStatus;
-    color: string;
-    isStartStep?: boolean;
+  stepStatus: StepStatus;
+  color: string;
+  isStartStep?: boolean;
 }
 
 const SubIcon = ({ stepStatus, color = '' }: IconProps) => {
-    switch (stepStatus) {
-        case StepStatus.SUSPEND:
-            return <WfoMinusCircleFill color={color} />;
-        case StepStatus.FAILED:
-            return <WfoXCircleFill color={color} />;
-        default:
-            return <WfoCheckmarkCircleFill color={color} />;
-    }
+  switch (stepStatus) {
+    case StepStatus.SUSPEND:
+      return <WfoMinusCircleFill color={color} />;
+    case StepStatus.FAILED:
+      return <WfoXCircleFill color={color} />;
+    default:
+      return <WfoCheckmarkCircleFill color={color} />;
+  }
 };
 
 const MainIcon = ({ stepStatus, color = '', isStartStep }: IconProps) => {
-    if (isStartStep) {
-        return <WfoPlayFill color={color} />;
-    }
+  if (isStartStep) {
+    return <WfoPlayFill color={color} />;
+  }
 
-    switch (stepStatus) {
-        case StepStatus.FORM:
-            return <WfoPencilAlt color={color} />;
-        default:
-            return <WfoCogFill color={color} width={16} height={16} />;
-    }
+  switch (stepStatus) {
+    case StepStatus.FORM:
+      return <WfoPencilAlt color={color} />;
+    default:
+      return <WfoCogFill color={color} width={16} height={16} />;
+  }
 };
 
-export const WfoStepStatusIcon = ({
-    stepStatus,
-    isStartStep = false,
-}: WfoStepStatusIconProps) => {
-    const { theme } = useOrchestratorTheme();
+export const WfoStepStatusIcon = ({ stepStatus, isStartStep = false }: WfoStepStatusIconProps) => {
+  const { theme } = useOrchestratorTheme();
 
-    const {
-        stepStateSuccessIconStyle,
-        stepStateSuspendIconStyle,
-        stepStatePendingIconStyle,
-        stepStateFailedIconStyle,
-    } = useWithOrchestratorTheme(getWorkflowStepsStyles);
+  const { stepStateSuccessIconStyle, stepStateSuspendIconStyle, stepStatePendingIconStyle, stepStateFailedIconStyle } =
+    useWithOrchestratorTheme(getWorkflowStepsStyles);
 
-    const [
-        stepStateStyle,
-        mainIconColor,
-        hasSubIcon = false,
-        subIconColor = '',
-    ] = (() => {
-        switch (stepStatus) {
-            case StepStatus.SUSPEND:
-                return [
-                    stepStateSuspendIconStyle,
-                    theme.colors.textWarning,
-                    true,
-                    theme.colors.textWarning,
-                ];
-            case StepStatus.PENDING:
-                return [
-                    stepStatePendingIconStyle,
-                    theme.colors.backgroundBaseAccent,
-                ];
-            case StepStatus.FAILED:
-                return [
-                    stepStateFailedIconStyle,
-                    theme.colors.textDanger,
-                    true,
-                    theme.colors.textDanger,
-                ];
-            case StepStatus.SKIPPED:
-                return [
-                    stepStateSuccessIconStyle,
-                    theme.colors.textPrimary,
-                    true,
-                    theme.colors.backgroundBaseAccent,
-                ];
-            case StepStatus.FORM:
-                return [stepStateSuccessIconStyle, theme.colors.link];
+  const [stepStateStyle, mainIconColor, hasSubIcon = false, subIconColor = ''] = (() => {
+    switch (stepStatus) {
+      case StepStatus.SUSPEND:
+        return [stepStateSuspendIconStyle, theme.colors.textWarning, true, theme.colors.textWarning];
+      case StepStatus.PENDING:
+        return [stepStatePendingIconStyle, theme.colors.backgroundBaseAccent];
+      case StepStatus.FAILED:
+        return [stepStateFailedIconStyle, theme.colors.textDanger, true, theme.colors.textDanger];
+      case StepStatus.SKIPPED:
+        return [stepStateSuccessIconStyle, theme.colors.textPrimary, true, theme.colors.backgroundBaseAccent];
+      case StepStatus.FORM:
+        return [stepStateSuccessIconStyle, theme.colors.link];
 
-            default:
-                return [
-                    stepStateSuccessIconStyle,
-                    theme.colors.textPrimary,
-                    true,
-                    theme.colors.textSuccess,
-                ];
-        }
-    })();
+      default:
+        return [stepStateSuccessIconStyle, theme.colors.textPrimary, true, theme.colors.textSuccess];
+    }
+  })();
 
-    return (
-        <EuiFlexItem css={{ flexDirection: 'row' }} grow={0}>
-            <div css={stepStateStyle}>
-                <MainIcon
-                    color={mainIconColor}
-                    stepStatus={stepStatus}
-                    isStartStep={isStartStep}
-                />
-            </div>
+  return (
+    <EuiFlexItem css={{ flexDirection: 'row' }} grow={0}>
+      <div css={stepStateStyle}>
+        <MainIcon color={mainIconColor} stepStatus={stepStatus} isStartStep={isStartStep} />
+      </div>
 
-            <div
-                css={{
-                    transform: 'translate(-16px, -8px)',
-                    width: `${theme.base}`,
-                    visibility: hasSubIcon ? 'visible' : 'hidden',
-                }}
-            >
-                <SubIcon color={subIconColor} stepStatus={stepStatus} />
-            </div>
-        </EuiFlexItem>
-    );
+      <div
+        css={{
+          transform: 'translate(-16px, -8px)',
+          width: `${theme.base}`,
+          visibility: hasSubIcon ? 'visible' : 'hidden',
+        }}
+      >
+        <SubIcon color={subIconColor} stepStatus={stepStatus} />
+      </div>
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx

@@ -9,19 +9,19 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getStyles } from './styles';
 
 export type WfoTracebackProps = {
-    children: string | null;
+  children: string | null;
 };
 
 export const WfoTraceback: FC<WfoTracebackProps> = ({ children }) => {
-    const { codeBlockStyle } = useWithOrchestratorTheme(getStyles);
-    const t = useTranslations('processes.steps');
+  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles);
+  const t = useTranslations('processes.steps');
 
-    return (
-        <>
-            <EuiText>
-                <h3>{t('traceback')}</h3>
-            </EuiText>
-            <EuiCodeBlock css={codeBlockStyle}>{children}</EuiCodeBlock>
-        </>
-    );
+  return (
+    <>
+      <EuiText>
+        <h3>{t('traceback')}</h3>
+      </EuiText>
+      <EuiCodeBlock css={codeBlockStyle}>{children}</EuiCodeBlock>
+    </>
+  );
 };