CE-3438: Add error and loading states IOCDelete

Had to update common component

src/components/IOC/IOCDelete/IOCDelete.jsx

-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Button, Grid, Tooltip, Typography } from "@mui/material";
 import { ConfirmDangerActionDialog } from "@ess-ics/ce-ui-common";
 import { useCustomSnackbar } from "../../common/snackbar";
 import { AccessControl } from "../../auth/AccessControl";
 import { useDeleteIocMutation } from "../../../store/enhancedApi";
-import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
+import { getErrorMessage } from "../../common/Alerts/AlertsData";
 
 export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const navigate = useNavigate();
   const showSnackBar = useCustomSnackbar();
-  const [error, setError] = useState();
   const [open, setOpen] = useState(false);
-  const [deleteIOC] = useDeleteIocMutation();
+  const [deleteIOC, { isLoading, error, reset }] = useDeleteIocMutation();
 
   let disabledButtonTitle = "";
 
@@ -22,10 +21,18 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   }
 
   const onClose = useCallback(() => {
+    reset();
     setOpen(false);
-  }, [setOpen]);
+  }, [setOpen, reset]);
 
-  const onConfirm = useCallback(async () => {
+  useEffect(() => {
+    if (error) {
+      setButtonDisabled(false);
+    }
+  }, [error, setButtonDisabled]);
+
+  const onConfirm = useCallback(() => {
+    reset();
     setButtonDisabled(true);
     deleteIOC({ iocId: ioc.id })
       .unwrap()
@@ -33,11 +40,16 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
         showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
         navigate("/iocs", { replace: true });
       })
-      .catch((error) => {
-        setError(error);
-        setButtonDisabled(false);
-      });
-  }, [ioc, deleteIOC, setButtonDisabled, navigate, showSnackBar]);
+      .catch(() => setButtonDisabled(false));
+  }, [
+    reset,
+    setButtonDisabled,
+    deleteIOC,
+    ioc.id,
+    ioc.namingName,
+    showSnackBar,
+    navigate
+  ]);
 
   return (
     <>
@@ -49,6 +61,8 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
         valueToCheck={ioc.namingName}
         onClose={onClose}
         onConfirm={onConfirm}
+        isLoading={isLoading}
+        error={error && getErrorMessage(error)}
       />
 
       <Box sx={{ pt: 2 }}>
@@ -63,16 +77,6 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
           container
           spacing={1}
         >
-          {error ? (
-            <Grid
-              item
-              xs={12}
-            >
-              <ApiAlertError error={error} />
-            </Grid>
-          ) : (
-            <></>
-          )}
           <Grid
             item
             xs={12}
@@ -100,7 +104,8 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
                     disabled={
                       buttonDisabled ||
                       ioc.operationInProgress ||
-                      Boolean(ioc.activeDeployment)
+                      Boolean(ioc.activeDeployment) ||
+                      isLoading
                     }
                     color="error"
                     variant="contained"

[Johanna Szepanski]

Error is not resetting when closing Dialog, still there on reopen

[Max Frederiksen]

fixed