From 20aba7c559f7c6bd91c44d38740d2641657699fb Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Thu, 16 Mar 2023 18:10:02 -0400 Subject: [PATCH] fix(striker-ui): hoist network list in manifest network config --- .../AddAnvilManifestInputGroup.tsx | 34 --------- .../ManageManifest/AddManifestInputGroup.tsx | 69 +++++++++++++++++++ .../AnvilNetworkConfigInputGroup.tsx | 35 ++-------- .../ManageManifest/ManageManifestPanel.tsx | 4 +- striker-ui/types/ManageManifest.d.ts | 15 +++- 5 files changed, 90 insertions(+), 67 deletions(-) delete mode 100644 striker-ui/components/ManageManifest/AddAnvilManifestInputGroup.tsx create mode 100644 striker-ui/components/ManageManifest/AddManifestInputGroup.tsx diff --git a/striker-ui/components/ManageManifest/AddAnvilManifestInputGroup.tsx b/striker-ui/components/ManageManifest/AddAnvilManifestInputGroup.tsx deleted file mode 100644 index af863052..00000000 --- a/striker-ui/components/ManageManifest/AddAnvilManifestInputGroup.tsx +++ /dev/null @@ -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): ReactElement => ( - - - - -); - -export default AddAnvilManifestInputGroup; diff --git a/striker-ui/components/ManageManifest/AddManifestInputGroup.tsx b/striker-ui/components/ManageManifest/AddManifestInputGroup.tsx new file mode 100644 index 00000000..c5220fad --- /dev/null +++ b/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): ReactElement => { + const { networks: previousNetworkList = DEFAULT_NETWORKS } = + previousNetworkConfig; + + const [networkList, setNetworkList] = + useState(previousNetworkList); + + return ( + + + + + ); +}; + +export default AddManifestInputGroup; diff --git a/striker-ui/components/ManageManifest/AnvilNetworkConfigInputGroup.tsx b/striker-ui/components/ManageManifest/AnvilNetworkConfigInputGroup.tsx index 896a26de..8c4719f5 100644 --- a/striker-ui/components/ManageManifest/AnvilNetworkConfigInputGroup.tsx +++ b/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): ReactElement => { const { buildFinishInputTestBatchFunction, @@ -71,9 +51,6 @@ const AnvilNetworkConfigInputGroup = < msgSetters, } = formUtils; - const [networkList, setNetworkList] = - useState(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( @@ -198,7 +175,7 @@ const AnvilNetworkConfigInputGroup = < setNetworkList(newList); }, - [networkListEntries], + [networkListEntries, setNetworkList], ); const handleNetworkRemove = useCallback( @@ -229,7 +206,7 @@ const AnvilNetworkConfigInputGroup = < setNetworkList(newList); }, - [networkListEntries], + [networkListEntries, setNetworkList], ); const networksGridLayout = useMemo(() => { diff --git a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx b/striker-ui/components/ManageManifest/ManageManifestPanel.tsx index ae00f4a2..838e9bc1 100644 --- a/striker-ui/components/ManageManifest/ManageManifestPanel.tsx +++ b/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( () => ({ actionProceedText: 'Add', - content: , + content: , titleText: 'Add a Anvil! manifest', }), [formUtils], diff --git a/striker-ui/types/ManageManifest.d.ts b/striker-ui/types/ManageManifest.d.ts index 3e08fd7a..e53dbbe4 100644 --- a/striker-ui/types/ManageManifest.d.ts +++ b/striker-ui/types/ManageManifest.d.ts @@ -107,8 +107,19 @@ type AnvilNetworkConfigInputGroupOptionalProps = { type AnvilNetworkConfigInputGroupProps = AnvilNetworkConfigInputGroupOptionalProps & { formUtils: FormUtils; + networkList: AnvilNetworkConfigNetworkList; + setNetworkList: import('react').Dispatch< + import('react').SetStateAction + >; }; -type AddAnvilInputGroupProps = { - formUtils: FormUtils; +type AddManifestInputGroupOptionalProps = { + previous?: { + networkConfig?: AnvilNetworkConfigInputGroupOptionalProps['previous']; + }; }; + +type AddManifestInputGroupProps = + AddManifestInputGroupOptionalProps & { + formUtils: FormUtils; + };