From e851dd949ad7932b4c6e697641da10cbc5503c56 Mon Sep 17 00:00:00 2001
From: Surat Das <surat.das@gmail.com>
Date: Thu, 7 Oct 2021 16:56:37 -0700
Subject: [PATCH 1/2] Fix for issue 317

Fixes https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/317
---
 .../TestDetailsDialog/TestDetailsModal.tsx    | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx
index 611bba7b..05634ec1 100644
--- a/src/components/TestDetailsDialog/TestDetailsModal.tsx
+++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx
@@ -42,6 +42,7 @@ import { ScaleActionsSpeedDial } from "../ZoomSpeedDial";
 import { ApproveRejectButtons } from "../ApproveRejectButtons";
 import { head } from "lodash";
 import { invertIgnoreArea } from "../../_helpers/ignoreArea.helper";
+import { BaseModal } from "../BaseModal";
 
 const defaultStagePos = {
   x: 0,
@@ -84,6 +85,11 @@ const TestDetailsModal: React.FunctionComponent<{
   const [isDiffShown, setIsDiffShown] = useState(!!testRun.diffName);
   const [selectedRectId, setSelectedRectId] = React.useState<string>();
   const [ignoreAreas, setIgnoreAreas] = React.useState<IgnoreArea[]>([]);
+  const [applyIgnoreDialogOpen, setApplyIgnoreDialogOpen] = React.useState(false);
+
+  const toggleApplyIgnoreDialogOpen = () => {
+    setApplyIgnoreDialogOpen(!applyIgnoreDialogOpen);
+  };
 
   const [image, imageStatus] = useImage(
     staticService.getImage(testRun.imageName)
@@ -187,9 +193,9 @@ const TestDetailsModal: React.FunctionComponent<{
   const fitStageToScreen = () => {
     const scale = image
       ? Math.min(
-          stageWidth < image.width ? stageWidth / image.width : 1,
-          stageHeigth < image.height ? stageHeigth / image.height : 1
-        )
+        stageWidth < image.width ? stageWidth / image.width : 1,
+        stageHeigth < image.height ? stageHeigth / image.height : 1
+      )
       : 1;
     setStageScale(scale);
     resetPositioin();
@@ -266,10 +272,10 @@ const TestDetailsModal: React.FunctionComponent<{
             )}
             {(testRun.status === TestStatus.unresolved ||
               testRun.status === TestStatus.new) && (
-              <Grid item>
-                <ApproveRejectButtons testRun={testRun} />
-              </Grid>
-            )}
+                <Grid item>
+                  <ApproveRejectButtons testRun={testRun} />
+                </Grid>
+              )}
             <Grid item>
               <IconButton color="inherit" onClick={handleClose}>
                 <Close />
@@ -359,7 +365,7 @@ const TestDetailsModal: React.FunctionComponent<{
                 <Grid item>
                   <IconButton
                     disabled={!selectedRectId || ignoreAreas.length === 0}
-                    onClick={() => applyIgnoreArea()}
+                    onClick={() => setApplyIgnoreDialogOpen(!applyIgnoreDialogOpen)}
                   >
                     <Collections />
                   </IconButton>
@@ -481,6 +487,22 @@ const TestDetailsModal: React.FunctionComponent<{
         onOriginalSizeClick={setOriginalSize}
         onFitIntoScreenClick={fitStageToScreen}
       />
+      <BaseModal
+        open={applyIgnoreDialogOpen}
+        title={''}
+        submitButtonText={'Yes'}
+        onCancel={toggleApplyIgnoreDialogOpen}
+        content={
+          <Typography>
+            {`Are you sure you want to apply ignore area to all items in this build?`}
+          </Typography>
+        }
+        onSubmit={() => {
+          toggleApplyIgnoreDialogOpen();
+          applyIgnoreArea();
+        }
+        }
+      />
     </React.Fragment>
   );
 };

From 1c813e68fa65aa5323a74627741f4d877f9cd561 Mon Sep 17 00:00:00 2001
From: Surat Das <surat.das@gmail.com>
Date: Fri, 8 Oct 2021 10:55:28 -0700
Subject: [PATCH 2/2] Fixed review comments.

---
 src/components/TestDetailsDialog/TestDetailsModal.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx
index 05634ec1..6176ef81 100644
--- a/src/components/TestDetailsDialog/TestDetailsModal.tsx
+++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx
@@ -101,6 +101,8 @@ const TestDetailsModal: React.FunctionComponent<{
     staticService.getImage(testRun.diffName)
   );
 
+  const applyIgnoreAreaText = 'Apply selected ignore area to all images in this build.';
+
   React.useEffect(() => {
     fitStageToScreen();
     // eslint-disable-next-line
@@ -359,13 +361,13 @@ const TestDetailsModal: React.FunctionComponent<{
                 </Grid>
               </Tooltip>
               <Tooltip
-                title="Apply selected ignore area to all images in this build."
+                title={applyIgnoreAreaText}
                 aria-label="apply ignore area"
               >
                 <Grid item>
                   <IconButton
                     disabled={!selectedRectId || ignoreAreas.length === 0}
-                    onClick={() => setApplyIgnoreDialogOpen(!applyIgnoreDialogOpen)}
+                    onClick={() => toggleApplyIgnoreDialogOpen()}
                   >
                     <Collections />
                   </IconButton>
@@ -489,12 +491,12 @@ const TestDetailsModal: React.FunctionComponent<{
       />
       <BaseModal
         open={applyIgnoreDialogOpen}
-        title={''}
+        title={applyIgnoreAreaText}
         submitButtonText={'Yes'}
         onCancel={toggleApplyIgnoreDialogOpen}
         content={
           <Typography>
-            {`Are you sure you want to apply ignore area to all items in this build?`}
+            {`All images in the current build will be re-compared with new ignore area taken into account. Are you sure?`}
           </Typography>
         }
         onSubmit={() => {