feat: Make GitServer and Cluster forms editable (#82)

Jira: EPMDPEDP-12815 Related: #82 Change-Id: I318824ec83b67c51f23869dfe51765b1a3ed89d5
epam · Oct 30, 2023 · ed1ae04 · ed1ae04
1 parent d2deb49
commit ed1ae04
Show file tree

Hide file tree

Showing 45 changed files with 326 additions and 4,071 deletions.
diff --git a/.../EDPGitServer/hooks/useCreateGitServer.ts → ...8s/EDPGitServer/hooks/useGitServerCRUD.ts b/.../EDPGitServer/hooks/useCreateGitServer.ts → ...8s/EDPGitServer/hooks/useGitServerCRUD.ts
@@ -11,7 +11,11 @@ interface CreateGitServerProps {
     gitServerSecretData: EDPKubeObjectInterface;
 }
 
-export const useCreateGitServer = ({
+interface EditGitServerProps {
+    gitServerData: EDPGitServerKubeObjectInterface;
+}
+
+export const useGitServerCRUD = ({
     onSuccess,
     onError,
 }: {
@@ -26,6 +30,11 @@ export const useCreateGitServer = ({
         CRUD_TYPES.CREATE
     >('gitServerCreateMutation', EDPGitServerKubeObject, CRUD_TYPES.CREATE);
 
+    const gitServerEditMutation = useResourceCRUDMutation<
+        EDPGitServerKubeObjectInterface,
+        CRUD_TYPES.EDIT
+    >('gitServerEditMutation', EDPGitServerKubeObject, CRUD_TYPES.EDIT);
+
     const gitServerSecretDeleteMutation = useResourceCRUDMutation<
         EDPKubeObjectInterface,
         CRUD_TYPES.DELETE
@@ -66,11 +75,25 @@ export const useCreateGitServer = ({
         ]
     );
 
+    const editGitServer = React.useCallback(
+        async ({ gitServerData }: EditGitServerProps) => {
+            gitServerEditMutation.mutate(gitServerData, {
+                onSuccess: () => {
+                    invokeOnSuccessCallback();
+                },
+                onError: () => {
+                    invokeOnErrorCallback();
+                },
+            });
+        },
+        [gitServerEditMutation, invokeOnErrorCallback, invokeOnSuccessCallback]
+    );
+
     const mutations = {
         gitServerCreateMutation,
         gitServerSecretCreateMutation,
         gitServerSecretDeleteMutation,
     };
 
-    return { createGitServer, mutations };
+    return { createGitServer, editGitServer, mutations };
 };
diff --git a/src/k8s/EDPGitServer/utils/editGitServerInstance/index.test.ts b/src/k8s/EDPGitServer/utils/editGitServerInstance/index.test.ts
@@ -0,0 +1,2 @@
+// Todo: write new mocks
+test('true', () => {});
diff --git a/src/k8s/EDPGitServer/utils/editGitServerInstance/index.ts b/src/k8s/EDPGitServer/utils/editGitServerInstance/index.ts
@@ -0,0 +1,26 @@
+import { set } from 'lodash';
+import { FormNameObject } from '../../../../types/forms';
+import { EDPGitServerKubeObjectInterface } from '../../types';
+
+export const editGitServerInstance = (
+    names: {
+        [key: string]: FormNameObject;
+    },
+    kubeObjectData: EDPGitServerKubeObjectInterface,
+    formValues: {
+        [key: string]: any;
+    }
+): EDPGitServerKubeObjectInterface => {
+    const base = { ...kubeObjectData };
+
+    for (const [propKey, propValue] of Object.entries(formValues)) {
+        if (names[propKey].notUsedInFormData) {
+            continue;
+        }
+
+        const propPath = names[propKey].path;
+        set(base, propPath, propValue);
+    }
+
+    return base;
+};
diff --git a/src/k8s/Secret/hooks/useCreateClusterSecret.ts b/src/k8s/Secret/hooks/useCreateClusterSecret.ts
diff --git a/...k8s/Secret/hooks/useRegistrySecretCRUD.ts → src/k8s/Secret/hooks/useSecretCRUD.ts b/...k8s/Secret/hooks/useRegistrySecretCRUD.ts → src/k8s/Secret/hooks/useSecretCRUD.ts
diff --git a/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx b/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx
@@ -28,7 +28,6 @@ export const PageView = () => {
                         <ManageClusterSecret
                             formData={{
                                 currentElement: el,
-                                isReadOnly: true,
                             }}
                         />
                     ),

diff --git a/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx b/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx
@@ -4,6 +4,7 @@ import { Render } from '../../../../components/Render';
 import { StatusIcon } from '../../../../components/StatusIcon';
 import { EDP_USER_GUIDE } from '../../../../constants/urls';
 import { EDPGitServerKubeObject } from '../../../../k8s/EDPGitServer';
+import { FORM_MODES } from '../../../../types/forms';
 import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace';
 import { rem } from '../../../../utils/styling/rem';
 import { ManageGitServer } from '../../../../widgets/ManageGitServer';
@@ -62,8 +63,8 @@ export const PageView = () => {
                     component: (
                         <ManageGitServer
                             formData={{
-                                currentElement: el,
-                                isReadOnly: true,
+                                currentElement: el.jsonData,
+                                mode: FORM_MODES.EDIT,
                             }}
                         />
                     ),
@@ -87,6 +88,7 @@ export const PageView = () => {
                     <ManageGitServer
                         formData={{
                             currentElement: 'placeholder',
+                            mode: FORM_MODES.CREATE,
                             handleClosePlaceholder,
                         }}
                     />

diff --git a/src/widgets/CreateCodebaseFromTemplate/components/fields/Name/index.tsx b/src/widgets/CreateCodebaseFromTemplate/components/fields/Name/index.tsx
@@ -9,6 +9,8 @@ import { CreateCodebaseFromTemplateFormValues } from '../../../types';
 const normalizeNameValue = (value: string): string =>
     typeof value === 'string' ? value.trim() : value;
 
+const nameRequirementLabel = `Component name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
+
 export const Name = () => {
     const {
         register,
@@ -20,7 +22,6 @@ export const Name = () => {
 
     const gitServerFieldValue = watch(CODEBASE_FROM_TEMPLATE_FORM_NAMES.gitServer.name);
 
-    const nameRequirementLabel = `Component name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
     const onChange = ({ target: { value } }: FieldEvent): void => {
         const normalizedValue = normalizeNameValue(value);
         if (

diff --git a/src/widgets/CreateEditCodebase/components/fields/Name/index.tsx b/src/widgets/CreateEditCodebase/components/fields/Name/index.tsx
@@ -4,15 +4,15 @@ import { FormTextField } from '../../../../../providers/Form/components/FormText
 import { CODEBASE_FORM_NAMES } from '../../../names';
 import { CreateCodebaseFormValues } from '../../Create/types';
 
+const nameRequirementLabel = `Component name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
+
 export const Name = () => {
     const {
         register,
         control,
         formState: { errors },
     } = useFormContext<CreateCodebaseFormValues>();
 
-    const nameRequirementLabel = `Component name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
-
     return (
         <FormTextField
             {...register(CODEBASE_FORM_NAMES.name.name, {

diff --git a/src/widgets/CreateEditStage/components/fields/Namespace/index.tsx b/src/widgets/CreateEditStage/components/fields/Namespace/index.tsx
@@ -4,6 +4,8 @@ import { FormTextField } from '../../../../../providers/Form/components/FormText
 import { STAGE_FORM_NAMES } from '../../../names';
 import { CreateEditStageFormValues } from '../../../types';
 
+const nameRequirementLabel = `Name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
+
 export const Namespace = () => {
     const {
         register,
@@ -15,6 +17,10 @@ export const Namespace = () => {
         <FormTextField
             {...register(STAGE_FORM_NAMES.deployNamespace.name, {
                 required: `Enter namespace to deploy to`,
+                pattern: {
+                    value: /^[a-z](?!.*--[^-])[a-z0-9-]*[a-z0-9]$/,
+                    message: nameRequirementLabel,
+                },
             })}
             label={'Namespace'}
             title={'Target namespace for deploying stage workload.'}

diff --git a/src/widgets/CreateEditStage/components/fields/StageName/index.tsx b/src/widgets/CreateEditStage/components/fields/StageName/index.tsx
@@ -9,6 +9,8 @@ import { STAGE_FORM_NAMES } from '../../../names';
 import { CreateEditStageDialogForwardedProps, CreateEditStageFormValues } from '../../../types';
 import { StageNameProps } from './types';
 
+const nameRequirementLabel = `Name must be not less than two characters long. It must contain only lowercase letters, numbers, and dashes. It cannot start or end with a dash, and cannot have whitespaces`;
+
 export const StageName = ({ otherStagesNames }: StageNameProps) => {
     const {
         register,
@@ -30,6 +32,10 @@ export const StageName = ({ otherStagesNames }: StageNameProps) => {
         <FormTextField
             {...register(STAGE_FORM_NAMES.name.name, {
                 required: `Enter stage name`,
+                pattern: {
+                    value: /^[a-z](?!.*--[^-])[a-z0-9-]*[a-z0-9]$/,
+                    message: nameRequirementLabel,
+                },
                 onChange: ({ target: { value } }: FieldEvent) => {
                     setValue(
                         STAGE_FORM_NAMES.deployNamespace.name,

diff --git a/src/widgets/ManageClusterSecret/components/FormActions/index.tsx b/src/widgets/ManageClusterSecret/components/FormActions/index.tsx
@@ -2,7 +2,7 @@ import { Button, Grid } from '@material-ui/core';
 import React from 'react';
 import { useFormContext as useReactHookFormContext } from 'react-hook-form';
 import { Render } from '../../../../components/Render';
-import { useCreateClusterSecret } from '../../../../k8s/Secret/hooks/useCreateClusterSecret';
+import { useSecretCRUD } from '../../../../k8s/Secret/hooks/useSecretCRUD';
 import { createClusterSecretInstance } from '../../../../k8s/Secret/utils/createClusterSecretInstance';
 import { useFormContext } from '../../../../providers/Form/hooks';
 import { FORM_MODES } from '../../../../types/forms';
@@ -12,7 +12,7 @@ import { ManageClusterSecretDataContext, ManageClusterSecretValues } from '../..
 
 export const FormActions = () => {
     const {
-        formData: { currentElement, handleClosePlaceholder, isReadOnly },
+        formData: { currentElement, handleClosePlaceholder },
     } = useFormContext<ManageClusterSecretDataContext>();
 
     const isPlaceholder = typeof currentElement === 'string' && currentElement === 'placeholder';
@@ -26,20 +26,23 @@ export const FormActions = () => {
     } = useReactHookFormContext<ManageClusterSecretValues>();
 
     const handleClose = React.useCallback(() => {
-        reset();
-        handleClosePlaceholder();
-    }, [handleClosePlaceholder, reset]);
+        if (mode === FORM_MODES.CREATE) {
+            reset();
+            handleClosePlaceholder();
+        }
+    }, [handleClosePlaceholder, mode, reset]);
 
     const {
-        createClusterSecret,
-        mutations: { clusterSecretCreateMutation },
-    } = useCreateClusterSecret({
+        createSecret,
+        editSecret,
+        mutations: { secretCreateMutation, secretEditMutation },
+    } = useSecretCRUD({
         onSuccess: handleClose,
     });
 
     const isLoading = React.useMemo(
-        () => clusterSecretCreateMutation.isLoading,
-        [clusterSecretCreateMutation.isLoading]
+        () => secretCreateMutation.isLoading || secretEditMutation.isLoading,
+        [secretCreateMutation, secretEditMutation]
     );
 
     const onSubmit = React.useCallback(async () => {
@@ -56,11 +59,18 @@ export const FormActions = () => {
             clusterCertificate,
         });
 
-        await createClusterSecret({
-            clusterSecretData: newClusterSecretData,
-        });
+        if (mode === FORM_MODES.CREATE) {
+            await createSecret({
+                secretData: newClusterSecretData,
+            });
+        } else {
+            await editSecret({
+                secretData: newClusterSecretData,
+            });
+        }
+
         reset();
-    }, [createClusterSecret, getValues, reset]);
+    }, [createSecret, editSecret, getValues, mode, reset]);
 
     return (
         <>
@@ -79,7 +89,7 @@ export const FormActions = () => {
                                 onClick={() => reset()}
                                 size="small"
                                 component={'button'}
-                                disabled={!isDirty || isReadOnly}
+                                disabled={!isDirty}
                             >
                                 undo changes
                             </Button>
@@ -91,7 +101,7 @@ export const FormActions = () => {
                                 component={'button'}
                                 variant={'contained'}
                                 color={'primary'}
-                                disabled={isLoading || isReadOnly || !isDirty}
+                                disabled={isLoading || !isDirty}
                                 onClick={handleSubmit(onSubmit)}
                             >
                                 save

diff --git a/src/widgets/ManageClusterSecret/components/fields/ClusterCertificate/index.tsx b/src/widgets/ManageClusterSecret/components/fields/ClusterCertificate/index.tsx
@@ -2,9 +2,8 @@ import { Grid } from '@material-ui/core';
 import React from 'react';
 import { useFormContext as useReactHookFormContext } from 'react-hook-form';
 import { FormTextField } from '../../../../../providers/Form/components/FormTextField';
-import { useFormContext } from '../../../../../providers/Form/hooks';
 import { CLUSTER_CREATION_FORM_NAMES } from '../../../names';
-import { ManageClusterSecretDataContext, ManageClusterSecretValues } from '../../../types';
+import { ManageClusterSecretValues } from '../../../types';
 
 export const ClusterCertificate = () => {
     const {
@@ -13,10 +12,6 @@ export const ClusterCertificate = () => {
         formState: { errors },
     } = useReactHookFormContext<ManageClusterSecretValues>();
 
-    const {
-        formData: { isReadOnly },
-    } = useFormContext<ManageClusterSecretDataContext>();
-
     return (
         <Grid item xs={12}>
             <FormTextField
@@ -27,7 +22,6 @@ export const ClusterCertificate = () => {
                 placeholder={'Enter cluster certificate'}
                 control={control}
                 errors={errors}
-                disabled={isReadOnly}
             />
         </Grid>
     );

diff --git a/src/widgets/ManageClusterSecret/components/fields/ClusterHost/index.tsx b/src/widgets/ManageClusterSecret/components/fields/ClusterHost/index.tsx
@@ -2,9 +2,8 @@ import { Grid } from '@material-ui/core';
 import React from 'react';
 import { useFormContext as useReactHookFormContext } from 'react-hook-form';
 import { FormTextField } from '../../../../../providers/Form/components/FormTextField';
-import { useFormContext } from '../../../../../providers/Form/hooks';
 import { CLUSTER_CREATION_FORM_NAMES } from '../../../names';
-import { ManageClusterSecretDataContext, ManageClusterSecretValues } from '../../../types';
+import { ManageClusterSecretValues } from '../../../types';
 
 export const ClusterHost = () => {
     const {
@@ -13,10 +12,6 @@ export const ClusterHost = () => {
         formState: { errors },
     } = useReactHookFormContext<ManageClusterSecretValues>();
 
-    const {
-        formData: { isReadOnly },
-    } = useFormContext<ManageClusterSecretDataContext>();
-
     return (
         <Grid item xs={12}>
             <FormTextField
@@ -27,7 +22,6 @@ export const ClusterHost = () => {
                 placeholder={'Enter cluster host'}
                 control={control}
                 errors={errors}
-                disabled={isReadOnly}
             />
         </Grid>
     );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Todo: write new mocks
		test('true', () => {});