feat(orchestrator): display a alert dialog when the user fails to abo…

…rt a running workflow (janus-idp#1239) * Display a alert dialog when the user fails to abort a running workflow * Update plugins/orchestrator/src/components/WorkflowInstancePage.tsx Co-authored-by: Jonathan Kilzi <[email protected]> * Remove redundant fragment * Make the message props mandatory --------- Co-authored-by: Jonathan Kilzi <[email protected]>
ciiay · Feb 22, 2024 · 44cb11b · 44cb11b
1 parent af8e072
commit 44cb11b
Showing 1 changed file with 42 additions and 6 deletions.
diff --git a/plugins/orchestrator/src/components/WorkflowInstancePage.tsx b/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
@@ -35,10 +35,24 @@ export type AbortConfirmationDialogActionsProps = {
   handleCancel: () => void;
 };
 
+export type AbortAlertDialogActionsProps = {
+  handleClose: () => void;
+};
+
+export type AbortAlertDialogContentProps = {
+  message: string;
+};
+
 const AbortConfirmationDialogContent = () => (
   <div>Are you sure you want to abort this workflow instance?</div>
 );
 
+const AbortAlertDialogContent = (props: AbortAlertDialogContentProps) => (
+  <div>
+    The abort operation failed with the following error: {props.message}
+  </div>
+);
+
 const AbortConfirmationDialogActions = (
   props: AbortConfirmationDialogActionsProps,
 ) => (
@@ -50,6 +64,12 @@ const AbortConfirmationDialogActions = (
   </>
 );
 
+const AbortAlertDialogActions = (props: AbortAlertDialogActionsProps) => (
+  <Button onClick={props.handleClose} color="primary">
+    OK
+  </Button>
+);
+
 export const WorkflowInstancePage = ({
   instanceId,
 }: {
@@ -63,6 +83,9 @@ export const WorkflowInstancePage = ({
   );
   const [isAbortConfirmationDialogOpen, setIsAbortConfirmationDialogOpen] =
     useState(false);
+  const [isAbortAlertDialogOpen, setIsAbortAlertDialogOpen] = useState(false);
+  const [abortWorkflowInstanceErrorMsg, setAbortWorkflowInstanceErrorMsg] =
+    useState('');
 
   const fetchInstance = React.useCallback(async () => {
     if (!instanceId && !queryInstanceId) {
@@ -100,18 +123,18 @@ export const WorkflowInstancePage = ({
     setIsAbortConfirmationDialogOpen(!isAbortConfirmationDialogOpen);
   };
 
+  const toggleAbortAlertDialog = () => {
+    setIsAbortAlertDialogOpen(!isAbortAlertDialogOpen);
+  };
+
   const handleAbort = React.useCallback(async () => {
     if (value) {
       try {
         await orchestratorApi.abortWorkflow(value.instance.id);
         restart();
       } catch (e) {
-        // eslint-disable-next-line no-alert
-        window.alert(
-          `The abort operation failed with the following error: ${
-            (e as Error).message
-          }`,
-        );
+        setAbortWorkflowInstanceErrorMsg(`${(e as Error).message}`);
+        setIsAbortAlertDialogOpen(true);
       }
       setIsAbortConfirmationDialogOpen(false);
     }
@@ -155,6 +178,19 @@ export const WorkflowInstancePage = ({
               }
               children={<AbortConfirmationDialogContent />}
             />
+            <InfoDialog
+              title="Abort workflow failed"
+              onClose={toggleAbortAlertDialog}
+              open={isAbortAlertDialogOpen}
+              dialogActions={
+                <AbortAlertDialogActions handleClose={toggleAbortAlertDialog} />
+              }
+              children={
+                <AbortAlertDialogContent
+                  message={abortWorkflowInstanceErrorMsg}
+                />
+              }
+            />
             <Grid container item justifyContent="flex-end" spacing={1}>
               {!canRerun && (
                 <Grid item>