ui: add option to delete all workflow runs

CHANGES.rst

@@ -4,6 +4,7 @@ Changes
 Version 0.9.2 (UNRELEASED)
 --------------------------
 
+- Adds option to delete all the runs of a workflow.
 - Changes Docker image Node version from 16 to 18.
 
 Version 0.9.1 (2023-09-27)

reana-ui/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "axios": "^1.5.1",
     "dompurify": "^3.0.6",
-    "jsroot": "^7.3.1",
+    "jsroot": "^7.5.0",
     "lodash": "^4.17.15",
     "mime": "^3.0.0",
     "moment": "^2.24.0",

reana-ui/src/actions.js

@@ -261,14 +261,20 @@ export function fetchWorkflows({
   status,
   sort,
   showLoader = true,
-  workflowId,
+  workflowIdOrName,
 }) {
   return async (dispatch) => {
     if (showLoader) {
       dispatch({ type: WORKFLOWS_FETCH });
     }
     return await client
-      .getWorkflows(pagination, formatSearch(search), status, sort, workflowId)
+      .getWorkflows({
+        pagination,
+        search: formatSearch(search),
+        status,
+        sort,
+        workflowIdOrName,
+      })
       .then((resp) =>
         dispatch({
           type: WORKFLOWS_RECEIVED,
@@ -294,9 +300,7 @@ export function fetchWorkflow(id, { refetch = false, showLoader = true } = {}) {
     } else {
       dispatch(
         fetchWorkflows({
-          workflowId: {
-            workflow_id_or_name: id,
-          },
+          workflowIdOrName: id,
           showLoader,
         }),
       );
@@ -407,11 +411,11 @@ export function fetchWorkflowRetentionRules(id) {
   };
 }
 
-export function deleteWorkflow(id, workspace = true) {
+export function deleteWorkflow(id, { workspace = true, allRuns = false } = {}) {
   return async (dispatch) => {
     dispatch({ type: WORKFLOW_DELETE_INIT });
     return await client
-      .deleteWorkflow(id, { workspace })
+      .deleteWorkflow(id, { workspace, allRuns })
       .then((resp) => {
         dispatch({ type: WORKFLOW_DELETED, ...resp.data });
         dispatch({ type: WORKFLOW_LIST_REFRESH });

reana-ui/src/client.js

@@ -115,11 +115,11 @@
     });
   }
 
-  getWorkflows(pagination, search, status, sort, workflowId) {
+  getWorkflows({ pagination, search, status, sort, workflowIdOrName } = {}) {
     return this._request(
       WORKFLOWS_URL({
-        ...pagination,
-        ...workflowId,
+        ...(pagination ?? {}),
+        workflow_id_or_name: workflowIdOrName,
         search,
         status,
         sort,
@@ -151,9 +151,9 @@
     return this._request(WORKFLOW_RETENTION_RULES_URL(id));
   }
 
-  deleteWorkflow(id, data) {
+  deleteWorkflow(id, { workspace, allRuns }) {
     return this._request(WORKFLOW_SET_STATUS_URL(id, { status: "deleted" }), {
-      data,
+      data: { workspace, all_runs: allRuns },
       method: "put",
     });
   }
@@ -194,4 +194,4 @@
   }
 }
 
 export default new Client();

reana-ui/src/components/WorkflowDeleteModal.js

@@ -8,27 +8,64 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Modal, Message, Icon } from "semantic-ui-react";
+import { Button, Checkbox, Icon, Message, Modal } from "semantic-ui-react";
 
-import { deleteWorkflow, closeDeleteWorkflowModal } from "~/actions";
+import { closeDeleteWorkflowModal, deleteWorkflow } from "~/actions";
+import client from "~/client";
+import { NON_DELETED_STATUSES } from "~/config";
 import {
-  getWorkflowDeleteModalOpen,
   getWorkflowDeleteModalItem,
+  getWorkflowDeleteModalOpen,
 } from "~/selectors";
 
 export default function WorkflowDeleteModal() {
   const dispatch = useDispatch();
   const open = useSelector(getWorkflowDeleteModalOpen);
   const workflow = useSelector(getWorkflowDeleteModalItem);
+  const [allRuns, setAllRuns] = useState(false);
+  const [allRunsTotal, setAllRunsTotal] = useState();
+
+  const { id, name, run, size } = workflow ?? {};
+
+  useEffect(() => {
+    // reset local state on workflow change
+    setAllRuns(false);
+    setAllRunsTotal(null);
+  }, [id]);
+
+  useEffect(() => {
+    if (!name) {
+      return;
+    }
+
+    client
+      .getWorkflows({
+        workflowIdOrName: name,
+        status: NON_DELETED_STATUSES,
+        // request minimum number of workflows as we are only interested in `total`
+        pagination: { size: 1, page: 1 },
+      })
+      .then((resp) => setAllRunsTotal(resp.data.total))
+      .catch((err) =>
+        console.log(
+          `Error while fetching number of workflows with name ${name}`,
+          err,
+        ),
+      );
+  }, [name]);
 
   if (!workflow) return null;
 
   const onCloseModal = () => {
     dispatch(closeDeleteWorkflowModal());
   };
 
-  const { id, name, run, size } = workflow;
+  const deleteButtonLabel = allRuns
+    ? `Delete ${allRunsTotal ?? "all"} workflows named "${name}"`
+    : `Delete workflow "${name}#${run}"`;
+
   return (
     <Modal open={open} onClose={onCloseModal} closeIcon size="small">
       <Modal.Header>Delete workflow</Modal.Header>
@@ -45,20 +82,27 @@ export default function WorkflowDeleteModal() {
             download all the files you want to keep before proceeding.
           </Message.Content>
         </Message>
-        <p>
-          Are you sure you want to delete workflow "{name} #{run}"?
-        </p>
+        <Checkbox
+          label={
+            <label>
+              Delete all the runs of the workflow{" "}
+              {allRunsTotal ? `(${allRunsTotal})` : ""}
+            </label>
+          }
+          onChange={(e, data) => setAllRuns(data.checked)}
+          checked={allRuns}
+        />
       </Modal.Content>
       <Modal.Actions>
         <Button
           negative
           onClick={() => {
-            dispatch(deleteWorkflow(id)).then(() => {
+            dispatch(deleteWorkflow(id, { allRuns })).then(() => {
               onCloseModal();
             });
           }}
         >
-          Delete
+          {deleteButtonLabel}
         </Button>
         <Button onClick={onCloseModal}>Cancel</Button>
       </Modal.Actions>

reana-ui/yarn.lock

@@ -6973,7 +6973,7 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-jsroot@^7.3.1:
+jsroot@^7.5.0:
   version "7.5.1"
   resolved "https://registry.yarnpkg.com/jsroot/-/jsroot-7.5.1.tgz#50e486ac99b5e7bde88d820c0a5a53c220ef363e"
   integrity sha512-/yh7zYQO32lmmF5uJC8y1ZY0qMrWHN0zdZ7FYG7iTkBLS5J61vtJ7JAa3b0670mUZoQMThkXIfisN5tsrV4dSw==