feat: add static image accepter

lib/common-utils.ts

@@ -11,7 +11,9 @@ import {
     SKIPPED,
     SUCCESS,
     TestStatus,
-    UPDATED
+    UPDATED,
+    STAGED,
+    COMMITED
 } from './constants';
 
 import {CHECKED, INDETERMINATE, UNCHECKED} from './constants/checked-statuses';
@@ -36,7 +38,7 @@ const statusPriority: TestStatus[] = [
     RUNNING, QUEUED,
 
     // final
-    ERROR, FAIL, UPDATED, SUCCESS, IDLE, SKIPPED
+    ERROR, FAIL, STAGED, COMMITED, UPDATED, SUCCESS, IDLE, SKIPPED
 ];
 
 export const logger = pick(console, ['log', 'warn', 'error']);
@@ -48,6 +50,8 @@ export const isRunningStatus = (status: TestStatus): boolean => status === RUNNI
 export const isErrorStatus = (status: TestStatus): boolean => status === ERROR;
 export const isSkippedStatus = (status: TestStatus): boolean => status === SKIPPED;
 export const isUpdatedStatus = (status: TestStatus): boolean => status === UPDATED;
+export const isStagedStatus = (status: TestStatus): boolean => status === STAGED;
+export const isCommitedStatus = (status: TestStatus): boolean => status === COMMITED;
 
 export const determineFinalStatus = (statuses: TestStatus[]): TestStatus | null => {
     if (!statuses.length) {

lib/config/index.ts

@@ -15,6 +15,10 @@ const ALLOWED_PLUGIN_DESCRIPTION_FIELDS = new Set(['name', 'component', 'point',
 type TypePredicateFn<T> = (value: unknown) => value is T;
 type AssertionFn<T> = (value: unknown) => asserts value is T;
 
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+    return _.isPlainObject(value);
+};
+
 const assertType = <T>(name: string, validationFn: (value: unknown) => value is T, type: string): AssertionFn<T> => {
     return (v: unknown): asserts v is T => {
         if (!validationFn(v)) {
@@ -25,6 +29,7 @@ const assertType = <T>(name: string, validationFn: (value: unknown) => value is
 const assertString = (name: string): AssertionFn<string> => assertType(name, _.isString, 'string');
 const assertBoolean = (name: string): AssertionFn<boolean> => assertType(name, _.isBoolean, 'boolean');
 const assertNumber = (name: string): AssertionFn<number> => assertType(name, _.isNumber, 'number');
+const assertPlainObject = (name: string): AssertionFn<Record<string, unknown>> => assertType(name, isPlainObject, 'plain object');
 
 const assertSaveFormat = (saveFormat: unknown): asserts saveFormat is SaveFormat => {
     const formats = Object.values(SaveFormat);
@@ -219,6 +224,38 @@ const getParser = (): ReturnType<typeof root<ReporterConfig>> => {
             parseEnv: JSON.parse,
             parseCli: JSON.parse,
             validate: assertArrayOf('plugin descriptions', 'plugins', assertPluginDescription)
+        }),
+        staticImageAccepter: section({
+            enabled: option({
+                defaultValue: configDefaults.staticImageAccepter.enabled,
+                parseEnv: JSON.parse,
+                parseCli: JSON.parse,
+                validate: assertBoolean('staticImageAccepter.enabled')
+            }),
+            repositoryUrl: option({
+                defaultValue: configDefaults.staticImageAccepter.repositoryUrl,
+                validate: assertString('staticImageAccepter.repositoryUrl')
+            }),
+            pullRequestUrl: option({
+                defaultValue: configDefaults.staticImageAccepter.pullRequestUrl,
+                validate: assertString('staticImageAccepter.pullRequestUrl')
+            }),
+            serviceUrl: option({
+                defaultValue: configDefaults.staticImageAccepter.serviceUrl,
+                validate: assertString('staticImageAccepter.serviceUrl')
+            }),
+            meta: option({
+                defaultValue: configDefaults.staticImageAccepter.meta,
+                parseEnv: JSON.parse,
+                parseCli: JSON.parse,
+                validate: assertPlainObject('staticImageAccepter.meta')
+            }),
+            axiosRequestOptions: option({
+                defaultValue: configDefaults.staticImageAccepter.axiosRequestOptions,
+                parseEnv: JSON.parse,
+                parseCli: JSON.parse,
+                validate: assertPlainObject('staticImageAccepter.axiosRequestOptions')
+            })
         })
     }), {envPrefix: ENV_PREFIX, cliPrefix: CLI_PREFIX});
 };

lib/constants/defaults.ts

@@ -23,5 +23,13 @@ export const configDefaults: ReporterConfig = {
     saveFormat: SaveFormat.SQLITE,
     yandexMetrika: {
         counterNumber: null
+    },
+    staticImageAccepter: {
+        enabled: false,
+        repositoryUrl: '',
+        pullRequestUrl: '',
+        serviceUrl: '',
+        meta: {},
+        axiosRequestOptions: {}
     }
 };

lib/constants/test-statuses.ts

@@ -7,6 +7,14 @@ export enum TestStatus {
     ERROR = 'error',
     SKIPPED = 'skipped',
     UPDATED = 'updated',
+    /**
+     * @note used by staticImageAccepter only
+     */
+    STAGED = 'staged',
+    /**
+     * @note used by staticImageAccepter only
+     */
+    COMMITED = 'commited',
 }
 
 export const IDLE = TestStatus.IDLE;
@@ -17,3 +25,11 @@ export const FAIL = TestStatus.FAIL;
 export const ERROR = TestStatus.ERROR;
 export const SKIPPED = TestStatus.SKIPPED;
 export const UPDATED = TestStatus.UPDATED;
+/**
+ * @note used by staticImageAccepter only
+ */
+export const STAGED = TestStatus.STAGED;
+/**
+ * @note used by staticImageAccepter only
+ */
+export const COMMITED = TestStatus.COMMITED;

lib/constants/view-modes.ts

@@ -4,4 +4,6 @@ export enum ViewMode {
     FAILED = 'failed',
     RETRIED = 'retried',
     SKIPPED = 'skipped',
+    STAGED = 'staged',
+    COMMITED = 'commited',
 }

lib/server-utils.ts

@@ -221,7 +221,8 @@ export function getConfigForStaticFile(pluginConfig: ReporterConfig): ConfigForS
         'customScripts',
         'yandexMetrika',
         'pluginsEnabled',
-        'plugins'
+        'plugins',
+        'staticImageAccepter'
     ]);
 }
 

lib/static/components/controls/common-controls.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
-import {capitalize} from 'lodash';
+import {capitalize, pull} from 'lodash';
 import * as actions from '../../modules/actions';
 import ControlButton from './control-button';
 import ControlSelect from './selects/control';
@@ -14,6 +14,14 @@ import {DiffModes} from '../../../constants/diff-modes';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
 
 class ControlButtons extends Component {
+    getShowTestsOptions() {
+        const viewModes = Object.values(ViewMode).map(value => ({value, text: capitalize(value)}));
+
+        return this.props.isStatisImageAccepterEnabled
+            ? viewModes
+            : viewModes.filter(viewMode => ![ViewMode.STAGED, ViewMode.COMMITED].includes(viewMode.value));
+    }
+
     render() {
         const {actions, view} = this.props;
 
@@ -23,7 +31,7 @@ class ControlButtons extends Component {
                     label="Show tests"
                     value={view.viewMode}
                     handler={actions.changeViewMode}
-                    options = {Object.values(ViewMode).map((value) => ({value, text: capitalize(value)}))}
+                    options = {this.getShowTestsOptions()}
                 />
                 <div className="control-group">
                     <ControlButton
@@ -70,6 +78,6 @@ class ControlButtons extends Component {
 }
 
 export default connect(
-    ({view}) => ({view}),
+    ({view, staticImageAccepter: {enabled}}) => ({view, isStatisImageAccepterEnabled: enabled}),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(ControlButtons);

lib/static/components/controls/common-filters.jsx

@@ -1,34 +1,69 @@
 'use strict';
 
-import React, {Component} from 'react';
+import React from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import * as actions from '../../modules/actions';
 import TestNameFilterInput from './test-name-filter-input';
 import StrictMatchFilterInput from './strict-match-filter-input';
 import ShowCheckboxesInput from './show-checkboxes-input';
 import BrowserList from './browser-list';
+import ProgressBar from '../progress-bar';
+import ControlButton from './control-button';
 
-class CommonFilters extends Component {
-    render() {
-        const {filteredBrowsers, browsers, gui, actions} = this.props;
+const CommonFilters = (props) => {
+    const onCommitChanges = () => {
+        props.actions.staticAccepterOpenConfirm();
+    }
+
+    const renderStaticImageAccepterControls = () => {
+        const {staticImageAccepter} = props;
+
+        if (!staticImageAccepter.enabled) {
+            return null;
+        }
 
         return (
-            <div className="control-container control-filters">
-                <BrowserList
-                    available={browsers}
-                    selected={filteredBrowsers}
-                    onChange={actions.selectBrowsers}
+            <div className='static-image-accepter'>
+                <ControlButton
+                    label={`Commit ${staticImageAccepter.imagesToCommitCount} images`}
+                    title="Send request with imagesInfo to 'staticImageAccepter.serviceUrl'"
+                    isActive={staticImageAccepter.imagesToCommitCount > 0}
+                    isDisabled={staticImageAccepter.imagesToCommitCount === 0}
+                    isSuiteControl={true}
+                    extendClassNames="static-image-accepter-commit"
+                    handler={onCommitChanges}
+                />
+                <ProgressBar
+                    done={staticImageAccepter.acceptedImagesCount}
+                    total={staticImageAccepter.totalAcceptableImagesCount}
+                    dataTestId="static-image-accepter-progress-bar"
                 />
-                <TestNameFilterInput/>
-                <StrictMatchFilterInput/>
-                {gui && <ShowCheckboxesInput/>}
             </div>
-        );
+        )
     }
+
+    return (
+        <div className="control-container control-filters">
+            <BrowserList
+                available={props.browsers}
+                selected={props.filteredBrowsers}
+                onChange={props.actions.selectBrowsers}
+            />
+            <TestNameFilterInput/>
+            <StrictMatchFilterInput/>
+            {props.gui && <ShowCheckboxesInput/>}
+            {renderStaticImageAccepterControls()}
+        </div>
+    );
 }
 
 export default connect(
-    ({view, browsers, gui}) => ({filteredBrowsers: view.filteredBrowsers, browsers, gui}),
+    ({view, browsers, gui, staticImageAccepter}) => ({
+        filteredBrowsers: view.filteredBrowsers,
+        browsers,
+        gui,
+        staticImageAccepter,
+    }),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(CommonFilters);

lib/static/components/modals/index.js

@@ -1,6 +1,8 @@
 export const types = {
     FIND_SAME_DIFFS: 'FindSameDiffs',
-    SCREENSHOT_ACCEPTER: 'ScreenshotAccepter'
+    SCREENSHOT_ACCEPTER: 'ScreenshotAccepter',
+    STATIC_ACCEPTER_CONFIRM: 'StaticAccepterConfirm'
 };
 export {default as FindSameDiffs} from './find-same-diffs';
 export {default as ScreenshotAccepter} from './screenshot-accepter';
+export {default as StaticAccepterConfirm} from './static-accepter-confirm';

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

@@ -10,6 +10,7 @@ import ControlButton from '../../controls/control-button';
 import ControlSelect from '../../controls/selects/control';
 import RetrySwitcher from '../../retry-switcher';
 import {DiffModes} from '../../../../constants/diff-modes';
+import {staticImageAccepterPropType} from "../../../modules/static-image-accepter";
 
 export default class ScreenshotAccepterHeader extends Component {
     static propTypes = {
@@ -28,7 +29,9 @@ export default class ScreenshotAccepterHeader extends Component {
         onActiveImageChange: PropTypes.func.isRequired,
         onScreenshotAccept: PropTypes.func.isRequired,
         onScreenshotUndo: PropTypes.func.isRequired,
-        onShowMeta: PropTypes.func.isRequired
+        onShowMeta: PropTypes.func.isRequired,
+        onCommitChanges: PropTypes.func.isRequired,
+        staticImageAccepter: staticImageAccepterPropType
     };
 
     constructor(props) {
@@ -96,6 +99,11 @@ export default class ScreenshotAccepterHeader extends Component {
         event.preventDefault();
 
         const {images, retryIndex, onScreenshotAccept} = this.props;
+
+        if (retryIndex === null) {
+            return;
+        }
+
         const imageId = images[retryIndex].id;
 
         onScreenshotAccept(imageId);
@@ -109,11 +117,16 @@ export default class ScreenshotAccepterHeader extends Component {
 
     render() {
         const {actions, view, images, stateNameImageIds, retryIndex,
-            showMeta, onClose, onRetryChange, onShowMeta,
-            totalImages, acceptedImages
+            showMeta, onClose, onRetryChange, onShowMeta, onCommitChanges,
+            totalImages, acceptedImages, staticImageAccepter
         } = this.props;
         const resultIds = uniqBy(images, 'id').map((image) => image.parentId);
         const isArrowControlDisabed = stateNameImageIds.length <= 1;
+        const staticAccepterDelayedImages = staticImageAccepter.accepterDelayedImages.length;
+        const imagesToCommitCount = staticImageAccepter.imagesToCommitCount + staticAccepterDelayedImages;
+        const isUndoEnabled = staticImageAccepter.enabled
+            ? Boolean(staticImageAccepter.accepterDelayedImages.length)
+            : Boolean(acceptedImages);
 
         return (
             <Fragment>
@@ -148,7 +161,7 @@ export default class ScreenshotAccepterHeader extends Component {
                         <ControlButton
                             label="⎌ Undo"
                             title="Revert last updated screenshot"
-                            isDisabled={!acceptedImages}
+                            isDisabled={!isUndoEnabled}
                             isSuiteControl={true}
                             extendClassNames="screenshot-accepter__undo-btn"
                             handler={this.handleScreenUndo}
@@ -189,6 +202,14 @@ export default class ScreenshotAccepterHeader extends Component {
                             handler={onClose}
                             dataTestId="screenshot-accepter-switch-accept-mode"
                         />
+                        {staticImageAccepter.enabled && <ControlButton
+                            label={`Commit ${imagesToCommitCount} images`}
+                            title="Send request with imagesInfo to 'staticImageAccepter.serviceUrl'"
+                            isActive={imagesToCommitCount > 0}
+                            isDisabled={imagesToCommitCount === 0}
+                            isSuiteControl={true}
+                            handler={onCommitChanges}
+                        />}
                         <ProgressBar done={acceptedImages} total={totalImages} dataTestId="screenshot-accepter-progress-bar"/>
                     </div>
                 </header>