fix(striker-ui): add edit manifest form

striker-ui/components/ManageManifest/AddManifestInputGroup.tsx

@@ -15,15 +15,15 @@ import FlexBox from '../FlexBox';
 
 const DEFAULT_NETWORK_LIST: ManifestNetworkList = {
   bcn1: {
-    networkMinIp: '',
+    networkMinIp: '10.201.0.0',
     networkNumber: 1,
-    networkSubnetMask: '',
+    networkSubnetMask: '255.255.0.0',
     networkType: 'bcn',
   },
   sn1: {
-    networkMinIp: '',
+    networkMinIp: '10.101.0.0',
     networkNumber: 1,
-    networkSubnetMask: '',
+    networkSubnetMask: '255.255.0.0',
     networkType: 'sn',
   },
   ifn1: {
@@ -46,9 +46,12 @@ const AddManifestInputGroup = <
   },
 >({
   formUtils,
+  knownFences,
+  knownUpses,
   previous: {
-    hostConfig: previousHostConfig = {},
+    hostConfig: previousHostConfig,
     networkConfig: previousNetworkConfig = {},
+    ...previousAnId
   } = {},
 }: AddManifestInputGroupProps<M>): ReactElement => {
   const { networks: previousNetworkList = DEFAULT_NETWORK_LIST } =
@@ -64,7 +67,7 @@ const AddManifestInputGroup = <
 
   return (
     <FlexBox>
-      <AnvilIdInputGroup formUtils={formUtils} />
+      <AnvilIdInputGroup formUtils={formUtils} previous={previousAnId} />
       <AnvilNetworkConfigInputGroup
         formUtils={formUtils}
         networkListEntries={networkListEntries}
@@ -73,6 +76,8 @@ const AddManifestInputGroup = <
       />
       <AnvilHostConfigInputGroup
         formUtils={formUtils}
+        knownFences={knownFences}
+        knownUpses={knownUpses}
         networkListEntries={networkListEntries}
         previous={previousHostConfig}
       />

striker-ui/components/ManageManifest/AnvilHostConfigInputGroup.tsx

@@ -39,23 +39,6 @@ const AnvilHostConfigInputGroup = <M extends MapToInputTestID>({
     [knownUpses],
   );
 
-  const hostNetworkList = useMemo(
-    () =>
-      networkListEntries.reduce<ManifestHostNetworkList>(
-        (previous, [networkId, { networkNumber, networkType }]) => {
-          previous[networkId] = {
-            networkIp: '',
-            networkNumber,
-            networkType,
-          };
-
-          return previous;
-        },
-        {},
-      ),
-    [networkListEntries],
-  );
-
   const hostListGridLayout = useMemo<GridLayout>(
     () =>
       hostListEntries.reduce<GridLayout>(
@@ -64,7 +47,7 @@ const AnvilHostConfigInputGroup = <M extends MapToInputTestID>({
             fences: previousFenceList = {},
             hostNumber,
             hostType,
-            networks = hostNetworkList,
+            networks: previousNetworkList = {},
             upses: previousUpsList = {},
           }: ManifestHost = previousHostArgs;
 
@@ -72,23 +55,31 @@ const AnvilHostConfigInputGroup = <M extends MapToInputTestID>({
             (fenceList, { fenceName }) => {
               const { fencePort = '' } = previousFenceList[fenceName] ?? {};
 
-              fenceList[fenceName] = {
+              fenceList[fenceName] = { fenceName, fencePort };
-                fenceName,
-                fencePort,
-              };
 
               return fenceList;
             },
             {},
           );
+          const networks = networkListEntries.reduce<ManifestHostNetworkList>(
+            (networkList, [networkId, { networkNumber, networkType }]) => {
+              const { networkIp = '' } = previousNetworkList[networkId] ?? {};
+
+              networkList[networkId] = {
+                networkIp,
+                networkNumber,
+                networkType,
+              };
+
+              return networkList;
+            },
+            {},
+          );
           const upses = knownUpsListValues.reduce<ManifestHostUpsList>(
             (upsList, { upsName }) => {
               const { isUsed = true } = previousUpsList[upsName] ?? {};
 
-              upsList[upsName] = {
+              upsList[upsName] = { isUsed, upsName };
-                isUsed,
-                upsName,
-              };
 
               return upsList;
             },
@@ -117,9 +108,9 @@ const AnvilHostConfigInputGroup = <M extends MapToInputTestID>({
     [
       formUtils,
       hostListEntries,
-      hostNetworkList,
       knownFenceListValues,
       knownUpsListValues,
+      networkListEntries,
     ],
   );
 

striker-ui/components/ManageManifest/AnvilIdInputGroup.tsx

@@ -30,9 +30,9 @@ const AnvilIdInputGroup = <
     msgSetters,
   },
   previous: {
-    anvilIdDomain: previousDomain,
+    domain: previousDomain,
-    anvilIdPrefix: previousPrefix,
+    prefix: previousPrefix,
-    anvilIdSequence: previousSequence,
+    sequence: previousSequence,
   } = {},
 }: AnvilIdInputGroupProps<M>): ReactElement => (
   <Grid

striker-ui/components/ManageManifest/EditManifestInputGroup.tsx

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+
+import {
+  INPUT_ID_ANVIL_ID_DOMAIN,
+  INPUT_ID_ANVIL_ID_PREFIX,
+  INPUT_ID_ANVIL_ID_SEQUENCE,
+} from './AnvilIdInputGroup';
+import {
+  INPUT_ID_ANVIL_NETWORK_CONFIG_DNS,
+  INPUT_ID_ANVIL_NETWORK_CONFIG_MTU,
+  INPUT_ID_ANVIL_NETWORK_CONFIG_NTP,
+} from './AnvilNetworkConfigInputGroup';
+import AddManifestInputGroup from './AddManifestInputGroup';
+
+const EditManifestInputGroup = <
+  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,
+  knownFences,
+  knownUpses,
+  previous,
+}: EditManifestInputGroupProps<M>): ReactElement => (
+  <AddManifestInputGroup
+    formUtils={formUtils}
+    knownFences={knownFences}
+    knownUpses={knownUpses}
+    previous={previous}
+  />
+);
+
+export default EditManifestInputGroup;

striker-ui/components/ManageManifest/ManageManifestPanel.tsx

@@ -1,5 +1,5 @@
 import { PlayCircle } from '@mui/icons-material';
-import { FC, useMemo, useRef, useState } from 'react';
+import { FC, useCallback, useMemo, useRef, useState } from 'react';
 
 import API_BASE_URL from '../../lib/consts/API_BASE_URL';
 
@@ -14,9 +14,12 @@ import {
   INPUT_ID_ANVIL_NETWORK_CONFIG_MTU,
   INPUT_ID_ANVIL_NETWORK_CONFIG_NTP,
 } from './AnvilNetworkConfigInputGroup';
+import api from '../../lib/api';
 import ConfirmDialog from '../ConfirmDialog';
+import EditManifestInputGroup from './EditManifestInputGroup';
 import FlexBox from '../FlexBox';
 import FormDialog from '../FormDialog';
+import handleAPIError from '../../lib/handleAPIError';
 import IconButton from '../IconButton';
 import List from '../List';
 import { MessageGroupForwardedRefContent } from '../MessageGroup';
@@ -26,16 +29,32 @@ import Spinner from '../Spinner';
 import { BodyText, HeaderText } from '../Text';
 import useConfirmDialogProps from '../../hooks/useConfirmDialogProps';
 import useFormUtils from '../../hooks/useFormUtils';
+import useIsFirstRender from '../../hooks/useIsFirstRender';
+import useProtectedState from '../../hooks/useProtectedState';
 
 const ManageManifestPanel: FC = () => {
+  const isFirstRender = useIsFirstRender();
+
   const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
-  const formDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
+  const addManifestFormDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
+  const editManifestFormDialogRef = useRef<ConfirmDialogForwardedRefContent>(
+    {},
+  );
   const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
 
   const [confirmDialogProps] = useConfirmDialogProps();
-  const [formDialogProps, setFormDialogProps] = useConfirmDialogProps();
 
   const [isEditManifests, setIsEditManifests] = useState<boolean>(false);
+  const [isLoadingManifestDetail, setIsLoadingManifestDetail] =
+    useProtectedState<boolean>(true);
+  const [isLoadingManifestTemplate, setIsLoadingManifestTemplate] =
+    useState<boolean>(true);
+  const [manifestDetail, setManifestDetail] = useProtectedState<
+    APIManifestDetail | undefined
+  >(undefined);
+  const [manifestTemplate, setManifestTemplate] = useProtectedState<
+    APIManifestTemplate | undefined
+  >(undefined);
 
   const { data: manifestOverviews, isLoading: isLoadingManifestOverviews } =
     periodicFetch<APIManifestOverviewList>(`${API_BASE_URL}/manifest`, {
@@ -55,13 +74,79 @@ const ManageManifestPanel: FC = () => {
   );
   const { isFormInvalid } = formUtils;
 
-  const addAnvilManifestFormDialogProps = useMemo<ConfirmDialogProps>(
+  const addManifestFormDialogProps = useMemo<ConfirmDialogProps>(() => {
-    () => ({
+    let domain: string | undefined;
+    let prefix: string | undefined;
+    let sequence: number | undefined;
+    let fences: APIManifestTemplateFenceList | undefined;
+    let upses: APIManifestTemplateUpsList | undefined;
+
+    if (manifestTemplate) {
+      ({ domain, fences, prefix, sequence, upses } = manifestTemplate);
+    }
+
+    return {
       actionProceedText: 'Add',
-      content: <AddManifestInputGroup formUtils={formUtils} />,
+      content: (
-      titleText: 'Add a Anvil! manifest',
+        <AddManifestInputGroup
-    }),
+          formUtils={formUtils}
-    [formUtils],
+          knownFences={fences}
+          knownUpses={upses}
+          previous={{ domain, prefix, sequence }}
+        />
+      ),
+      titleText: 'Add an install manifest',
+    };
+  }, [formUtils, manifestTemplate]);
+
+  const editManifestFormDialogProps = useMemo<ConfirmDialogProps>(() => {
+    let fences: APIManifestTemplateFenceList | undefined;
+    let manifestName: string | undefined;
+    let upses: APIManifestTemplateUpsList | undefined;
+
+    if (manifestTemplate) {
+      ({ fences, upses } = manifestTemplate);
+    }
+
+    if (manifestDetail) {
+      ({ name: manifestName } = manifestDetail);
+    }
+
+    return {
+      actionProceedText: 'Edit',
+      content: (
+        <EditManifestInputGroup
+          formUtils={formUtils}
+          knownFences={fences}
+          knownUpses={upses}
+          previous={manifestDetail}
+        />
+      ),
+      loading: isLoadingManifestDetail,
+      titleText: `Update install manifest ${manifestName}`,
+    };
+  }, [formUtils, isLoadingManifestDetail, manifestDetail, manifestTemplate]);
+
+  const getManifestDetail = useCallback(
+    (manifestUuid: string, finallyAppend?: () => void) => {
+      setIsLoadingManifestDetail(true);
+
+      api
+        .get<APIManifestDetail>(`manifest/${manifestUuid}`)
+        .then(({ data }) => {
+          data.uuid = manifestUuid;
+
+          setManifestDetail(data);
+        })
+        .catch((error) => {
+          handleAPIError(error);
+        })
+        .finally(() => {
+          setIsLoadingManifestDetail(false);
+          finallyAppend?.call(null);
+        });
+    },
+    [setIsLoadingManifestDetail, setManifestDetail],
   );
 
   const listElement = useMemo(
@@ -74,12 +159,19 @@ const ManageManifestPanel: FC = () => {
         listEmpty="No manifest(s) registered."
         listItems={manifestOverviews}
         onAdd={() => {
-          setFormDialogProps(addAnvilManifestFormDialogProps);
+          addManifestFormDialogRef.current.setOpen?.call(null, true);
-          formDialogRef.current.setOpen?.call(null, true);
         }}
         onEdit={() => {
           setIsEditManifests((previous) => !previous);
         }}
+        onItemClick={({ manifestName, manifestUUID }) => {
+          setManifestDetail({
+            name: manifestName,
+            uuid: manifestUUID,
+          } as APIManifestDetail);
+          editManifestFormDialogRef.current.setOpen?.call(null, true);
+          getManifestDetail(manifestUUID);
+        }}
         renderListItem={(manifestUUID, { manifestName }) => (
           <FlexBox fullWidth row>
             <IconButton disabled={isEditManifests} variant="normal">
@@ -90,19 +182,33 @@ const ManageManifestPanel: FC = () => {
         )}
       />
     ),
-    [
+    [getManifestDetail, isEditManifests, manifestOverviews, setManifestDetail],
-      addAnvilManifestFormDialogProps,
-      isEditManifests,
-      manifestOverviews,
-      setFormDialogProps,
-    ],
   );
 
   const panelContent = useMemo(
-    () => (isLoadingManifestOverviews ? <Spinner /> : listElement),
+    () =>
-    [isLoadingManifestOverviews, listElement],
+      isLoadingManifestTemplate || isLoadingManifestOverviews ? (
+        <Spinner />
+      ) : (
+        listElement
+      ),
+    [isLoadingManifestOverviews, isLoadingManifestTemplate, listElement],
   );
 
+  if (isFirstRender) {
+    api
+      .get<APIManifestTemplate>('/manifest/template')
+      .then(({ data }) => {
+        setManifestTemplate(data);
+      })
+      .catch((error) => {
+        handleAPIError(error);
+      })
+      .finally(() => {
+        setIsLoadingManifestTemplate(false);
+      });
+  }
+
   return (
     <>
       <Panel>
@@ -112,14 +218,15 @@ const ManageManifestPanel: FC = () => {
         {panelContent}
       </Panel>
       <FormDialog
-        {...formDialogProps}
+        {...addManifestFormDialogProps}
-        ref={formDialogRef}
+        disableProceed={isFormInvalid}
-        proceedButtonProps={{ disabled: isFormInvalid }}
+        ref={addManifestFormDialogRef}
-        scrollBoxProps={{
+        scrollContent
-          paddingRight: '.4em',
+      />
-          paddingTop: '.6em',
+      <FormDialog
-          sx: { overflowX: 'hidden' },
+        {...editManifestFormDialogProps}
-        }}
+        disableProceed={isFormInvalid}
+        ref={editManifestFormDialogRef}
         scrollContent
       />
       <ConfirmDialog {...confirmDialogProps} ref={confirmDialogRef} />

striker-ui/types/APIManifest.d.ts

@@ -7,6 +7,13 @@ type APIManifestOverviewList = {
   [manifestUUID: string]: APIManifestOverview;
 };
 
+type APIManifestDetail = ManifestAnId & {
+  hostConfig: ManifestHostConfig;
+  name: string;
+  networkConfig: ManifestNetworkConfig;
+  uuid?: string;
+};
+
 type APIManifestTemplateFence = {
   fenceName: string;
   fenceUUID: string;

striker-ui/types/ManageManifest.d.ts

@@ -1,14 +1,7 @@
-type AnvilIdInputGroupOptionalProps = {
+type ManifestAnId = {
-  previous?: {
+  domain: string;
-    anvilIdPrefix?: string;
+  prefix: string;
-    anvilIdDomain?: string;
+  sequence: number;
-    anvilIdSequence?: number;
-  };
-};
-
-type AnvilIdInputGroupProps<M extends MapToInputTestID> =
-  AnvilIdInputGroupOptionalProps & {
-    formUtils: FormUtils<M>;
 };
 
 type ManifestNetwork = {
@@ -23,6 +16,14 @@ type ManifestNetworkList = {
   [networkId: string]: ManifestNetwork;
 };
 
+type ManifestNetworkConfig = {
+  dnsCsv: string;
+  /** Max Transmission Unit (MTU); unit: bytes */
+  mtu: number;
+  networks: ManifestNetworkList;
+  ntpCsv: string;
+};
+
 type ManifestHostFenceList = {
   [fenceId: string]: {
     fenceName: string;
@@ -57,6 +58,19 @@ type ManifestHostList = {
   [hostId: string]: ManifestHost;
 };
 
+type ManifestHostConfig = {
+  hosts: ManifestHostList;
+};
+
+type AnvilIdInputGroupOptionalProps = {
+  previous?: Partial<ManifestAnId>;
+};
+
+type AnvilIdInputGroupProps<M extends MapToInputTestID> =
+  AnvilIdInputGroupOptionalProps & {
+    formUtils: FormUtils<M>;
+  };
+
 type AnvilNetworkEventHandlerPreviousArgs = {
   networkId: string;
 } & Pick<ManifestNetwork, 'networkType'>;
@@ -112,13 +126,7 @@ type AnvilHostInputGroupProps<M extends MapToInputTestID> =
   };
 
 type AnvilNetworkConfigInputGroupOptionalProps = {
-  previous?: {
+  previous?: Partial<ManifestNetworkConfig>;
-    dnsCsv?: string;
-    /** Max Transmission Unit (MTU); unit: bytes */
-    mtu?: number;
-    networks?: ManifestNetworkList;
-    ntpCsv?: string;
-  };
 };
 
 type AnvilNetworkConfigInputGroupProps<M extends MapToInputTestID> =
@@ -133,9 +141,7 @@ type AnvilNetworkConfigInputGroupProps<M extends MapToInputTestID> =
 type AnvilHostConfigInputGroupOptionalProps = {
   knownFences?: APIManifestTemplateFenceList;
   knownUpses?: APIManifestTemplateUpsList;
-  previous?: {
+  previous?: Partial<ManifestHostConfig>;
-    hosts?: ManifestHostList;
-  };
 };
 
 type AnvilHostConfigInputGroupProps<M extends MapToInputTestID> =
@@ -148,10 +154,9 @@ type AddManifestInputGroupOptionalProps = Pick<
   AnvilHostConfigInputGroupOptionalProps,
   'knownFences' | 'knownUpses'
 > & {
-  previous?: {
+  previous?: Partial<ManifestAnId> & {
-    anId?: AnvilIdInputGroupOptionalProps['previous'];
+    hostConfig?: Partial<ManifestHostConfig>;
-    networkConfig?: AnvilNetworkConfigInputGroupOptionalProps['previous'];
+    networkConfig?: Partial<ManifestNetworkConfig>;
-    hostConfig?: AnvilHostConfigInputGroupOptionalProps['previous'];
   };
 };
 
@@ -159,3 +164,6 @@ type AddManifestInputGroupProps<M extends MapToInputTestID> =
   AddManifestInputGroupOptionalProps & {
     formUtils: FormUtils<M>;
   };
+
+type EditManifestInputGroupProps<M extends MapToInputTestID> =
+  AddManifestInputGroupProps<M>;