CE-3440: Change host section

src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.tsx

@@ -25,7 +25,8 @@ import {
   useLazyListHostsQuery
 } from "../../../store/deployApi";
 import { useUpdateActiveDeploymentHostMutation } from "../../../store/enhancedApi";
-import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
+import { useCustomSnackbar } from "../../common/snackbar";
+import { getErrorState } from "../../common/Alerts/AlertsData";
 
 interface ChangeHostAdminProps {
   ioc: IocDetails;
@@ -50,11 +51,12 @@ export const ChangeHostAdmin = ({
   const { value: query, onKeyUp: onHostKeyUp } = useTypingTimer({
     interval: 500
   });
+  const { showSuccess } = useCustomSnackbar();
 
   const [getHosts, { data: hosts, isLoading: loadingHosts }] =
     useLazyListHostsQuery();
 
-  const [updateHost, { data: updatedIoc, error: updateHostError }] =
+  const [updateHost, { isLoading, data: updatedIoc, error: updateHostError }] =
     useUpdateActiveDeploymentHostMutation();
 
   const noModification = useCallback(
@@ -75,15 +77,17 @@ export const ChangeHostAdmin = ({
         updateHostRequest: {
           hostId: host?.hostId
         }
-      });
-    }
-  }, [updateHost, ioc, host?.hostId, setButtonDisabled]);
-
-  useEffect(() => {
-    if (updateHostError) {
-      setButtonDisabled(false);
+      })
+        .unwrap()
+        .then(() => {
+          showSuccess("IOC host changed successfully");
+          setButtonDisabled(false);
+        })
+        .catch(() => {
+          setButtonDisabled(false);
+        });
     }
-  }, [updateHostError, setButtonDisabled]);
+  }, [updateHost, ioc, host?.hostId, setButtonDisabled, showSuccess]);
 
   useEffect(() => {
     if (updatedIoc) {
@@ -122,19 +126,20 @@ export const ChangeHostAdmin = ({
               variant="h2"
               marginY={1}
             >
-              Modifying deployment host
+              Administratively change host
             </Typography>
           }
           content={
             <>
               <Typography component="span">
-                Are you sure want to modify deployment host of
+                Are you sure you want to update the IOC to be specified as
+                deployed on
                 <Typography
                   component="span"
                   fontFamily="monospace"
                 >
                   {" "}
-                  {ioc.namingName}
+                  {host?.fqdn}
                 </Typography>{" "}
                 ?
               </Typography>
@@ -143,8 +148,11 @@ export const ChangeHostAdmin = ({
           confirmText="Modify Host"
           cancelText="Cancel"
           open={open}
+          onCancel={onClose}
           onClose={onClose}
           onConfirm={onConfirm}
+          isLoading={isLoading}
+          error={updateHostError && getErrorState(updateHostError).message}
         />
         <Box sx={{ pt: 2 }}>
           <Typography
@@ -152,7 +160,7 @@ export const ChangeHostAdmin = ({
             component="h2"
             variant="h3"
           >
-            Change deployment host
+            Change deployment host (e.g. if host has been replaced in NetBox)
           </Typography>
           <Grid
             container
@@ -210,11 +218,6 @@ export const ChangeHostAdmin = ({
               item
               xs={12}
             >
-              {updateHostError && (
-                <Box sx={{ marginBottom: 1 }}>
-                  <ApiAlertError error={updateHostError} />
-                </Box>
-              )}
               <Tooltip title={disabledButtonTitle}>
                 <span>
                   <Button
@@ -225,10 +228,11 @@ export const ChangeHostAdmin = ({
                       buttonDisabled ||
                       ioc.operationInProgress ||
                       !ioc.activeDeployment ||
+                      isLoading ||
                       noModification()
                     }
                   >
-                    CHANGE HOST
+                    Change host
                   </Button>
                 </span>
               </Tooltip>