feat: implement toolbar for selecting tests and quick actions

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/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;
 

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/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/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;
 }

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

@@ -5,11 +5,9 @@ import {Card, CardProps} from '.';
 import styles from './TextHintCard.module.css';
 
 interface TextHintCardProps extends CardProps {
-    hint: string;
+    children: ReactNode;
 }
 
 export function TextHintCard(props: TextHintCardProps): ReactNode {
-    return <Card className={classNames(styles.card, props.className)}>
-        <span className={styles.hint}>{props.hint}</span>
-    </Card>;
+    return <Card className={classNames(styles.card, props.className)}>{props.children}</Card>;
 }

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

@@ -0,0 +1,16 @@
+import {Button, ButtonView, Tooltip} from '@gravity-ui/uikit';
+import React, {ReactNode} from 'react';
+
+interface IconButtonProps {
+    icon: ReactNode;
+    tooltip: string;
+    onClick?: () => void;
+    view?: ButtonView;
+    disabled?: boolean;
+}
+
+export function IconButton(props: IconButtonProps): ReactNode {
+    return <Tooltip content={props.tooltip} placement={'top'} openDelay={0}>
+        <Button view={props.view} onClick={props.onClick} disabled={props.disabled}>{props.icon}</Button>
+    </Tooltip>;
+}

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

@@ -1,13 +1,13 @@
-import classnames from 'classnames';
 import React, {ReactNode, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import styles from './index.module.css';
+import {Screenshot} from '@/static/new-ui/components/Screenshot';
+import {ImageFile} from '@/types';
 
 const DEFAULT_ZOOM_LEVEL = 3;
 
 interface ImageWithMagnifierProps {
-    src: string;
-    alt: string;
+    image: ImageFile;
     className?: string;
     style?: React.CSSProperties;
     magnifierHeight?: number;
@@ -18,9 +18,7 @@ interface ImageWithMagnifierProps {
 }
 
 export function ImageWithMagnifier({
-    src,
-    alt,
-    className = '',
+    image,
     style,
     magnifierHeight = 150,
     magnifierWidth = 150,
@@ -94,7 +92,7 @@ export function ImageWithMagnifier({
             display: showMagnifier ? '' : 'none',
             height: `${magnifierHeight}px`,
             width: `${magnifierWidth}px`,
-            backgroundImage: `url('${src}')`,
+            backgroundImage: `url('${image.path}')`,
             top: `${mouseY - magnifierHeight / 2}px`,
             left: `${mouseX - magnifierWidth / 2}px`,
             backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
@@ -104,16 +102,13 @@ export function ImageWithMagnifier({
     }, [showMagnifier, imgWidth, imgHeight, x, y]);
 
     return <div>
-        <img
-            src={src}
-            className={classnames(className)}
-            style={style}
-            alt={alt}
+        <Screenshot
+            image={image}
+            containerStyle={style}
+            ref={imgRef}
             onMouseEnter={(e): void => mouseEnter(e)}
             onMouseLeave={(e): void => mouseLeave(e)}
-            onMouseMove={(e): void => mouseMove(e)}
-            ref={imgRef}
-        />
+            onMouseMove={(e): void => mouseMove(e)}/>
         {createPortal(<div
             className={styles.magnifier}
             style={magnifierStyle}

lib/static/new-ui/components/MainLayout/index.module.css

@@ -19,3 +19,43 @@
 .footer-item--active {
     color: var(--gn-aside-header-item-current-icon-color) !important;
 }
+
+.hint-card-container {
+    padding: 10px;
+    height: 100%;
+}
+
+.hint-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.hint-card-icon {
+    width: 40px;
+}
+
+.hint-card-title {
+    color: #000;
+    margin-top: 16px;
+}
+
+.hint-card-hints-container {
+    max-width: 450px;
+    margin-top: 8px;
+}
+
+.hint-card-hint {
+    margin-top: 12px;
+    display: flex;
+}
+
+.hint-card-check {
+    flex-shrink: 0;
+    margin-right: 8px;
+    color: var(--g-color-base-brand);
+}
+
+.hint-card-hint-text {
+    line-height: 1.4;
+}

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

@@ -9,6 +9,11 @@ import {SettingsPanel} from '@/static/new-ui/components/SettingsPanel';
 import TestplaneIcon from '../../../icons/testplane-mono.svg';
 import styles from './index.module.css';
 import {Footer} from './Footer';
+import {State} from '@/static/new-ui/types/store';
+import {TextHintCard} from '@/static/new-ui/components/Card/TextHintCard';
+import EmptyReport from '../../../icons/empty-report.svg';
+import {Check} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
 
 export enum PanelId {
     Settings = 'settings',
@@ -25,7 +30,7 @@ export interface MainLayoutProps {
     menuItems: MenuItem[];
 }
 
-export function MainLayout(props: MainLayoutProps): JSX.Element {
+export function MainLayout(props: MainLayoutProps): ReactNode {
     const navigate = useNavigate();
     const location = useLocation();
 
@@ -39,6 +44,9 @@ export function MainLayout(props: MainLayoutProps): JSX.Element {
 
     const isInitialized = useSelector(getIsInitialized);
 
+    const browsersById = useSelector((state: State) => state.tree.browsers.byId);
+    const isReportEmpty = isInitialized && Object.keys(browsersById).length === 0;
+
     const [visiblePanel, setVisiblePanel] = useState<PanelId | null>(null);
     const onFooterItemClick = (item: GravityMenuItem): void => {
         visiblePanel ? setVisiblePanel(null) : setVisiblePanel(item.id as PanelId);
@@ -52,7 +60,25 @@ export function MainLayout(props: MainLayoutProps): JSX.Element {
         menuItems={gravityMenuItems}
         customBackground={<div className={styles.asideHeaderBg}/>}
         customBackgroundClassName={styles.asideHeaderBgWrapper}
-        renderContent={(): React.ReactNode => props.children}
+        renderContent={(): React.ReactNode => {
+            if (isReportEmpty) {
+                return <div className={styles.hintCardContainer}>
+                    <TextHintCard className={styles.hintCard}>
+                        <img src={EmptyReport} alt='icon' className={styles.hintCardIcon}/>
+                        <span className={classNames('text-header-1', styles.hintCardTitle)}>This report is empty</span>
+                        <div className={styles.hintCardHintsContainer}>
+                            {[
+                                '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.hintCardHint}><Icon data={Check} className={styles.hintCardCheck}/><div className={styles.hintCardHintText}>{hintText}</div></div>)}
+                        </div>
+                    </TextHintCard>
+                </div>;
+            }
+
+            return props.children;
+        }}
         hideCollapseButton={true}
         renderFooter={(): ReactNode => <Footer visiblePanel={visiblePanel} onFooterItemClick={onFooterItemClick}/>}
         panelItems={[{

lib/static/new-ui/components/Screenshot/index.module.css

@@ -13,5 +13,5 @@
     width: 100%;
     object-fit: contain;
     object-position: top left;
-    filter: drop-shadow(1px 0 0 #ccc) drop-shadow(-1px 0 0 #ccc) drop-shadow(0 1px 0 #ccc) drop-shadow(0 -1px 0 #ccc);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 }