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,22 +16,36 @@ import { HeaderText } from './Text';
 import useProtect from '../hooks/useProtect';
 import useProtectedState from '../hooks/useProtectedState';
 
-const PrepareNetworkForm = withRouter(
-  ({
-    router: {
-      isReady,
-      query: { host_uuid: queryHostUUID },
-    },
-  }) => {
+const PrepareNetworkForm: FC<PrepareNetworkFormProps> = ({
+  expectUUID: isExpectExternalHostUUID = false,
+  hostUUID,
+}) => {
   const { protect } = useProtect();
 
-    const [dataHostDetail, setHostDetail] = useProtectedState<
+  const {
+    isReady,
+    query: { host_uuid: queryHostUUID },
+  } = useRouter();
+
+  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);
+
+  const isDifferentHostUUID = useMemo(
+    () => hostUUID !== previousHostUUID,
+    [hostUUID, previousHostUUID],
+  );
+  const isReloadHostDetail = useMemo(
+    () => Boolean(hostUUID) && isDifferentHostUUID,
+    [hostUUID, isDifferentHostUUID],
+  );
 
   const panelHeaderElement = useMemo(
     () => (
@@ -77,19 +92,16 @@ const PrepareNetworkForm = withRouter(
     return result;
   }, [dataHostDetail, fatalErrorMessage, isLoading, panelHeaderElement]);
 
-    useEffect(() => {
-      if (isReady && !fatalErrorMessage) {
-        if (queryHostUUID) {
+  const getHostDetail = useCallback(
+    (uuid: string) => {
+      setIsLoading(true);
+
+      if (isLoading) {
         api
-            .get<APIHostDetail>(
-              `/host/${
-                queryHostUUID instanceof Array
-                  ? queryHostUUID[0]
-                  : queryHostUUID
-              }`,
-            )
+          .get<APIHostDetail>(`/host/${uuid}`)
           .then(({ data }) => {
-              setHostDetail(data);
+            setPreviousHostUUID(data.hostUUID);
+            setDataHostDetail(data);
           })
           .catch((error) => {
             const { children } = handleAPIError(error);
@@ -102,6 +114,25 @@ const PrepareNetworkForm = withRouter(
           .finally(() => {
             setIsLoading(false);
           });
+      }
+    },
+    [
+      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.`,
@@ -113,15 +144,18 @@ const PrepareNetworkForm = withRouter(
     }
   }, [
     fatalErrorMessage,
+    getHostDetail,
+    hostUUID,
+    isExpectExternalHostUUID,
     isReady,
     queryHostUUID,
     setFatalErrorMessage,
-      setHostDetail,
+    setDataHostDetail,
     setIsLoading,
+    isReloadHostDetail,
   ]);
 
   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;