fix(striker-ui): hoist network list in manifest network config

striker-ui/components/ManageManifest/AddAnvilManifestInputGroup.tsx

@@ -1,34 +0,0 @@
-import { ReactElement } from 'react';
-
-import AnvilIdInputGroup, {
-  INPUT_ID_ANVIL_ID_DOMAIN,
-  INPUT_ID_ANVIL_ID_PREFIX,
-  INPUT_ID_ANVIL_ID_SEQUENCE,
-} from './AnvilIdInputGroup';
-import AnvilNetworkConfigInputGroup, {
-  INPUT_ID_ANVIL_NETWORK_CONFIG_DNS,
-  INPUT_ID_ANVIL_NETWORK_CONFIG_MTU,
-  INPUT_ID_ANVIL_NETWORK_CONFIG_NTP,
-} from './AnvilNetworkConfigInputGroup';
-import FlexBox from '../FlexBox';
-
-const AddAnvilManifestInputGroup = <
-  M extends {
-    [K in
-      | typeof INPUT_ID_ANVIL_ID_DOMAIN
-      | typeof INPUT_ID_ANVIL_ID_PREFIX
-      | typeof INPUT_ID_ANVIL_ID_SEQUENCE
-      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_DNS
-      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_MTU
-      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_NTP]: string;
-  },
->({
-  formUtils,
-}: AddAnvilInputGroupProps<M>): ReactElement => (
-  <FlexBox>
-    <AnvilIdInputGroup formUtils={formUtils} />
-    <AnvilNetworkConfigInputGroup formUtils={formUtils} />
-  </FlexBox>
-);
-
-export default AddAnvilManifestInputGroup;

striker-ui/components/ManageManifest/AddManifestInputGroup.tsx

@@ -0,0 +1,69 @@
+import { ReactElement, useState } from 'react';
+
+import AnvilIdInputGroup, {
+  INPUT_ID_ANVIL_ID_DOMAIN,
+  INPUT_ID_ANVIL_ID_PREFIX,
+  INPUT_ID_ANVIL_ID_SEQUENCE,
+} from './AnvilIdInputGroup';
+import AnvilNetworkConfigInputGroup, {
+  INPUT_ID_ANVIL_NETWORK_CONFIG_DNS,
+  INPUT_ID_ANVIL_NETWORK_CONFIG_MTU,
+  INPUT_ID_ANVIL_NETWORK_CONFIG_NTP,
+} from './AnvilNetworkConfigInputGroup';
+import FlexBox from '../FlexBox';
+
+const DEFAULT_NETWORKS: AnvilNetworkConfigNetworkList = {
+  bcn1: {
+    networkMinIp: '',
+    networkNumber: 1,
+    networkSubnetMask: '',
+    networkType: 'bcn',
+  },
+  sn1: {
+    networkMinIp: '',
+    networkNumber: 1,
+    networkSubnetMask: '',
+    networkType: 'sn',
+  },
+  ifn1: {
+    networkMinIp: '',
+    networkNumber: 1,
+    networkSubnetMask: '',
+    networkType: 'ifn',
+  },
+};
+
+const AddManifestInputGroup = <
+  M extends {
+    [K in
+      | typeof INPUT_ID_ANVIL_ID_DOMAIN
+      | typeof INPUT_ID_ANVIL_ID_PREFIX
+      | typeof INPUT_ID_ANVIL_ID_SEQUENCE
+      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_DNS
+      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_MTU
+      | typeof INPUT_ID_ANVIL_NETWORK_CONFIG_NTP]: string;
+  },
+>({
+  formUtils,
+  previous: { networkConfig: previousNetworkConfig = {} } = {},
+}: AddManifestInputGroupProps<M>): ReactElement => {
+  const { networks: previousNetworkList = DEFAULT_NETWORKS } =
+    previousNetworkConfig;
+
+  const [networkList, setNetworkList] =
+    useState<AnvilNetworkConfigNetworkList>(previousNetworkList);
+
+  return (
+    <FlexBox>
+      <AnvilIdInputGroup formUtils={formUtils} />
+      <AnvilNetworkConfigInputGroup
+        formUtils={formUtils}
+        networkList={networkList}
+        previous={previousNetworkConfig}
+        setNetworkList={setNetworkList}
+      />
+    </FlexBox>
+  );
+};
+
+export default AddManifestInputGroup;

striker-ui/components/ManageManifest/AnvilNetworkConfigInputGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, useCallback, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import NETWORK_TYPES from '../../lib/consts/NETWORK_TYPES';
@@ -25,27 +25,6 @@ const INPUT_LABEL_ANVIL_NETWORK_CONFIG_NTP = 'NTP';
 
 const NETWORK_TYPE_ENTRIES = Object.entries(NETWORK_TYPES);
 
-const DEFAULT_NETWORKS: AnvilNetworkConfigNetworkList = {
-  bcn1: {
-    networkMinIp: '',
-    networkNumber: 1,
-    networkSubnetMask: '',
-    networkType: 'bcn',
-  },
-  sn1: {
-    networkMinIp: '',
-    networkNumber: 1,
-    networkSubnetMask: '',
-    networkType: 'sn',
-  },
-  ifn1: {
-    networkMinIp: '',
-    networkNumber: 1,
-    networkSubnetMask: '',
-    networkType: 'ifn',
-  },
-};
-
 const assertIfn = (type: string) => type === 'ifn';
 const assertMn = (type: string) => type === 'mn';
 
@@ -58,12 +37,13 @@ const AnvilNetworkConfigInputGroup = <
   },
 >({
   formUtils,
+  networkList,
   previous: {
     dnsCsv: previousDnsCsv,
     mtu: previousMtu,
-    networks: previousNetworks = DEFAULT_NETWORKS,
     ntpCsv: previousNtpCsv,
   } = {},
+  setNetworkList,
 }: AnvilNetworkConfigInputGroupProps<M>): ReactElement => {
   const {
     buildFinishInputTestBatchFunction,
@@ -71,9 +51,6 @@ const AnvilNetworkConfigInputGroup = <
     msgSetters,
   } = formUtils;
 
-  const [networkList, setNetworkList] =
-    useState<AnvilNetworkConfigNetworkList>(previousNetworks);
-
   const networkListEntries = useMemo(
     () => Object.entries(networkList),
     [networkList],
@@ -143,7 +120,7 @@ const AnvilNetworkConfigInputGroup = <
   const setNetwork = useCallback(
     (key: string, value?: AnvilNetworkConfigNetwork) =>
       setNetworkList(buildObjectStateSetterCallback(key, value)),
-    [],
+    [setNetworkList],
   );
 
   const handleNetworkTypeChange = useCallback<AnvilNetworkTypeChangeHandler>(
@@ -198,7 +175,7 @@ const AnvilNetworkConfigInputGroup = <
 
       setNetworkList(newList);
     },
-    [networkListEntries],
+    [networkListEntries, setNetworkList],
   );
 
   const handleNetworkRemove = useCallback<AnvilNetworkCloseHandler>(
@@ -229,7 +206,7 @@ const AnvilNetworkConfigInputGroup = <
 
       setNetworkList(newList);
     },
-    [networkListEntries],
+    [networkListEntries, setNetworkList],
   );
 
   const networksGridLayout = useMemo<GridLayout>(() => {

striker-ui/components/ManageManifest/ManageManifestPanel.tsx

@@ -3,7 +3,7 @@ import { FC, useMemo, useRef, useState } from 'react';
 
 import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 
-import AddAnvilManifestInputGroup from './AddAnvilManifestInputGroup';
+import AddManifestInputGroup from './AddManifestInputGroup';
 import {
   INPUT_ID_ANVIL_ID_DOMAIN,
   INPUT_ID_ANVIL_ID_PREFIX,
@@ -58,7 +58,7 @@ const ManageManifestPanel: FC = () => {
   const addAnvilManifestFormDialogProps = useMemo<ConfirmDialogProps>(
     () => ({
       actionProceedText: 'Add',
-      content: <AddAnvilManifestInputGroup formUtils={formUtils} />,
+      content: <AddManifestInputGroup formUtils={formUtils} />,
       titleText: 'Add a Anvil! manifest',
     }),
     [formUtils],

striker-ui/types/ManageManifest.d.ts

@@ -107,8 +107,19 @@ type AnvilNetworkConfigInputGroupOptionalProps = {
 type AnvilNetworkConfigInputGroupProps<M extends MapToInputTestID> =
   AnvilNetworkConfigInputGroupOptionalProps & {
     formUtils: FormUtils<M>;
+    networkList: AnvilNetworkConfigNetworkList;
+    setNetworkList: import('react').Dispatch<
+      import('react').SetStateAction<AnvilNetworkConfigNetworkList>
+    >;
   };
 
-type AddAnvilInputGroupProps<M extends MapToInputTestID> = {
-  formUtils: FormUtils<M>;
+type AddManifestInputGroupOptionalProps = {
+  previous?: {
+    networkConfig?: AnvilNetworkConfigInputGroupOptionalProps['previous'];
+  };
 };
+
+type AddManifestInputGroupProps<M extends MapToInputTestID> =
+  AddManifestInputGroupOptionalProps & {
+    formUtils: FormUtils<M>;
+  };