529 fixes after review

hub/src/components/form/Multiselect/index.tsx

@@ -25,7 +25,7 @@ export const FormMultiselect = <T extends FieldValues>({
             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);

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 (
             <ColumnLayout columns={4} variant="text-grid">
                 <div>
@@ -184,7 +186,9 @@ export const ProjectSettings: React.FC = () => {
 
                 <div>
                     <Box variant="awsui-key-label">{t('projects.edit.lambda.regions')}</Box>
-                    <div>{data.backend.regions.join(', ')}</div>
+                    <div style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} title={regions}>
+                        {regions}
+                    </div>
                 </div>
 
                 <div>

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<IProps> = ({ loading }) => {
     const [availableDefaultCredentials, setAvailableDefaultCredentials] = useState<null | boolean>(null);
     const lastUpdatedField = useRef<string | null>(null);
     const isFirstRender = useRef<boolean>(true);
+    const isMounted = useIsMounted();
 
     const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation();
 
@@ -62,6 +64,8 @@ export const AWSBackend: React.FC<IProps> = ({ loading }) => {
 
             const response = await request.unwrap();
 
+            if (!isMounted()) return;
+
             setValuesData(response);
 
             lastUpdatedField.current = null;
@@ -127,10 +131,6 @@ export const AWSBackend: React.FC<IProps> = ({ loading }) => {
 
         changeFormHandler().catch(console.log);
         isFirstRender.current = false;
-
-        return () => {
-            if (requestRef.current) requestRef.current.abort();
-        };
     }, []);
 
     const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []);

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<IProps> = ({ loading }) => {
     const [availableDefaultCredentials, setAvailableDefaultCredentials] = useState<boolean | null>(null);
     const lastUpdatedField = useRef<string | null>(null);
     const isFirstRender = useRef<boolean>(true);
+    const isMounted = useIsMounted();
 
     const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation();
 
@@ -61,6 +63,9 @@ export const AzureBackend: React.FC<IProps> = ({ 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<IProps> = ({ loading }) => {
 
         changeFormHandler().catch(console.log);
         isFirstRender.current = false;
-
-        return () => {
-            if (requestRef.current) requestRef.current.abort();
-        };
     }, []);
 
     const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []);

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<IProps> = ({ loading }) => {
     const [pushNotification] = useNotifications();
     const lastUpdatedField = useRef<string | null>(null);
     const isFirstRender = useRef<boolean>(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<IProps> = ({ 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<IProps> = ({ loading }) => {
             const file = new File([''], fileName, { type: 'text/plain' });
             setFiles([file]);
         }
-
-        return () => {
-            if (requestRef.current) requestRef.current.abort();
-        };
     }, []);
 
     const onChangeFormField = () => {

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,
@@ -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';
@@ -30,11 +31,12 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
     const [pushNotification] = useNotifications();
     const { control, getValues, setValue, setError, clearErrors } = useFormContext();
     const [valuesData, setValuesData] = useState<IProjectAwsBackendValues | undefined>();
-    const [regions, setRegions] = useState<FormMultiselectProps>([]);
+    const [regions, setRegions] = useState<FormMultiselectOptions>([]);
     const [buckets, setBuckets] = useState<TAwsBucket[]>([]);
     const [storageBackendType, setStorageBackendType] = useState<FormSelectOptions>([]);
     const lastUpdatedField = useRef<string | null>(null);
     const isFirstRender = useRef<boolean>(true);
+    const isMounted = useIsMounted();
 
     const [getBackendValues, { isLoading: isLoadingValues }] = useBackendValuesMutation();
 
@@ -64,6 +66,8 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
 
             const response = await request.unwrap();
 
+            if (!isMounted()) return;
+
             setValuesData(response);
 
             lastUpdatedField.current = null;
@@ -124,10 +128,6 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
 
         changeFormHandler().catch(console.log);
         isFirstRender.current = false;
-
-        return () => {
-            if (requestRef.current) requestRef.current.abort();
-        };
     }, []);
 
     const debouncedChangeFormHandler = useCallback(debounce(changeFormHandler, 1000), []);
@@ -183,6 +183,7 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
                 onChange={getOnChangeSelectField(FIELD_NAMES.REGIONS)}
                 disabled={getDisabledByFieldName(FIELD_NAMES.REGIONS)}
                 secondaryControl={renderSpinner()}
+                rules={{ required: t('validation.required') }}
                 options={regions}
             />
 

hub/src/pages/Project/Form/index.tsx

@@ -63,7 +63,6 @@ export const ProjectForm: React.FC<IProps> = ({ 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<IProps> = ({ initialValues, onCancel, loading
                 type: value as TProjectBackendType,
             },
         });
-
-        console.log('Reset');
     };
 
-    console.log('backendTemp', backendTemp);
-
     const renderUnsupportedBackedMessage = (backendName: string, backendTypeName: BackendTypesEnum) => {
         return (
             <Grid gridDefinition={[{ colspan: 8 }]}>