feat: implement toolbar for selecting tests and quick actions

lib/static/components/state/index.jsx

@@ -80,7 +80,7 @@ class State extends Component {
 
     onScreenshotUndo = () => {
         if (this.props.isStaticImageAccepterEnabled) {
-            this.props.actions.staticAccepterUnstageScreenshot(this.props.imageId);
+            this.props.actions.staticAccepterUnstageScreenshot([this.props.imageId]);
         } else {
             this.props.actions.undoAcceptImage(this.props.imageId);
         }

lib/static/modules/action-names.ts

@@ -69,5 +69,7 @@ export default {
     UPDATE_LOADING_PROGRESS: 'UPDATE_LOADING_PROGRESS',
     UPDATE_LOADING_VISIBILITY: 'UPDATE_LOADING_VISIBILITY',
     UPDATE_LOADING_TITLE: 'UPDATE_LOADING_TITLE',
-    UPDATE_LOADING_IS_IN_PROGRESS: 'UPDATE_LOADING_IS_IN_PROGRESS'
+    UPDATE_LOADING_IS_IN_PROGRESS: 'UPDATE_LOADING_IS_IN_PROGRESS',
+    SELECT_ALL: 'SELECT_ALL',
+    DESELECT_ALL: 'DESELECT_ALL'
 } as const;

lib/static/modules/actions/index.js

@@ -246,6 +246,8 @@ export const toggleLoading = (payload) => ({type: actionNames.TOGGLE_LOADING, pa
 export const closeSections = (payload) => ({type: actionNames.CLOSE_SECTIONS, payload});
 export const runFailed = () => ({type: actionNames.RUN_FAILED_TESTS});
 export const expandAll = () => ({type: actionNames.VIEW_EXPAND_ALL});
+export const selectAll = () => ({type: actionNames.SELECT_ALL});
+export const deselectAll = () => ({type: actionNames.DESELECT_ALL});
 export const expandErrors = () => ({type: actionNames.VIEW_EXPAND_ERRORS});
 export const expandRetries = () => ({type: actionNames.VIEW_EXPAND_RETRIES});
 export const collapseAll = () => ({type: actionNames.VIEW_COLLAPSE_ALL});

lib/static/modules/actions/static-accepter.ts

@@ -26,9 +26,9 @@ export const staticAccepterStageScreenshot = (imageIds: string[]): StaticAccepte
     return {type: actionNames.STATIC_ACCEPTER_STAGE_SCREENSHOT, payload: imageIds};
 };
 
-type StaticAccepterUnstageScreenshotAction = Action<typeof actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT, {imageId: string}>;
-export const staticAccepterUnstageScreenshot = (imageId: string): StaticAccepterUnstageScreenshotAction => {
-    return {type: actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT, payload: {imageId}};
+type StaticAccepterUnstageScreenshotAction = Action<typeof actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT, string[]>;
+export const staticAccepterUnstageScreenshot = (imageIds: string[]): StaticAccepterUnstageScreenshotAction => {
+    return {type: actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT, payload: imageIds};
 };
 
 type StaticAccepterOpenConfirmAction = Action<typeof actionNames.OPEN_MODAL, {

lib/static/modules/reducers/static-image-accepter.js

@@ -58,14 +58,14 @@ export default (state, action) => {
         }
 
         case actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT: {
-            const {imageId} = action.payload;
-
             const acceptableImagesDiff = {};
             const diff = set({}, ['staticImageAccepter', 'acceptableImages'], acceptableImagesDiff);
             const imagesToCommitCount = get(state, ['staticImageAccepter', 'imagesToCommitCount']);
 
-            set(acceptableImagesDiff, [imageId, 'commitStatus'], null);
-            set(diff, ['staticImageAccepter', 'imagesToCommitCount'], imagesToCommitCount - 1);
+            set(diff, ['staticImageAccepter', 'imagesToCommitCount'], imagesToCommitCount - action.payload.length);
+            for (const imageId of action.payload) {
+                set(acceptableImagesDiff, [imageId, 'commitStatus'], null);
+            }
 
             return applyStateUpdate(state, diff);
         }

lib/static/modules/reducers/tree/index.js

@@ -20,6 +20,7 @@ import {isCommitedStatus, isStagedStatus, isSuccessStatus} from '../../../../com
 import {applyStateUpdate, ensureDiffProperty, getUpdatedProperty} from '../../utils/state';
 import {changeNodeState, getStaticAccepterStateNameImages, resolveUpdatedStatuses, updateImagesStatus} from './helpers';
 import * as staticImageAccepter from '../../static-image-accepter';
+import {CHECKED, UNCHECKED} from '@/constants/checked-statuses';
 
 export default ((state, action) => {
     const diff = {tree: {}};
@@ -147,6 +148,18 @@ export default ((state, action) => {
             return applyStateUpdate(state, diff);
         }
 
+        case actionNames.SELECT_ALL: {
+            changeAllNodesState(state.tree, {checkStatus: CHECKED}, diff.tree);
+
+            return applyStateUpdate(state, diff);
+        }
+
+        case actionNames.DESELECT_ALL: {
+            changeAllNodesState(state.tree, {checkStatus: UNCHECKED}, diff.tree);
+
+            return applyStateUpdate(state, diff);
+        }
+
         case actionNames.CLOSE_SECTIONS: {
             const closeImageIds = action.payload;
 
@@ -242,26 +255,37 @@ export default ((state, action) => {
 
         case actionNames.STATIC_ACCEPTER_UNSTAGE_SCREENSHOT: {
             const {tree, view} = state;
-            const {imageId} = action.payload;
-            const originalStatus = get(state, ['staticImageAccepter', 'acceptableImages', imageId, 'originalStatus']);
+            const imageIdsToUnstage = action.payload;
+
+            const failedBrowserIds = [];
+            const failedSuiteIds = [];
+            const imageIds = [];
 
-            const failedResultId = tree.images.byId[imageId].parentId;
-            const failedBrowserId = tree.results.byId[failedResultId].parentId;
-            const failedSuiteId = tree.browsers.byId[failedBrowserId].parentId;
+            for (const imageId of imageIdsToUnstage) {
+                const originalStatus = get(state, ['staticImageAccepter', 'acceptableImages', imageId, 'originalStatus']);
 
-            ensureDiffProperty(diff, ['tree', 'results', 'byId']);
+                const failedResultId = tree.images.byId[imageId].parentId;
+                const failedBrowserId = tree.results.byId[failedResultId].parentId;
+                const failedSuiteId = tree.browsers.byId[failedBrowserId].parentId;
 
-            changeImageStatus(tree, imageId, originalStatus, diff.tree);
-            changeNodeState(tree.results.byId, failedResultId, {status: FAIL}, diff.tree.results.byId);
+                ensureDiffProperty(diff, ['tree', 'results', 'byId']);
+
+                changeImageStatus(tree, imageId, originalStatus, diff.tree);
+                changeNodeState(tree.results.byId, failedResultId, {status: FAIL}, diff.tree.results.byId);
+
+                failedBrowserIds.push(failedBrowserId);
+                failedSuiteIds.push(failedSuiteId);
+                imageIds.push(imageId);
+            }
 
-            failSuites(tree, failedSuiteId, diff.tree);
+            failSuites(tree, failedSuiteIds, diff.tree);
 
-            calcSuitesOpenness({tree, expand: view.expand, suiteIds: [failedSuiteId], diff: diff.tree});
-            calcBrowsersOpenness({tree, expand: view.expand, browserIds: [failedBrowserId], diff: diff.tree});
-            calcImagesOpenness({tree, expand: view.expand, imageIds: [imageId], diff: diff.tree});
+            calcSuitesOpenness({tree, expand: view.expand, suiteIds: failedSuiteIds, diff: diff.tree});
+            calcBrowsersOpenness({tree, expand: view.expand, browserIds: failedBrowserIds, diff: diff.tree});
+            calcImagesOpenness({tree, expand: view.expand, imageIds, diff: diff.tree});
 
-            calcBrowsersShowness({tree, view, browserIds: [failedBrowserId], diff: diff.tree});
-            calcSuitesShowness({tree, suiteIds: [failedSuiteId], diff: diff.tree});
+            calcBrowsersShowness({tree, view, browserIds: failedBrowserIds, diff: diff.tree});
+            calcSuitesShowness({tree, suiteIds: failedSuiteIds, diff: diff.tree});
 
             return applyStateUpdate(state, diff);
         }

lib/static/modules/selectors/tree.js

@@ -3,8 +3,16 @@ import {createSelector} from 'reselect';
 import {getViewMode} from './view';
 import {ViewMode} from '../../../constants/view-modes';
 import {isIdleStatus} from '../../../common-utils';
-import {isNodeFailed, isNodeSuccessful, isAcceptable, iterateSuites} from '../utils';
-import {getAllRootSuiteIds, getBrowsers, getImages, getResults, getSuites} from '@/static/new-ui/store/selectors';
+import {isNodeFailed, isNodeSuccessful, isAcceptable, iterateSuites, isScreenRevertable} from '../utils';
+import {
+    getAllRootSuiteIds,
+    getBrowsers,
+    getImages, getIsGui,
+    getIsStaticImageAccepterEnabled,
+    getResults,
+    getSuites
+} from '@/static/new-ui/store/selectors';
+import {CHECKED} from '@/constants/checked-statuses';
 
 const getSuitesStates = (state) => state.tree.suites.stateById;
 const getBrowserIds = (state) => state.tree.browsers.allIds;
@@ -173,6 +181,43 @@ export const getFailedOpenedImageIds = createSelector(
     (activeImages) => activeImages.filter(isNodeFailed).map((image) => image.id)
 );
 
+export const getVisibleBrowserIds = createSelector(
+    getBrowserIds, getBrowsersStates,
+    (browserIds, browsersStates) => browserIds.filter((browserId) => browsersStates[browserId].shouldBeShown)
+);
+
+export const getSelectedBrowserIds = createSelector(
+    getBrowserIds, getBrowsers, getBrowsersStates,
+    (browserIds, browsers, browsersStates) => {
+        return browserIds.filter((browserId) => browsersStates[browserId].checkStatus === CHECKED);
+    }
+);
+
+const getAcceptableOrRevertableImages = (browserIds, browsersById, resultsById, imagesById, isStaticImageAccepterEnabled, gui) => {
+    const visibleResultIds = browserIds.map(browserId => last(browsersById[browserId].resultIds));
+
+    return visibleResultIds.flatMap(resultId => {
+        return resultsById[resultId].imageIds
+            .map(imageId => imagesById[imageId])
+            .filter(image => isAcceptable(image) || isScreenRevertable({
+                image,
+                isLastResult: true,
+                isStaticImageAccepterEnabled,
+                gui
+            }));
+    });
+};
+
+export const getVisibleImages = createSelector(
+    getVisibleBrowserIds, getBrowsers, getResults, getImages, getIsStaticImageAccepterEnabled, getIsGui,
+    getAcceptableOrRevertableImages
+);
+
+export const getSelectedImages = createSelector(
+    getSelectedBrowserIds, getBrowsers, getResults, getImages, getIsStaticImageAccepterEnabled, getIsGui,
+    getAcceptableOrRevertableImages
+);
+
 export const getVisibleRootSuiteIds = createSelector(
     getRootSuiteIds, getSuitesStates,
     (rootSuiteIds, suitesStates) => rootSuiteIds.filter((suiteId) => suitesStates[suiteId].shouldBeShown)

lib/static/new-ui.css

@@ -72,3 +72,8 @@ body {
     /* Sets spinner color */
     --g-color-line-brand: var(--g-color-text-hint);
 }
+
+.text-hint {
+    color: var(--g-color-private-black-400);
+    font-weight: 500;
+}

lib/static/new-ui/components/AssertViewResult/index.tsx

@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import {connect} from 'react-redux';
 
-import {ImageEntity, State} from '@/static/new-ui/types/store';
+import {ImageEntity} from '@/static/new-ui/types/store';
 import {DiffModeId, TestStatus} from '@/constants';
 import {DiffViewer} from '../DiffViewer';
 import {Screenshot} from '@/static/new-ui/components/Screenshot';
@@ -43,6 +43,6 @@ function AssertViewResultInternal({result, diffMode, style}: AssertViewResultPro
     return null;
 }
 
-export const AssertViewResult = connect((state: State) => ({
+export const AssertViewResult = connect(state => ({
     diffMode: state.view.diffMode
 }))(AssertViewResultInternal);

lib/static/new-ui/components/AssertViewStatus/index.tsx

@@ -1,45 +1,12 @@
 import React, {ReactNode} from 'react';
-import {ImageEntity, ImageEntityError} from '@/static/new-ui/types/store';
-import {TestStatus} from '@/constants';
-import {Icon} from '@gravity-ui/uikit';
-import {
-    ArrowRightArrowLeft,
-    CircleCheck,
-    FileCheck,
-    FileExclamation,
-    FileLetterX,
-    FilePlus,
-    SquareExclamation,
-    SquareXmark,
-    FileArrowUp
-} from '@gravity-ui/icons';
-import {isInvalidRefImageError, isNoRefImageError} from '@/common-utils';
+import {ImageEntity} from '@/static/new-ui/types/store';
 import styles from './index.module.css';
+import {getAssertViewStatusIcon, getAssertViewStatusMessage} from '@/static/new-ui/utils/assert-view-status';
 
 interface AssertViewStatusProps {
     image: ImageEntity | null;
 }
 
 export function AssertViewStatus({image}: AssertViewStatusProps): ReactNode {
-    let status = <><Icon data={SquareXmark} width={16}/><span>Failed to compare</span></>;
-
-    if (image === null) {
-        status = <><Icon data={SquareExclamation} width={16}/><span>Image is absent</span></>;
-    } else if (image.status === TestStatus.SUCCESS) {
-        status = <><Icon data={CircleCheck} width={16}/><span>Images match</span></>;
-    } else if (image.status === TestStatus.STAGED) {
-        status = <><Icon data={FilePlus} width={16}/><span>Image is staged</span></>;
-    } else if (image.status === TestStatus.COMMITED) {
-        status = <><Icon data={FileArrowUp} width={16}/><span>Image was committed</span></>;
-    } else if (isNoRefImageError((image as ImageEntityError).error)) {
-        status = <><Icon data={FileLetterX} width={16}/><span>Reference not found</span></>;
-    } else if (isInvalidRefImageError((image as ImageEntityError).error)) {
-        status = <><Icon data={FileExclamation} width={16}/><span>Reference is broken</span></>;
-    } else if (image.status === TestStatus.FAIL) {
-        status = <><Icon data={ArrowRightArrowLeft} width={16}/><span>Difference detected</span></>;
-    } else if (image.status === TestStatus.UPDATED) {
-        status = <><Icon data={FileCheck} width={16}/><span>Reference updated</span></>;
-    }
-
-    return <div className={styles.container}>{status}</div>;
+    return <div className={styles.container}>{getAssertViewStatusIcon(image)}<span>{getAssertViewStatusMessage(image)}</span></div>;
 }

lib/static/new-ui/components/AttemptPicker/index.tsx

@@ -2,7 +2,6 @@ import React, {ReactNode} from 'react';
 import {connect, useDispatch, useSelector} from 'react-redux';
 import {ArrowRotateRight} from '@gravity-ui/icons';
 
-import {State} from '@/static/new-ui/types/store';
 import {AttemptPickerItem} from '@/static/new-ui/components/AttemptPickerItem';
 import styles from './index.module.css';
 import classNames from 'classnames';
@@ -26,9 +25,9 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
 
     const dispatch = useDispatch();
     const currentBrowser = useSelector(getCurrentBrowser);
-    const isRunTestsAvailable = useSelector((state: State) => state.app.availableFeatures)
+    const isRunTestsAvailable = useSelector(state => state.app.availableFeatures)
         .find(feature => feature.name === RunTestsFeature.name);
-    const isRunning = useSelector((state: State) => state.running);
+    const isRunning = useSelector(state => state.running);
 
     const onAttemptPickHandler = (resultId: string, attemptIndex: number): void => {
         if (!props.browserId || currentResultId === resultId) {
@@ -64,7 +63,7 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
     </div>;
 }
 
-export const AttemptPicker = connect((state: State) => {
+export const AttemptPicker = connect(state => {
     let resultIds: string[] = [];
     let currentResultId = '';
     const browserId = state.app.suitesPage.currentBrowserId;

lib/static/new-ui/components/Card/AnimatedAppearCard.tsx

@@ -4,10 +4,9 @@ import cardStyles from './index.module.css';
 import styles from './AnimatedAppearCard.module.css';
 import classNames from 'classnames';
 import {useSelector} from 'react-redux';
-import {State} from '@/static/new-ui/types/store';
 
 export function AnimatedAppearCard(): ReactNode {
-    const isInitialized = useSelector((state: State) => state.app.isInitialized);
+    const isInitialized = useSelector(state => state.app.isInitialized);
 
     return <div className={classNames(cardStyles.commonCard, styles.animatedAppearCard, {[styles.hidden]: isInitialized})}>
         <div className={styles.backgroundOverlay}></div>

lib/static/new-ui/components/Card/EmptyReportCard.module.css

@@ -0,0 +1,39 @@
+.container {
+    padding: 10px;
+    height: 100%;
+}
+
+.hint-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.empty-report-icon {
+    width: 40px;
+}
+
+.card-title {
+    color: #000;
+    margin-top: 16px;
+}
+
+.hints-container {
+    max-width: 450px;
+    margin-top: 8px;
+}
+
+.hint {
+    margin-top: 12px;
+    display: flex;
+}
+
+.hint-item-icon {
+    flex-shrink: 0;
+    margin-right: 8px;
+    color: var(--g-color-base-brand);
+}
+
+.hint-item-text {
+    line-height: 1.4;
+}

lib/static/new-ui/components/Card/EmptyReportCard.tsx

@@ -0,0 +1,27 @@
+import {TextHintCard} from '@/static/new-ui/components/Card/TextHintCard';
+import EmptyReport from '../../../icons/empty-report.svg';
+import classNames from 'classnames';
+import {Icon} from '@gravity-ui/uikit';
+import {Check} from '@gravity-ui/icons';
+import React, {ReactNode} from 'react';
+
+import styles from './EmptyReportCard.module.css';
+
+export function EmptyReportCard(): ReactNode {
+    return <div className={styles.container}>
+        <TextHintCard className={styles.hintCard}>
+            <img src={EmptyReport} alt='icon' className={styles.emptyReportIcon}/>
+            <span className={classNames('text-header-1', styles.cardTitle)}>This report is empty</span>
+            <div className={styles.hintsContainer}>
+                {[
+                    'Check if your project contains any tests',
+                    'Check if the tool you are using is configured correctly and is able to find your tests',
+                    'Check logs to see if some critical error has occurred and prevented report from collecting any results'
+                ].map((hintText, index) => <div key={index} className={styles.hint}>
+                    <Icon data={Check} className={styles.hintItemIcon}/>
+                    <div className={styles.hintItemText}>{hintText}</div>
+                </div>)}
+            </div>
+        </TextHintCard>
+    </div>;
+}

lib/static/new-ui/components/Card/TextHintCard.module.css

@@ -3,9 +3,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
-
-.hint {
-    color: var(--g-color-private-black-400);
-    font-weight: 500;
+    composes: text-hint from global;
 }