fix(striker-ui): repop, connect reconfig striker

striker-ui/components/GeneralInitForm.tsx

@@ -3,6 +3,7 @@ import {
   forwardRef,
   ReactNode,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -92,8 +93,12 @@ const buildHostName = ({
 
 const GeneralInitForm = forwardRef<
   GeneralInitFormForwardedRefContent,
-  { toggleSubmitDisabled?: ToggleSubmitDisabledFunction }
+  {
->(({ toggleSubmitDisabled }, ref) => {
+    expectHostDetail?: boolean;
+    hostDetail?: APIHostDetail;
+    toggleSubmitDisabled?: ToggleSubmitDisabledFunction;
+  }
+>(({ expectHostDetail = false, hostDetail, toggleSubmitDisabled }, ref) => {
   const [helpMessage, setHelpMessage] = useState<ReactNode | undefined>();
   const [isShowOrganizationPrefixSuggest, setIsShowOrganizationPrefixSuggest] =
     useState<boolean>(false);
@@ -103,6 +108,8 @@ const GeneralInitForm = forwardRef<
     useState<boolean>(true);
   const [isValidateDomain, setIsValidateDomain] = useState<boolean>(true);
 
+  const readHostDetailRef = useRef<boolean>(true);
+
   const adminPasswordInputRef = useRef<InputForwardedRefContent<'string'>>({});
   const confirmAdminPasswordInputRef = useRef<
     InputForwardedRefContent<'string'>
@@ -491,6 +498,26 @@ const GeneralInitForm = forwardRef<
     [isValidateDomain, testInputToToggleSubmitDisabled],
   );
 
+  useEffect(() => {
+    if (expectHostDetail && hostDetail && readHostDetailRef.current) {
+      readHostDetailRef.current = false;
+
+      const {
+        domain: pDomain,
+        hostName: pHostName,
+        organization: pOrganization,
+        prefix: pPrefix,
+        sequence: pSequence,
+      } = hostDetail;
+
+      organizationNameInputRef.current.setValue?.call(null, pOrganization);
+      organizationPrefixInputRef.current.setValue?.call(null, pPrefix);
+      hostNumberInputRef.current.setValue?.call(null, pSequence);
+      domainNameInputRef.current.setValue?.call(null, pDomain);
+      hostNameInputRef.current.setValue?.call(null, pHostName);
+    }
+  }, [expectHostDetail, hostDetail]);
+
   useImperativeHandle(ref, () => ({
     get: () => ({
       adminPassword: adminPasswordInputRef.current.getValue?.call(null),
@@ -829,7 +856,12 @@ const GeneralInitForm = forwardRef<
   );
 });
 
-GeneralInitForm.defaultProps = { toggleSubmitDisabled: undefined };
+GeneralInitForm.defaultProps = {
+  expectHostDetail: false,
+  hostDetail: undefined,
+  toggleSubmitDisabled: undefined,
+};
+
 GeneralInitForm.displayName = 'GeneralInitForm';
 
 export type { GeneralInitFormForwardedRefContent, GeneralInitFormValues };

striker-ui/components/NetworkInitForm.tsx

@@ -621,7 +621,7 @@ const NetworkInitForm = forwardRef<
   const gatewayInputRef = useRef<InputForwardedRefContent<'string'>>({});
   /** Avoid state here to prevent triggering multiple renders when reading
    * host detail. */
-  const isReadHostDetailRef = useRef<boolean>(false);
+  const readHostDetailRef = useRef<boolean>(true);
   const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
 
   const {
@@ -1183,9 +1183,9 @@ const NetworkInitForm = forwardRef<
       Object.keys(networkInterfaceInputMap).length > 0 &&
       expectHostDetail &&
       hostDetail &&
-      !isReadHostDetailRef.current
+      readHostDetailRef.current
     ) {
-      isReadHostDetailRef.current = true;
+      readHostDetailRef.current = false;
 
       const applied: string[] = [];
       const inputs = Object.values(previousNetworks).reduce<NetworkInput[]>(

striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx

@@ -130,7 +130,9 @@ const SimpleOperationsPanel: FC<SimpleOperationsPanelProps> = ({
           </StretchedButton>
         </Grid>
         <Grid item sm={2} xs={1}>
-          <StretchedButton>Reconfigure striker</StretchedButton>
+          <StretchedButton href="/init?re=1">
+            Reconfigure striker
+          </StretchedButton>
         </Grid>
         <Grid item xs={1}>
           <StretchedButton

striker-ui/components/StrikerInitForm.tsx

@@ -1,6 +1,7 @@
 import { Assignment as AssignmentIcon } from '@mui/icons-material';
 import { Grid } from '@mui/material';
-import { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/router';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import API_BASE_URL from '../lib/consts/API_BASE_URL';
 import { BLACK } from '../lib/consts/DEFAULT_THEME';
@@ -28,8 +29,14 @@ import NetworkInitForm, {
 import { Panel, PanelHeader } from './Panels';
 import Spinner from './Spinner';
 import { BodyText, HeaderText, InlineMonoText, MonoText } from './Text';
+import useProtectedState from '../hooks/useProtectedState';
 
 const StrikerInitForm: FC = () => {
+  const {
+    isReady,
+    query: { re },
+  } = useRouter();
+
   const [submitMessage, setSubmitMessage] = useState<Message | undefined>();
   const [requestBody, setRequestBody] = useState<
     (GeneralInitFormValues & NetworkInitFormValues) | undefined
@@ -42,12 +49,20 @@ const StrikerInitForm: FC = () => {
     useState<boolean>(false);
   const [isSubmittingForm, setIsSubmittingForm] = useState<boolean>(false);
 
+  const [hostDetail, setHostDetail] = useProtectedState<
+    APIHostDetail | undefined
+  >(undefined);
+
+  const allowGetHostDetail = useRef<boolean>(true);
+
   const generalInitFormRef = useRef<GeneralInitFormForwardedRefContent>({});
   const networkInitFormRef = useRef<NetworkInitFormForwardedRefContent>({});
 
   const jobIconRef = useRef<IconWithIndicatorForwardedRefContent>({});
   const jobSummaryRef = useRef<JobSummaryForwardedRefContent>({});
 
+  const reconfig = useMemo<boolean>(() => Boolean(re), [re]);
+
   const buildSubmitSection = useMemo(
     () =>
       isSubmittingForm ? (
@@ -74,15 +89,50 @@ const StrikerInitForm: FC = () => {
     [isDisableSubmit, isSubmittingForm],
   );
 
+  const panelTitle = useMemo(() => {
+    let title = 'Loading...';
+
+    if (isReady) {
+      title = reconfig
+        ? `Reconfigure ${hostDetail?.shortHostName ?? 'striker'}`
+        : 'Initialize striker';
+    }
+
+    return title;
+  }, [hostDetail?.shortHostName, isReady, reconfig]);
+
   const toggleSubmitDisabled = useCallback((...testResults: boolean[]) => {
     setIsDisableSubmit(!testResults.every((testResult) => testResult));
   }, []);
 
+  useEffect(() => {
+    if (isReady) {
+      if (reconfig && allowGetHostDetail.current) {
+        allowGetHostDetail.current = false;
+
+        api
+          .get<APIHostDetail>('/host/local')
+          .then(({ data }) => {
+            setHostDetail(data);
+          })
+          .catch((error) => {
+            const emsg = handleAPIError(error);
+
+            emsg.children = (
+              <>Failed to get host detail data. {emsg.children}</>
+            );
+
+            setSubmitMessage(emsg);
+          });
+      }
+    }
+  }, [isReady, reconfig, setHostDetail]);
+
   return (
     <>
       <Panel>
         <PanelHeader>
-          <HeaderText text="Initialize striker" />
+          <HeaderText>{panelTitle}</HeaderText>
           <IconButton
             onClick={({ currentTarget }) => {
               jobSummaryRef.current.setAnchor?.call(null, currentTarget);
@@ -95,6 +145,8 @@ const StrikerInitForm: FC = () => {
         </PanelHeader>
         <FlexBox>
           <GeneralInitForm
+            expectHostDetail={reconfig}
+            hostDetail={hostDetail}
             ref={generalInitFormRef}
             toggleSubmitDisabled={(testResult) => {
               if (testResult !== isGeneralInitFormValid) {
@@ -104,6 +156,8 @@ const StrikerInitForm: FC = () => {
             }}
           />
           <NetworkInitForm
+            expectHostDetail={reconfig}
+            hostDetail={hostDetail}
             ref={networkInitFormRef}
             toggleSubmitDisabled={(testResult) => {
               if (testResult !== isNetworkInitFormValid) {