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 = (
)}
= (
props: ComponentProps
): ReactElement => {
const [component, setComponent] = useState(props.component);
+ const [hasFormValidationErrors, setHasFormValidatonErrors] = useState>({});
const [showDeleteConfirmation, setShowDeleteConfirmation] =
useState(false);
@@ -34,9 +36,12 @@ const ComponentSettingsModal: FunctionComponent = (
onSubmit={() => {
return component && props.onSave(component);
}}
+ submitButtonDisabled={Object.keys(hasFormValidationErrors).filter((key: string)=> {
+ return hasFormValidationErrors[key];
+ }).length !== 0}
leftFooterElement={