From 9872eec31aee3e26fe633af65fee617e051c6561 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Thu, 9 Mar 2023 12:51:17 +0000 Subject: [PATCH] fix basic form --- Accounts/src/Pages/Login.tsx | 6 +- Common/Types/ArrayUtil.ts | 4 +- .../src/Components/CodeEditor/CodeEditor.tsx | 26 +- CommonUI/src/Components/Detail/Detail.tsx | 2 +- CommonUI/src/Components/Dropdown/Dropdown.tsx | 29 +- CommonUI/src/Components/Forms/BasicForm.tsx | 516 +++++++++--------- .../Components/Forms/Fields/ColorPicker.tsx | 6 +- .../src/Components/Workflow/ArgumentsForm.tsx | 15 +- CommonUI/src/Components/Workflow/Utils.ts | 2 +- Dashboard/src/Pages/Workflow/Workflows.tsx | 16 + 10 files changed, 305 insertions(+), 317 deletions(-) diff --git a/Accounts/src/Pages/Login.tsx b/Accounts/src/Pages/Login.tsx index 7f3707edf8..b17b1328d5 100644 --- a/Accounts/src/Pages/Login.tsx +++ b/Accounts/src/Pages/Login.tsx @@ -96,9 +96,9 @@ const LoginPage: FunctionComponent = () => {
Please sign in with your username and password. Once you have signed - in, you'll be able to sign in via - SSO that's configured for your - project. + in, you'll be able to sign in + via SSO that's configured for + your project.
)}

diff --git a/Common/Types/ArrayUtil.ts b/Common/Types/ArrayUtil.ts index f1de4a4117..7e0f52460f 100644 --- a/Common/Types/ArrayUtil.ts +++ b/Common/Types/ArrayUtil.ts @@ -6,8 +6,8 @@ export default class ArrayUtil { } // Sort both arrays by their JSON representation - const sortedArr1 = JSON.stringify([...a].sort()); - const sortedArr2 = JSON.stringify([...b].sort()); + const sortedArr1: string = JSON.stringify([...a].sort()); + const sortedArr2: string = JSON.stringify([...b].sort()); // Compare the sorted arrays return sortedArr1 === sortedArr2; diff --git a/CommonUI/src/Components/CodeEditor/CodeEditor.tsx b/CommonUI/src/Components/CodeEditor/CodeEditor.tsx index e0d8f947a9..b1422719d2 100644 --- a/CommonUI/src/Components/CodeEditor/CodeEditor.tsx +++ b/CommonUI/src/Components/CodeEditor/CodeEditor.tsx @@ -15,7 +15,6 @@ export interface ComponentProps { placeholder?: undefined | string; className?: undefined | string; onChange?: undefined | ((value: string) => void); - value?: string | undefined; readOnly?: boolean | undefined; type: CodeType; onFocus?: (() => void) | undefined; @@ -33,6 +32,9 @@ const CodeEditor: FunctionComponent = ( const [placeholder, setPlaceholder] = useState(''); const [helpText, setHelpText] = useState(''); + const [isInitialValuesInitialized, setIsInitialValuesInitialized] = + useState(false); + useEffect(() => { if (props.placeholder) { if (props.type === CodeType.Markdown) { @@ -74,26 +76,9 @@ const CodeEditor: FunctionComponent = ( const [value, setValue] = useState(''); useEffect(() => { - props.onChange && props.onChange(value); - }, [value]); - - useEffect(() => { - if (props.initialValue) { - setValue(props.initialValue); - } - - if (props.value) { - setValue(props.value); - } - }, []); - - useEffect(() => { - setValue(props.value ? props.value : ''); - }, [props.value]); - - useEffect(() => { - if (props.initialValue) { + if (props.initialValue && !isInitialValuesInitialized) { setValue(props.initialValue); + setIsInitialValuesInitialized(true); } }, [props.initialValue]); @@ -123,6 +108,7 @@ const CodeEditor: FunctionComponent = ( setValue(code); props.onBlur && props.onBlur(); + props.onChange && props.onChange(value); }} defaultValue={props.initialValue || placeholder || ''} className={className} diff --git a/CommonUI/src/Components/Detail/Detail.tsx b/CommonUI/src/Components/Detail/Detail.tsx index 033700aa80..93d7eca0d9 100644 --- a/CommonUI/src/Components/Detail/Detail.tsx +++ b/CommonUI/src/Components/Detail/Detail.tsx @@ -137,7 +137,7 @@ const Detail: Function = (props: ComponentProps): ReactElement => { ); } diff --git a/CommonUI/src/Components/Dropdown/Dropdown.tsx b/CommonUI/src/Components/Dropdown/Dropdown.tsx index acc66950ff..0ba4551eac 100644 --- a/CommonUI/src/Components/Dropdown/Dropdown.tsx +++ b/CommonUI/src/Components/Dropdown/Dropdown.tsx @@ -5,7 +5,6 @@ import React, { useEffect, useState, } from 'react'; -import ArrayUtil from 'Common/Types/ArrayUtil'; export type DropdownValue = string | number | boolean; @@ -41,9 +40,8 @@ const Dropdown: FunctionComponent = ( DropdownOption | Array | null >(null); - const [initialValueSet, setInitialValueSet] = useState< - DropdownOption | Array | undefined - >(undefined); + const [isInitialValuesInitialized, setIsInitialValuesInitialized] = + useState(false); useEffect(() => { if (props.initialValue) { @@ -62,23 +60,10 @@ const Dropdown: FunctionComponent = ( }, [props.value]); useEffect(() => { - if ( - Array.isArray(initialValueSet) || - Array.isArray(props.initialValue) - ) { - if ( - !ArrayUtil.isEqual( - Array.isArray(initialValueSet) ? initialValueSet : [], - Array.isArray(props.initialValue) ? props.initialValue : [] - ) - ) { - setValue(props.initialValue || null); - } - } else if (initialValueSet !== props.initialValue) { - setValue(props.initialValue || null); + if (props.initialValue && !isInitialValuesInitialized) { + setValue(props.initialValue); + setIsInitialValuesInitialized(true); } - - setInitialValueSet(props.initialValue); }, [props.initialValue]); useEffect(() => { @@ -88,7 +73,7 @@ const Dropdown: FunctionComponent = ( if (typeof value === 'string') { dropdownValue = - props.options.find(i => { + props.options.find((i: DropdownOption) => { return i.value === value; }) || null; } @@ -102,7 +87,7 @@ const Dropdown: FunctionComponent = ( | DropdownOption | Array | null = - props.options.find((i) => { + props.options.find((i: DropdownOption) => { return i.value === item; }) || null; diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx index 68b7ff1f4f..3d7e76abbd 100644 --- a/CommonUI/src/Components/Forms/BasicForm.tsx +++ b/CommonUI/src/Components/Forms/BasicForm.tsx @@ -1,5 +1,6 @@ import React, { forwardRef, + ForwardRefExoticComponent, ReactElement, Ref, useEffect, @@ -9,7 +10,6 @@ import React, { import Button, { ButtonStyleType } from '../Button/Button'; import FormValues from './Types/FormValues'; import Fields from './Types/Fields'; -import DataField from './Types/Field'; import ButtonTypes from '../Button/ButtonTypes'; import BadDataException from 'Common/Types/Exception/BadDataException'; import { JSONObject, JSONValue } from 'Common/Types/JSON'; @@ -97,7 +97,7 @@ function getFieldType(fieldType: FormFieldSchemaType): string { } } -const BasicForm: Function = forwardRef( +const BasicForm: ForwardRefExoticComponent = forwardRef( ( props: ComponentProps, ref: Ref @@ -110,11 +110,19 @@ const BasicForm: Function = forwardRef( const [formFields, setFormFields] = useState>([]); - const setFieldTouched = (fieldName: string, value: boolean) => { + const setFieldTouched: Function = ( + fieldName: string, + value: boolean + ): void => { setTouched({ ...touched, [fieldName]: value }); }; - const [isInitialValuesInitialized, setIsInitialValuesInitialized] = useState(false); + const [isInitialValuesInitialized, setIsInitialValuesInitialized] = + useState(false); + + useEffect(() => { + validate(currentValue); + }, [currentValue]); useImperativeHandle( ref, @@ -129,10 +137,7 @@ const BasicForm: Function = forwardRef( ); useEffect(() => { - - console.log(props.fields); setFormFields([...props.fields]); - }, [props.fields]); const getFieldName: Function = (field: Field): string => { @@ -153,12 +158,14 @@ const BasicForm: Function = forwardRef( setTouched(touchedObj); }; - const setFieldValue = (fieldName: string, value: JSONValue) => { + const setFieldValue: Function = ( + fieldName: string, + value: JSONValue + ): void => { setCurrentValue({ ...currentValue, [fieldName]: value as any }); if (props.onChange) { props.onChange(currentValue); } - validate(currentValue); }; const submitForm: Function = (): void => { @@ -201,7 +208,7 @@ const BasicForm: Function = forwardRef( }; const getFormField: Function = ( - field: DataField, + field: Field, index: number, isDisabled: boolean, errors: Dictionary, @@ -220,7 +227,7 @@ const BasicForm: Function = forwardRef( if (props.showAsColumns && props.showAsColumns > 2) { throw new BadDataException( 'showAsCOlumns should be <= 2. It is currently ' + - props.showAsColumns + props.showAsColumns ); } @@ -278,10 +285,6 @@ const BasicForm: Function = forwardRef( : undefined } onChange={async (value: Color | null) => { - setCurrentValue({ - ...currentValue, - [fieldName]: value, - }); field.onChange && field.onChange(value); setFieldValue(fieldName, value); setFieldTouched(fieldName, true); @@ -290,7 +293,7 @@ const BasicForm: Function = forwardRef( placeholder={field.placeholder || ''} initialValue={ currentValue && - (currentValue as any)[fieldName] + (currentValue as any)[fieldName] ? (currentValue as any)[fieldName] : '' } @@ -299,71 +302,71 @@ const BasicForm: Function = forwardRef( {(field.fieldType === FormFieldSchemaType.Dropdown || field.fieldType === - FormFieldSchemaType.MultiSelectDropdown) && ( - - | null - ) => { - setCurrentValue({ - ...currentValue, - [fieldName]: value, - }); + FormFieldSchemaType.MultiSelectDropdown) && ( + + | null + ) => { + setCurrentValue({ + ...currentValue, + [fieldName]: value, + }); - field.onChange && field.onChange(value); - setFieldValue(fieldName, value); - }} - onBlur={async () => { - setFieldTouched(fieldName, true); - }} - isMultiSelect={ - field.fieldType === - FormFieldSchemaType.MultiSelectDropdown - } - options={field.dropdownOptions || []} - placeholder={field.placeholder || ''} - initialValue={ - currentValue && - (currentValue as any)[fieldName] - ? (currentValue as any)[fieldName] - : '' - } - /> - )} + field.onChange && field.onChange(value); + setFieldValue(fieldName, value); + }} + onBlur={async () => { + setFieldTouched(fieldName, true); + }} + isMultiSelect={ + field.fieldType === + FormFieldSchemaType.MultiSelectDropdown + } + options={field.dropdownOptions || []} + placeholder={field.placeholder || ''} + initialValue={ + currentValue && + (currentValue as any)[fieldName] + ? (currentValue as any)[fieldName] + : '' + } + /> + )} {field.fieldType === FormFieldSchemaType.RadioButton && ( - { - setCurrentValue({ - ...currentValue, - [fieldName]: value, - }); - field.onChange && field.onChange(value); - setFieldValue(fieldName, value); - }} - options={field.radioButtonOptions || []} - initialValue={ - currentValue && - (currentValue as any)[fieldName] - ? (currentValue as any)[fieldName] - : '' - } - /> - )} + { + setCurrentValue({ + ...currentValue, + [fieldName]: value, + }); + field.onChange && field.onChange(value); + setFieldValue(fieldName, value); + }} + options={field.radioButtonOptions || []} + initialValue={ + currentValue && + (currentValue as any)[fieldName] + ? (currentValue as any)[fieldName] + : '' + } + /> + )} {field.fieldType === FormFieldSchemaType.LongText && (