fix(striker-ui): disable network mapping on successful submission

striker-ui/components/NetworkInitForm.tsx

@@ -37,12 +37,10 @@ import { BLUE, GREY } from '../lib/consts/DEFAULT_THEME';
 import NETWORK_TYPES from '../lib/consts/NETWORK_TYPES';
 import { REP_IPV4, REP_IPV4_CSV } from '../lib/consts/REG_EXP_PATTERNS';
 
-import api from '../lib/api';
 import BriefNetworkInterface from './BriefNetworkInterface';
 import Decorator from './Decorator';
 import DropArea from './DropArea';
 import FlexBox from './FlexBox';
-import handleAPIError from '../lib/handleAPIError';
 import IconButton from './IconButton';
 import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
 import { Message } from './MessageBox';
@@ -51,6 +49,7 @@ import OutlinedInputWithLabel from './OutlinedInputWithLabel';
 import { InnerPanel, InnerPanelHeader } from './Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
 import SelectWithLabel from './SelectWithLabel';
+import setMapNetwork from '../lib/setMapNetwork';
 import Spinner from './Spinner';
 import { createTestInputFunction, testNotBlank } from '../lib/test_input';
 import { BodyText, MonoText, SmallText } from './Text';
@@ -873,20 +872,9 @@ const NetworkInitForm = forwardRef<
       [networkInputs],
     );
 
-    const setMapNetwork = useCallback(
+    const handleSetMapNetworkError = useCallback(
-      (value: 0 | 1) => {
+      (msg: Message): void => {
-        api.put('/init/set-map-network', { value }).catch((error) => {
+        setMessage(MSG_ID_API, msg);
-          const emsg = handleAPIError(error);
-
-          emsg.children = (
-            <>
-              Failed to {value ? 'enable' : 'disable'} network mapping.{' '}
-              {emsg.children}
-            </>
-          );
-
-          setMessage(MSG_ID_API, emsg);
-        });
       },
       [setMessage],
     );
@@ -1383,7 +1371,7 @@ const NetworkInitForm = forwardRef<
 
     useEffect(() => {
       // Enable network mapping on component mount.
-      setMapNetwork(1);
+      setMapNetwork(1, handleSetMapNetworkError);
 
       if (window) {
         window.addEventListener(
@@ -1401,9 +1389,9 @@ const NetworkInitForm = forwardRef<
 
       return () => {
         // Disable network mapping on component unmount.
-        setMapNetwork(0);
+        setMapNetwork(0, handleSetMapNetworkError);
       };
-    }, [setMapNetwork]);
+    }, [handleSetMapNetworkError]);
 
     useImperativeHandle(
       ref,

striker-ui/components/PrepareNetworkForm.tsx

@@ -16,6 +16,7 @@ import NetworkInitForm, {
 } from './NetworkInitForm';
 import OutlinedInputWithLabel from './OutlinedInputWithLabel';
 import { Panel, PanelHeader } from './Panels';
+import setMapNetwork from '../lib/setMapNetwork';
 import Spinner from './Spinner';
 import { buildPeacefulStringTestBatch } from '../lib/test_input';
 import { HeaderText } from './Text';
@@ -212,6 +213,9 @@ const PrepareNetworkForm: FC<PrepareNetworkFormProps> = ({
                       <>Failed to prepare network. {parentMsg}</>
                     ),
                     method: 'put',
+                    onSuccess: () => {
+                      setMapNetwork(0);
+                    },
                     setMsg: netconfFormRef?.current?.setMessage,
                     successMsg: `Initiated prepare network on ${hostDetail?.shortHostName}`,
                     url: `/host/${hostUUID}?handler=subnode-network`,

striker-ui/components/StrikerInitForm.tsx

@@ -27,6 +27,7 @@ import NetworkInitForm, {
   NetworkInitFormValues,
 } from './NetworkInitForm';
 import { Panel, PanelHeader } from './Panels';
+import setMapNetwork from '../lib/setMapNetwork';
 import Spinner from './Spinner';
 import { BodyText, HeaderText, InlineMonoText, MonoText } from './Text';
 import useProtectedState from '../hooks/useProtectedState';
@@ -303,6 +304,9 @@ const StrikerInitForm: FC = () => {
           api
             .put('/init', requestBody)
             .then(() => {
+              // Stop network mapping only on successful form submission.
+              setMapNetwork(0);
+
               setIsSubmittingForm(false);
               setSubmitMessage({
                 children: (

striker-ui/lib/setMapNetwork.tsx

@@ -0,0 +1,22 @@
+import api from './api';
+import handleAPIError from './handleAPIError';
+
+const setMapNetwork = (
+  value: 0 | 1,
+  handleError?: (msg: Message) => void,
+): void => {
+  api.put('/init/set-map-network', { value }).catch((error) => {
+    const emsg = handleAPIError(error);
+
+    emsg.children = (
+      <>
+        Failed to {value ? 'enable' : 'disable'} network mapping.{' '}
+        {emsg.children}
+      </>
+    );
+
+    handleError?.call(null, emsg);
+  });
+};
+
+export default setMapNetwork;