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/checked-statuses.ts

@@ -0,0 +1,11 @@
+export const UNCHECKED = 0;
+export const INDETERMINATE = 0.5;
+export const CHECKED = 1;
+
+export default {
+    UNCHECKED,
+    INDETERMINATE,
+    CHECKED
+};
+
+export type CheckStatus = typeof UNCHECKED | typeof INDETERMINATE | typeof CHECKED;

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/accept-opened-button.jsx

@@ -8,13 +8,18 @@ import {getAcceptableOpenedImageIds} from '../../modules/selectors/tree';
 
 class AcceptOpenedButton extends Component {
     static propTypes = {
+        isSuiteContol: PropTypes.bool,
         // from store
         processing: PropTypes.bool.isRequired,
         acceptableOpenedImageIds: PropTypes.arrayOf(PropTypes.string).isRequired
     };
 
     _acceptOpened = () => {
-        this.props.actions.acceptOpened(this.props.acceptableOpenedImageIds);
+        if (this.props.isStaticImageAccepterEnabled) {
+            this.props.actions.staticAccepterStageScreenshot(this.props.acceptableOpenedImageIds);
+        } else {
+            this.props.actions.acceptOpened(this.props.acceptableOpenedImageIds);
+        }
     };
 
     render() {
@@ -24,6 +29,7 @@ class AcceptOpenedButton extends Component {
             label="Accept opened"
             isDisabled={!acceptableOpenedImageIds.length || processing}
             handler={this._acceptOpened}
+            isSuiteControl={this.props.isSuiteContol}
         />;
     }
 }
@@ -32,7 +38,8 @@ export default connect(
     (state) => {
         return {
             processing: state.processing,
-            acceptableOpenedImageIds: getAcceptableOpenedImageIds(state)
+            acceptableOpenedImageIds: getAcceptableOpenedImageIds(state),
+            isStaticImageAccepterEnabled: state.staticImageAccepter.enabled,
         };
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})

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';
@@ -26,6 +26,14 @@ class ControlButtons extends Component {
         actionsDict[value].call();
     }
 
+    _getShowTestsOptions() {
+        const viewModes = Object.values(ViewMode).map(value => ({value, content: capitalize(value)}));
+
+        return this.props.isStatisImageAccepterEnabled
+            ? viewModes
+            : viewModes.filter(viewMode => ![ViewMode.STAGED, ViewMode.COMMITED].includes(viewMode.value));
+    }
+
     render() {
         const {actions, view} = this.props;
 
@@ -36,7 +44,7 @@ class ControlButtons extends Component {
                     label="Show tests"
                     value={view.viewMode}
                     handler={actions.changeViewMode}
-                    options = {Object.values(ViewMode).map((value) => ({value, content: capitalize(value)}))}
+                    options = {this._getShowTestsOptions()}
                 />
                 <ControlSelect 
                     size='m'
@@ -73,6 +81,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,63 @@
 '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 ControlButton from './control-button';
+import AcceptOpenedButton from './accept-opened-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'>
+                <AcceptOpenedButton isSuiteContol={true} />
+                <ControlButton
+                    label={`Commit ${staticImageAccepter.imagesToCommitCount} images`}
+                    title="Send request with imagesInfo to 'staticImageAccepter.serviceUrl'"
+                    isDisabled={staticImageAccepter.imagesToCommitCount === 0}
+                    isSuiteControl={true}
+                    handler={onCommitChanges}
                 />
-                <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';