fix: implement stopping workflows before deletion

Author: OliverDudgeon

src/components/TerminateWorkflowButton.tsx renamed to src/components/DeleteWorkflowButton.tsx

@@ -3,6 +3,7 @@ import {
   getGetRunningWorkflowQueryKey,
   getGetRunningWorkflowsQueryKey,
   useDeleteRunningWorkflow,
+  useStopRunningWorkflow,
 } from "@squonk/data-manager-client/workflow";
 
 import { Button } from "@mui/material";
@@ -12,47 +13,47 @@ import { WORKFLOW_DONE_PHASES } from "../constants/results";
 import { useEnqueueError } from "../hooks/useEnqueueStackError";
 import { WarningDeleteButton } from "./WarningDeleteButton";
 
-interface TerminateWorkflowButtonProps {
+interface DeleteWorkflowButtonProps {
   runningWorkflowId: string;
   status?: RunningWorkflowGetResponseStatus;
   disabled?: boolean;
 }
 
-export const TerminateWorkflowButton = ({
+export const DeleteWorkflowButton = ({
   runningWorkflowId,
   status,
   disabled = false,
-}: TerminateWorkflowButtonProps) => {
+}: DeleteWorkflowButtonProps) => {
   const queryClient = useQueryClient();
   const { mutateAsync: deleteWorkflow } = useDeleteRunningWorkflow();
+  const { mutateAsync: stopWorkflow } = useStopRunningWorkflow();
   const { enqueueError, enqueueSnackbar } = useEnqueueError();
 
   const done = WORKFLOW_DONE_PHASES.includes(status ?? RunningWorkflowGetResponseStatus.RUNNING);
 
-  const verb = done ? "Delete" : "Terminate";
+  const verb = done ? "Delete" : "Stop";
 
-  const handleTerminate = async () => {
+  const handleClick = async () => {
     try {
-      await deleteWorkflow({ runningWorkflowId });
+      await (done ? deleteWorkflow({ runningWorkflowId }) : stopWorkflow({ runningWorkflowId }));
+      enqueueSnackbar(`Workflow has been ${done ? "deleted" : "stopped"}`, { variant: "success" });
+    } catch (error) {
+      enqueueError(error);
+    } finally {
       void queryClient.invalidateQueries({
         queryKey: getGetRunningWorkflowQueryKey(runningWorkflowId),
       });
       void queryClient.invalidateQueries({ queryKey: getGetRunningWorkflowsQueryKey() });
-      enqueueSnackbar(`Workflow has been ${done ? "deleted" : "terminated"}`, {
-        variant: "success",
-      });
-    } catch (error) {
-      enqueueError(error);
     }
   };
 
   return (
     <WarningDeleteButton
-      modalId={`terminate-workflow-${runningWorkflowId}`}
+      modalId={`stop-workflow-${runningWorkflowId}`}
       submitText={verb}
       title={`${verb} Workflow`}
       tooltipText={`${verb} this workflow`}
-      onDelete={handleTerminate}
+      onDelete={handleClick}
     >
       {({ openModal }) => (
         <Button disabled={disabled} onClick={openModal}>

src/components/RunningWorkflowCard/RunningWorkflowCard.tsx

@@ -5,8 +5,8 @@ import { Alert } from "@mui/material";
 
 import { useIsUserAdminOrEditorOfCurrentProject } from "../../hooks/projectHooks";
 import { CenterLoader } from "../CenterLoader";
+import { DeleteWorkflowButton } from "../DeleteWorkflowButton";
 import { ResultCard } from "../results/ResultCard";
-import { TerminateWorkflowButton } from "../TerminateWorkflowButton";
 import { RunningWorkflowCollapsed } from "./RunningWorkflowCollapsed";
 
 export interface RunningWorkflowCardProps {
@@ -49,7 +49,7 @@ export const RunningWorkflowCard = ({
     <ResultCard
       accentColor="#f1c40f"
       actions={() => (
-        <TerminateWorkflowButton
+        <DeleteWorkflowButton
           disabled={!hasPermission}
           runningWorkflowId={runningWorkflowId}
           status={workflow?.status ?? workflowSummary?.status}