#529 Fixed labels

hub/src/locale/en.json

@@ -154,8 +154,8 @@
         "regions_description": "Select regions to run workflows and store artifacts",
         "regions_placeholder": "Select regions",
         "storage_backend": {
-          "type": "Type",
-          "type_description": "Type of backend storage",
+          "type": "Storage",
+          "type_description": "Backend storage",
           "type_placeholder": "Select type",
           "credentials": {
             "access_key_id": "Access key ID",

hub/src/pages/Project/Details/Settings/index.tsx

@@ -13,7 +13,7 @@ import { useDeleteProjectsMutation, useGetProjectQuery, useUpdateProjectMembersM
 import { selectAuthToken, selectUserData } from 'App/slice';
 
 import { ProjectMembers } from '../../Members';
-import { getProjectRoleByUserName } from '../../utils';
+import { getLambdaStorageTypeLabel, getProjectRoleByUserName } from '../../utils';
 
 import { BackendTypesEnum } from '../../Form/types';
 
@@ -189,7 +189,7 @@ export const ProjectSettings: React.FC = () => {
 
                 <div>
                     <Box variant="awsui-key-label">{t('projects.edit.lambda.storage_backend.type')}</Box>
-                    <div>{data.backend.storage_backend.type}</div>
+                    <div>{getLambdaStorageTypeLabel(data.backend.storage_backend.type)}</div>
                 </div>
 
                 <div>

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

@@ -127,6 +127,10 @@ 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

@@ -130,6 +130,10 @@ 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

@@ -190,6 +190,10 @@ 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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { debounce } from 'lodash';
+import { debounce, get as _get } from 'lodash';
 
 import {
     FormInput,
@@ -49,6 +49,13 @@ export const LambdaBackend: React.FC<IProps> = ({ loading }) => {
             return;
         }
 
+        if (
+            backendFormValues?.storage_backend?.credentials &&
+            !_get(backendFormValues, FIELD_NAMES.STORAGE_BACKEND.CREDENTIALS.ACCESS_KEY) &&
+            !_get(backendFormValues, FIELD_NAMES.STORAGE_BACKEND.CREDENTIALS.SECRET_KEY)
+        )
+            backendFormValues.storage_backend.credentials = null;
+
         clearErrors('backend');
 
         try {
@@ -117,6 +124,10 @@ 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), []);

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

@@ -63,6 +63,7 @@ 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(() => {
@@ -113,8 +114,12 @@ 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 }]}>

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

@@ -8,15 +8,20 @@ import { useBreadcrumbs, useCollection } from 'hooks';
 import { ROUTES } from 'routes';
 import { useGetProjectsQuery } from 'services/project';
 
+import { BackendTypesEnum } from '../Form/types';
+
 interface IProjectSettingsNodeProps {
     settingsKey: string;
     settingsValue: string;
 }
 
 export const ProjectSettingsNode: React.FC<IProjectSettingsNodeProps> = ({ settingsKey, settingsValue }) => {
     return (
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div>{settingsKey}:</div> {settingsValue}
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '10px' }}>
+            <div>{settingsKey}:</div>{' '}
+            <span style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} title={settingsValue}>
+                {settingsValue}
+            </span>
         </div>
     );
 };
@@ -70,27 +75,37 @@ export const ProjectList: React.FC = () => {
 
     const getProjectSettings = (project: IProject) => {
         switch (project.backend.type) {
-            case 'aws':
+            case BackendTypesEnum.AWS:
                 return (
                     <div>
                         <ProjectSettingsNode settingsKey="Region" settingsValue={project.backend.region_name_title} />
                         <ProjectSettingsNode settingsKey="Bucket" settingsValue={project.backend.s3_bucket_name} />
                     </div>
                 );
-            case 'azure':
+
+            case BackendTypesEnum.AZURE:
                 return (
                     <div>
                         <ProjectSettingsNode settingsKey="Location" settingsValue={project.backend.location} />
                         <ProjectSettingsNode settingsKey="Storage account" settingsValue={project.backend.storage_account} />
                     </div>
                 );
-            case 'gcp':
+
+            case BackendTypesEnum.GCP:
                 return (
                     <div>
                         <ProjectSettingsNode settingsKey="Region" settingsValue={project.backend.region} />
                         <ProjectSettingsNode settingsKey="Bucket" settingsValue={project.backend.bucket_name} />
                     </div>
                 );
+
+            case BackendTypesEnum.LAMBDA:
+                return (
+                    <div>
+                        <ProjectSettingsNode settingsKey="Regions" settingsValue={project.backend.regions.join(', ')} />
+                        <ProjectSettingsNode settingsKey="Bucket" settingsValue={project.backend.storage_backend.bucket_name} />
+                    </div>
+                );
             case 'local':
                 return '-';
         }

hub/src/pages/Project/utils.ts

@@ -1,3 +1,7 @@
 export const getProjectRoleByUserName = (project: IProject, userName: IProjectMember['user_name']): TProjectRole | null => {
     return project.members.find((m) => m.user_name === userName)?.project_role ?? null;
 };
+
+export const getLambdaStorageTypeLabel = (type: TProjectBackendLambda['storage_backend']['type']) => {
+    return { aws: 'AWS S3' }[type];
+};

hub/src/types/project.d.ts

@@ -88,7 +88,6 @@ declare interface IProjectLambdaBackendValues {
         bucket_name: null | {
             selected?: string,
             values: { value: string, label: string}[]
-            // values: TAwsBucket[]
         }
     },
 }