From 16266f3e8ec764be3aeef46243ede4e921b515f3 Mon Sep 17 00:00:00 2001
From: Imre Toth <imre.toth@ess.eu>
Date: Thu, 2 Nov 2023 08:23:03 +0000
Subject: [PATCH] Resolve CE-2153 "Disabling controll buttons"
---
.../IOC/ChangeHostAdmin/ChangeHostAdmin.js | 12 ++++++++----
src/components/IOC/DeployIOC/DeployIOC.js | 9 +++++++--
src/components/IOC/IOCAdmin/IOCAdmin.js | 11 ++++++++++-
src/components/IOC/IOCDelete/IOCDelete.js | 11 +++++++----
.../IOC/IOCDeployDialog/IOCDeployDialog.js | 7 +++++--
.../IOC/IOCDetailAdmin/IOCDetailAdmin.js | 12 ++++++++----
src/components/IOC/IOCManage/IOCManage.js | 4 ++++
.../IOC/IOCUndeployDialog/IOCUndeployDialog.js | 6 +++++-
src/components/IOC/UndeployIOC/UndeployIOC.js | 14 ++++++++++++--
src/views/IOC/IOCDetailsView.js | 1 +
10 files changed, 67 insertions(+), 20 deletions(-)
diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
index 6b442ab3..dfa908f5 100644
--- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
+++ b/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) {
diff --git a/src/components/IOC/DeployIOC/DeployIOC.js b/src/components/IOC/DeployIOC/DeployIOC.js
index 83c29376..269d0ad7 100644
--- a/src/components/IOC/DeployIOC/DeployIOC.js
+++ b/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 {
diff --git a/src/components/IOC/IOCAdmin/IOCAdmin.js b/src/components/IOC/IOCAdmin/IOCAdmin.js
index 3d3a967e..64ac9a54 100644
--- a/src/components/IOC/IOCAdmin/IOCAdmin.js
+++ b/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}
/>
</>
);
diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js
index f505f0f4..4b2a037c 100644
--- a/src/components/IOC/IOCDelete/IOCDelete.js
+++ b/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 (
<>
diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
index 681f0e16..0287d837 100644
--- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
+++ b/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>
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index b2f37986..10381612 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/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);
diff --git a/src/components/IOC/IOCManage/IOCManage.js b/src/components/IOC/IOCManage/IOCManage.js
index 0c02f871..8ee610da 100644
--- a/src/components/IOC/IOCManage/IOCManage.js
+++ b/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>
diff --git a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
index ddacda21..34c31e65 100644
--- a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
+++ b/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>
diff --git a/src/components/IOC/UndeployIOC/UndeployIOC.js b/src/components/IOC/UndeployIOC/UndeployIOC.js
index a098bc57..26c9920c 100644
--- a/src/components/IOC/UndeployIOC/UndeployIOC.js
+++ b/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 {
diff --git a/src/views/IOC/IOCDetailsView.js b/src/views/IOC/IOCDetailsView.js
index 32839522..d7b396ea 100644
--- a/src/views/IOC/IOCDetailsView.js
+++ b/src/views/IOC/IOCDetailsView.js
@@ -230,6 +230,7 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
getIOC={getIOC}
resetTab={resetTab}
buttonDisabled={buttonDisabled}
+ setButtonDisabled={setButtonDisabled}
/>
)
});
--
GitLab