refactor(templates): migrate list view to react [EE-2296] (#10999)

app/react/docker/containers/CreateView/NetworkTab/HostnameField.tsx

@@ -0,0 +1,27 @@
+import { string } from 'yup';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+export function HostnameField({
+  value,
+  error,
+  onChange,
+}: {
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <FormControl label="Hostname" errors={error}>
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="e.g. web01"
+        data-cy="docker-container-hostname-input"
+      />
+    </FormControl>
+  );
+}
+
+export const hostnameSchema = string().default('');

app/react/docker/containers/CreateView/NetworkTab/HostsFileEntries.tsx

@@ -0,0 +1,56 @@
+import { array, string } from 'yup';
+
+import { FormError } from '@@/form-components/FormError';
+import { InputLabeled } from '@@/form-components/Input/InputLabeled';
+import { ItemProps } from '@@/form-components/InputList';
+import { ArrayError, InputList } from '@@/form-components/InputList/InputList';
+
+export const hostFileSchema = array(
+  string().required('Entry is required')
+).default([]);
+
+export function HostsFileEntries({
+  values,
+  onChange,
+  errors,
+}: {
+  values: string[];
+  onChange: (values: string[]) => void;
+  errors?: ArrayError<string>;
+}) {
+  return (
+    <InputList
+      label="Hosts file entries"
+      value={values}
+      onChange={(hostsFileEntries) => onChange(hostsFileEntries)}
+      errors={errors}
+      item={HostsFileEntryItem}
+      itemBuilder={() => ''}
+      data-cy="hosts-file-entries"
+    />
+  );
+}
+
+function HostsFileEntryItem({
+  item,
+  onChange,
+  disabled,
+  error,
+  readOnly,
+  index,
+}: ItemProps<string>) {
+  return (
+    <div>
+      <InputLabeled
+        label="value"
+        value={item}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-cy={`hosts-file-entry_${index}`}
+      />
+
+      {error && <FormError>{error}</FormError>}
+    </div>
+  );
+}

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

@@ -2,14 +2,13 @@ import { FormikErrors } from 'formik';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
-import { InputList, ItemProps } from '@@/form-components/InputList';
-import { InputGroup } from '@@/form-components/InputGroup';
-import { FormError } from '@@/form-components/FormError';
 
 import { NetworkSelector } from '../../components/NetworkSelector';
 
 import { CONTAINER_MODE, Values } from './types';
 import { ContainerSelector } from './ContainerSelector';
+import { HostsFileEntries } from './HostsFileEntries';
+import { HostnameField } from './HostnameField';
 
 export function NetworkTab({
   values,
@@ -39,14 +38,10 @@ export function NetworkTab({
         </FormControl>
       )}
 
-      <FormControl label="Hostname" errors={errors?.hostname}>
-        <Input
-          value={values.hostname}
-          onChange={(e) => setFieldValue('hostname', e.target.value)}
-          placeholder="e.g. web01"
-          data-cy="docker-container-hostname-input"
-        />
-      </FormControl>
+      <HostnameField
+        value={values.hostname}
+        onChange={(value) => setFieldValue('hostname', value)}
+      />
 
       <FormControl label="Domain Name" errors={errors?.domain}>
         <Input
@@ -102,43 +97,11 @@ export function NetworkTab({
         />
       </FormControl>
 
-      <InputList
-        label="Hosts file entries"
-        value={values.hostsFileEntries}
-        onChange={(hostsFileEntries) =>
-          setFieldValue('hostsFileEntries', hostsFileEntries)
-        }
+      <HostsFileEntries
+        values={values.hostsFileEntries}
+        onChange={(v) => setFieldValue('hostsFileEntries', v)}
         errors={errors?.hostsFileEntries}
-        item={HostsFileEntryItem}
-        itemBuilder={() => ''}
-        data-cy="docker-container-hosts-file-entries"
       />
     </div>
   );
 }
-
-function HostsFileEntryItem({
-  item,
-  onChange,
-  disabled,
-  error,
-  readOnly,
-  index,
-}: ItemProps<string>) {
-  return (
-    <div>
-      <InputGroup>
-        <InputGroup.Addon>value</InputGroup.Addon>
-        <Input
-          value={item}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          readOnly={readOnly}
-          data-cy={`docker-container-hosts-file-entry_${index}`}
-        />
-      </InputGroup>
-
-      {error && <FormError>{error}</FormError>}
-    </div>
-  );
-}

app/react/docker/containers/CreateView/NetworkTab/validation.ts

@@ -1,18 +1,20 @@
-import { array, object, SchemaOf, string } from 'yup';
+import { object, SchemaOf, string } from 'yup';
 
 import { Values } from './types';
+import { hostnameSchema } from './HostnameField';
+import { hostFileSchema } from './HostsFileEntries';
 
 export function validation(): SchemaOf<Values> {
   return object({
     networkMode: string().default(''),
-    hostname: string().default(''),
+    hostname: hostnameSchema,
     domain: string().default(''),
     macAddress: string().default(''),
     ipv4Address: string().default(''),
     ipv6Address: string().default(''),
     primaryDns: string().default(''),
     secondaryDns: string().default(''),
-    hostsFileEntries: array(string().required('Entry is required')).default([]),
+    hostsFileEntries: hostFileSchema,
     container: string()
       .default('')
       .when('network', {