WfoStepForm (#2145)

Georgi2704 · DutchBen · web-flow · commit bb0264e983fa · 2025-09-08T09:24:44.000+02:00
* Migrate WfoStepForm to pydantic forms, fix bug with summary field with accept field

* add changeset

* Fix for sumbit button

* Update packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormFooter.tsx

Co-authored-by: Ruben van Leeuwen &lt;ruben@sinin.nl&gt;

* Add temporary whitelist for corelink step form

---------

Co-authored-by: Ruben van Leeuwen &lt;ruben@sinin.nl&gt;
diff --git a/.changeset/twelve-times-care.md b/.changeset/twelve-times-care.md
@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Migrate WfoStepForm to pydantic forms
diff --git a/apps/wfo-ui b/apps/wfo-ui
@@ -1 +1 @@
-Subproject commit 39ec12463a6c53b9d29ae60831c4940d5a123224
+Subproject commit d9d24f91e0912b40856d97d10b87c733e3cdaed7
diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/UserInputForm.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/UserInputForm.tsx
@@ -686,7 +686,6 @@ export function WfoUserInputForm({
                                     </em>
                                 </section>
                             )}
-
                             {renderButtons(buttons)}
                         </AutoForm>
                     </AutoFieldProvider>
diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptFieldStyling.ts b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptFieldStyling.ts
@@ -21,6 +21,11 @@ export const getAcceptFieldStyles = ({ theme }: WfoTheme) => {
                     marginTop: 0,
                 },
             },
+
+            '.labelTitle': {
+                fontWeight: '600',
+                color: theme.colors.text,
+            },
         },
     });
 
diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts
@@ -27,3 +27,4 @@ export * from './deprecated/FileUploadField';
 export * from './commonStyles';
 export * from './types';
 export * from './SummaryFieldStyling';
+export * from './AcceptFieldStyling';
diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoSummary.tsx b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoSummary.tsx
@@ -5,7 +5,11 @@ import type { PydanticFormElement } from 'pydantic-forms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getCommonFormFieldStyles, summaryFieldStyles } from '@/components';
+import {
+    getCommonFormFieldStyles,
+    getNestedSummaryLabel,
+    summaryFieldStyles,
+} from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { snakeToHuman } from '@/utils';
 
@@ -29,7 +33,11 @@ export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
 
     const rows = columns[0].map((row, index) => (
         <tr key={index}>
-            {labels && <td className={`label`}>{labels[index]}</td>}
+            {labels && (
+                <td className={`label`}>
+                    {getNestedSummaryLabel(labels, index)}
+                </td>
+            )}
             <td className={`value`}>
                 {typeof row === 'string' && row.includes('<!doctype html>') ? (
                     <div
@@ -43,7 +51,7 @@ export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
             {extraColumnsData &&
                 extraColumnsData.map((_, idx) => (
                     <td className={`value`} key={idx}>
-                        {extraColumnsData[idx][index]}
+                        {extraColumnsData[idx][index].toString()}
                     </td>
                 ))}
         </tr>
diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts
@@ -11,3 +11,4 @@ export * from './WfoInteger';
 export * from './WfoDropdown';
 export * from './WfoReactSelect';
 export * from './WfoMultiCheckboxField';
+export * from './wfoPydanticFormUtils';
diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/wfoPydanticFormUtils.spec.ts b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/wfoPydanticFormUtils.spec.ts
@@ -0,0 +1,32 @@
+import { getNestedSummaryLabel } from '@/components';
+
+describe('getNestedSummaryLabel', () => {
+    it('returns string value as-is', () => {
+        const labels = ['name', 'age', 'city'];
+        expect(getNestedSummaryLabel(labels, 0)).toBe('name');
+        expect(getNestedSummaryLabel(labels, 1)).toBe('age');
+        expect(getNestedSummaryLabel(labels, 2)).toBe('city');
+    });
+
+    it('returns capitalized first key when value is an object', () => {
+        const labels = [{ first: 'John', last: 'Doe' }];
+        expect(getNestedSummaryLabel(labels, 0)).toBe('First');
+    });
+
+    it('handles object with multiple keys', () => {
+        const labels = [{ last: 'Doe', first: 'John' }];
+        // only the first key should matter
+        expect(getNestedSummaryLabel(labels, 0)).toBe('Last');
+    });
+
+    it('handles empty object', () => {
+        const labels = [{}];
+        expect(getNestedSummaryLabel(labels, 0)).toBe('');
+    });
+
+    it('handles null and undefined values safely', () => {
+        const labels = [null, undefined];
+        expect(getNestedSummaryLabel(labels, 0)).toBe('null');
+        expect(getNestedSummaryLabel(labels, 1)).toBe('undefined');
+    });
+});
diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/wfoPydanticFormUtils.ts b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/wfoPydanticFormUtils.ts
@@ -0,0 +1,19 @@
+import { capitalize } from 'lodash';
+
+export type SummaryFormLabel =
+    | string
+    | null
+    | undefined
+    | Record<string, unknown>;
+
+export const getNestedSummaryLabel = (
+    labels: SummaryFormLabel[],
+    index: number,
+): string => {
+    const value = labels[index];
+    if (typeof value === 'object' && value !== null) {
+        const firstKey: string = Object.keys(value)[0] ?? '';
+        return capitalize(firstKey);
+    }
+    return String(value);
+};
diff --git a/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx b/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
@@ -11,6 +11,7 @@ import {
 } from '@elastic/eui';
 
 import { WfoJsonCodeBlock, WfoTableCodeBlock } from '@/components';
+import { WfoStepFormOld } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
 import type { EmailState } from '@/types';
@@ -117,6 +118,11 @@ export const WfoStep = React.forwardRef(
             );
         };
 
+        const whitelist = ['confirm_corelink'];
+        const isCorelinkForm = whitelist.includes(
+            Object.keys(userInputForm?.properties ?? {})[0],
+        );
+
         return (
             <div ref={ref}>
                 <EuiPanel>
@@ -209,14 +215,23 @@ export const WfoStep = React.forwardRef(
                             )}
                         </div>
                     )}
-                    {step.status === StepStatus.SUSPEND && userInputForm && (
-                        <WfoStepForm
-                            userInputForm={userInputForm}
-                            isTask={isTask}
-                            processId={processId}
-                            userPermissions={userPermissions}
-                        />
-                    )}
+                    {step.status === StepStatus.SUSPEND &&
+                        userInputForm &&
+                        (isCorelinkForm ? (
+                            <WfoStepForm
+                                userInputForm={userInputForm}
+                                isTask={isTask}
+                                processId={processId ?? ''}
+                                userPermissions={userPermissions}
+                            />
+                        ) : (
+                            <WfoStepFormOld
+                                userInputForm={userInputForm}
+                                isTask={isTask}
+                                processId={processId}
+                                userPermissions={userPermissions}
+                            />
+                        ))}
                 </EuiPanel>
             </div>
         );
diff --git a/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx b/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx
@@ -1,8 +1,11 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
+
+import { PydanticForm, PydanticFormApiProvider } from 'pydantic-forms';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
+import { Header, Row, useWfoPydanticFormConfig } from '@/components';
+import { StepFormFooter } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFormFooter';
 import { useOrchestratorTheme } from '@/hooks';
 import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
@@ -11,7 +14,7 @@ import { FormUserPermissions, InputForm } from '@/types/forms';
 interface WfoStepFormProps {
     userInputForm: InputForm;
     isTask: boolean;
-    processId?: string;
+    processId: string;
     userPermissions: FormUserPermissions;
 }
 
@@ -21,47 +24,66 @@ export const WfoStepForm = ({
     processId,
     userPermissions,
 }: WfoStepFormProps) => {
-    const [isProcessing, setIsProcessing] = useState<boolean>(false);
-    const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
+    const {
+        wfoComponentMatcherExtender,
+        pydanticLabelProvider,
+        customTranslations,
+    } = useWfoPydanticFormConfig();
     const [resumeProcess] = useResumeProcessMutation();
 
-    const submitForm = (processInput: object[]) => {
-        if (!processId) {
-            return Promise.reject();
-        }
+    const getInitialStepInput = useMemo(() => userInputForm, [userInputForm]);
 
-        return resumeProcess({ processId, userInputs: processInput })
-            .unwrap()
-            .then(() => {
-                setIsProcessing(true);
-            })
-            .catch((error) => {
-                if (error?.status !== HttpStatus.FormNotComplete) {
-                    if (error?.status === HttpStatus.BadRequest) {
-                        // Rethrow the error so userInputForm can catch it and display validation errors
-                        throw error;
-                    }
-                    console.error(error);
-                    setHasError(true);
-                } else {
-                    throw error;
+    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 (
         <EuiFlexItem css={{ margin: theme.size.m }}>
-            {(hasError && <WfoError />) || (isProcessing && <WfoLoading />) || (
-                <UserInputFormWizard
-                    stepUserInput={userInputForm}
-                    stepSubmit={submitForm}
-                    hasNext={false}
-                    isTask={isTask}
-                    isResuming={true}
-                    allowSubmit={userPermissions.resumeAllowed}
-                />
-            )}
+            <PydanticForm
+                formKey={processId}
+                config={{
+                    apiProvider: getStepFormProvider(),
+                    footerRenderer: () => (
+                        <StepFormFooter
+                            isTask={isTask}
+                            isResumeAllowed={userPermissions.resumeAllowed}
+                        />
+                    ),
+                    headerRenderer: Header,
+                    componentMatcherExtender: wfoComponentMatcherExtender,
+                    rowRenderer: Row,
+                    labelProvider: pydanticLabelProvider,
+                    customTranslations: customTranslations,
+                }}
+            />
         </EuiFlexItem>
     );
 };
diff --git a/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormFooter.tsx b/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormFooter.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
+
+import { RenderFormErrors } from '@/components/WfoPydanticForm/RenderFormErrors';
+import { WfoPlayCircle } from '@/icons';
+
+interface StepFormFooterProps {
+    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>
+        );
+    };
+
+    return (
+        <div data-testid="pydantic-step-form-footer">
+            <RenderFormErrors />
+            <EuiHorizontalRule />
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <SubmitButton />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld.tsx b/packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld.tsx
diff --git a/packages/orchestrator-ui-components/src/messages/useGetTranslationMessages.ts b/packages/orchestrator-ui-components/src/messages/useGetTranslationMessages.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@orchestrator-ui/orchestrator-ui-components': minor
 +---
++
 +Migrate WfoStepForm to pydantic forms