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

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

* allow undoing delete in inputlist

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);