fix: move diff-mode select to header for tinder-mode

Author: Rashid Ksirov

lib/static/components/modals/screenshot-accepter/header.jsx

@@ -7,7 +7,9 @@ import ProgressBar from '../../progress-bar';
 import Arrow from '../../icons/arrow';
 import ArrowsClose from '../../icons/arrows-close';
 import ControlButton from '../../controls/control-button';
+import ControlSelect from '../../controls/selects/control';
 import RetrySwitcher from '../../retry-switcher';
+import diffModes from '../../../../constants/diff-modes';
 
 export default class ScreenshotAccepterHeader extends Component {
     static propTypes = {
@@ -106,7 +108,7 @@ export default class ScreenshotAccepterHeader extends Component {
     };
 
     render() {
-        const {images, stateNameImageIds, retryIndex,
+        const {actions, view, images, stateNameImageIds, retryIndex,
             showMeta, onClose, onRetryChange, onShowMeta,
             totalImages, acceptedImages
         } = this.props;
@@ -142,6 +144,14 @@ export default class ScreenshotAccepterHeader extends Component {
                             extendClassNames="screenshot-accepter__accept-btn"
                             handler={this.handleScreenshotAccept}
                         />
+                        <ControlButton
+                            label="⎌ Undo"
+                            title="Revert last updated screenshot"
+                            isDisabled={!acceptedImages}
+                            isSuiteControl={true}
+                            extendClassNames="screenshot-accepter__undo-btn"
+                            handler={this.handleScreenUndo}
+                        />
                         <ControlButton
                             label="Show meta"
                             title="Show test meta info"
@@ -151,6 +161,15 @@ export default class ScreenshotAccepterHeader extends Component {
                             extendClassNames="screenshot-accepter__show-meta-btn"
                             handler={onShowMeta}
                         />
+                        <ControlSelect
+                            label="Diff mode"
+                            value={view.diffMode}
+                            handler={actions.changeDiffMode}
+                            options = {Object.values(diffModes).map((dm) => {
+                                return {value: dm.id, text: dm.title};
+                            })}
+                            extendClassNames="screenshot-accepter__diff-mode-select"
+                        />
                         <RetrySwitcher
                             title="Switch to selected attempt (left: ←,a; right: →,d)"
                             resultIds={resultIds}
@@ -167,14 +186,6 @@ export default class ScreenshotAccepterHeader extends Component {
                             extendClassNames="screenshot-accepter__arrows-close-btn"
                             handler={onClose}
                         />
-                        <ControlButton
-                            label="⎌ Undo"
-                            title="Revert last updated screenshot"
-                            isDisabled={!acceptedImages}
-                            isSuiteControl={true}
-                            extendClassNames="screenshot-accepter__undo-btn"
-                            handler={this.handleScreenUndo}
-                        />
                         <ProgressBar done={acceptedImages} total={totalImages}/>
                     </div>
                 </header>

lib/static/components/modals/screenshot-accepter/index.jsx

@@ -177,6 +177,7 @@ class ScreenshotAccepter extends Component {
     }
 
     render() {
+        const {actions, view} = this.props;
         const {retryIndex, stateNameImageIds, activeImageIndex, showMeta} = this.state;
         const images = this._getActiveImages();
         const currImage = isNumber(retryIndex) ? images[retryIndex] : null;
@@ -185,6 +186,8 @@ class ScreenshotAccepter extends Component {
         return (
             <Fragment>
                 <ScreenshotAccepterHeader
+                    actions={actions}
+                    view={view}
                     images={images}
                     stateNameImageIds={stateNameImageIds}
                     retryIndex={retryIndex}
@@ -219,6 +222,7 @@ export default connect(
         const activeImageIndex = stateNameImageIds.indexOf(stateNameImageId);
 
         return {
+            view: state.view,
             imagesByStateName,
             stateNameImageIds,
             activeImageIndex

lib/static/components/modals/screenshot-accepter/style.css

@@ -22,6 +22,12 @@
 
 .screenshot-accepter__controls.state-controls .progress-bar::after {
     content: "Accepted: " attr(data-content);
+}
+
+.screenshot-accepter__controls.state-controls .tab-switcher::before,
+.screenshot-accepter__controls.state-controls .progress-bar::after,
+.screenshot-accepter__controls .select__label,
+.screenshot-accepter__controls .select__dropdown.ui.dropdown {
     font-size: 13px;
     line-height: 18px;
 }
@@ -33,7 +39,8 @@
 }
 
 .screenshot-accepter__controls .button,
-.screenshot-accepter__controls .tab-switcher {
+.screenshot-accepter__controls .tab-switcher,
+.screenshot-accepter__controls .select {
     margin-right: 20px;
     margin-bottom: 20px;
 }
@@ -56,6 +63,22 @@
     border-radius: 2px;
 }
 
+.screenshot-accepter__controls .select__label {
+    line-height: 30px !important;
+    margin-right: 7px;
+    vertical-align: middle;
+    background-color: white;
+    color: black;
+    font-family: YS Text, Helvetica Neue, Arial, sans-serif;
+    font-weight: normal;
+}
+
+.screenshot-accepter__controls .select__dropdown.ui.dropdown {
+    min-height: 30px;
+    border-radius: 5px;
+    padding-left: 10px;
+}
+
 .button.screenshot-accepter__arrow-up-btn {
     margin-right: 5px;
 }

lib/static/components/state/state-fail/index.jsx

@@ -133,7 +133,7 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened})
 
     return (
         <Fragment>
-            {renderDiffModeItems()}
+            {!isScreenshotAccepterOpened && renderDiffModeItems()}
             {renderImages()}
         </Fragment>
     );

test/unit/lib/static/components/modals/screenshot-accepter/header.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {defaults} from 'lodash';
 import proxyquire from 'proxyquire';
 import {mkConnectedComponent} from '../../utils';
+import diffModes from '../../../../../../../lib/constants/diff-modes';
 
 describe('<ScreenshotAccepterHeader/>', () => {
     const sandbox = sinon.sandbox.create();
@@ -13,6 +14,8 @@ describe('<ScreenshotAccepterHeader/>', () => {
 
     const mkHeaderComponent = (props = {}) => {
         props = defaults(props, {
+            view: {diffMode: diffModes.THREE_UP_SCALED},
+            actions: {changeDiffMode: sinon.stub().returns({type: 'some-type'})},
             totalImages: 2,
             acceptedImages: 0,
             images: [{

test/unit/lib/static/components/modals/screenshot-accepter/index.jsx

@@ -49,6 +49,7 @@ describe('<ScreenshotAccepter/>', () => {
 
     beforeEach(() => {
         actionsStub = {
+            changeDiffMode: sandbox.stub().returns({type: 'some-type'}),
             screenshotAccepterAccept: sandbox.stub().returns({type: 'some-type'}),
             undoAcceptImage: sandbox.stub().returns({type: 'some-type'}),
             applyDelayedTestResults: sandbox.stub().returns({type: 'some-type'})
@@ -90,9 +91,15 @@ describe('<ScreenshotAccepter/>', () => {
 
             mkScreenshotAccepterComponent({image}, {tree});
 
-            assert.calledOnceWith(
+            assert.calledWithMatch(
                 ScreenshotAccepterHeader,
                 {
+                    actions: {
+                        changeDiffMode: sinon.match.func
+                    },
+                    view: {
+                        diffMode: '3-up'
+                    },
                     images: [image],
                     stateNameImageIds: ['bro-1 plain'],
                     retryIndex: 0,