fix(striker-ui): add confirm dialog to StrikerInitForm

striker-ui/components/GeneralInitForm.tsx

@@ -27,15 +27,17 @@ import { createTestInputFunction, testNotBlank } from '../lib/test_input';
 import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction';
 import { BodyText } from './Text';
 
+type GeneralInitFormValues = {
+  adminPassword?: string;
+  domainName?: string;
+  hostName?: string;
+  hostNumber?: number;
+  organizationName?: string;
+  organizationPrefix?: string;
+};
+
 type GeneralInitFormForwardRefContent = {
-  get?: () => {
-    adminPassword?: string;
-    domainName?: string;
-    hostName?: string;
-    hostNumber?: number;
-    organizationName?: string;
-    organizationPrefix?: string;
-  };
+  get?: () => GeneralInitFormValues;
 };
 
 type OutlinedInputWithLabelOnBlur = Exclude<
@@ -723,6 +725,6 @@ const GeneralInitForm = forwardRef<
 GeneralInitForm.defaultProps = { toggleSubmitDisabled: undefined };
 GeneralInitForm.displayName = 'GeneralInitForm';
 
-export type { GeneralInitFormForwardRefContent };
+export type { GeneralInitFormForwardRefContent, GeneralInitFormValues };
 
 export default GeneralInitForm;

striker-ui/components/NetworkInitForm.tsx

@@ -52,7 +52,7 @@ import Spinner from './Spinner';
 import sumstring from '../lib/sumstring';
 import { createTestInputFunction, testNotBlank } from '../lib/test_input';
 import { InputTestBatches, InputTestInputs } from '../types/TestInputFunction';
-import { BodyText, DataGridCellText } from './Text';
+import { BodyText, MonoText, SmallText } from './Text';
 
 type NetworkInput = {
   inputUUID: string;
@@ -73,16 +73,15 @@ type NetworkInterfaceInputMap = Record<
   }
 >;
 
+type NetworkInitFormValues = {
+  domainNameServerCSV?: string;
+  gateway?: string;
+  gatewayInterface?: string;
+  networks: Omit<NetworkInput, 'ipAddressInputRef' | 'subnetMaskInputRef'>[];
+};
+
 type NetworkInitFormForwardRefContent = {
-  get?: () => {
-    domainNameServerCSV?: string;
-    gateway?: string;
-    gatewayInterface?: string;
-    networks: Omit<
-      NetworkInput,
-      'inputUUID' | 'ipAddressInputRef' | 'subnetMaskInputRef'
-    >[];
-  };
+  get?: () => NetworkInitFormValues;
 };
 
 type GetNetworkTypeCountFunction = (
@@ -232,7 +231,7 @@ const createNetworkInterfaceTableColumns = (
           colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
           sx={{ height: 'auto' }}
         />
-        <DataGridCellText text={value} />
+        <SmallText text={value} />
       </MUIBox>
     ),
     sortComparator: (v1, v2) => sumstring(v1) - sumstring(v2),
@@ -241,7 +240,7 @@ const createNetworkInterfaceTableColumns = (
     field: 'networkInterfaceMACAddress',
     flex: 1,
     headerName: 'MAC',
-    renderCell: ({ value }) => <DataGridCellText monospaced text={value} />,
+    renderCell: ({ value }) => <MonoText text={value} />,
   },
   {
     field: 'networkInterfaceState',
@@ -251,7 +250,7 @@ const createNetworkInterfaceTableColumns = (
       const state = String(value);
 
       return (
-        <DataGridCellText
+        <SmallText
           text={`${state.charAt(0).toUpperCase()}${state.substring(1)}`}
         />
       );
@@ -262,7 +261,7 @@ const createNetworkInterfaceTableColumns = (
     flex: 1,
     headerName: 'Speed',
     renderCell: ({ value }) => (
-      <DataGridCellText text={`${parseFloat(value).toLocaleString()} Mbps`} />
+      <SmallText text={`${parseFloat(value).toLocaleString()} Mbps`} />
     ),
   },
   {
@@ -1003,6 +1002,7 @@ const NetworkInitForm = forwardRef<
         gatewayInterface,
         networks: networkInputs.map(
           ({
+            inputUUID,
             interfaces,
             ipAddressInputRef,
             name,
@@ -1010,6 +1010,7 @@ const NetworkInitForm = forwardRef<
             type,
             typeCount,
           }) => ({
+            inputUUID,
             interfaces,
             ipAddress: ipAddressInputRef?.current.getValue?.call(null) ?? '',
             name,
@@ -1176,6 +1177,7 @@ NetworkInitForm.displayName = 'NetworkInitForm';
 
 export type {
   NetworkInitFormForwardRefContent,
+  NetworkInitFormValues,
   NetworkInput,
   NetworkInterfaceInputMap,
 };

striker-ui/components/StrikerInitForm.tsx

@@ -1,21 +1,29 @@
+import { Grid } from '@mui/material';
 import { FC, useCallback, useMemo, useRef, useState } from 'react';
 
+import ConfirmDialog from './ConfirmDialog';
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
 import GeneralInitForm, {
   GeneralInitFormForwardRefContent,
+  GeneralInitFormValues,
 } from './GeneralInitForm';
 import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';
 import MessageBox, { Message } from './MessageBox';
 import NetworkInitForm, {
   NetworkInitFormForwardRefContent,
+  NetworkInitFormValues,
 } from './NetworkInitForm';
 import { Panel, PanelHeader } from './Panels';
 import Spinner from './Spinner';
-import { HeaderText } from './Text';
+import { BodyText, HeaderText, InlineMonoText, MonoText } from './Text';
 
 const StrikerInitForm: FC = () => {
   const [submitMessage, setSubmitMessage] = useState<Message | undefined>();
+  const [requestBody, setRequestBody] = useState<
+    (GeneralInitFormValues & NetworkInitFormValues) | undefined
+  >();
+  const [isOpenConfirm, setIsOpenConfirm] = useState<boolean>(false);
   const [isDisableSubmit, setIsDisableSubmit] = useState<boolean>(true);
   const [isGeneralInitFormValid, setIsGeneralInitFormValid] =
     useState<boolean>(false);
@@ -35,28 +43,14 @@ const StrikerInitForm: FC = () => {
           <ContainedButton
             disabled={isDisableSubmit}
             onClick={() => {
-              setIsSubmittingForm(true);
-
-              const requestBody: string = JSON.stringify({
+              setRequestBody({
                 ...(generalInitFormRef.current.get?.call(null) ?? {}),
-                ...(networkInitFormRef.current.get?.call(null) ?? {}),
+                ...(networkInitFormRef.current.get?.call(null) ?? {
+                  networks: [],
+                }),
               });
 
-              mainAxiosInstance
-                .put('/command/initialize-striker', requestBody, {
-                  headers: { 'Content-Type': 'application/json' },
-                })
-                .then(() => {
-                  setIsSubmittingForm(false);
-                })
-                .catch((reason) => {
-                  setSubmitMessage({
-                    children: `Failed to submit; ${reason}`,
-                    type: 'error',
-                  });
-
-                  setIsSubmittingForm(false);
-                });
+              setIsOpenConfirm(true);
             }}
           >
             Initialize
@@ -71,38 +65,173 @@ const StrikerInitForm: FC = () => {
   }, []);
 
   return (
-    <Panel>
-      <PanelHeader>
-        <HeaderText text="Initialize striker" />
-      </PanelHeader>
-      <FlexBox>
-        <GeneralInitForm
-          ref={generalInitFormRef}
-          toggleSubmitDisabled={(testResult) => {
-            if (testResult !== isGeneralInitFormValid) {
-              setIsGeneralInitFormValid(testResult);
-              toggleSubmitDisabled(testResult, isNetworkInitFormValid);
-            }
-          }}
-        />
-        <NetworkInitForm
-          ref={networkInitFormRef}
-          toggleSubmitDisabled={(testResult) => {
-            if (testResult !== isNetworkInitFormValid) {
-              setIsNetworkInitFormValid(testResult);
-              toggleSubmitDisabled(isGeneralInitFormValid, testResult);
-            }
-          }}
-        />
-        {submitMessage && (
-          <MessageBox
-            {...submitMessage}
-            onClose={() => setSubmitMessage(undefined)}
+    <>
+      <Panel>
+        <PanelHeader>
+          <HeaderText text="Initialize striker" />
+        </PanelHeader>
+        <FlexBox>
+          <GeneralInitForm
+            ref={generalInitFormRef}
+            toggleSubmitDisabled={(testResult) => {
+              if (testResult !== isGeneralInitFormValid) {
+                setIsGeneralInitFormValid(testResult);
+                toggleSubmitDisabled(testResult, isNetworkInitFormValid);
+              }
+            }}
           />
-        )}
-        {buildSubmitSection}
-      </FlexBox>
-    </Panel>
+          <NetworkInitForm
+            ref={networkInitFormRef}
+            toggleSubmitDisabled={(testResult) => {
+              if (testResult !== isNetworkInitFormValid) {
+                setIsNetworkInitFormValid(testResult);
+                toggleSubmitDisabled(isGeneralInitFormValid, testResult);
+              }
+            }}
+          />
+          {submitMessage && (
+            <MessageBox
+              {...submitMessage}
+              onClose={() => setSubmitMessage(undefined)}
+            />
+          )}
+          {buildSubmitSection}
+        </FlexBox>
+      </Panel>
+      <ConfirmDialog
+        actionProceedText="Initialize"
+        content={
+          <Grid container spacing=".6em" columns={{ xs: 2 }}>
+            <Grid item xs={1}>
+              <BodyText>Organization name</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.organizationName}</MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Organization prefix</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.organizationPrefix}</MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Striker number</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.hostNumber}</MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Domain name</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.domainName}</MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Host name</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.hostName}</MonoText>
+            </Grid>
+            <Grid item sx={{ marginTop: '1.4em' }} xs={2}>
+              <BodyText>Networks</BodyText>
+            </Grid>
+            {requestBody?.networks.map(
+              ({
+                inputUUID,
+                interfaces,
+                ipAddress,
+                name,
+                subnetMask,
+                type,
+                typeCount,
+              }) => (
+                <Grid key={`network-confirm-${inputUUID}`} item xs={1}>
+                  <Grid container spacing=".6em" columns={{ xs: 2 }}>
+                    <Grid item xs={2}>
+                      <BodyText>
+                        {name} (
+                        <InlineMonoText>
+                          {`${type.toUpperCase()}${typeCount}`}
+                        </InlineMonoText>
+                        )
+                      </BodyText>
+                    </Grid>
+                    {interfaces.map((iface, interfaceIndex) => {
+                      if (iface === undefined) {
+                        return <></>;
+                      }
+
+                      const { networkInterfaceName } = iface;
+
+                      return (
+                        <>
+                          <Grid item xs={1}>
+                            <BodyText>{`Link ${interfaceIndex + 1}`}</BodyText>
+                          </Grid>
+                          <Grid item xs={1}>
+                            <MonoText>{networkInterfaceName}</MonoText>
+                          </Grid>
+                        </>
+                      );
+                    })}
+                    <Grid item xs={2}>
+                      <MonoText>{`${ipAddress}/${subnetMask}`}</MonoText>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              ),
+            )}
+            <Grid item sx={{ marginBottom: '1.4em' }} xs={2} />
+            <Grid item xs={1}>
+              <BodyText>Gateway</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.gateway}</MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Gateway network</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>
+                {requestBody?.gatewayInterface?.toUpperCase()}
+              </MonoText>
+            </Grid>
+            <Grid item xs={1}>
+              <BodyText>Domain name server(s)</BodyText>
+            </Grid>
+            <Grid item xs={1}>
+              <MonoText>{requestBody?.domainNameServerCSV}</MonoText>
+            </Grid>
+          </Grid>
+        }
+        dialogProps={{ open: isOpenConfirm }}
+        onCancel={() => {
+          setIsOpenConfirm(false);
+        }}
+        onProceed={() => {
+          setSubmitMessage(undefined);
+          setIsSubmittingForm(true);
+          setIsOpenConfirm(false);
+
+          mainAxiosInstance
+            .put('/command/initialize-striker', JSON.stringify(requestBody), {
+              headers: { 'Content-Type': 'application/json' },
+            })
+            .then(() => {
+              setIsSubmittingForm(false);
+            })
+            .catch((reason) => {
+              setSubmitMessage({
+                children: `Failed to submit; ${reason}`,
+                type: 'error',
+              });
+
+              setIsSubmittingForm(false);
+            });
+        }}
+        titleText="Confirm striker initialization"
+      />
+    </>
   );
 };