From 787c7ec4cc262518cbba0cf50a89eaa647bb2417 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 17 Jan 2024 10:13:53 +1300
Subject: [PATCH] fix(app): remove canUndo function from environment variables
 [EE-6232] (#10961)

Co-authored-by: testa113 <testa113>
---
 app/kubernetes/react/components/index.ts      | 29 +++++++++---------
 .../create/createApplication.html             | 16 +++-------
 .../EnvironmentVariablesFormSection.tsx       | 30 +++++++++++++++++++
 .../kubeEnvVarValidationSchema.ts             |  1 +
 4 files changed, 50 insertions(+), 26 deletions(-)
 create mode 100644 app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection.tsx
 rename app/react/kubernetes/applications/{ApplicationForm => components/EnvironmentVariablesFormSection}/kubeEnvVarValidationSchema.ts (96%)

diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index 83e467ac8..295e52ab5 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@@ -26,7 +26,6 @@ import { YAMLInspector } from '@/react/kubernetes/components/YAMLInspector';
 import { ApplicationsStacksDatatable } from '@/react/kubernetes/applications/ListView/ApplicationsStacksDatatable';
 import { NodesDatatable } from '@/react/kubernetes/cluster/HomeView/NodesDatatable';
 import { StackName } from '@/react/kubernetes/DeployView/StackName/StackName';
-import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema';
 import { SecretsFormSection } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/SecretsFormSection';
 import { configurationsValidationSchema } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/configurationValidationSchema';
 import { ConfigMapsFormSection } from '@/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigMapsFormSection';
@@ -57,8 +56,8 @@ import {
 } from '@/react/kubernetes/applications/components/NameFormSection';
 import { deploymentTypeValidation } from '@/react/kubernetes/applications/components/AppDeploymentTypeFormSection/deploymentTypeValidation';
 import { AppDeploymentTypeFormSection } from '@/react/kubernetes/applications/components/AppDeploymentTypeFormSection/AppDeploymentTypeFormSection';
-
-import { EnvironmentVariablesFieldset } from '@@/form-components/EnvironmentVariablesFieldset';
+import { EnvironmentVariablesFormSection } from '@/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection';
+import { kubeEnvVarValidationSchema } from '@/react/kubernetes/applications/components/EnvironmentVariablesFormSection/kubeEnvVarValidationSchema';
 
 import { applicationsModule } from './applications';
 
@@ -219,17 +218,6 @@ withFormValidation(
   kubeServicesValidation
 );
 
-withFormValidation(
-  ngModule,
-  withControlledInput(withControlledInput(EnvironmentVariablesFieldset), {
-    values: 'onChange',
-  }),
-  'kubeEnvironmentVariablesFieldset',
-  ['canUndoDelete'],
-  // use kubeEnvVarValidationSchema instead of envVarValidation to add a regex matches rule
-  kubeEnvVarValidationSchema
-);
-
 withFormValidation(
   ngModule,
   withControlledInput(
@@ -350,3 +338,16 @@ withFormValidation(
   deploymentTypeValidation,
   true
 );
+
+withFormValidation(
+  ngModule,
+  withControlledInput(
+    withUIRouter(
+      withCurrentUser(withReactQuery(EnvironmentVariablesFormSection))
+    ),
+    { values: 'onChange' }
+  ),
+  'environmentVariablesFormSection',
+  [],
+  kubeEnvVarValidationSchema
+);
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 456bc00c5..8c3ecd44d 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -235,18 +235,10 @@
                   <!-- #endregion -->
 
                   <!-- #region ENVIRONMENT VARIABLES -->
-                  <div class="form-group">
-                    <div class="col-sm-12 vertical-center">
-                      <label class="control-label !pt-0 text-left !text-sm">Environment variables</label>
-                    </div>
-                    <div class="col-sm-11 col-lg-10 mt-2">
-                      <kube-environment-variables-fieldset
-                        values="ctrl.formValues.EnvironmentVariables"
-                        on-change="(ctrl.onEnvironmentVariableChange)"
-                        can-undo-delete="true"
-                      ></kube-environment-variables-fieldset>
-                    </div>
-                  </div>
+                  <environment-variables-form-section
+                    values="ctrl.formValues.EnvironmentVariables"
+                    on-change="(ctrl.onEnvironmentVariableChange)"
+                  ></environment-variables-form-section>
                   <!-- #endregion -->
 
                   <!-- #region CONFIGMAPS -->
diff --git a/app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection.tsx b/app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection.tsx
new file mode 100644
index 000000000..6d8321280
--- /dev/null
+++ b/app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/EnvironmentVariablesFormSection.tsx
@@ -0,0 +1,30 @@
+import { FormSection } from '@@/form-components/FormSection';
+import {
+  EnvVarValues,
+  EnvironmentVariablesFieldset,
+} from '@@/form-components/EnvironmentVariablesFieldset';
+import { ArrayError } from '@@/form-components/InputList/InputList';
+
+type Props = {
+  values: EnvVarValues;
+  onChange(value: EnvVarValues): void;
+  errors?: ArrayError<EnvVarValues>;
+};
+
+export function EnvironmentVariablesFormSection({
+  values,
+  onChange,
+  errors,
+}: Props) {
+  return (
+    <FormSection title="Environment variables" titleSize="sm">
+      <div className="mb-4">
+        <EnvironmentVariablesFieldset
+          values={values}
+          onChange={onChange}
+          errors={errors}
+        />
+      </div>
+    </FormSection>
+  );
+}
diff --git a/app/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema.ts b/app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/kubeEnvVarValidationSchema.ts
similarity index 96%
rename from app/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema.ts
rename to app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/kubeEnvVarValidationSchema.ts
index c47f4ed9a..bd7954853 100644
--- a/app/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema.ts
+++ b/app/react/kubernetes/applications/components/EnvironmentVariablesFormSection/kubeEnvVarValidationSchema.ts
@@ -14,6 +14,7 @@ export function kubeEnvVarValidationSchema(): SchemaOf<EnvVar[]> {
         ),
       value: string().default(''),
       needsDeletion: bool().default(false),
+      isNew: bool().default(false),
     })
   ).test(
     'unique',