refactor(app): migrate env var form section [EE-6232] (#10499)

* refactor(app): migrate env var form section [EE-6232] * allow undoing delete in inputlist
2024-01-03 08:17:54 +13:00 · 2024-01-03 08:17:54 +13:00 · 488393007f
parent 6228314e3c
commit 488393007f
16 changed files with 274 additions and 209 deletions
--- a/app/kubernetes/helpers/application/index.js
+++ b/app/kubernetes/helpers/application/index.js
@ -108,14 +108,14 @@ class KubernetesApplicationHelper {

  /* #region  ENV VARIABLES FV <> ENV */
  static generateEnvFromEnvVariables(envVariables) {
-    _.remove(envVariables, (item) => item.NeedsDeletion);
+    _.remove(envVariables, (item) => item.needsDeletion);
    const env = _.map(envVariables, (item) => {
      const res = new KubernetesApplicationEnvPayload();
-      res.name = item.Name;
-      if (item.Value === undefined) {
+      res.name = item.name;
+      if (item.value === undefined) {
        delete res.value;
      } else {
-        res.value = item.Value;
+        res.value = item.value;
      }
      return res;
    });
@ -128,10 +128,10 @@ class KubernetesApplicationHelper {
        return;
      }
      const res = new KubernetesApplicationEnvironmentVariableFormValue();
-      res.Name = item.name;
-      res.Value = item.value;
-      res.IsNew = false;
-      res.NameIndex = item.name;
+      res.name = item.name;
+      res.value = item.value;
+      res.isNew = false;
+      res.nameIndex = item.name;
      return res;
    });
    return _.without(envVariables, undefined);
--- a/app/kubernetes/models/application/formValues.js
+++ b/app/kubernetes/models/application/formValues.js
@ -70,12 +70,11 @@ export class KubernetesApplicationConfigurationFormValue {
 * KubernetesApplicationEnvironmentVariableFormValue Model
 */
 const _KubernetesApplicationEnvironmentVariableFormValue = Object.freeze({
-  Name: '',
-  Value: '',
-  IsSecret: false,
-  NeedsDeletion: false,
-  IsNew: true,
-  NameIndex: '', // keep the original name for sorting
+  name: '',
+  value: '',
+  needsDeletion: false,
+  isNew: true,
+  nameIndex: '', // keep the original name for sorting
 });

 export class KubernetesApplicationEnvironmentVariableFormValue {
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@ -24,6 +24,9 @@ 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 { EnvironmentVariablesFieldset } from '@@/form-components/EnvironmentVariablesFieldset';

 export const ngModule = angular
  .module('portainer.kubernetes.react.components', [])
@ -174,3 +177,12 @@ withFormValidation(
  ['values', 'onChange', 'appName', 'selector', 'isEditMode', 'namespace'],
  kubeServicesValidation
 );
+
+withFormValidation(
+  ngModule,
+  EnvironmentVariablesFieldset,
+  'kubeEnvironmentVariablesFieldset',
+  ['canUndoDelete'],
+  // use kubeEnvVarValidationSchema instead of envVarValidation to add a regex matches rule
+  kubeEnvVarValidationSchema
+);
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@ -383,103 +383,12 @@
                    <div class="col-sm-12 vertical-center">
                      <label class="control-label !pt-0 text-left">Environment variables</label>
                    </div>
-
-                    <div class="col-sm-12 form-inline mt-2">
-                      <div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables | orderBy: 'NameIndex'" class="mt-2">
-                        <div style="margin-top: 2px">
-                          <div class="col-sm-4 input-group input-group-sm mr-2">
-                            <div class="input-group col-sm-12 input-group-sm" ng-class="{ striked: envVar.NeedsDeletion }">
-                              <span class="input-group-addon required">name</span>
-                              <input
-                                type="text"
-                                name="environment_variable_name_{{ $index }}"
-                                class="form-control"
-                                ng-model="envVar.Name"
-                                ng-change="ctrl.onChangeEnvironmentName()"
-                                ng-pattern="/^[-._a-zA-Z][-._a-zA-Z0-9]*$/"
-                                placeholder="foo"
-                                ng-disabled="ctrl.formValues.Containers.length > 1"
-                                data-cy="k8sAppCreate-envVarName_{{ $index }}"
-                                required
-                              />
-                            </div>
-                          </div>
-
-                          <div class="col-sm-4 input-group input-group-sm mr-2" ng-class="{ striked: envVar.NeedsDeletion }">
-                            <span class="input-group-addon">value</span>
-                            <input
-                              type="text"
-                              name="environment_variable_value_{{ $index }}"
-                              class="form-control"
-                              ng-model="envVar.Value"
-                              placeholder="bar"
-                              ng-disabled="ctrl.formValues.Containers.length > 1"
-                              data-cy="k8sAppCreate-envVarValue_{{ $index }}"
-                            />
-                          </div>
-
-                          <div class="col-sm-2 input-group input-group-sm" ng-if="ctrl.formValues.Containers.length <= 1">
-                            <button
-                              ng-if="!envVar.NeedsDeletion"
-                              class="btn btn-md btn-dangerlight btn-only-icon !ml-0"
-                              type="button"
-                              ng-click="ctrl.removeEnvironmentVariable(envVar)"
-                            >
-                              <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
-                            </button>
-                            <button
-                              ng-if="envVar.NeedsDeletion"
-                              class="btn btn-sm btn-light btn-only-icon"
-                              type="button"
-                              ng-click="ctrl.restoreEnvironmentVariable(envVar)"
-                              data-cy="k8sAppCreate-removeEnvVarButton_{{ $index }}"
-                            >
-                              <pr-icon icon="'rotate-cw'" size="'md'"></pr-icon>
-                            </button>
-                          </div>
-                        </div>
-                        <div
-                          ng-show="
-                            kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
-                            ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
-                          "
-                        >
-                          <div class="col-sm-8 input-group input-group-sm">
-                            <div
-                              class="small"
-                              style="margin-top: 5px"
-                              ng-show="
-                                kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
-                                ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
-                              "
-                            >
-                              <ng-messages for="kubernetesApplicationCreationForm['environment_variable_name_' + $index].$error">
-                                <p ng-message="required" class="text-warning vertical-center"
-                                  ><pr-icon icon="'alert-triangle'" mode="'warning'" class-="vertical-center"></pr-icon> Environment variable name is required.</p
-                                >
-                                <p ng-message="pattern" class="text-warning vertical-center"
-                                  ><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This field must consist of alphabetic characters, digits, '_', '-', or '.', and must
-                                  not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.</p
-                                >
-                              </ng-messages>
-                              <p class="text-warning vertical-center" ng-if="ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined"
-                                ><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This environment variable is already defined.</p
-                              >
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="col-sm-12 mt-2">
-                      <span
-                        ng-if="ctrl.formValues.Containers.length <= 1"
-                        class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0"
-                        ng-click="ctrl.addEnvironmentVariable()"
-                        data-cy="k8sAppCreate-addEnvVarButton"
-                      >
-                        <pr-icon icon="'plus'" size="'sm'"></pr-icon> Add environment variable
-                      </span>
+                    <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>
                  <!-- #endregion -->
--- a/app/kubernetes/views/applications/create/createApplicationController.js
+++ b/app/kubernetes/views/applications/create/createApplicationController.js
@ -154,6 +154,7 @@ class KubernetesCreateApplicationController {
    this.supportGlobalDeployment = this.supportGlobalDeployment.bind(this);
    this.onChangePlacementType = this.onChangePlacementType.bind(this);
    this.onServicesChange = this.onServicesChange.bind(this);
+    this.onEnvironmentVariableChange = this.onEnvironmentVariableChange.bind(this);
  }
  /* #endregion */

@ -359,30 +360,14 @@ class KubernetesCreateApplicationController {
  /* #endregion */

  /* #region  ENVIRONMENT UI MANAGEMENT */
-  addEnvironmentVariable() {
-    this.formValues.EnvironmentVariables.push(new KubernetesApplicationEnvironmentVariableFormValue());
-  }
-
-  restoreEnvironmentVariable(item) {
-    item.NeedsDeletion = false;
-  }
-
-  removeEnvironmentVariable(item) {
-    const index = this.formValues.EnvironmentVariables.indexOf(item);
-    if (index !== -1) {
-      const envVar = this.formValues.EnvironmentVariables[index];
-      if (!envVar.IsNew) {
-        envVar.NeedsDeletion = true;
-      } else {
-        this.formValues.EnvironmentVariables.splice(index, 1);
-      }
-    }
-    this.onChangeEnvironmentName();
-  }
-
-  onChangeEnvironmentName() {
-    this.state.duplicates.environmentVariables.refs = KubernetesFormValidationHelper.getDuplicates(_.map(this.formValues.EnvironmentVariables, 'Name'));
-    this.state.duplicates.environmentVariables.hasRefs = Object.keys(this.state.duplicates.environmentVariables.refs).length > 0;
+  onEnvironmentVariableChange(enviromnentVariables) {
+    return this.$async(async () => {
+      const newEnvVars = enviromnentVariables.map((envVar) => {
+        const newEnvVar = new KubernetesApplicationEnvironmentVariableFormValue();
+        return { newEnvVar, ...envVar };
+      });
+      this.formValues.EnvironmentVariables = newEnvVars;
+    });
  }
  /* #endregion */

--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@ -242,7 +242,7 @@ withFormValidation(
  ngModule,
  EnvironmentVariablesFieldset,
  'environmentVariablesFieldset',
-  [],
+  ['canUndoDelete'],
  envVarValidation
 );

--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariableItem.tsx
@ -0,0 +1,59 @@
+import { FormError } from '../FormError';
+import { InputLabeled } from '../Input/InputLabeled';
+import { ItemProps } from '../InputList';
+
+import { EnvVar } from './types';
+
+export function EnvironmentVariableItem({
+  item,
+  onChange,
+  disabled,
+  error,
+  readOnly,
+  index,
+}: ItemProps<EnvVar>) {
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="flex w-full items-start gap-2">
+        <div className="w-1/2">
+          <InputLabeled
+            className="w-full"
+            label="name"
+            required
+            value={item.name}
+            onChange={(e) => handleChange({ name: e.target.value })}
+            disabled={disabled}
+            needsDeletion={item.needsDeletion}
+            readOnly={readOnly}
+            placeholder="e.g. FOO"
+            size="small"
+            id={`env-name${index}`}
+          />
+          {error && (
+            <div>
+              <FormError className="mt-1 !mb-0">
+                {Object.values(error)[0]}
+              </FormError>
+            </div>
+          )}
+        </div>
+        <InputLabeled
+          className="w-1/2"
+          label="value"
+          value={item.value}
+          onChange={(e) => handleChange({ value: e.target.value })}
+          disabled={disabled}
+          needsDeletion={item.needsDeletion}
+          readOnly={readOnly}
+          placeholder="e.g. bar"
+          size="small"
+          id={`env-value${index}`}
+        />
+      </div>
+    </div>
+  );
+
+  function handleChange(partial: Partial<EnvVar>) {
+    onChange({ ...item, ...partial });
+  }
+}
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx
@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { array, object, SchemaOf, string } from 'yup';
+import { array, boolean, object, SchemaOf, string } from 'yup';

 import { ArrayError } from '../InputList/InputList';
+import { buildUniquenessTest } from '../validate-unique';

 import { AdvancedMode } from './AdvancedMode';
 import { SimpleMode } from './SimpleMode';
@ -11,21 +12,24 @@ export function EnvironmentVariablesFieldset({
  onChange,
  values,
  errors,
+  canUndoDelete,
 }: {
  values: Value;
  onChange(value: Value): void;
  errors?: ArrayError<Value>;
+  canUndoDelete?: boolean;
 }) {
  const [simpleMode, setSimpleMode] = useState(true);

  return (
-    <div className="col-sm-12">
+    <>
      {simpleMode ? (
        <SimpleMode
          onAdvancedModeClick={() => setSimpleMode(false)}
          onChange={onChange}
          value={values}
          errors={errors}
+          canUndoDelete={canUndoDelete}
        />
      ) : (
        <AdvancedMode
@ -34,7 +38,7 @@ export function EnvironmentVariablesFieldset({
          value={values}
        />
      )}
-    </div>
+    </>
  );
 }

@ -43,6 +47,14 @@ export function envVarValidation(): SchemaOf<Value> {
    object({
      name: string().required('Name is required'),
      value: string().default(''),
+      needsDeletion: boolean().default(false),
    })
+  ).test(
+    'unique',
+    'This environment variable is already defined.',
+    buildUniquenessTest(
+      () => 'This environment variable is already defined.',
+      'name'
+    )
  );
 }
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx
@ -34,11 +34,13 @@ export function EnvironmentVariablesPanel({
          </div>
        )}

+        <div className="col-sm-12">
          <EnvironmentVariablesFieldset
            values={values}
            onChange={onChange}
            errors={errors}
          />
+        </div>

        {showHelpMessage && (
          <div className="col-sm-12">
--- a/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx
@ -7,24 +7,24 @@ import { Button } from '@@/buttons';
 import { TextTip } from '@@/Tip/TextTip';
 import { FileUploadField } from '@@/form-components/FileUpload';
 import { InputList } from '@@/form-components/InputList';
-import { ArrayError, ItemProps } from '@@/form-components/InputList/InputList';
-import { InputLabeled } from '@@/form-components/Input/InputLabeled';
+import { ArrayError } from '@@/form-components/InputList/InputList';

-import { FormError } from '../FormError';
-
-import { type EnvVar, type Value } from './types';
+import type { Value } from './types';
 import { parseDotEnvFile } from './utils';
+import { EnvironmentVariableItem } from './EnvironmentVariableItem';

 export function SimpleMode({
  value,
  onChange,
  onAdvancedModeClick,
  errors,
+  canUndoDelete,
 }: {
  value: Value;
  onChange: (value: Value) => void;
  onAdvancedModeClick: () => void;
  errors?: ArrayError<Value>;
+  canUndoDelete?: boolean;
 }) {
  return (
    <>
@ -47,13 +47,17 @@ export function SimpleMode({
        onChange={onChange}
        value={value}
        isAddButtonHidden
-        item={Item}
+        item={EnvironmentVariableItem}
        errors={errors}
+        canUndoDelete={canUndoDelete}
      />

      <div className="flex gap-2">
        <Button
-          onClick={() => onChange([...value, { name: '', value: '' }])}
+          onClick={() =>
+            onChange([...value, { name: '', value: '', needsDeletion: false }])
+          }
+          className="!ml-0"
          color="default"
          icon={Plus}
        >
@ -66,54 +70,6 @@ export function SimpleMode({
  );
 }

-function Item({
-  item,
-  onChange,
-  disabled,
-  error,
-  readOnly,
-  index,
-}: ItemProps<EnvVar>) {
-  return (
-    <div className="relative flex w-full flex-col">
-      <div className="flex w-full items-center gap-2">
-        <InputLabeled
-          className="w-1/2"
-          label="name"
-          value={item.name}
-          onChange={(e) => handleChange({ name: e.target.value })}
-          disabled={disabled}
-          readOnly={readOnly}
-          placeholder="e.g. FOO"
-          size="small"
-          id={`env-name${index}`}
-        />
-        <InputLabeled
-          className="w-1/2"
-          label="value"
-          value={item.value}
-          onChange={(e) => handleChange({ value: e.target.value })}
-          disabled={disabled}
-          readOnly={readOnly}
-          placeholder="e.g. bar"
-          size="small"
-          id={`env-value${index}`}
-        />
-      </div>
-
-      {!!error && (
-        <div className="absolute -bottom-5">
-          <FormError className="m-0">{Object.values(error)[0]}</FormError>
-        </div>
-      )}
-    </div>
-  );
-
-  function handleChange(partial: Partial<EnvVar>) {
-    onChange({ ...item, ...partial });
-  }
-}
-
 function FileEnv({ onChooseFile }: { onChooseFile: (file: Value) => void }) {
  const [file, setFile] = useState<File | null>(null);

--- a/app/react/components/form-components/EnvironmentVariablesFieldset/types.ts
+++ b/app/react/components/form-components/EnvironmentVariablesFieldset/types.ts
@ -1,6 +1,7 @@
 export interface EnvVar {
  name: string;
  value?: string;
+  needsDeletion?: boolean;
 }

 export type Value = Array<EnvVar>;
--- a/app/react/components/form-components/Input/InputLabeled.tsx
+++ b/app/react/components/form-components/Input/InputLabeled.tsx
@ -1,4 +1,5 @@
 import { ComponentProps, InputHTMLAttributes } from 'react';
+import clsx from 'clsx';

 import { InputGroup } from '../InputGroup';

@ -6,21 +7,29 @@ export function InputLabeled({
  label,
  className,
  size,
+  needsDeletion,
  id,
+  required,
+  disabled,
  ...props
 }: {
  label: string;
  className?: string;
  size?: ComponentProps<typeof InputGroup>['size'];
+  needsDeletion?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'>) {
  return (
-    <InputGroup className={className} size={size}>
-      <InputGroup.Addon as="label" htmlFor={id}>
+    <InputGroup
+      className={clsx(className, needsDeletion && 'striked')}
+      size={size}
+    >
+      <InputGroup.Addon as="label" htmlFor={id} required={required}>
        {label}
      </InputGroup.Addon>
      <InputGroup.Input
        // eslint-disable-next-line react/jsx-props-no-spreading
        {...props}
+        disabled={disabled || needsDeletion}
        id={id}
      />
    </InputGroup>
--- a/app/react/components/form-components/InputList/InputList.stories.tsx
+++ b/app/react/components/form-components/InputList/InputList.stories.tsx
@ -12,7 +12,7 @@ const meta: Meta = {

 export default meta;

-export { Defaults, ListWithInputAndSelect };
+export { Defaults, ListWithInputAndSelect, ListWithUndoDeletion };

 function Defaults() {
  const [values, setValues] = useState<DefaultType[]>([{ value: '' }]);
@ -26,6 +26,21 @@ function Defaults() {
  );
 }

+function ListWithUndoDeletion() {
+  const [values, setValues] = useState<DefaultType[]>([
+    { value: 'Existing item', needsDeletion: false },
+  ]);
+
+  return (
+    <InputList
+      label="List with undo deletion"
+      value={values}
+      onChange={(value) => setValues(value)}
+      canUndoDelete
+    />
+  );
+}
+
 interface ListWithSelectItem {
  value: number;
  select: string;
--- a/app/react/components/form-components/InputList/InputList.tsx
+++ b/app/react/components/form-components/InputList/InputList.tsx
@ -1,6 +1,7 @@
-import { ComponentType } from 'react';
+import { ComponentType, useRef } from 'react';
 import { FormikErrors } from 'formik';
-import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';
+import { ArrowDown, ArrowUp, Plus, RotateCw, Trash2 } from 'lucide-react';
+import clsx from 'clsx';

 import { Button } from '@@/buttons';
 import { Tooltip } from '@@/Tip/Tooltip';
@ -9,7 +10,7 @@ import { TextTip } from '@@/Tip/TextTip';
 import { Input } from '../Input';
 import { FormError } from '../FormError';

-import { arrayMove } from './utils';
+import { arrayMove, hasKey } from './utils';

 type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
  ? ElementType
@ -30,10 +31,12 @@ export interface ItemProps<T> {
  readOnly?: boolean;
  // eslint-disable-next-line react/no-unused-prop-types
  index: number;
+  needsDeletion?: boolean;
 }
 type Key = string | number;
 type ChangeType = 'delete' | 'create' | 'update';
-export type DefaultType = { value: string };
+export type DefaultType = { value: string; needsDeletion?: boolean };
+type CanUndoDeleteItem<T> = T & { needsDeletion: boolean };

 type OnChangeEvent<T> =
  | {
@ -64,6 +67,7 @@ interface Props<T> {
  addLabel?: string;
  itemKeyGetter?(item: T, index: number): Key;
  movable?: boolean;
+  canUndoDelete?: boolean;
  errors?: ArrayError<T[]>;
  textTip?: string;
  isAddButtonHidden?: boolean;
@ -83,6 +87,7 @@ export function InputList<T = DefaultType>({
  addLabel = 'Add item',
  itemKeyGetter = (item: T, index: number) => index,
  movable,
+  canUndoDelete = false,
  errors,
  textTip,
  isAddButtonHidden = false,
@ -90,6 +95,7 @@ export function InputList<T = DefaultType>({
  readOnly,
  'aria-label': ariaLabel,
 }: Props<T>) {
+  const initialItemsCount = useRef(value.length);
  const isAddButtonVisible = !(isAddButtonHidden || readOnly);
  return (
    <div className="form-group" aria-label={ariaLabel || label}>
@ -154,7 +160,7 @@ export function InputList<T = DefaultType>({
                      />
                    </>
                  )}
-                  {!readOnly && (
+                  {!readOnly && !canUndoDelete && (
                    <Button
                      color="dangerlight"
                      size="medium"
@ -163,6 +169,17 @@ export function InputList<T = DefaultType>({
                      icon={Trash2}
                    />
                  )}
+                  {!readOnly &&
+                    canUndoDelete &&
+                    hasKey(item, 'needsDeletion') && (
+                      <CanUndoDeleteButton
+                        item={{ ...item, needsDeletion: !!item.needsDeletion }}
+                        itemIndex={index}
+                        initialItemsCount={initialItemsCount.current}
+                        handleRemoveItem={handleRemoveItem}
+                        handleToggleNeedsDeletion={handleToggleNeedsDeletion}
+                      />
+                    )}
                </div>
              </div>
            );
@ -224,6 +241,10 @@ export function InputList<T = DefaultType>({
    );
  }

+  function handleToggleNeedsDeletion(key: Key, item: CanUndoDeleteItem<T>) {
+    handleChangeItem(key, { ...item, needsDeletion: !item.needsDeletion });
+  }
+
  function handleAdd() {
    const newItem = itemBuilder();
    onChange([...value, newItem], { type: 'create', item: newItem });
@ -260,8 +281,8 @@ function DefaultItem({
      <Input
        value={item.value}
        onChange={(e) => onChange({ value: e.target.value })}
-        className="!w-full"
-        disabled={disabled}
+        className={clsx('!w-full', item.needsDeletion && 'striked')}
+        disabled={disabled || item.needsDeletion}
        readOnly={readOnly}
      />
      {error && <FormError>{error}</FormError>}
@ -279,3 +300,51 @@ function renderDefaultItem(
    <DefaultItem item={item} onChange={onChange} error={error} index={index} />
  );
 }
+
+type CanUndoDeleteButtonProps<T> = {
+  item: CanUndoDeleteItem<T>;
+  itemIndex: number;
+  initialItemsCount: number;
+  handleRemoveItem(key: Key, item: T): void;
+  handleToggleNeedsDeletion(key: Key, item: T): void;
+};
+
+function CanUndoDeleteButton<T>({
+  item,
+  itemIndex,
+  initialItemsCount,
+  handleRemoveItem,
+  handleToggleNeedsDeletion,
+}: CanUndoDeleteButtonProps<T>) {
+  return (
+    <div className="items-start">
+      {!item.needsDeletion && (
+        <Button
+          color="dangerlight"
+          size="medium"
+          onClick={handleDeleteClick}
+          className="vertical-center btn-only-icon"
+          icon={Trash2}
+        />
+      )}
+      {item.needsDeletion && (
+        <Button
+          color="default"
+          size="medium"
+          onClick={handleDeleteClick}
+          className="vertical-center btn-only-icon"
+          icon={RotateCw}
+        />
+      )}
+    </div>
+  );
+
+  // if the item is new, we can just remove it, otherwise we need to toggle the needsDeletion flag
+  function handleDeleteClick() {
+    if (itemIndex < initialItemsCount) {
+      handleToggleNeedsDeletion(itemIndex, item);
+    } else {
+      handleRemoveItem(itemIndex, item);
+    }
+  }
+}
--- a/app/react/components/form-components/InputList/utils.ts
+++ b/app/react/components/form-components/InputList/utils.ts
@ -35,3 +35,14 @@ export function arrayMove<T>(array: Array<T>, from: number, to: number) {
    return index >= 0 && index <= array.length;
  }
 }
+
+export function hasKey(
+  value: unknown,
+  key: string | number | symbol
+): value is { needsDeletion: boolean } {
+  return isObject(value) && key in value;
+}
+
+function isObject(value: unknown): value is object {
+  return typeof value === 'object' && value !== null;
+}
--- a/app/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema.ts
+++ b/app/react/kubernetes/applications/ApplicationForm/kubeEnvVarValidationSchema.ts
@ -0,0 +1,26 @@
+import { SchemaOf, array, bool, object, string } from 'yup';
+
+import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
+import { buildUniquenessTest } from '@@/form-components/validate-unique';
+
+export function kubeEnvVarValidationSchema(): SchemaOf<EnvVar[]> {
+  return array(
+    object({
+      name: string()
+        .required('Name is required')
+        .matches(
+          /^[a-zA-Z][a-zA-Z0-9_.-]*$/,
+          `This field must consist of alphabetic characters, digits, '_', '-', or '.', and must not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.`
+        ),
+      value: string().default(''),
+      needsDeletion: bool().default(false),
+    })
+  ).test(
+    'unique',
+    'This environment variable is already defined.',
+    buildUniquenessTest(
+      () => 'This environment variable is already defined.',
+      'name'
+    )
+  );
+}