Resolve CE-2153 "Disabling controll buttons"

src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js

@@ -26,7 +26,8 @@ export default function ChangeHostAdmin({
   ioc,
   getIOC,
   resetTab,
-  buttonDisabled
+  buttonDisabled,
+  setButtonDisabled
 }) {
   const initHost = useMemo(
     () => ({
@@ -72,16 +73,18 @@ export default function ChangeHostAdmin({
 
   useEffect(() => {
     if (updateHostError) {
+      setButtonDisabled(false);
       setError(updateHostError?.message);
     }
-  }, [updateHostError, setError]);
+  }, [updateHostError, setError, setButtonDisabled]);
 
   useEffect(() => {
     if (updatedIoc) {
       getIOC();
       resetTab();
+      setButtonDisabled(false);
     }
-  }, [updatedIoc, getIOC, resetTab]);
+  }, [updatedIoc, getIOC, resetTab, setButtonDisabled]);
 
   useEffect(() => {
     getHosts({ query: transformHostQuery(`${query}`) });
@@ -93,6 +96,7 @@ export default function ChangeHostAdmin({
   }, [setOpen, initHost]);
 
   const onConfirm = useCallback(() => {
+    setButtonDisabled(true);
     updateHost(
       {
         ioc_id: ioc.id
@@ -103,7 +107,7 @@ export default function ChangeHostAdmin({
         }
       }
     );
-  }, [updateHost, ioc, host?.csEntryHost?.id]);
+  }, [updateHost, ioc, host?.csEntryHost?.id, setButtonDisabled]);
 
   let disabledButtonTitle = "";
   if (buttonDisabled || ioc.operationInProgress) {

src/components/IOC/DeployIOC/DeployIOC.js

@@ -12,7 +12,9 @@ export function DeployIOC({
   submitCallback,
   iocId,
   hasActiveDeployment,
-  init = {}
+  init = {},
+  buttonDisabled,
+  setButtonDisabled
 }) {
   const [error, setError] = useState();
   const client = useContext(apiContext);
@@ -27,9 +29,10 @@ export function DeployIOC({
 
   useEffect(() => {
     if (deployError) {
+      setButtonDisabled(false);
       setError(deployError?.message);
     }
-  }, [deployError]);
+  }, [deployError, setButtonDisabled]);
 
   const { watchDeployment } = useContext(notificationContext);
 
@@ -44,6 +47,8 @@ export function DeployIOC({
         hasActiveDeployment={hasActiveDeployment}
         error={error}
         resetError={() => setError(null)}
+        buttonDisabled={buttonDisabled}
+        setButtonDisabled={setButtonDisabled}
       />
     );
   } else {

src/components/IOC/IOCAdmin/IOCAdmin.js

@@ -4,7 +4,13 @@ import IOCDelete from "../IOCDelete";
 import IOCDetailAdmin from "../IOCDetailAdmin";
 import ChangeHostAdmin from "../ChangeHostAdmin";
 
-export default function IOCAdmin({ ioc, getIOC, resetTab, buttonDisabled }) {
+export default function IOCAdmin({
+  ioc,
+  getIOC,
+  resetTab,
+  buttonDisabled,
+  setButtonDisabled
+}) {
   return (
     <>
       <IOCDetailAdmin
@@ -12,6 +18,7 @@ export default function IOCAdmin({ ioc, getIOC, resetTab, buttonDisabled }) {
         getIOC={getIOC}
         resetTab={resetTab}
         buttonDisabled={buttonDisabled}
+        setButtonDisabled={setButtonDisabled}
       />
       {ioc.activeDeployment && (
         <ChangeHostAdmin
@@ -19,6 +26,7 @@ export default function IOCAdmin({ ioc, getIOC, resetTab, buttonDisabled }) {
           getIOC={getIOC}
           resetTab={resetTab}
           buttonDisabled={buttonDisabled}
+          setButtonDisabled={setButtonDisabled}
         />
       )}
       <AdministerUndeployment
@@ -28,6 +36,7 @@ export default function IOCAdmin({ ioc, getIOC, resetTab, buttonDisabled }) {
       <IOCDelete
         ioc={ioc}
         buttonDisabled={buttonDisabled}
+        setButtonDisabled={setButtonDisabled}
       />
     </>
   );

src/components/IOC/IOCDelete/IOCDelete.js

@@ -13,7 +13,7 @@ import AccessControl from "../../auth/AccessControl";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
-export default function IOCDelete({ ioc, buttonDisabled }) {
+export default function IOCDelete({ ioc, buttonDisabled, setButtonDisabled }) {
   const navigate = useNavigate();
 
   // for the dialog
@@ -41,15 +41,17 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
 
   useEffect(() => {
     if (errorResponse) {
+      setButtonDisabled(false);
       setError(errorResponse?.message);
     }
-  }, [errorResponse, setError]);
+  }, [errorResponse, setError, setButtonDisabled]);
 
   useEffect(() => {
     if (dataready && !error) {
+      setButtonDisabled(false);
       navigate(-1);
     }
-  }, [dataready, navigate, error]);
+  }, [dataready, navigate, error, setButtonDisabled]);
 
   let disabledButtonTitle = "";
 
@@ -63,8 +65,9 @@ export default function IOCDelete({ ioc, buttonDisabled }) {
   }, [setOpen]);
 
   const onConfirm = useCallback(() => {
+    setButtonDisabled(true);
     deleteIOC();
-  }, [deleteIOC]);
+  }, [deleteIOC, setButtonDisabled]);
 
   return (
     <>

src/components/IOC/IOCDeployDialog/IOCDeployDialog.js

@@ -25,7 +25,9 @@ export function IOCDeployDialog({
   hasActiveDeployment,
   init = {},
   error,
-  resetError
+  resetError,
+  buttonDisabled,
+  setButtonDisabled
 }) {
   const client = useContext(apiContext);
   const {
@@ -82,6 +84,7 @@ export function IOCDeployDialog({
 
   const onSubmit = (event) => {
     event.preventDefault();
+    setButtonDisabled(true);
     const { git: gitText } = event.currentTarget.elements;
     const git = gitText.value;
 
@@ -304,7 +307,7 @@ export function IOCDeployDialog({
             color="primary"
             variant="contained"
             type="submit"
-            disabled={!host || !gitVersion}
+            disabled={!host || !gitVersion || buttonDisabled}
           >
             Deploy
           </Button>

src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js

@@ -18,7 +18,8 @@ export default function IOCDetailAdmin({
   ioc,
   getIOC,
   resetTab,
-  buttonDisabled
+  buttonDisabled,
+  setButtonDisabled
 }) {
   const [gitId, setGitId] = useState(ioc.gitProjectId);
 
@@ -65,9 +66,10 @@ export default function IOCDetailAdmin({
 
   useEffect(() => {
     if (updateError) {
+      setButtonDisabled(false);
       setError(updateError?.message);
     }
-  }, [updateError, setError]);
+  }, [updateError, setError, setButtonDisabled]);
 
   const requiredDataMissing = useCallback(() => !gitId || !name, [gitId, name]);
 
@@ -104,6 +106,7 @@ export default function IOCDetailAdmin({
   }, [setOpen]);
 
   const onConfirm = useCallback(() => {
+    setButtonDisabled(true);
     actionUpdateIoc(
       { ioc_id: ioc?.id },
       {
@@ -113,14 +116,15 @@ export default function IOCDetailAdmin({
         }
       }
     );
-  }, [actionUpdateIoc, ioc, name, gitId]);
+  }, [actionUpdateIoc, ioc, name, gitId, setButtonDisabled]);
 
   useEffect(() => {
     if (uioc) {
       getIOC();
       resetTab();
+      setButtonDisabled(false);
     }
-  }, [uioc, getIOC, resetTab]);
+  }, [uioc, getIOC, resetTab, setButtonDisabled]);
 
   const iocIsDeployed = Boolean(ioc.activeDeployment);
 

src/components/IOC/IOCManage/IOCManage.js

@@ -227,11 +227,15 @@ export function IOCManage({
             init={formInit}
             iocId={ioc.id}
             hasActiveDeployment={Boolean(ioc.activeDeployment)}
+            buttonDisabled={buttonDisabled}
+            setButtonDisabled={setButtonDisabled}
           />
           <UndeployIOC
             open={undeployDialogOpen}
             setOpen={setUndeployDialogOpen}
             submitCallback={closeUndeployModal}
+            buttonDisabled={buttonDisabled}
+            setButtonDisabled={setButtonDisabled}
             ioc={ioc}
           />
         </AccessControl>

src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js

@@ -14,7 +14,9 @@ export function IOCUndeployDialog({
   setOpen,
   submitCallback,
   ioc,
-  error
+  error,
+  buttonDisabled,
+  setButtonDisabled
 }) {
   const handleClose = () => {
     setOpen(false);
@@ -22,6 +24,7 @@ export function IOCUndeployDialog({
 
   const onSubmit = (event) => {
     event.preventDefault();
+    setButtonDisabled(true);
 
     submitCallback({
       ioc_id: ioc.id
@@ -60,6 +63,7 @@ export function IOCUndeployDialog({
             color="primary"
             variant="contained"
             type="submit"
+            disabled={buttonDisabled}
           >
             Undeploy
           </Button>

src/components/IOC/UndeployIOC/UndeployIOC.js

@@ -6,7 +6,14 @@ import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
 // Process component
-export function UndeployIOC({ open, setOpen, submitCallback, ioc }) {
+export function UndeployIOC({
+  open,
+  setOpen,
+  submitCallback,
+  ioc,
+  buttonDisabled,
+  setButtonDisabled
+}) {
   const [error, setError] = useState();
   const client = useContext(apiContext);
   const {
@@ -20,9 +27,10 @@ export function UndeployIOC({ open, setOpen, submitCallback, ioc }) {
 
   useEffect(() => {
     if (deploymentError) {
+      setButtonDisabled(false);
       setError(deploymentError?.message);
     }
-  }, [deploymentError]);
+  }, [deploymentError, setButtonDisabled]);
 
   const { watchDeployment } = useContext(notificationContext);
 
@@ -34,6 +42,8 @@ export function UndeployIOC({ open, setOpen, submitCallback, ioc }) {
         submitCallback={action}
         ioc={ioc}
         error={error}
+        buttonDisabled={buttonDisabled}
+        setButtonDisabled={setButtonDisabled}
       />
     );
   } else {

src/views/IOC/IOCDetailsView.js

@@ -230,6 +230,7 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
           getIOC={getIOC}
           resetTab={resetTab}
           buttonDisabled={buttonDisabled}
+          setButtonDisabled={setButtonDisabled}
         />
       )
     });