From cc65b3412a949a8c807fcbdb6c6afb2139bd3712 Mon Sep 17 00:00:00 2001
From: Vladyslav Palyvoda <vladyslav_palyvoda@epam.com>
Date: Thu, 14 Nov 2024 16:30:34 +0200
Subject: [PATCH] fix: Empty variables list (#483)

---
 Dockerfile                                    |   2 +-
 .../components/Variables/index.tsx            | 149 +++++++++++-------
 2 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 80c4908a..41964b89 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM epamedp/headlamp:0.22.35
+FROM epamedp/headlamp:0.22.36
 
 COPY --chown=100:101 assets/ /headlamp/frontend
 COPY --chown=100:101 dist/main.js /headlamp/plugins/edp/main.js
diff --git a/src/pages/stage-details/components/Variables/index.tsx b/src/pages/stage-details/components/Variables/index.tsx
index 9c60ca2d..5a5c0d2e 100644
--- a/src/pages/stage-details/components/Variables/index.tsx
+++ b/src/pages/stage-details/components/Variables/index.tsx
@@ -51,69 +51,70 @@ export const Variables = ({ configMap }: { configMap: ConfigMapKubeObjectInterfa
 
   const theme = useTheme();
 
-  const onSubmit = (values) => {
-    const configMapCopy = { ...configMap };
-    configMapCopy.data = values.variables.reduce((acc, { key, value }) => {
-      acc[key] = value;
-      return acc;
-    }, {});
+  const onSubmit = React.useCallback(
+    (values) => {
+      const configMapCopy = { ...configMap };
+      configMapCopy.data = values.variables.reduce((acc, { key, value }) => {
+        acc[key] = value;
+        return acc;
+      }, {});
 
-    editConfigMap({ configMapData: configMapCopy });
-    reset(values, { keepValues: true });
-  };
+      editConfigMap({ configMapData: configMapCopy });
+      reset(values, { keepValues: true });
+    },
+    [configMap, editConfigMap, reset]
+  );
 
-  const appendNewRow = () => append({ key: '', value: '' });
+  const appendNewRow = React.useCallback(() => append({ key: '', value: '' }), [append]);
 
-  return (
-    <FormProvider {...form}>
-      {!fields?.length ? (
-        <EmptyList
-          customText="No variables found."
-          handleClick={appendNewRow}
-          linkText="Click here to add a new variable."
-        />
-      ) : (
+  const renderContent = React.useCallback(() => {
+    if (fields.length || dataEntries?.length) {
+      return (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack spacing={4}>
-            <NameValueTable
-              rows={fields.map((field, index) => {
-                return {
-                  name: (
-                    <FormTextField
-                      {...register(`variables.${index}.key`, {
-                        required: 'Enter a key',
-                      })}
-                      placeholder={'Var name'}
-                      label={'Key'}
-                      control={control}
-                      errors={errors}
-                      key={`${field.id}-key`}
-                    />
-                  ),
-                  value: (
-                    <Stack spacing={2} direction="row" alignItems="center">
-                      <Box flexGrow={1}>
-                        <FormTextField
-                          {...register(`variables.${index}.value`, {
-                            required: 'Enter a value',
-                          })}
-                          label={'Value'}
-                          placeholder={'Var value'}
-                          control={control}
-                          errors={errors}
-                          key={`${field.id}-value`}
-                        />
-                      </Box>
-                      <Box sx={{ pt: (t) => t.typography.pxToRem(FORM_CONTROL_LABEL_HEIGHT) }}>
-                        <IconButton onClick={() => handleDelete(index)} size="medium">
-                          <Icon icon={ICONS.BUCKET} width="20" />
-                        </IconButton>
-                      </Box>
-                    </Stack>
-                  ),
-                };
-              })}
-            />
+            {fields.length ? (
+              <NameValueTable
+                rows={fields.map((field, index) => {
+                  return {
+                    name: (
+                      <FormTextField
+                        {...register(`variables.${index}.key`, {
+                          required: 'Enter a key',
+                        })}
+                        placeholder={'Var name'}
+                        label={'Key'}
+                        control={control}
+                        errors={errors}
+                        key={`${field.id}-key`}
+                      />
+                    ),
+                    value: (
+                      <Stack spacing={2} direction="row" alignItems="center">
+                        <Box flexGrow={1}>
+                          <FormTextField
+                            {...register(`variables.${index}.value`, {
+                              required: 'Enter a value',
+                            })}
+                            label={'Value'}
+                            placeholder={'Var value'}
+                            control={control}
+                            errors={errors}
+                            key={`${field.id}-value`}
+                          />
+                        </Box>
+                        <Box sx={{ pt: (t) => t.typography.pxToRem(FORM_CONTROL_LABEL_HEIGHT) }}>
+                          <IconButton onClick={() => handleDelete(index)} size="medium">
+                            <Icon icon={ICONS.BUCKET} width="20" />
+                          </IconButton>
+                        </Box>
+                      </Stack>
+                    ),
+                  };
+                })}
+              />
+            ) : (
+              <EmptyList customText="Are you sure you want to save empty variable list?" />
+            )}
             <Stack alignItems="flex-end" sx={{ pr: (t) => t.typography.pxToRem(16) }}>
               <Button
                 type={'button'}
@@ -153,7 +154,33 @@ export const Variables = ({ configMap }: { configMap: ConfigMapKubeObjectInterfa
             </Stack>
           </Stack>
         </form>
-      )}
-    </FormProvider>
-  );
+      );
+    }
+
+    if (!dataEntries?.length) {
+      return (
+        <EmptyList
+          customText="No variables found."
+          handleClick={appendNewRow}
+          linkText="Click here to add a new variable."
+        />
+      );
+    }
+  }, [
+    appendNewRow,
+    configMapEditMutation.isLoading,
+    control,
+    dataEntries?.length,
+    errors,
+    fields,
+    handleDelete,
+    handleSubmit,
+    isDirty,
+    onSubmit,
+    register,
+    reset,
+    theme.palette.secondary.dark,
+  ]);
+
+  return <FormProvider {...form}>{renderContent()}</FormProvider>;
 };