From 2d7f61fcda5b7a449c99ac9e0fc638bd67d78d49 Mon Sep 17 00:00:00 2001 From: Oleg Vavilov Date: Thu, 13 Jul 2023 17:08:00 +0300 Subject: [PATCH 1/2] #529 Regions marked as required field Fixed types Fixed Multiselect field --- hub/src/components/form/Multiselect/index.tsx | 2 +- hub/src/pages/Project/Form/Lambda/index.tsx | 5 +++-- hub/src/pages/Project/Form/index.tsx | 5 ----- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/hub/src/components/form/Multiselect/index.tsx b/hub/src/components/form/Multiselect/index.tsx index d57da8970..98a3404d9 100644 --- a/hub/src/components/form/Multiselect/index.tsx +++ b/hub/src/components/form/Multiselect/index.tsx @@ -25,7 +25,7 @@ export const FormMultiselect = ({ control={control} rules={rules} render={({ field: { onChange, ...fieldRest }, fieldState: { error } }) => { - const selectedOptions = props.options?.filter((i) => fieldRest.value.includes(i.value)) ?? null; + const selectedOptions = props.options?.filter((i) => fieldRest.value?.includes(i.value)) ?? null; const onChangeSelect: MultiselectProps['onChange'] = (event) => { const value = event.detail.selectedOptions.map((item) => item.value); diff --git a/hub/src/pages/Project/Form/Lambda/index.tsx b/hub/src/pages/Project/Form/Lambda/index.tsx index 37c7b041b..f5782d3d3 100644 --- a/hub/src/pages/Project/Form/Lambda/index.tsx +++ b/hub/src/pages/Project/Form/Lambda/index.tsx @@ -6,7 +6,7 @@ import { debounce, get as _get } from 'lodash'; import { FormInput, FormMultiselect, - FormMultiselectProps, + FormMultiselectOptions, FormS3BucketSelector, FormSelect, FormSelectOptions, @@ -30,7 +30,7 @@ export const LambdaBackend: React.FC = ({ loading }) => { const [pushNotification] = useNotifications(); const { control, getValues, setValue, setError, clearErrors } = useFormContext(); const [valuesData, setValuesData] = useState(); - const [regions, setRegions] = useState([]); + const [regions, setRegions] = useState([]); const [buckets, setBuckets] = useState([]); const [storageBackendType, setStorageBackendType] = useState([]); const lastUpdatedField = useRef(null); @@ -183,6 +183,7 @@ export const LambdaBackend: React.FC = ({ loading }) => { onChange={getOnChangeSelectField(FIELD_NAMES.REGIONS)} disabled={getDisabledByFieldName(FIELD_NAMES.REGIONS)} secondaryControl={renderSpinner()} + rules={{ required: t('validation.required') }} options={regions} /> diff --git a/hub/src/pages/Project/Form/index.tsx b/hub/src/pages/Project/Form/index.tsx index d0bf26429..12c02b8d9 100644 --- a/hub/src/pages/Project/Form/index.tsx +++ b/hub/src/pages/Project/Form/index.tsx @@ -63,7 +63,6 @@ export const ProjectForm: React.FC = ({ initialValues, onCancel, loading const { handleSubmit, control, watch, setError, reset, clearErrors } = formMethods; const backendType = watch('backend.type'); - const backendTemp = watch('backend'); const projectNameValue = watch('project_name'); const backendOptions: TBackendOption[] = useMemo(() => { @@ -114,12 +113,8 @@ export const ProjectForm: React.FC = ({ initialValues, onCancel, loading type: value as TProjectBackendType, }, }); - - console.log('Reset'); }; - console.log('backendTemp', backendTemp); - const renderUnsupportedBackedMessage = (backendName: string, backendTypeName: BackendTypesEnum) => { return ( From b058c9141e0696ed4aadd01b07fa3dd468e02c54 Mon Sep 17 00:00:00 2001 From: Oleg Vavilov Date: Thu, 13 Jul 2023 17:39:20 +0300 Subject: [PATCH 2/2] #529 Regions marked as required field Fixed types Fixed Multiselect field Fixed defect with editing project settings --- hub/src/pages/Project/Details/Settings/index.tsx | 6 +++++- hub/src/pages/Project/Form/AWS/index.tsx | 8 ++++---- hub/src/pages/Project/Form/Azure/index.tsx | 9 +++++---- hub/src/pages/Project/Form/GCP/index.tsx | 8 ++++---- hub/src/pages/Project/Form/Lambda/index.tsx | 8 ++++---- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/hub/src/pages/Project/Details/Settings/index.tsx b/hub/src/pages/Project/Details/Settings/index.tsx index b483cc385..e7b8ae10c 100644 --- a/hub/src/pages/Project/Details/Settings/index.tsx +++ b/hub/src/pages/Project/Details/Settings/index.tsx @@ -175,6 +175,8 @@ export const ProjectSettings: React.FC = () => { const renderLambdaBackendDetails = (): React.ReactNode => { if (!data) return null; + const regions = data.backend.regions ? data.backend.regions.join(', ') : ''; + return (
@@ -184,7 +186,9 @@ export const ProjectSettings: React.FC = () => {
{t('projects.edit.lambda.regions')} -
{data.backend.regions.join(', ')}
+
+ {regions} +
diff --git a/hub/src/pages/Project/Form/AWS/index.tsx b/hub/src/pages/Project/Form/AWS/index.tsx index 816e47793..14f0d1aba 100644 --- a/hub/src/pages/Project/Form/AWS/index.tsx +++ b/hub/src/pages/Project/Form/AWS/index.tsx @@ -10,6 +10,7 @@ import { isRequestFormErrors2, isRequestFormFieldError } from 'libs'; import { useBackendValuesMutation } from 'services/project'; import { AWSCredentialTypeEnum } from 'types'; +import useIsMounted from '../../../../hooks/useIsMounted'; import { BUCKET_HELP, CREDENTIALS_HELP, FIELD_NAMES, REGION_HELP, SUBNET_HELP } from './constants'; import { IProps } from './types'; @@ -27,6 +28,7 @@ export const AWSBackend: React.FC = ({ loading }) => { const [availableDefaultCredentials, setAvailableDefaultCredentials] = useState(null); const lastUpdatedField = useRef(null); const isFirstRender = useRef(true); + const isMounted = useIsMounted(); const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation(); @@ -62,6 +64,8 @@ export const AWSBackend: React.FC = ({ loading }) => { const response = await request.unwrap(); + if (!isMounted()) return; + setValuesData(response); lastUpdatedField.current = null; @@ -127,10 +131,6 @@ export const AWSBackend: React.FC = ({ loading }) => { changeFormHandler().catch(console.log); isFirstRender.current = false; - - return () => { - if (requestRef.current) requestRef.current.abort(); - }; }, []); const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []); diff --git a/hub/src/pages/Project/Form/Azure/index.tsx b/hub/src/pages/Project/Form/Azure/index.tsx index fef82209c..0f9732f33 100644 --- a/hub/src/pages/Project/Form/Azure/index.tsx +++ b/hub/src/pages/Project/Form/Azure/index.tsx @@ -10,6 +10,7 @@ import { isRequestFormErrors2, isRequestFormFieldError } from 'libs'; import { useBackendValuesMutation } from 'services/project'; import { AzureCredentialTypeEnum } from 'types'; +import useIsMounted from '../../../../hooks/useIsMounted'; import { CREDENTIALS_HELP, FIELD_NAMES, LOCATION_HELP, STORAGE_ACCOUNT_HELP, SUBSCRIPTION_HELP } from './constants'; import { IProps } from './types'; @@ -30,6 +31,7 @@ export const AzureBackend: React.FC = ({ loading }) => { const [availableDefaultCredentials, setAvailableDefaultCredentials] = useState(null); const lastUpdatedField = useRef(null); const isFirstRender = useRef(true); + const isMounted = useIsMounted(); const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation(); @@ -61,6 +63,9 @@ export const AzureBackend: React.FC = ({ loading }) => { const request = getBackendValues(backendFormValues); requestRef.current = request; const response = await request.unwrap(); + + if (!isMounted()) return; + setValuesData(response); lastUpdatedField.current = null; @@ -130,10 +135,6 @@ export const AzureBackend: React.FC = ({ loading }) => { changeFormHandler().catch(console.log); isFirstRender.current = false; - - return () => { - if (requestRef.current) requestRef.current.abort(); - }; }, []); const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []); diff --git a/hub/src/pages/Project/Form/GCP/index.tsx b/hub/src/pages/Project/Form/GCP/index.tsx index 47626242e..eebc43adf 100644 --- a/hub/src/pages/Project/Form/GCP/index.tsx +++ b/hub/src/pages/Project/Form/GCP/index.tsx @@ -9,6 +9,7 @@ import { isRequestFormErrors2, isRequestFormFieldError } from 'libs'; import { useBackendValuesMutation } from 'services/project'; import { GCPCredentialTypeEnum } from 'types'; +import useIsMounted from '../../../../hooks/useIsMounted'; import { AREA_HELP, BUCKET_HELP, FIELD_NAMES, REGION_HELP, SERVICE_ACCOUNT_HELP, SUBNET_HELP, ZONE_HELP } from './constants'; import { IProps, VPCSubnetOption } from './types'; @@ -49,6 +50,7 @@ export const GCPBackend: React.FC = ({ loading }) => { const [pushNotification] = useNotifications(); const lastUpdatedField = useRef(null); const isFirstRender = useRef(true); + const isMounted = useIsMounted(); const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation(); const backendCredentialTypeValue = watch(`backend.${FIELD_NAMES.CREDENTIALS.TYPE}`); @@ -75,6 +77,8 @@ export const GCPBackend: React.FC = ({ loading }) => { requestRef.current = request; const response = await request.unwrap(); + if (!isMounted()) return; + setValuesData(response); lastUpdatedField.current = null; @@ -190,10 +194,6 @@ export const GCPBackend: React.FC = ({ loading }) => { const file = new File([''], fileName, { type: 'text/plain' }); setFiles([file]); } - - return () => { - if (requestRef.current) requestRef.current.abort(); - }; }, []); const onChangeFormField = () => { diff --git a/hub/src/pages/Project/Form/Lambda/index.tsx b/hub/src/pages/Project/Form/Lambda/index.tsx index f5782d3d3..900e10783 100644 --- a/hub/src/pages/Project/Form/Lambda/index.tsx +++ b/hub/src/pages/Project/Form/Lambda/index.tsx @@ -19,6 +19,7 @@ import { useHelpPanel, useNotifications } from 'hooks'; import { isRequestFormErrors2, isRequestFormFieldError } from 'libs'; import { useBackendValuesMutation } from 'services/project'; +import useIsMounted from '../../../../hooks/useIsMounted'; import { DEFAULT_HELP, FIELD_NAMES } from './constants'; import { IProps } from './types'; @@ -35,6 +36,7 @@ export const LambdaBackend: React.FC = ({ loading }) => { const [storageBackendType, setStorageBackendType] = useState([]); const lastUpdatedField = useRef(null); const isFirstRender = useRef(true); + const isMounted = useIsMounted(); const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation(); @@ -64,6 +66,8 @@ export const LambdaBackend: React.FC = ({ loading }) => { const response = await request.unwrap(); + if (!isMounted()) return; + setValuesData(response); lastUpdatedField.current = null; @@ -124,10 +128,6 @@ export const LambdaBackend: React.FC = ({ loading }) => { changeFormHandler().catch(console.log); isFirstRender.current = false; - - return () => { - if (requestRef.current) requestRef.current.abort(); - }; }, []); const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []);