fix(striker-ui): allow set host externally in PrepareNetworkForm

striker-ui/components/PrepareNetworkForm.tsx

@@ -1,10 +1,11 @@
-import { withRouter } from 'next/router';
-import { useEffect, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import { FC, useCallback, useEffect, useMemo } from 'react';
 
 import api from '../lib/api';
 import ContainedButton from './ContainedButton';
 import handleAPIError from '../lib/handleAPIError';
 import FlexBox from './FlexBox';
+import getQueryParam from '../lib/getQueryParam';
 import InputWithRef from './InputWithRef';
 import MessageBox, { Message } from './MessageBox';
 import NetworkInitForm from './NetworkInitForm';
@@ -15,113 +16,146 @@ import { HeaderText } from './Text';
 import useProtect from '../hooks/useProtect';
 import useProtectedState from '../hooks/useProtectedState';
 
-const PrepareNetworkForm = withRouter(
-  ({
-    router: {
-      isReady,
-      query: { host_uuid: queryHostUUID },
-    },
-  }) => {
-    const { protect } = useProtect();
+const PrepareNetworkForm: FC<PrepareNetworkFormProps> = ({
+  expectUUID: isExpectExternalHostUUID = false,
+  hostUUID,
+}) => {
+  const { protect } = useProtect();
 
-    const [dataHostDetail, setHostDetail] = useProtectedState<
-      APIHostDetail | undefined
-    >(undefined, protect);
-    const [fatalErrorMessage, setFatalErrorMessage] = useProtectedState<
-      Message | undefined
-    >(undefined, protect);
-    const [isLoading, setIsLoading] = useProtectedState<boolean>(true, protect);
+  const {
+    isReady,
+    query: { host_uuid: queryHostUUID },
+  } = useRouter();
 
-    const panelHeaderElement = useMemo(
-      () => (
-        <PanelHeader>
-          <HeaderText>
-            Prepare network on {dataHostDetail?.shortHostName}
-          </HeaderText>
-        </PanelHeader>
-      ),
-      [dataHostDetail],
-    );
-    const contentElement = useMemo(() => {
-      let result;
+  const [dataHostDetail, setDataHostDetail] = useProtectedState<
+    APIHostDetail | undefined
+  >(undefined, protect);
+  const [fatalErrorMessage, setFatalErrorMessage] = useProtectedState<
+    Message | undefined
+  >(undefined, protect);
+  const [isLoading, setIsLoading] = useProtectedState<boolean>(true, protect);
+  const [previousHostUUID, setPreviousHostUUID] = useProtectedState<
+    PrepareNetworkFormProps['hostUUID']
+  >(undefined, protect);
 
-      if (isLoading) {
-        result = <Spinner mt={0} />;
-      } else if (fatalErrorMessage) {
-        result = <MessageBox {...fatalErrorMessage} />;
-      } else {
-        result = (
-          <>
-            {panelHeaderElement}
-            <FlexBox>
-              <InputWithRef
-                input={
-                  <OutlinedInputWithLabel
-                    formControlProps={{ sx: { maxWidth: '20em' } }}
-                    id="prepare-network-host-name"
-                    label="Host name"
-                    value={dataHostDetail?.hostName}
-                  />
-                }
-                required
-              />
-              <NetworkInitForm hostDetail={dataHostDetail} />
-              <FlexBox row justifyContent="flex-end">
-                <ContainedButton>Prepare network</ContainedButton>
-              </FlexBox>
+  const isDifferentHostUUID = useMemo(
+    () => hostUUID !== previousHostUUID,
+    [hostUUID, previousHostUUID],
+  );
+  const isReloadHostDetail = useMemo(
+    () => Boolean(hostUUID) && isDifferentHostUUID,
+    [hostUUID, isDifferentHostUUID],
+  );
+
+  const panelHeaderElement = useMemo(
+    () => (
+      <PanelHeader>
+        <HeaderText>
+          Prepare network on {dataHostDetail?.shortHostName}
+        </HeaderText>
+      </PanelHeader>
+    ),
+    [dataHostDetail],
+  );
+  const contentElement = useMemo(() => {
+    let result;
+
+    if (isLoading) {
+      result = <Spinner mt={0} />;
+    } else if (fatalErrorMessage) {
+      result = <MessageBox {...fatalErrorMessage} />;
+    } else {
+      result = (
+        <>
+          {panelHeaderElement}
+          <FlexBox>
+            <InputWithRef
+              input={
+                <OutlinedInputWithLabel
+                  formControlProps={{ sx: { maxWidth: '20em' } }}
+                  id="prepare-network-host-name"
+                  label="Host name"
+                  value={dataHostDetail?.hostName}
+                />
+              }
+              required
+            />
+            <NetworkInitForm hostDetail={dataHostDetail} />
+            <FlexBox row justifyContent="flex-end">
+              <ContainedButton>Prepare network</ContainedButton>
             </FlexBox>
-          </>
-        );
-      }
+          </FlexBox>
+        </>
+      );
+    }
+
+    return result;
+  }, [dataHostDetail, fatalErrorMessage, isLoading, panelHeaderElement]);
 
-      return result;
-    }, [dataHostDetail, fatalErrorMessage, isLoading, panelHeaderElement]);
+  const getHostDetail = useCallback(
+    (uuid: string) => {
+      setIsLoading(true);
 
-    useEffect(() => {
-      if (isReady && !fatalErrorMessage) {
-        if (queryHostUUID) {
-          api
-            .get<APIHostDetail>(
-              `/host/${
-                queryHostUUID instanceof Array
-                  ? queryHostUUID[0]
-                  : queryHostUUID
-              }`,
-            )
-            .then(({ data }) => {
-              setHostDetail(data);
-            })
-            .catch((error) => {
-              const { children } = handleAPIError(error);
+      if (isLoading) {
+        api
+          .get<APIHostDetail>(`/host/${uuid}`)
+          .then(({ data }) => {
+            setPreviousHostUUID(data.hostUUID);
+            setDataHostDetail(data);
+          })
+          .catch((error) => {
+            const { children } = handleAPIError(error);
 
-              setFatalErrorMessage({
-                children: `Failed to get target host information; cannot continue. ${children}`,
-                type: 'error',
-              });
-            })
-            .finally(() => {
-              setIsLoading(false);
+            setFatalErrorMessage({
+              children: `Failed to get target host information; cannot continue. ${children}`,
+              type: 'error',
             });
-        } else {
-          setFatalErrorMessage({
-            children: `No host UUID provided; cannot continue.`,
-            type: 'error',
+          })
+          .finally(() => {
+            setIsLoading(false);
           });
-
-          setIsLoading(false);
-        }
       }
-    }, [
-      fatalErrorMessage,
-      isReady,
-      queryHostUUID,
-      setFatalErrorMessage,
-      setHostDetail,
+    },
+    [
       setIsLoading,
-    ]);
+      isLoading,
+      setPreviousHostUUID,
+      setDataHostDetail,
+      setFatalErrorMessage,
+    ],
+  );
+
+  useEffect(() => {
+    if (isExpectExternalHostUUID) {
+      if (isReloadHostDetail) {
+        getHostDetail(hostUUID as string);
+      }
+    } else if (isReady && !fatalErrorMessage) {
+      if (queryHostUUID) {
+        getHostDetail(getQueryParam(queryHostUUID));
+      } else {
+        setFatalErrorMessage({
+          children: `No host UUID provided; cannot continue.`,
+          type: 'error',
+        });
+
+        setIsLoading(false);
+      }
+    }
+  }, [
+    fatalErrorMessage,
+    getHostDetail,
+    hostUUID,
+    isExpectExternalHostUUID,
+    isReady,
+    queryHostUUID,
+    setFatalErrorMessage,
+    setDataHostDetail,
+    setIsLoading,
+    isReloadHostDetail,
+  ]);
 
-    return <Panel>{contentElement}</Panel>;
-  },
-);
+  return <Panel>{contentElement}</Panel>;
+};
 
 export default PrepareNetworkForm;

striker-ui/types/PrepareNetworkForm.d.ts

@@ -0,0 +1,6 @@
+type PrepareNetworkFormOptionalProps = {
+  expectUUID?: boolean;
+  hostUUID?: string;
+};
+
+type PrepareNetworkFormProps = PrepareNetworkFormOptionalProps;