1719: PR comments

Author: Ruben van Leeuwen

package-lock.json

@@ -19,10 +19,15 @@ export const Footer = () => {
     const { rhf, onCancel, allowUntouchedSubmit, isLoading } =
         usePydanticFormContext();
 
+    const isDisabled: boolean =
+        !rhf.formState.isValid ||
+        (!allowUntouchedSubmit &&
+            !rhf.formState.isDirty &&
+            !rhf.formState.isSubmitting);
+
     return (
         <div>
             <EuiHorizontalRule />
-
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div
                     onClick={() => {
@@ -34,7 +39,7 @@ export const Footer = () => {
                         cursor: 'pointer',
                         color: theme.colors.link,
                         fontWeight: theme.font.weight.bold,
-                        marginLeft: '8px',
+                        marginLeft: theme.base / 2,
                         display: 'flex',
                         alignItems: 'center',
                     }}
@@ -52,12 +57,7 @@ export const Footer = () => {
                     iconType={() => <WfoPlayFill color="#FFF" />}
                     iconSide="right"
                     aria-label={t('startWorkflow')}
-                    disabled={
-                        !rhf.formState.isValid ||
-                        (!allowUntouchedSubmit &&
-                            !rhf.formState.isDirty &&
-                            !rhf.formState.isSubmitting)
-                    }
+                    disabled={isDisabled}
                 >
                     {t('startWorkflow')}
                 </EuiButton>

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

@@ -17,9 +17,7 @@ export const Row: RowRenderer = ({
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
     return (
         <EuiFormRow
-            css={{
-                ...formRowStyle,
-            }}
+            css={formRowStyle}
             label={title}
             labelAppend={<EuiText size="m">{description}</EuiText>}
             error={error}

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

@@ -17,6 +17,7 @@ import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
 import { PATH_TASKS, PATH_WORKFLOWS, WfoLoading } from '@/components';
 import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
+import { HttpStatus } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 
 import { Footer } from './Footer';
@@ -73,7 +74,9 @@ export const WfoPydanticForm = ({
                             if (result.error) {
                                 const error =
                                     result.error as FetchBaseQueryError;
-                                if (error.status === 510) {
+                                if (
+                                    error.status === HttpStatus.FormNotComplete
+                                ) {
                                     const data = error.data as Record<
                                         string,
                                         object | string
@@ -91,7 +94,7 @@ export const WfoPydanticForm = ({
                 .catch((error) => {
                     return new Promise<Record<string, object>>(
                         (resolve, reject) => {
-                            if (error.status === 510) {
+                            if (error.status === HttpStatus.FormNotComplete) {
                                 resolve(error.data);
                             }
                             reject(error);