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

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

@@ -8,119 +8,88 @@ import { useOrchestratorTheme } from '@/hooks';
 import { WfoBracketSquare, WfoCommandLine, WfoTableCells } from '@/icons';
 
 export enum CodeView {
-    JSON = 'json',
-    TABLE = 'table',
-    RAW = 'raw',
+  JSON = 'json',
+  TABLE = 'table',
+  RAW = 'raw',
 }
 
 interface WfoCodeViewSelectorProps {
-    codeView: CodeView;
-    handleCodeViewChange: (codeView: CodeView) => void;
+  codeView: CodeView;
+  handleCodeViewChange: (codeView: CodeView) => void;
 }
 
-export const WfoCodeViewSelector = ({
-    codeView,
-    handleCodeViewChange,
-}: WfoCodeViewSelectorProps) => {
-    const t = useTranslations('processes.steps');
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
+export const WfoCodeViewSelector = ({ codeView, handleCodeViewChange }: WfoCodeViewSelectorProps) => {
+  const t = useTranslations('processes.steps');
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-    const isSelected = (buttonView: CodeView): boolean =>
-        buttonView === codeView;
-    const [showTooltips, setShowTooltips] = useState<boolean>(true);
+  const isSelected = (buttonView: CodeView): boolean => buttonView === codeView;
+  const [showTooltips, setShowTooltips] = useState<boolean>(true);
 
-    const codeViewOptions = [
-        {
-            id: CodeView.JSON,
-            label: t('codeView.json'),
-            onMouseLeave: () => setShowTooltips(true),
-            iconType: () => (
-                <div onClick={() => setShowTooltips(false)}>
-                    <WfoBracketSquare
-                        color={
-                            isSelected(CodeView.JSON)
-                                ? theme.colors.ghost
-                                : theme.colors.textPrimary
-                        }
-                    />
-                </div>
-            ),
-            'data-test-id': 'jsonCodeViewButton',
-            toolTipContent: showTooltips ? t('codeView.json') : undefined,
-            style: {
-                backgroundColor: isSelected(CodeView.JSON)
-                    ? theme.colors.textPrimary
-                    : toSecondaryColor(theme.colors.primary),
-            },
-        },
-        {
-            id: CodeView.TABLE,
-            label: t('codeView.table'),
-            onMouseLeave: () => setShowTooltips(true),
-            iconType: () => (
-                <div onClick={() => setShowTooltips(false)}>
-                    <WfoTableCells
-                        color={
-                            isSelected(CodeView.TABLE)
-                                ? theme.colors.ghost
-                                : theme.colors.textPrimary
-                        }
-                    />
-                </div>
-            ),
-            'data-test-id': 'tableCodeViewButton',
-            toolTipContent: showTooltips ? t('codeView.table') : undefined,
-            style: {
-                backgroundColor: isSelected(CodeView.TABLE)
-                    ? theme.colors.textPrimary
-                    : toSecondaryColor(theme.colors.primary),
-            },
-        },
-        {
-            id: CodeView.RAW,
-            label: t('codeView.raw'),
-            onMouseLeave: () => setShowTooltips(true),
-            iconType: () => (
-                <div onClick={() => setShowTooltips(false)}>
-                    <WfoCommandLine
-                        color={
-                            isSelected(CodeView.RAW)
-                                ? theme.colors.ghost
-                                : theme.colors.textPrimary
-                        }
-                    />
-                </div>
-            ),
-            'data-test-id': 'rawCodeViewButton',
-            toolTipContent: showTooltips ? t('codeView.raw') : undefined,
-            style: {
-                backgroundColor: isSelected(CodeView.RAW)
-                    ? theme.colors.textPrimary
-                    : toSecondaryColor(theme.colors.primary),
-            },
-        },
-    ];
+  const codeViewOptions = [
+    {
+      id: CodeView.JSON,
+      label: t('codeView.json'),
+      onMouseLeave: () => setShowTooltips(true),
+      iconType: () => (
+        <div onClick={() => setShowTooltips(false)}>
+          <WfoBracketSquare color={isSelected(CodeView.JSON) ? theme.colors.textGhost : theme.colors.textPrimary} />
+        </div>
+      ),
+      'data-test-id': 'jsonCodeViewButton',
+      toolTipContent: showTooltips ? t('codeView.json') : undefined,
+      style: {
+        backgroundColor: isSelected(CodeView.JSON) ? theme.colors.textPrimary : toSecondaryColor(theme.colors.primary),
+      },
+    },
+    {
+      id: CodeView.TABLE,
+      label: t('codeView.table'),
+      onMouseLeave: () => setShowTooltips(true),
+      iconType: () => (
+        <div onClick={() => setShowTooltips(false)}>
+          <WfoTableCells color={isSelected(CodeView.TABLE) ? theme.colors.textGhost : theme.colors.textPrimary} />
+        </div>
+      ),
+      'data-test-id': 'tableCodeViewButton',
+      toolTipContent: showTooltips ? t('codeView.table') : undefined,
+      style: {
+        backgroundColor: isSelected(CodeView.TABLE) ? theme.colors.textPrimary : toSecondaryColor(theme.colors.primary),
+      },
+    },
+    {
+      id: CodeView.RAW,
+      label: t('codeView.raw'),
+      onMouseLeave: () => setShowTooltips(true),
+      iconType: () => (
+        <div onClick={() => setShowTooltips(false)}>
+          <WfoCommandLine color={isSelected(CodeView.RAW) ? theme.colors.textGhost : theme.colors.textPrimary} />
+        </div>
+      ),
+      'data-test-id': 'rawCodeViewButton',
+      toolTipContent: showTooltips ? t('codeView.raw') : undefined,
+      style: {
+        backgroundColor: isSelected(CodeView.RAW) ? theme.colors.textPrimary : toSecondaryColor(theme.colors.primary),
+      },
+    },
+  ];
 
-    const handle = useCallback(
-        (id: string) => handleCodeViewChange(id as CodeView),
-        [handleCodeViewChange],
-    );
+  const handle = useCallback((id: string) => handleCodeViewChange(id as CodeView), [handleCodeViewChange]);
 
-    return (
-        <EuiButtonGroup
-            style={{
-                gap: 0,
-                borderRadius: theme.border.radius.medium,
-            }}
-            legend=""
-            options={codeViewOptions}
-            idSelected={codeView}
-            isIconOnly={true}
-            onChange={handle}
-            onClick={(e) => {
-                e.stopPropagation();
-            }}
-            type="single"
-        />
-    );
+  return (
+    <EuiButtonGroup
+      style={{
+        gap: 0,
+        borderRadius: theme.border.radius.medium,
+      }}
+      legend=""
+      options={codeViewOptions}
+      idSelected={codeView}
+      isIconOnly={true}
+      onChange={handle}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      type="single"
+    />
+  );
 };

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

@@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
 import { WfoStep } from './WfoStep';
 
 const Story: Meta<typeof WfoStep> = {
-    component: WfoStep,
-    title: 'Steps/WfoStep',
+  component: WfoStep,
+  title: 'Steps/WfoStep',
 };
 export default Story;
 
 export const Default = {
-    args: {},
+  args: {},
 };

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

@@ -4,11 +4,7 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 
-import {
-    WfoJsonCodeBlock,
-    WfoMonacoCodeBlock,
-    WfoTableCodeBlock,
-} from '@/components';
+import { WfoJsonCodeBlock, WfoMonacoCodeBlock, WfoTableCodeBlock } from '@/components';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
 import type { EmailState, FormUserPermissions } from '@/types';
@@ -23,204 +19,145 @@ import { CodeView, WfoCodeViewSelector } from './WfoCodeViewSelector';
 import { WfoStepForm } from './WfoStepForm';
 
 export interface WfoStepProps {
-    stepListItem: StepListItem;
-    startedAt: string;
-    completedAt: string;
-    showHiddenKeys: boolean;
-    onToggleStepDetail: () => void;
-    isTask: boolean;
-    isStartStep?: boolean;
-    processId?: string;
-    userPermissions: FormUserPermissions;
+  stepListItem: StepListItem;
+  startedAt: string;
+  completedAt: string;
+  showHiddenKeys: boolean;
+  onToggleStepDetail: () => void;
+  isTask: boolean;
+  isStartStep?: boolean;
+  processId?: string;
+  userPermissions: FormUserPermissions;
 }
 
 export const WfoStep = React.forwardRef(
-    (
-        {
-            stepListItem,
-            onToggleStepDetail,
-            startedAt,
-            completedAt,
-            showHiddenKeys,
-            isStartStep = false,
-            isTask,
-            processId,
-            userPermissions,
-        }: WfoStepProps,
-        ref: LegacyRef<HTMLDivElement>,
-    ) => {
-        const { isExpanded, step, userInputForm } = stepListItem;
-        const [codeView, setCodeView] = useState<CodeView>(CodeView.JSON);
+  (
+    {
+      stepListItem,
+      onToggleStepDetail,
+      startedAt,
+      completedAt,
+      showHiddenKeys,
+      isStartStep = false,
+      isTask,
+      processId,
+      userPermissions,
+    }: WfoStepProps,
+    ref: LegacyRef<HTMLDivElement>,
+  ) => {
+    const { isExpanded, step, userInputForm } = stepListItem;
+    const [codeView, setCodeView] = useState<CodeView>(CodeView.JSON);
 
-        const { theme } = useOrchestratorTheme();
-        const {
-            stepEmailContainerStyle,
-            getStepHeaderStyle,
-            stepHeaderRightStyle,
-            stepListContentBoldTextStyle,
-            stepDurationStyle,
-            stepRowStyle,
-            getStepToggleExpandStyle,
-        } = useWithOrchestratorTheme(getWorkflowStepsStyles);
-        const t = useTranslations('processes.steps');
-        const hasHtmlMail = Object.prototype.hasOwnProperty.call(
-            step?.stateDelta || {},
-            'confirmation_mail',
-        );
+    const { theme } = useOrchestratorTheme();
+    const {
+      stepEmailContainerStyle,
+      getStepHeaderStyle,
+      stepHeaderRightStyle,
+      stepListContentBoldTextStyle,
+      stepDurationStyle,
+      stepRowStyle,
+      getStepToggleExpandStyle,
+    } = useWithOrchestratorTheme(getWorkflowStepsStyles);
+    const t = useTranslations('processes.steps');
+    const hasHtmlMail = Object.prototype.hasOwnProperty.call(step?.stateDelta || {}, 'confirmation_mail');
 
-        const stepContent = step.stateDelta
-            ? getStepContent(step.stateDelta, showHiddenKeys)
-            : {};
-        const hasStepContent =
-            hasHtmlMail || Object.keys(stepContent).length > 0;
+    const stepContent = step.stateDelta ? getStepContent(step.stateDelta, showHiddenKeys) : {};
+    const hasStepContent = hasHtmlMail || Object.keys(stepContent).length > 0;
 
-        const displayMailConfirmation = (value: EmailState) => {
-            if (!value) {
-                return '';
-            }
-            return (
-                <EuiText size="s">
-                    <h4>To</h4>
-                    <p>
-                        {value.to.map(
-                            (v: { email: string; name: string }, i) => (
-                                <div key={`to-${i}`}>
-                                    {v.name} &lt;
-                                    <a href={`mailto: ${v.email}`}>{v.email}</a>
-                                    &gt;
-                                </div>
-                            ),
-                        )}
-                    </p>
-                    <h4>CC</h4>
-                    <p>
-                        {value.cc.map(
-                            (v: { email: string; name: string }, i) => (
-                                <div key={`cc-${i}`}>
-                                    {v.name} &lt;
-                                    <a href={`mailto: ${v.email}`}>{v.email}</a>
-                                    &gt;
-                                </div>
-                            ),
-                        )}
-                    </p>
-                    <h4>Subject</h4>
-                    <p>{value.subject}</p>
-                    <h4>Message</h4>
-                    <div
-                        className="emailMessage"
-                        dangerouslySetInnerHTML={{ __html: value.message }}
-                    ></div>
-                </EuiText>
-            );
-        };
+    const displayMailConfirmation = (value: EmailState) => {
+      if (!value) {
+        return '';
+      }
+      return (
+        <EuiText size="s">
+          <h4>To</h4>
+          <p>
+            {value.to.map((v: { email: string; name: string }, i) => (
+              <div key={`to-${i}`}>
+                {v.name} &lt;
+                <a href={`mailto: ${v.email}`}>{v.email}</a>
+                &gt;
+              </div>
+            ))}
+          </p>
+          <h4>CC</h4>
+          <p>
+            {value.cc.map((v: { email: string; name: string }, i) => (
+              <div key={`cc-${i}`}>
+                {v.name} &lt;
+                <a href={`mailto: ${v.email}`}>{v.email}</a>
+                &gt;
+              </div>
+            ))}
+          </p>
+          <h4>Subject</h4>
+          <p>{value.subject}</p>
+          <h4>Message</h4>
+          <div className="emailMessage" dangerouslySetInnerHTML={{ __html: value.message }}></div>
+        </EuiText>
+      );
+    };
 
-        const handle = useCallback(
-            (newCodeView: string) => {
-                setCodeView(newCodeView as CodeView);
-            },
-            [setCodeView],
-        );
+    const handle = useCallback(
+      (newCodeView: string) => {
+        setCodeView(newCodeView as CodeView);
+      },
+      [setCodeView],
+    );
 
-        return (
-            <div ref={ref}>
-                <EuiPanel>
-                    <EuiFlexGroup
-                        css={getStepHeaderStyle(hasStepContent)}
-                        onClick={() => hasStepContent && onToggleStepDetail()}
-                    >
-                        <WfoStepStatusIcon
-                            stepStatus={step.status}
-                            isStartStep={isStartStep}
-                        />
+    return (
+      <div ref={ref}>
+        <EuiPanel>
+          <EuiFlexGroup css={getStepHeaderStyle(hasStepContent)} onClick={() => hasStepContent && onToggleStepDetail()}>
+            <WfoStepStatusIcon stepStatus={step.status} isStartStep={isStartStep} />
 
-                        <EuiFlexItem grow={0}>
-                            <EuiText css={stepListContentBoldTextStyle}>
-                                {step.name}
-                            </EuiText>
-                            <EuiText>
-                                {step.status}{' '}
-                                {step.completed &&
-                                    `- ${formatDate(step.completed)}`}
-                            </EuiText>
-                        </EuiFlexItem>
+            <EuiFlexItem grow={0}>
+              <EuiText css={stepListContentBoldTextStyle}>{step.name}</EuiText>
+              <EuiText>
+                {step.status} {step.completed && `- ${formatDate(step.completed)}`}
+              </EuiText>
+            </EuiFlexItem>
 
-                        <EuiFlexGroup css={stepRowStyle}>
-                            {step.completed && (
-                                <>
-                                    {isExpanded && (
-                                        <WfoCodeViewSelector
-                                            codeView={codeView}
-                                            handleCodeViewChange={handle}
-                                        />
-                                    )}
-                                    <EuiFlexItem
-                                        grow={0}
-                                        css={stepHeaderRightStyle}
-                                    >
-                                        <EuiText css={stepDurationStyle}>
-                                            {t('duration')}
-                                        </EuiText>
-                                        <EuiText size="m">
-                                            {calculateTimeDifference(
-                                                startedAt,
-                                                completedAt,
-                                            )}
-                                        </EuiText>
-                                    </EuiFlexItem>
-                                    <EuiFlexItem
-                                        grow={0}
-                                        css={getStepToggleExpandStyle(
-                                            hasStepContent,
-                                        )}
-                                    >
-                                        {(isExpanded && (
-                                            <WfoChevronUp
-                                                color={
-                                                    theme.colors.textParagraph
-                                                }
-                                            />
-                                        )) || (
-                                            <WfoChevronDown
-                                                color={
-                                                    theme.colors.textParagraph
-                                                }
-                                            />
-                                        )}
-                                    </EuiFlexItem>
-                                </>
-                            )}
-                        </EuiFlexGroup>
-                    </EuiFlexGroup>
-                    {hasStepContent &&
-                        !hasHtmlMail &&
-                        isExpanded &&
-                        (codeView === CodeView.TABLE ? (
-                            <WfoTableCodeBlock stepState={stepContent} />
-                        ) : codeView === CodeView.RAW ? (
-                            <WfoJsonCodeBlock data={stepContent} />
-                        ) : (
-                            <WfoMonacoCodeBlock data={stepContent} />
-                        ))}
-                    {isExpanded && hasHtmlMail && (
-                        <div css={stepEmailContainerStyle}>
-                            {displayMailConfirmation(
-                                step.stateDelta.confirmation_mail as EmailState,
-                            )}
-                        </div>
+            <EuiFlexGroup css={stepRowStyle}>
+              {step.completed && (
+                <>
+                  {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
+                  <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
+                    <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
+                    <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={0} css={getStepToggleExpandStyle(hasStepContent)}>
+                    {(isExpanded && <WfoChevronUp color={theme.colors.textParagraph} />) || (
+                      <WfoChevronDown color={theme.colors.textParagraph} />
                     )}
-                    {step.status === StepStatus.SUSPEND && userInputForm && (
-                        <WfoStepForm
-                            userInputForm={userInputForm}
-                            isTask={isTask}
-                            processId={processId ?? ''}
-                            userPermissions={userPermissions}
-                        />
-                    )}
-                </EuiPanel>
+                  </EuiFlexItem>
+                </>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexGroup>
+          {hasStepContent
+            && !hasHtmlMail
+            && isExpanded
+            && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
+            : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
+            : <WfoMonacoCodeBlock data={stepContent} />)}
+          {isExpanded && hasHtmlMail && (
+            <div css={stepEmailContainerStyle}>
+              {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
             </div>
-        );
-    },
+          )}
+          {step.status === StepStatus.SUSPEND && userInputForm && (
+            <WfoStepForm
+              userInputForm={userInputForm}
+              isTask={isTask}
+              processId={processId ?? ''}
+              userPermissions={userPermissions}
+            />
+          )}
+        </EuiPanel>
+      </div>
+    );
+  },
 );
 
 WfoStep.displayName = 'WfoStep';