diff --git a/hub/src/locale/en.json b/hub/src/locale/en.json index 6b1407f6a..4b81e605a 100644 --- a/hub/src/locale/en.json +++ b/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", diff --git a/hub/src/pages/Project/Details/Settings/index.tsx b/hub/src/pages/Project/Details/Settings/index.tsx index cd9af40f4..b483cc385 100644 --- a/hub/src/pages/Project/Details/Settings/index.tsx +++ b/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 = () => {
{t('projects.edit.lambda.storage_backend.type')} -
{data.backend.storage_backend.type}
+
{getLambdaStorageTypeLabel(data.backend.storage_backend.type)}
diff --git a/hub/src/pages/Project/Form/AWS/index.tsx b/hub/src/pages/Project/Form/AWS/index.tsx index 1b9b6906d..816e47793 100644 --- a/hub/src/pages/Project/Form/AWS/index.tsx +++ b/hub/src/pages/Project/Form/AWS/index.tsx @@ -127,6 +127,10 @@ 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 88a3e2761..fef82209c 100644 --- a/hub/src/pages/Project/Form/Azure/index.tsx +++ b/hub/src/pages/Project/Form/Azure/index.tsx @@ -130,6 +130,10 @@ 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 c66a9176b..47626242e 100644 --- a/hub/src/pages/Project/Form/GCP/index.tsx +++ b/hub/src/pages/Project/Form/GCP/index.tsx @@ -190,6 +190,10 @@ 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 eae0c3f33..37c7b041b 100644 --- a/hub/src/pages/Project/Form/Lambda/index.tsx +++ b/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 = ({ 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 = ({ 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/index.tsx b/hub/src/pages/Project/Form/index.tsx index 12c02b8d9..d0bf26429 100644 --- a/hub/src/pages/Project/Form/index.tsx +++ b/hub/src/pages/Project/Form/index.tsx @@ -63,6 +63,7 @@ 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(() => { @@ -113,8 +114,12 @@ 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 ( diff --git a/hub/src/pages/Project/List/index.tsx b/hub/src/pages/Project/List/index.tsx index 9d4b1d3c3..27b653c71 100644 --- a/hub/src/pages/Project/List/index.tsx +++ b/hub/src/pages/Project/List/index.tsx @@ -8,6 +8,8 @@ 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; @@ -15,8 +17,11 @@ interface IProjectSettingsNodeProps { export const ProjectSettingsNode: React.FC = ({ settingsKey, settingsValue }) => { return ( -
-
{settingsKey}:
{settingsValue} +
+
{settingsKey}:
{' '} + + {settingsValue} +
); }; @@ -70,27 +75,37 @@ export const ProjectList: React.FC = () => { const getProjectSettings = (project: IProject) => { switch (project.backend.type) { - case 'aws': + case BackendTypesEnum.AWS: return (
); - case 'azure': + + case BackendTypesEnum.AZURE: return (
); - case 'gcp': + + case BackendTypesEnum.GCP: return (
); + + case BackendTypesEnum.LAMBDA: + return ( +
+ + +
+ ); case 'local': return '-'; } diff --git a/hub/src/pages/Project/utils.ts b/hub/src/pages/Project/utils.ts index 361ecb4a1..c5ac992b9 100644 --- a/hub/src/pages/Project/utils.ts +++ b/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]; +}; diff --git a/hub/src/types/project.d.ts b/hub/src/types/project.d.ts index 77d9d237a..349d305c4 100644 --- a/hub/src/types/project.d.ts +++ b/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[] } }, }