refactor(containers): migrate create view to react [EE-2307] (#9175)

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

@@ -1,5 +1,4 @@
 import { FormikErrors } from 'formik';
-import { useState } from 'react';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Input } from '@@/form-components/Input';
@@ -13,23 +12,21 @@ import { CONTAINER_MODE, Values } from './types';
 import { ContainerSelector } from './ContainerSelector';
 
 export function NetworkTab({
-  values: initialValues,
-  onChange,
+  values,
+  setFieldValue,
   errors,
 }: {
   values: Values;
-  onChange(values: Values): void;
+  setFieldValue: (field: string, value: unknown) => void;
   errors?: FormikErrors<Values>;
 }) {
-  const [values, setControlledValues] = useState(initialValues);
-
   return (
     <div className="mt-3">
       <FormControl label="Network" errors={errors?.networkMode}>
         <NetworkSelector
           value={values.networkMode}
           additionalOptions={[{ label: 'Container', value: CONTAINER_MODE }]}
-          onChange={(networkMode) => handleChange({ networkMode })}
+          onChange={(networkMode) => setFieldValue('networkMode', networkMode)}
         />
       </FormControl>
 
@@ -37,7 +34,7 @@ export function NetworkTab({
         <FormControl label="Container" errors={errors?.container}>
           <ContainerSelector
             value={values.container}
-            onChange={(container) => handleChange({ container })}
+            onChange={(container) => setFieldValue('container', container)}
           />
         </FormControl>
       )}
@@ -45,7 +42,7 @@ export function NetworkTab({
       <FormControl label="Hostname" errors={errors?.hostname}>
         <Input
           value={values.hostname}
-          onChange={(e) => handleChange({ hostname: e.target.value })}
+          onChange={(e) => setFieldValue('hostname', e.target.value)}
           placeholder="e.g. web01"
         />
       </FormControl>
@@ -53,7 +50,7 @@ export function NetworkTab({
       <FormControl label="Domain Name" errors={errors?.domain}>
         <Input
           value={values.domain}
-          onChange={(e) => handleChange({ domain: e.target.value })}
+          onChange={(e) => setFieldValue('domain', e.target.value)}
           placeholder="e.g. example.com"
         />
       </FormControl>
@@ -61,7 +58,7 @@ export function NetworkTab({
       <FormControl label="MAC Address" errors={errors?.macAddress}>
         <Input
           value={values.macAddress}
-          onChange={(e) => handleChange({ macAddress: e.target.value })}
+          onChange={(e) => setFieldValue('macAddress', e.target.value)}
           placeholder="e.g. 12-34-56-78-9a-bc"
         />
       </FormControl>
@@ -69,7 +66,7 @@ export function NetworkTab({
       <FormControl label="IPv4 Address" errors={errors?.ipv4Address}>
         <Input
           value={values.ipv4Address}
-          onChange={(e) => handleChange({ ipv4Address: e.target.value })}
+          onChange={(e) => setFieldValue('ipv4Address', e.target.value)}
           placeholder="e.g. 172.20.0.7"
         />
       </FormControl>
@@ -77,7 +74,7 @@ export function NetworkTab({
       <FormControl label="IPv6 Address" errors={errors?.ipv6Address}>
         <Input
           value={values.ipv6Address}
-          onChange={(e) => handleChange({ ipv6Address: e.target.value })}
+          onChange={(e) => setFieldValue('ipv6Address', e.target.value)}
           placeholder="e.g. a:b:c:d::1234"
         />
       </FormControl>
@@ -85,7 +82,7 @@ export function NetworkTab({
       <FormControl label="Primary DNS Server" errors={errors?.primaryDns}>
         <Input
           value={values.primaryDns}
-          onChange={(e) => handleChange({ primaryDns: e.target.value })}
+          onChange={(e) => setFieldValue('primaryDns', e.target.value)}
           placeholder="e.g. 1.1.1.1, 2606:4700:4700::1111"
         />
       </FormControl>
@@ -93,7 +90,7 @@ export function NetworkTab({
       <FormControl label="Secondary DNS Server" errors={errors?.secondaryDns}>
         <Input
           value={values.secondaryDns}
-          onChange={(e) => handleChange({ secondaryDns: e.target.value })}
+          onChange={(e) => setFieldValue('secondaryDns', e.target.value)}
           placeholder="e.g. 1.0.0.1, 2606:4700:4700::1001"
         />
       </FormControl>
@@ -101,17 +98,15 @@ export function NetworkTab({
       <InputList
         label="Hosts file entries"
         value={values.hostsFileEntries}
-        onChange={(hostsFileEntries) => handleChange({ hostsFileEntries })}
+        onChange={(hostsFileEntries) =>
+          setFieldValue('hostsFileEntries', hostsFileEntries)
+        }
         errors={errors?.hostsFileEntries}
         item={HostsFileEntryItem}
+        itemBuilder={() => ''}
       />
     </div>
   );
-
-  function handleChange(newValues: Partial<Values>) {
-    onChange({ ...values, ...newValues });
-    setControlledValues((values) => ({ ...values, ...newValues }));
-  }
 }
 
 function HostsFileEntryItem({

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

@@ -3,7 +3,6 @@ import { toRequest } from './toRequest';
 import { toViewModel, getDefaultViewModel } from './toViewModel';
 
 export { NetworkTab } from './NetworkTab';
-
 export { type Values as NetworkTabValues } from './types';
 
 export const networkTabUtils = {

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

@@ -5,9 +5,9 @@ import { DockerContainer } from '../../types';
 
 import { CONTAINER_MODE, Values } from './types';
 
-export function getDefaultViewModel(hasBridgeNetwork: boolean) {
+export function getDefaultViewModel() {
   return {
-    networkMode: hasBridgeNetwork ? 'bridge' : 'nat',
+    networkMode: 'bridge',
     hostname: '',
     domain: '',
     macAddress: '',