refactor(docker/containers): migrate env vars to react [EE-5211] (#10345)

app/react/docker/containers/CreateView/EnvVarsTab/EnvVarsTab.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { EnvironmentVariablesPanel } from '@@/form-components/EnvironmentVariablesFieldset';
+import { ArrayError } from '@@/form-components/InputList/InputList';
+
+import { Values } from './types';
+
+export function EnvVarsTab({
+  values: initialValues,
+  onChange,
+  errors,
+}: {
+  values: Values;
+  onChange(value: Values): void;
+  errors?: ArrayError<Values>;
+}) {
+  const [values, setControlledValues] = useState(initialValues);
+
+  return (
+    <EnvironmentVariablesPanel
+      values={values}
+      explanation="These values will be applied to the container when deployed"
+      onChange={handleChange}
+      errors={errors}
+    />
+  );
+
+  function handleChange(values: Values) {
+    setControlledValues(values);
+    onChange(values);
+  }
+}

app/react/docker/containers/CreateView/EnvVarsTab/index.ts

@@ -0,0 +1,14 @@
+import { envVarValidation } from '@@/form-components/EnvironmentVariablesFieldset';
+
+import { toRequest } from './toRequest';
+import { toViewModel, getDefaultViewModel } from './toViewModel';
+
+export { EnvVarsTab } from './EnvVarsTab';
+export type { Values } from './types';
+
+export const envVarsTabUtils = {
+  toRequest,
+  toViewModel,
+  validation: envVarValidation,
+  getDefaultViewModel,
+};

app/react/docker/containers/CreateView/EnvVarsTab/toRequest.ts

@@ -0,0 +1,15 @@
+import { convertToArrayOfStrings } from '@@/form-components/EnvironmentVariablesFieldset/utils';
+
+import { CreateContainerRequest } from '../types';
+
+import { Values } from './types';
+
+export function toRequest(
+  oldConfig: CreateContainerRequest,
+  values: Values
+): CreateContainerRequest {
+  return {
+    ...oldConfig,
+    Env: convertToArrayOfStrings(values),
+  };
+}

app/react/docker/containers/CreateView/EnvVarsTab/toViewModel.ts

@@ -0,0 +1,11 @@
+import { parseArrayOfStrings } from '@@/form-components/EnvironmentVariablesFieldset/utils';
+
+import { ContainerJSON } from '../../queries/container';
+
+export function getDefaultViewModel() {
+  return [];
+}
+
+export function toViewModel(container: ContainerJSON) {
+  return parseArrayOfStrings(container.Config?.Env);
+}

app/react/docker/containers/CreateView/EnvVarsTab/types.ts

@@ -0,0 +1 @@
+export type { Value as Values } from '@@/form-components/EnvironmentVariablesFieldset/types';