@orchestrator-ui/orchestrator-ui-components 5.5.2 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.5.2",
+    "version": "5.6.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.7.4",
+        "pydantic-forms": "^0.8.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoForms/UserInputForm.tsx

@@ -686,7 +686,6 @@ export function WfoUserInputForm({
                                     </em>
                                 </section>
                             )}
-
                             {renderButtons(buttons)}
                         </AutoForm>
                     </AutoFieldProvider>

package/src/components/WfoForms/formFields/AcceptFieldStyling.ts

@@ -21,6 +21,11 @@ export const getAcceptFieldStyles = ({ theme }: WfoTheme) => {
                     marginTop: 0,
                 },
             },
+
+            '.labelTitle': {
+                fontWeight: '600',
+                color: theme.colors.text,
+            },
         },
     });
 

package/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';

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -8,7 +8,12 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { usePydanticFormContext } from 'pydantic-forms';
 
+import { getCommonFormFieldStyles } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+
 export const RenderFormErrors = () => {
+    const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+
     const { errorDetails } = usePydanticFormContext();
     const t = useTranslations('pydanticForms.userInputForm');
     if (!errorDetails) {
@@ -22,7 +27,7 @@ export const RenderFormErrors = () => {
     const otherErrors = errors.filter((err) => !err.loc.includes('__root__'));
 
     return (
-        <em className="error backend-validation-metadata">
+        <em css={errorStyle}>
             {rootError && <div>{rootError.msg}</div>}
             {otherErrors?.length >= 1 &&
                 t('inputFieldsHaveValidationErrors', {

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -341,6 +341,7 @@ export const WfoPydanticForm = ({
             labelProvider: pydanticLabelProvider,
             rowRenderer: Row,
             customTranslations: customTranslations,
+            loadingComponent: <WfoLoading />,
             locale: getLocale(),
         };
     }, [
@@ -353,10 +354,9 @@ export const WfoPydanticForm = ({
 
     return (
         <PydanticForm
-            id={processName}
+            formKey={processName}
             onSuccess={onSuccess}
             onCancel={handleCancel}
-            loadingComponent={<WfoLoading />}
             config={config}
         />
     );

package/src/components/WfoPydanticForm/fields/WfoReactSelect/WfoReactSelect.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactSelect, { components } from 'react-select';
 import type { GroupBase, InputProps } from 'react-select';
 
@@ -33,10 +33,20 @@ export const WfoReactSelect = <ValueType,>({
     hasError = false,
     refetch,
 }: WfoReactSelectProps<ValueType>) => {
-    const selectedValue = options.find(
+    useEffect(() => {
+        const selectedValue = options.find(
+            (option: Option<ValueType>) => option.value === value,
+        );
+        setSelectedValue(selectedValue || null);
+    }, [options, value]);
+
+    const initialValue = options.find(
         (option: Option<ValueType>) => option.value === value,
     );
 
+    const [selectedValue, setSelectedValue] =
+        React.useState<Option<ValueType> | null>(initialValue || null);
+
     // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
     const {
         reactSelectInnerComponentStyles,
@@ -79,8 +89,17 @@ export const WfoReactSelect = <ValueType,>({
                 id={id}
                 inputId={`${id}.search`}
                 onChange={(option) => {
-                    const selectedValue = option?.value;
-                    onChange(selectedValue);
+                    if (option === null) {
+                        // By default reactSelect reverts to the initial option when cleared
+                        // this is to make sure we can also deselect the value after it is
+                        // initialized from error state for example.
+                        setSelectedValue(null);
+                        onChange(undefined);
+                    } else {
+                        const selectedValue = option?.value;
+                        setSelectedValue(option);
+                        onChange(selectedValue);
+                    }
                 }}
                 css={reactSelectStyle}
                 isLoading={isLoading}

package/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>

package/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';

package/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');
+    });
+});

package/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);
+};

package/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>
         );

package/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>
     );
 };

package/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>
+    );
+};

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { HttpStatus } from '@/rtk';
+import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
+import { FormUserPermissions, InputForm } from '@/types/forms';
+
+interface WfoStepFormProps {
+    userInputForm: InputForm;
+    isTask: boolean;
+    processId?: string;
+    userPermissions: FormUserPermissions;
+}
+
+export const WfoStepFormOld = ({
+    userInputForm,
+    isTask,
+    processId,
+    userPermissions,
+}: WfoStepFormProps) => {
+    const [isProcessing, setIsProcessing] = useState<boolean>(false);
+    const [hasError, setHasError] = useState<boolean>(false);
+    const { theme } = useOrchestratorTheme();
+    const [resumeProcess] = useResumeProcessMutation();
+
+    const submitForm = (processInput: object[]) => {
+        if (!processId) {
+            return Promise.reject();
+        }
+
+        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;
+                }
+            });
+    };
+
+    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}
+                />
+            )}
+        </EuiFlexItem>
+    );
+};

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.5.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.6.0';

package/src/messages/useGetTranslationMessages.ts

@@ -15,7 +15,6 @@ export const useGetTranslationMessages = (locale: string | undefined) => {
                 return enGB;
             case Locale.nlNL:
                 return nlNL;
-
             default:
                 return enGB;
         }