refactor(ui): migrate env var field to react [EE-4853] (#8451)

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { array, object, SchemaOf, string } from 'yup';
+
+import { ArrayError } from '../InputList/InputList';
+
+import { AdvancedMode } from './AdvancedMode';
+import { SimpleMode } from './SimpleMode';
+import { Value } from './types';
+
+export function EnvironmentVariablesFieldset({
+  onChange,
+  values,
+  errors,
+}: {
+  values: Value;
+  onChange(value: Value): void;
+  errors?: ArrayError<Value>;
+}) {
+  const [simpleMode, setSimpleMode] = useState(true);
+
+  return (
+    <div className="col-sm-12">
+      {simpleMode ? (
+        <SimpleMode
+          onAdvancedModeClick={() => setSimpleMode(false)}
+          onChange={onChange}
+          value={values}
+          errors={errors}
+        />
+      ) : (
+        <AdvancedMode
+          onSimpleModeClick={() => setSimpleMode(true)}
+          onChange={onChange}
+          value={values}
+        />
+      )}
+    </div>
+  );
+}
+
+export function envVarValidation(): SchemaOf<Value> {
+  return array(
+    object({
+      name: string().required('Name is required'),
+      value: string().default(''),
+    })
+  );
+}