From 4fe920cb35ea927c3738f3af0dc1f518030c99e9 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Sat, 11 Feb 2023 13:08:02 +0000 Subject: [PATCH 01/68] fix validation errors on the modal --- CommonUI/src/Components/Divider/Divider.tsx | 6 +- CommonUI/src/Components/Forms/BasicForm.tsx | 750 +++++++++--------- CommonUI/src/Components/SideOver/SideOver.tsx | 22 +- .../src/Components/Workflow/Component.tsx | 6 +- .../Workflow/ComponentSettingsModal.tsx | 20 +- CommonUI/src/Components/Workflow/Workflow.tsx | 15 +- 6 files changed, 422 insertions(+), 397 deletions(-) diff --git a/CommonUI/src/Components/Divider/Divider.tsx b/CommonUI/src/Components/Divider/Divider.tsx index 8824592593..bef4491629 100644 --- a/CommonUI/src/Components/Divider/Divider.tsx +++ b/CommonUI/src/Components/Divider/Divider.tsx @@ -2,9 +2,9 @@ import React, { FunctionComponent, ReactElement } from 'react'; const Divider: FunctionComponent = (): ReactElement => { return ( -
-
-
+ +
+ ); }; diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx index fa619ae22b..ebc2624b1e 100644 --- a/CommonUI/src/Components/Forms/BasicForm.tsx +++ b/CommonUI/src/Components/Forms/BasicForm.tsx @@ -78,6 +78,7 @@ export interface ComponentProps { error: string | null; hideSubmitButton?: undefined | boolean; formRef?: undefined | MutableRefObject>; + onFormValidationErrorChanged?: ((hasError: boolean) => void) | undefined; } function getFieldType(fieldType: FormFieldSchemaType): string { @@ -130,7 +131,7 @@ const BasicForm: Function = ( if (props.showAsColumns && props.showAsColumns > 2) { throw new BadDataException( 'showAsCOlumns should be <= 2. It is currently ' + - props.showAsColumns + props.showAsColumns ); } @@ -174,7 +175,7 @@ const BasicForm: Function = ( ( placeholder={field.placeholder || ''} initialValue={ initialValues && - (initialValues as any)[fieldName] + (initialValues as any)[fieldName] ? (initialValues as any)[ - fieldName - ] + fieldName + ] : '' } /> @@ -217,61 +218,61 @@ const BasicForm: Function = ( {(field.fieldType === FormFieldSchemaType.Dropdown || field.fieldType === - FormFieldSchemaType.MultiSelectDropdown) && ( - - {({ form }: any) => { - return ( - - | null - ) => { - setCurrentValue({ - ...currentValue, - [fieldName]: value, - }); - field.onChange && - field.onChange(value, form); - await form.setFieldValue( - fieldName, - value, - true - ); - }} - onBlur={async () => { - await form.setFieldTouched( - fieldName, - true - ); - }} - isMultiSelect={ - field.fieldType === - FormFieldSchemaType.MultiSelectDropdown - } - options={field.dropdownOptions || []} - placeholder={field.placeholder || ''} - initialValue={ - initialValues && - (initialValues as any)[fieldName] - ? (initialValues as any)[ - fieldName - ] - : '' - } - /> - ); - }} - - )} + FormFieldSchemaType.MultiSelectDropdown) && ( + + {({ form }: any) => { + return ( + + | null + ) => { + setCurrentValue({ + ...currentValue, + [fieldName]: value, + }); + field.onChange && + field.onChange(value, form); + await form.setFieldValue( + fieldName, + value, + true + ); + }} + onBlur={async () => { + await form.setFieldTouched( + fieldName, + true + ); + }} + isMultiSelect={ + field.fieldType === + FormFieldSchemaType.MultiSelectDropdown + } + options={field.dropdownOptions || []} + placeholder={field.placeholder || ''} + initialValue={ + initialValues && + (initialValues as any)[fieldName] + ? (initialValues as any)[ + fieldName + ] + : '' + } + /> + ); + }} + + )} {field.fieldType === FormFieldSchemaType.RadioButton && ( @@ -280,7 +281,7 @@ const BasicForm: Function = ( ( options={field.radioButtonOptions || []} initialValue={ initialValues && - (initialValues as any)[fieldName] + (initialValues as any)[fieldName] ? (initialValues as any)[ - fieldName - ] + fieldName + ] : '' } /> @@ -320,7 +321,7 @@ const BasicForm: Function = (