Issue #276: Enable to bulk clear ignore area for test runs list and details view. (#199)

Author: suratdas

src/components/TestDetailsModal.tsx

@@ -25,7 +25,7 @@ import { TestStatus } from "../types/testStatus";
 import { useHistory, Prompt } from "react-router-dom";
 import { IgnoreArea } from "../types/ignoreArea";
 import { KonvaEventObject } from "konva/types/Node";
-import { Close, Add, Delete, Save, WarningRounded } from "@material-ui/icons";
+import { Close, Add, Delete, Save, WarningRounded, LayersClear } from "@material-ui/icons";
 import { TestRunDetails } from "./TestRunDetails";
 import useImage from "use-image";
 import { routes } from "../constants";
@@ -330,14 +330,26 @@ const TestDetailsModal: React.FunctionComponent<{
               </Grid>
               <Grid item>
                 <IconButton
-                  disabled={!selectedRectId}
+                  disabled={!selectedRectId || ignoreAreas.length === 0}
                   onClick={() =>
                     selectedRectId && deleteIgnoreArea(selectedRectId)
                   }
                 >
                   <Delete />
                 </IconButton>
               </Grid>
+              <Tooltip title="Clears all ignore areas." aria-label="reject">
+                <Grid item>
+                  <IconButton
+                    disabled={ignoreAreas.length === 0}
+                    onClick={() =>
+                      setIgnoreAreas([])
+                    }
+                  >
+                    <LayersClear />
+                  </IconButton>
+                </Grid>
+              </Tooltip>
               <Grid item>
                 <IconButton
                   disabled={isIgnoreAreasSaved()}

src/components/TestRunList/BulkOperation.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { Typography, IconButton, Tooltip } from "@material-ui/core";
-import { BaseComponentProps, RowModel } from "@material-ui/data-grid";
+import { Typography, IconButton, Tooltip, LinearProgress } from "@material-ui/core";
+import { BaseComponentProps, InternalRowsState, RowModel } from "@material-ui/data-grid";
 import { BaseModal } from "../BaseModal";
 import { useSnackbar } from "notistack";
-import { Delete, ThumbDown, ThumbUp } from "@material-ui/icons";
+import { Delete, LayersClear, ThumbDown, ThumbUp } from "@material-ui/icons";
 import { testRunService } from "../../services";
 import { TestStatus } from "../../types";
+import { IgnoreArea } from "../../types/ignoreArea";
 
 export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   props: BaseComponentProps
@@ -14,9 +15,12 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   const [approveDialogOpen, setApproveDialogOpen] = React.useState(false);
   const [rejectDialogOpen, setRejectDialogOpen] = React.useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [clearIgnoreDialogOpen, setClearIgnoreDialogOpen] = React.useState(false);
+  const [isProcessing, setIsProcessing] = React.useState(false);
 
-  const rows: Record<React.ReactText, boolean> = props.state.selection;
-  const count = Object.keys(rows).length;
+  const allRows: InternalRowsState = props.state.rows;
+  const selectedRows: Record<React.ReactText, boolean> = props.state.selection;
+  const count = Object.keys(selectedRows).length;
 
   const toggleApproveDialogOpen = () => {
     setApproveDialogOpen(!approveDialogOpen);
@@ -27,21 +31,30 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   const toggleDeleteDialogOpen = () => {
     setDeleteDialogOpen(!deleteDialogOpen);
   };
+  const toggleClearIgnoreDialogOpen = () => {
+    setClearIgnoreDialogOpen(!clearIgnoreDialogOpen);
+  };
 
   const getTitle = () => {
+    if (clearIgnoreDialogOpen) {
+      return "Clear Ignore Area For Selected Items";
+    }
     return submitButtonText() + " Test Runs";
   };
 
   const submitButtonText = (): string => {
-    if (deleteDialogOpen) {
-      return "Delete";
-    }
     if (approveDialogOpen) {
       return "Approve";
     }
     if (rejectDialogOpen) {
       return "Reject";
     }
+    if (deleteDialogOpen) {
+      return "Delete";
+    }
+    if (clearIgnoreDialogOpen) {
+      return "Clear";
+    }
     return "";
   };
 
@@ -55,6 +68,9 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
     if (rejectDialogOpen) {
       return toggleRejectDialogOpen();
     }
+    if (clearIgnoreDialogOpen) {
+      return toggleClearIgnoreDialogOpen();
+    }
   };
 
   const isRowEligibleForApproveOrReject = (id: string) => {
@@ -72,6 +88,9 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
     if (isRowEligibleForApproveOrReject(id)) {
       processApproveReject(id);
     }
+    if (clearIgnoreDialogOpen) {
+      testRunService.setIgnoreAreas(id, []);
+    }
   };
 
   const processApproveReject = (id: string) => {
@@ -90,6 +109,9 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
     if (approveDialogOpen) {
       return toggleApproveDialogOpen();
     }
+    if (clearIgnoreDialogOpen) {
+      return toggleClearIgnoreDialogOpen();
+    }
     return toggleRejectDialogOpen();
   };
 
@@ -116,27 +138,37 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
           </IconButton>
         </span>
       </Tooltip>
+      <Tooltip
+        title="Clear ignore areas for selected rows."
+        aria-label="clear ignore area"
+      >
+        <span>
+          <IconButton
+            disabled={count === 0}
+            onClick={toggleClearIgnoreDialogOpen}
+          >
+            <LayersClear />
+          </IconButton>
+        </span>
+      </Tooltip>
 
       <BaseModal
-        open={deleteDialogOpen || approveDialogOpen || rejectDialogOpen}
+        open={deleteDialogOpen || approveDialogOpen || rejectDialogOpen || clearIgnoreDialogOpen}
         title={getTitle()}
         submitButtonText={submitButtonText()}
         onCancel={dismissDialog}
         content={
-          <Typography>{`Are you sure you want to ${submitButtonText().toLowerCase()} ${count} items?`}</Typography>
+          <Typography>
+            {`Are you sure you want to ${submitButtonText().toLowerCase()} ${count} items?`}
+          </Typography>
         }
         onSubmit={() => {
-          enqueueSnackbar(
-            "Wait for the confirmation message until operation is completed.",
-            {
-              variant: "info",
-            }
-          );
-
+          setIsProcessing(true);
           Promise.all(
-            Object.keys(rows).map((id: string) => processAction(id))
+            Object.keys(selectedRows).map((id: string) => processAction(id))
           )
             .then(() => {
+              setIsProcessing(false);
               enqueueSnackbar(`${count} test runs processed.`, {
                 variant: "success",
               });
@@ -149,6 +181,7 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
           closeModal();
         }}
       />
+      { isProcessing && <LinearProgress />}
     </>
   );
 };