fix scrubber isolated ref image (#1262)

garris · Dec 5, 2020 · 7d84de7 · 7d84de7
1 parent cf42513
commit 7d84de7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git a/compare/output/index_bundle.js b/compare/output/index_bundle.js
diff --git a/compare/src/components/atoms/ImageScrubber.js b/compare/src/components/atoms/ImageScrubber.js
@@ -85,17 +85,17 @@ export default class ImageScrubber extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      dontUseScrubberView: false,
+      isRefImageMissing: false,
       isLoading: false
     };
 
-    this.handleLoadingError = this.handleLoadingError.bind(this);
+    this.handleRefImageLoadingError = this.handleRefImageLoadingError.bind(this);
     this.loadingDiverge = this.loadingDiverge.bind(this);
   }
 
-  handleLoadingError () {
+  handleRefImageLoadingError () {
     this.setState({
-      dontUseScrubberView: true
+      isRefImageMissing: true
     });
   }
 
@@ -114,7 +114,6 @@ export default class ImageScrubber extends React.Component {
       testImage,
       diffImage,
       divergedImage,
-      showButtons,
       showScrubberTestImage,
       showScrubberRefImage,
       showScrubberDiffImage,
@@ -123,6 +122,7 @@ export default class ImageScrubber extends React.Component {
     } = this.props;
 
     const scrubberTestImageSlug = this.props[testImageType];
+    const hasDiff = diffImage && diffImage.length > 0;
 
     // only show the diverged option if the report comes from web server
     function showDivergedOption () {
@@ -189,11 +189,13 @@ export default class ImageScrubber extends React.Component {
       });
     }
 
-    const dontUseScrubberView = this.state.dontUseScrubberView || !showButtons;
+    const dontUseScrubberView = this.state.isRefImageMissing || !hasDiff;
+    const showIsolatedRefImage = !hasDiff && scrubberModalMode === 'SHOW_SCRUBBER_REF_IMAGE';
+    const showIsolatedTestImage = !hasDiff && scrubberModalMode === 'SHOW_SCRUBBER_TEST_IMAGE';
     return (
       <div>
         <WrapTitle>
-          {showButtons && (
+          {hasDiff && (
             <div>
               <ScrubberViewBtn
                 selected={scrubberModalMode === 'SHOW_SCRUBBER_REF_IMAGE'}
@@ -241,7 +243,8 @@ export default class ImageScrubber extends React.Component {
             id="isolatedRefImage"
             src={refImage}
             style={{
-              display: 'none'
+              margin: 'auto',
+              display: showIsolatedRefImage ? 'block' : 'none'
             }}
           />
           <img
@@ -250,7 +253,7 @@ export default class ImageScrubber extends React.Component {
             src={testImage}
             style={{
               margin: 'auto',
-              display: dontUseScrubberView ? 'block' : 'none'
+              display: showIsolatedTestImage ? 'block' : 'none'
             }}
           />
           <img
@@ -277,7 +280,7 @@ export default class ImageScrubber extends React.Component {
                 id="scrubberRefImage"
                 className="refImage"
                 src={refImage}
-                onError={this.handleLoadingError}
+                onError={this.handleRefImageLoadingError}
               />
               <img
                 id="scrubberTestImage"

diff --git a/compare/src/components/ecosystems/ScrubberModal.js b/compare/src/components/ecosystems/ScrubberModal.js
@@ -106,7 +106,6 @@ class ScrubberModal extends React.Component {
             diffImage={diffImage}
             divergedImage={divergedImage}
             position={position}
-            showButtons={diffImage && diffImage.length > 0}
             showScrubberTestImage={showScrubberTestImage}
             showScrubberRefImage={showScrubberRefImage}
             showScrubberDiffImage={showScrubberDiffImage}

diff --git a/compare/src/reducers/scrubber.js b/compare/src/reducers/scrubber.js
@@ -77,7 +77,8 @@ const scrubber = (state = {}, action) => {
     case 'SHOW_SCRUBBER':
       return Object.assign({}, state, {
         position: getPosFromImgId(),
-        scrubberModalMode: 'SCRUB'
+        scrubberModalMode: 'SCRUB',
+        testImageType: 'testImage'
       });
 
     default: