Fix for issue 317 (#240)

* Fix for issue 317

Fixes Visual-Regression-Tracker/Visual-Regression-Tracker#317

* Fixed review comments.

Author: suratdas

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)
@@ -95,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
@@ -187,9 +195,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 +274,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 />
@@ -353,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={() => applyIgnoreArea()}
+                    onClick={() => toggleApplyIgnoreDialogOpen()}
                   >
                     <Collections />
                   </IconButton>
@@ -481,6 +489,22 @@ const TestDetailsModal: React.FunctionComponent<{
         onOriginalSizeClick={setOriginalSize}
         onFitIntoScreenClick={fitStageToScreen}
       />
+      <BaseModal
+        open={applyIgnoreDialogOpen}
+        title={applyIgnoreAreaText}
+        submitButtonText={'Yes'}
+        onCancel={toggleApplyIgnoreDialogOpen}
+        content={
+          <Typography>
+            {`All images in the current build will be re-compared with new ignore area taken into account. Are you sure?`}
+          </Typography>
+        }
+        onSubmit={() => {
+          toggleApplyIgnoreDialogOpen();
+          applyIgnoreArea();
+        }
+        }
+      />
     </React.Fragment>
   );
 };