chore(new-ui): implement new suite title and basics of visual checks …

…mode

lib/static/modules/action-names.ts

@@ -62,5 +62,6 @@ export default {
     TOGGLE_BROWSER_CHECKBOX: 'TOGGLE_BROWSER_CHECKBOX',
     SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE',
     SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED',
-    SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED'
+    SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED',
+    VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE: 'VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE'
 } as const;

lib/static/modules/actions/index.js

@@ -15,6 +15,7 @@ import performanceMarks from '../../../constants/performance-marks';
 export * from './static-accepter';
 export * from './suites-page';
 export * from './suites';
+export * from './visual-checks-page';
 
 export const createNotification = (id, status, message, props = {}) => {
     const notificationProps = {

lib/static/modules/actions/visual-checks-page.ts

@@ -0,0 +1,13 @@
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+
+export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, {
+    namedImageId: string;
+}>;
+
+export const visualChecksPageSetCurrentNamedImage = (namedImageId: string): VisualChecksPageSetCurrentNamedImageAction => {
+    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: {namedImageId}};
+};
+
+export type VisualChecksPageAction =
+    | VisualChecksPageSetCurrentNamedImageAction;

lib/static/modules/default-state.ts

@@ -94,7 +94,12 @@ export default Object.assign({config: configDefaults}, {
     },
     app: {
         isInitialized: false,
-        currentSuiteId: null
+        suitesPage: {
+            currentBrowserId: null
+        },
+        visualChecksPage: {
+            currentNamedImageId: null
+        }
     },
     ui: {
         suitesPage: {

lib/static/modules/reducers/index.js

@@ -27,6 +27,7 @@ import stopping from './stopping';
 import progressBar from './bottom-progress-bar';
 import staticImageAccepter from './static-image-accepter';
 import suitesPage from './suites-page';
+import visualChecksPage from './visual-checks-page';
 import isInitialized from './is-initialized';
 
 // The order of specifying reducers is important.
@@ -60,5 +61,6 @@ export default reduceReducers(
     plugins,
     progressBar,
     suitesPage,
+    visualChecksPage,
     isInitialized
 );

lib/static/modules/reducers/suites-page.ts

@@ -6,7 +6,7 @@ import {applyStateUpdate} from '@/static/modules/utils/state';
 export default (state: State, action: SuitesPageAction): State => {
     switch (action.type) {
         case actionNames.SUITES_PAGE_SET_CURRENT_SUITE:
-            return applyStateUpdate(state, {app: {currentSuiteId: action.payload.suiteId}}) as State;
+            return applyStateUpdate(state, {app: {suitesPage: {currentBrowserId: action.payload.suiteId}}}) as State;
         case actionNames.SUITES_PAGE_SET_SECTION_EXPANDED: {
             return applyStateUpdate(state, {
                 ui: {

lib/static/modules/reducers/visual-checks-page.ts

@@ -0,0 +1,13 @@
+import {State} from '@/static/new-ui/types/store';
+import actionNames from '@/static/modules/action-names';
+import {applyStateUpdate} from '@/static/modules/utils/state';
+import {VisualChecksPageAction} from '@/static/modules/actions';
+
+export default (state: State, action: VisualChecksPageAction): State => {
+    switch (action.type) {
+        case actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE:
+            return applyStateUpdate(state, {app: {visualChecksPage: {currentNamedImageId: action.payload.namedImageId}}}) as State;
+        default:
+            return state;
+    }
+};

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

@@ -46,7 +46,7 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
 export const AttemptPicker = connect((state: State) => {
     let resultIds: string[] = [];
     let currentResultId = '';
-    const browserId = state.app.currentSuiteId;
+    const browserId = state.app.suitesPage.currentBrowserId;
 
     if (browserId && state.tree.browsers.byId[browserId]) {
         resultIds = state.tree.browsers.byId[browserId].resultIds;

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

@@ -0,0 +1,11 @@
+.card {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hint {
+    color: var(--g-color-private-black-400);
+    font-weight: 500;
+}

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

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+
+import {Card, CardProps} from '.';
+import styles from './TextHintCard.module.css';
+
+interface TextHintCardProps extends CardProps {
+    hint: string;
+}
+
+export function TextHintCard(props: TextHintCardProps): ReactNode {
+    return <Card className={classNames(styles.card, props.className)}>
+        <span className={styles.hint}>{props.hint}</span>
+    </Card>;
+}

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

@@ -0,0 +1,8 @@
+.card {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px 20px 20px;
+    overflow: scroll;
+    position: relative;
+}

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

@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+
+import {Card, CardProps} from '.';
+import styles from './UiCard.module.css';
+
+export function UiCard(props: CardProps): ReactNode {
+    return <Card className={classNames(styles.card, props.className)}>{props.children}</Card>;
+}

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

@@ -3,10 +3,10 @@
     position: relative;
 }
 
-.card {
-    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(9, 9, 11, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
-}
+.card {}
 
 .wrapper {
     overflow: hidden;
+    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(9, 9, 11, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
+    border-radius: 10px;
 }

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-interface CardProps {
+export interface CardProps {
     className?: string;
     children?: React.ReactNode;
 }

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

@@ -0,0 +1,78 @@
+.container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+@container (max-width: 500px) {
+    .container {
+        flex-wrap: wrap-reverse;
+    }
+}
+
+.breadcrumbs {
+    font-weight: 500;
+    color: var(--g-color-private-black-400);
+    font-size: 15px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.separator {
+    margin: 0 4px;
+    display: inline-block;
+    width: 16px;
+    position: relative;
+}
+
+.invisible-space {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+}
+
+.content {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+}
+
+.title-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 4px;
+}
+
+.labels-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.label:global(.g-label_theme_danger) {
+    --_--text-color: var(--color-pink-600);
+    --_--bg-color: var(--color-pink-100);
+}
+
+.label :global(.g-label__content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 4px;
+    font-size: 15px;
+}
+
+.pagination-container {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.counter {
+    font-weight: 500;
+    color: var(--g-color-private-black-400);
+    font-size: 15px;
+}

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

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+import {Button, Icon, Label} from '@gravity-ui/uikit';
+import {Camera, ChevronRight, PlanetEarth, ChevronUp, ChevronDown} from '@gravity-ui/icons';
+
+import {TestStatus} from '@/constants';
+import styles from './index.module.css';
+
+interface SuiteTitleProps {
+    className?: string;
+}
+
+interface SuiteTitlePropsInternal extends SuiteTitleProps {
+    suitePath: string[];
+    browserName: string;
+    stateName?: string;
+    imageStatus?: TestStatus;
+    index: number;
+    totalItems: number;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+
+export function SuiteTitle(props: SuiteTitlePropsInternal): ReactNode {
+    const suiteName = props.suitePath[props.suitePath.length - 1];
+    const suitePath = props.suitePath.slice(0, -1);
+
+    let stateNameLabelTheme: 'normal' | 'danger' | 'success' = 'normal';
+    if (props.imageStatus === TestStatus.FAIL || props.imageStatus === TestStatus.ERROR) {
+        stateNameLabelTheme = 'danger';
+    } else if (props.imageStatus === TestStatus.SUCCESS) {
+        stateNameLabelTheme = 'success';
+    }
+
+    return <div className={classNames(styles.container, props.className)}>
+        <div className={styles.content}>
+            <div className={classNames(styles.breadcrumbs)}>
+                {suitePath.map((item, index) => (
+                    <div key={index} className={styles.breadcrumbsItem}>
+                        {item}
+                        {index !== suitePath.length - 1 &&
+                            <div className={styles.separator}>
+                                <ChevronRight height={11}/>
+                                <span className={styles.invisibleSpace}>&nbsp;</span>
+                            </div>}
+                    </div>
+                ))}
+            </div>
+            <div className={styles.titleContainer}>
+                <h2 className={classNames('text-display-1')}>
+                    {suiteName ?? 'Unknown Suite'}
+                </h2>
+                <div className={styles.labelsContainer}>
+                    <Label theme={'normal'} size={'xs'} className={styles.label}><PlanetEarth/>{props.browserName}
+                    </Label>
+                    {props.stateName && <Label theme={stateNameLabelTheme} size={'xs'} className={classNames(styles.label)}><Camera/>{props.stateName}</Label>}
+                </div>
+            </div>
+        </div>
+        <div className={styles.paginationContainer}>
+            <span className={styles.counter}>{props.index === -1 ? '–' : props.index + 1}/{props.totalItems}</span>
+            <Button view={'flat'} disabled={props.index === -1 || props.index === 0} onClick={props.onPrevious}><Icon
+                data={ChevronUp}/></Button>
+            <Button view={'flat'} disabled={props.index === -1 || props.index === props.totalItems - 1} onClick={props.onNext}><Icon
+                data={ChevronDown}/></Button>
+        </div>
+    </div>;
+}

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

@@ -26,6 +26,9 @@ interface TreeListItemProps<T> {
 }
 
 export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
+    const indent = props.list.structure.itemsState[props.id].indentation;
+    const hasChildren = (props.list.structure.itemsById[props.id] as {hasChildren?: boolean}).hasChildren;
+
     return <Box
         spacing={{pt: 1}}
     >
@@ -34,7 +37,7 @@ export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
                 [styles['tree-view-item--error']]: props.isFailed
             }])}
             activeOnHover={true}
-            style={{'--indent': props.list.structure.itemsState[props.id].indentation} as React.CSSProperties}
+            style={{'--indent': indent + Number(!hasChildren)} as React.CSSProperties}
             {...getItemRenderState({
                 id: props.id,
                 list: props.list,

lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.module.css

@@ -0,0 +1,3 @@
+.icon {
+    opacity: .6;
+}

lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.tsx

@@ -1,6 +1,8 @@
 import {isString} from 'lodash';
 import React, {ReactNode} from 'react';
 
+import styles from './BrowserIcon.module.css';
+
 const valueToIcon = {
     google: 'chrome',
     chrome: 'chrome',
@@ -19,7 +21,7 @@ const valueToIcon = {
 } as const;
 
 export function BrowserIcon({name: browser}: {name: string}): ReactNode {
-    const getIcon = (iconName: string): ReactNode => <i className={`fa fa-${iconName}`} aria-hidden="true" />;
+    const getIcon = (iconName: string): ReactNode => <i className={`fa fa-${iconName} ${styles.icon}`} aria-hidden="true" />;
 
     if (!isString(browser)) {
         return getIcon('browser');

lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx

@@ -1,5 +1,5 @@
-import {Globe} from '@gravity-ui/icons';
-import {Button, Flex, Select, SelectRenderControlProps, SelectRenderOption} from '@gravity-ui/uikit';
+import {PlanetEarth} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Select, SelectRenderControlProps, SelectRenderOption} from '@gravity-ui/uikit';
 import React, {useState, useEffect, ReactNode} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -109,8 +109,8 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
     };
 
     const renderControl = ({onClick, onKeyDown, ref}: SelectRenderControlProps): React.JSX.Element => {
-        return <Button ref={ref} onClick={onClick} extraProps={{onKeyDown}} view={'outlined'} style={{width: 28}}>
-            <Globe/>
+        return <Button ref={ref} onClick={onClick} extraProps={{onKeyDown}} view={'outlined'}>
+            <Icon data={PlanetEarth}/>
         </Button>;
     };
 

lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx

@@ -42,7 +42,7 @@ export function CollapsibleSectionInternal(props: CollapsibleSectionInternalProp
 }
 
 export const CollapsibleSection = connect((state: State, props: CollapsibleSectionProps) => {
-    const browserId = state.app.currentSuiteId;
+    const browserId = state.app.suitesPage.currentBrowserId;
     let sectionId = '';
 
     if (browserId && state.tree.browsers.byId[browserId]) {