1904: gs

Author: Ruben van Leeuwen

packages/orchestrator-ui-components/src/components/WfoPydanticForm/Footer.tsx

@@ -31,65 +31,77 @@ export const Footer = () => {
             !rhf.formState.isDirty &&
             !rhf.formState.isSubmitting);
 
-    const submitButtonLabel = hasNext ? t('next') : t('startWorkflow');
+    const handlePrevious = () => {
+        if (onCancel) {
+            onCancel();
+        }
+    };
+
+    const PreviousButton = () => (
+        <EuiButton
+            id="button-submit-form-submit"
+            tabIndex={0}
+            fill
+            onClick={() => {
+                if (onPrevious) {
+                    onPrevious();
+                }
+            }}
+            color={'primary'}
+            iconSide="right"
+            aria-label={t('previous')}
+            disabled={isDisabled}
+        >
+            {t('previous')}
+        </EuiButton>
+    );
+
+    const CancelButton = () => (
+        <div
+            onClick={handlePrevious}
+            css={{
+                cursor: 'pointer',
+                color: theme.colors.link,
+                fontWeight: theme.font.weight.bold,
+                marginLeft: theme.base / 2,
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {t('cancel')}
+        </div>
+    );
+
+    const SubmitButton = () => {
+        const submitButtonLabel = hasNext ? t('next') : t('startWorkflow');
+
+        return (
+            <EuiButton
+                id="button-submit-form-submit"
+                tabIndex={0}
+                fill
+                color={'primary'}
+                type="submit"
+                iconSide="right"
+                aria-label={submitButtonLabel}
+                disabled={isDisabled}
+            >
+                {submitButtonLabel}
+            </EuiButton>
+        );
+    };
 
     return (
         <div>
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div>
                     {(formInputData && formInputData.length > 0 && (
-                        <EuiButton
-                            id="button-submit-form-submit"
-                            tabIndex={0}
-                            fill
-                            onClick={() => {
-                                if (onPrevious) {
-                                    onPrevious();
-                                }
-                            }}
-                            color={'primary'}
-                            isLoading={false}
-                            iconSide="right"
-                            aria-label={t('previous')}
-                            disabled={isDisabled}
-                        >
-                            {t('previous')}
-                        </EuiButton>
-                    )) || (
-                        <div
-                            onClick={() => {
-                                if (onCancel) {
-                                    onCancel();
-                                }
-                            }}
-                            css={{
-                                cursor: 'pointer',
-                                color: theme.colors.link,
-                                fontWeight: theme.font.weight.bold,
-                                marginLeft: theme.base / 2,
-                                display: 'flex',
-                                alignItems: 'center',
-                            }}
-                        >
-                            {t('cancel')}
-                        </div>
-                    )}
+                        <PreviousButton />
+                    )) || <CancelButton />}
                 </div>
 
-                <EuiButton
-                    id="button-submit-form-submit"
-                    tabIndex={0}
-                    fill
-                    color={'primary'}
-                    isLoading={false}
-                    type="submit"
-                    iconSide="right"
-                    aria-label={submitButtonLabel}
-                    disabled={isDisabled}
-                >
-                    {submitButtonLabel}
-                </EuiButton>
+                <SubmitButton />
             </div>
         </div>
     );

packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -225,15 +225,17 @@ export const WfoPydanticForm = ({
         return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
     };
 
+    const handleCancel = () => {
+        const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+        router.replace(pfBasePath);
+    };
+
     return (
         <PydanticForm
             title={''}
             id={processName}
             onSuccess={onSuccess}
-            onCancel={() => {
-                const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-                router.replace(pfBasePath);
-            }}
+            onCancel={handleCancel}
             loadingComponent={<WfoLoading />}
             config={{
                 apiProvider: getPydanticFormProvider(),

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Summary.tsx

@@ -71,31 +71,27 @@ export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
 
     const extraColumnsData = columns.filter((_, index) => index !== 0);
 
-    const rows =
-        columns &&
-        columns[0] &&
-        columns[0].map((row, index) => (
-            <tr key={index}>
-                {labels && <td className={`label`}>{labels[index]}</td>}
-                <td className={`value`}>
-                    {typeof row === 'string' &&
-                    row.includes('<!doctype html>') ? (
-                        <div
-                            className="emailMessage"
-                            dangerouslySetInnerHTML={{ __html: row }}
-                        ></div>
-                    ) : (
-                        row
-                    )}
-                </td>
-                {extraColumnsData &&
-                    extraColumnsData.map((_, idx) => (
-                        <td className={`value`} key={idx}>
-                            {extraColumnsData[idx][index]}
-                        </td>
-                    ))}
-            </tr>
-        ));
+    const rows = columns[0].map((row, index) => (
+        <tr key={index}>
+            {labels && <td className={`label`}>{labels[index]}</td>}
+            <td className={`value`}>
+                {typeof row === 'string' && row.includes('<!doctype html>') ? (
+                    <div
+                        className="emailMessage"
+                        dangerouslySetInnerHTML={{ __html: row }}
+                    ></div>
+                ) : (
+                    row
+                )}
+            </td>
+            {extraColumnsData &&
+                extraColumnsData.map((_, idx) => (
+                    <td className={`value`} key={idx}>
+                        {extraColumnsData[idx][index]}
+                    </td>
+                ))}
+        </tr>
+    ));
 
     const tableHeader =
         !headers || headers.length === 0 ? null : (