Flow multi select to delete

web/src/js/components/FlowTable.jsx

@@ -106,7 +106,7 @@ class FlowTable extends React.Component {
 
     render() {
         const { vScroll, viewportTop } = this.state;
-        const { flows, selected, highlight } = this.props;
+        const { flows, highlight, selectedRows } = this.props;
         const isHighlighted = highlight ? Filt.parse(highlight) : () => false;
 
         return (
@@ -124,7 +124,7 @@ class FlowTable extends React.Component {
                             <FlowRow
                                 key={flow.id}
                                 flow={flow}
-                                selected={flow === selected}
+                                selected={selectedRows.includes(flow.id)}
                                 highlighted={isHighlighted(flow)}
                             />
                         ))}
@@ -141,5 +141,5 @@ export const PureFlowTable = AutoScroll(FlowTable);
 export default connect((state) => ({
     flows: state.flows.view,
     highlight: state.flows.highlight,
-    selected: state.flows.byId[state.flows.selected[0]],
+    selectedRows: state.flows.selected,
 }))(PureFlowTable);

web/src/js/components/FlowTable/FlowRow.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import classnames from "classnames";
 import { Flow } from "../../flow";
 import { useAppDispatch, useAppSelector } from "../../ducks";
-import { select } from "../../ducks/flows";
+import { multiSelect, select } from "../../ducks/flows";
 import * as columns from "./FlowColumns";
 
 type FlowRowProps = {
@@ -36,7 +36,12 @@ export default React.memo(function FlowRow({
                 if (node.classList.contains("col-quickactions")) return;
                 node = node.parentNode;
             }
-            dispatch(select(flow.id));
+            if (e.ctrlKey) {
+                dispatch(multiSelect(flow.id));
+            }
+            if (!e.ctrlKey) {
+                dispatch(select(flow.id));
+            }
         },
         [flow]
     );

web/src/js/components/Header/FlowMenu.tsx

@@ -11,6 +11,7 @@ import {
     replay as replayFlow,
     resume as resumeFlow,
     revert as revertFlow,
+    removeMultiple as removeMultipleFlows,
 } from "../../ducks/flows";
 import Dropdown, { MenuItem } from "../common/Dropdown";
 import { copy } from "../../flow/export";
@@ -23,6 +24,7 @@ export default function FlowMenu(): JSX.Element {
         flow = useAppSelector(
             (state) => state.flows.byId[state.flows.selected[0]]
         );
+    const selectedRows = useAppSelector((state) => state.flows.selected);
 
     if (!flow) return <div />;
     return (
@@ -34,19 +36,26 @@ export default function FlowMenu(): JSX.Element {
                             title="[r]eplay flow"
                             icon="fa-repeat text-primary"
                             onClick={() => dispatch(replayFlow(flow))}
-                            disabled={!canReplay(flow)}
+                            disabled={
+                                !canReplay(flow) || selectedRows.length > 1
+                            }
                         >
                             Replay
                         </Button>
                         <Button
                             title="[D]uplicate flow"
                             icon="fa-copy text-info"
                             onClick={() => dispatch(duplicateFlow(flow))}
+                            disabled={selectedRows.length > 1}
                         >
                             Duplicate
                         </Button>
                         <Button
-                            disabled={!flow || !flow.modified}
+                            disabled={
+                                !flow ||
+                                !flow.modified ||
+                                selectedRows.length > 1
+                            }
                             title="revert changes to flow [V]"
                             icon="fa-history text-warning"
                             onClick={() => dispatch(revertFlow(flow))}
@@ -56,7 +65,13 @@ export default function FlowMenu(): JSX.Element {
                         <Button
                             title="[d]elete flow"
                             icon="fa-trash text-danger"
-                            onClick={() => dispatch(removeFlow(flow))}
+                            onClick={() =>
+                                selectedRows.length === 1
+                                    ? dispatch(removeFlow(flow))
+                                    : dispatch(
+                                          removeMultipleFlows(selectedRows)
+                                      )
+                            }
                         >
                             Delete
                         </Button>
@@ -78,15 +93,23 @@ export default function FlowMenu(): JSX.Element {
                 <div className="menu-group">
                     <div className="menu-content">
                         <Button
-                            disabled={!flow || !flow.intercepted}
+                            disabled={
+                                !flow ||
+                                !flow.intercepted ||
+                                selectedRows.length > 1
+                            }
                             title="[a]ccept intercepted flow"
                             icon="fa-play text-success"
                             onClick={() => dispatch(resumeFlow(flow))}
                         >
                             Resume
                         </Button>
                         <Button
-                            disabled={!flow || !flow.intercepted}
+                            disabled={
+                                !flow ||
+                                !flow.intercepted ||
+                                selectedRows.length > 1
+                            }
                             title="kill intercepted flow [x]"
                             icon="fa-times text-danger"
                             onClick={() => dispatch(killFlow(flow))}

web/src/js/ducks/flows.ts

@@ -9,6 +9,7 @@ export const UPDATE = "FLOWS_UPDATE";
 export const REMOVE = "FLOWS_REMOVE";
 export const RECEIVE = "FLOWS_RECEIVE";
 export const SELECT = "FLOWS_SELECT";
+export const MULTI_SELECT = "FLOWS_MULTI_SELECT";
 export const SET_FILTER = "FLOWS_SET_FILTER";
 export const SET_SORT = "FLOWS_SET_SORT";
 export const SET_HIGHLIGHT = "FLOWS_SET_HIGHLIGHT";
@@ -111,6 +112,11 @@ export default function reducer(
                 selected: action.flowIds,
             };
 
+        case MULTI_SELECT:
+            return {
+                ...state,
+                selected: [...state.selected, ...action.flowIds],
+            };
         default:
             return state;
     }
@@ -196,6 +202,15 @@ export function remove(flow: Flow) {
     return (dispatch) => fetchApi(`/flows/${flow.id}`, { method: "DELETE" });
 }
 
+export function removeMultiple(flowIds: string[]) {
+    const promises: Promise<Response>[] = [];
+    flowIds.forEach((id) =>
+        promises.push(fetchApi(`/flows/${id}`, { method: "DELETE" }))
+    );
+    return (dispatch) => Promise.all(promises);
+    // return (dispatch) => fetchApi(`/flows/${flow.id}`, { method: "DELETE" });
+}
+
 export function duplicate(flow: Flow) {
     return (dispatch) =>
         fetchApi(`/flows/${flow.id}/duplicate`, { method: "POST" });
@@ -242,3 +257,10 @@ export function select(id?: string) {
         flowIds: id ? [id] : [],
     };
 }
+
+export function multiSelect(id?: string) {
+    return {
+        type: MULTI_SELECT,
+        flowIds: id ? [id] : [],
+    };
+}