chore: show basic test info in new ui (#597)

* fix: fix tree view item icon positioning

* feat: implement show basic test info in new ui

* fix: fix e2e tests and minor visual glitches

* fix: fix e2e test

* fix: fix e2e test screenshot

* fix: fix review issues and tweak new ui visually

lib/common-utils.ts

@@ -44,7 +44,7 @@ const statusPriority: TestStatus[] = [
 export const logger = pick(console, ['log', 'warn', 'error']);
 
 export const isSuccessStatus = (status: TestStatus): boolean => status === SUCCESS;
-export const isFailStatus = (status: TestStatus): boolean => status === FAIL;
+export const isFailStatus = (status: TestStatus): status is TestStatus.FAIL => status === FAIL;
 export const isIdleStatus = (status: TestStatus): boolean => status === IDLE;
 export const isRunningStatus = (status: TestStatus): boolean => status === RUNNING;
 export const isErrorStatus = (status: TestStatus): boolean => status === ERROR;
@@ -83,6 +83,10 @@ export const getUrlWithBase = (url: string | undefined, base: string | undefined
             userUrl.port = baseUrl.port;
             userUrl.username = baseUrl.username;
             userUrl.password = baseUrl.password;
+
+            for (const [key, value] of baseUrl.searchParams) {
+                userUrl.searchParams.append(key, value);
+            }
         }
 
         return userUrl.href;

lib/constants/test-statuses.ts

@@ -18,7 +18,9 @@ export enum TestStatus {
     /**
      * @note used in new UI only for rendering icons
      */
-    RETRY = 'retry'
+    RETRY = 'retry',
+    /** @note used to display tests that have both failed screenshots and errors */
+    FAIL_ERROR = 'fail_error',
 }
 
 export const IDLE = TestStatus.IDLE;
@@ -29,6 +31,7 @@ export const FAIL = TestStatus.FAIL;
 export const ERROR = TestStatus.ERROR;
 export const SKIPPED = TestStatus.SKIPPED;
 export const UPDATED = TestStatus.UPDATED;
+export const FAIL_ERROR = TestStatus.FAIL_ERROR;
 /**
  * @note used by staticImageAccepter only
  */

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

@@ -1,7 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import PropTypes from 'prop-types';
 
-import MetaInfoContent from '../../section/body/meta-info/content';
+import {MetaInfo as MetaInfoContent} from '@/static/new-ui/components/MetaInfo';
 
 export default class ScreenshotAccepterMeta extends Component {
     static propTypes = {
@@ -23,6 +23,7 @@ export default class ScreenshotAccepterMeta extends Component {
                 <div className="screenshot-accepter__meta container">
                     <MetaInfoContent
                         resultId={image.parentId}
+                        qa={'meta-info'}
                     />
                 </div>
                 <hr className='tab__separator' />

lib/static/components/retry-switcher/index.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import RetrySwitcherItem from './item';
+import {AttemptPickerItem} from '@/static/new-ui/components/AttemptPickerItem';
 
 export default class RetrySwitcher extends Component {
     static propTypes = {
@@ -22,7 +22,7 @@ export default class RetrySwitcher extends Component {
                 {resultIds.map((resultId, ind) => {
                     const isActive = ind === retryIndex;
 
-                    return <RetrySwitcherItem
+                    return <AttemptPickerItem
                         key={resultId}
                         resultId={resultId}
                         isActive={isActive}

lib/static/components/section/body/meta-info/index.jsx

@@ -1,8 +1,10 @@
+import {Card} from '@gravity-ui/uikit';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import PropTypes from 'prop-types';
-import MetaInfoContent from './content';
+
+import {MetaInfo as MetaInfoContent} from '@/static/new-ui/components/MetaInfo';
 import * as actions from '../../../../modules/actions';
 import Details from '../../../details';
 
@@ -21,7 +23,7 @@ class MetaInfo extends Component {
 
         return <Details
             title='Meta'
-            content={<MetaInfoContent resultId={resultId}/>}
+            content={<Card className='details__card' view='filled'><MetaInfoContent resultId={resultId} qa={'meta-info'}/></Card>}
             onClick={this.onToggleMetaInfo}
         />;
     }

lib/static/modules/action-names.ts

@@ -60,5 +60,6 @@ export default {
     UPDATE_BOTTOM_PROGRESS_BAR: 'UPDATE_BOTTOM_PROGRESS_BAR',
     GROUP_TESTS_BY_KEY: 'GROUP_TESTS_BY_KEY',
     TOGGLE_BROWSER_CHECKBOX: 'TOGGLE_BROWSER_CHECKBOX',
-    SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE'
+    SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE',
+    SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED'
 } as const;

lib/static/modules/actions/index.js

@@ -14,6 +14,7 @@ import performanceMarks from '../../../constants/performance-marks';
 
 export * from './static-accepter';
 export * from './suites-page';
+export * from './suites';
 
 export const createNotification = (id, status, message, props = {}) => {
     const notificationProps = {
@@ -235,7 +236,6 @@ export const suiteBegin = (suite) => ({type: actionNames.SUITE_BEGIN, payload: s
 export const testBegin = (test) => ({type: actionNames.TEST_BEGIN, payload: test});
 export const testResult = (result) => ({type: actionNames.TEST_RESULT, payload: result});
 export const toggleStateResult = (result) => ({type: actionNames.TOGGLE_STATE_RESULT, payload: result});
-export const changeTestRetry = (result) => ({type: actionNames.CHANGE_TEST_RETRY, payload: result});
 export const toggleLoading = (payload) => ({type: actionNames.TOGGLE_LOADING, payload});
 export const closeSections = (payload) => ({type: actionNames.CLOSE_SECTIONS, payload});
 export const runFailed = () => ({type: actionNames.RUN_FAILED_TESTS});

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

@@ -1,6 +1,22 @@
-import actionNames from '../action-names';
-import {SuitesPageSetCurrentSuiteAction} from '@/static/modules/reducers/suites-page';
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+
+export type SuitesPageSetCurrentSuiteAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_SUITE, {
+    suiteId: string;
+}>;
 
 export const suitesPageSetCurrentSuite = (suiteId: string): SuitesPageSetCurrentSuiteAction => {
     return {type: actionNames.SUITES_PAGE_SET_CURRENT_SUITE, payload: {suiteId}};
 };
+
+type SetSectionExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_SECTION_EXPANDED, {
+    sectionId: string;
+    isExpanded: boolean;
+}>;
+
+export const setSectionExpandedState = (payload: SetSectionExpandedStateAction['payload']): SetSectionExpandedStateAction =>
+    ({type: actionNames.SUITES_PAGE_SET_SECTION_EXPANDED, payload});
+
+export type SuitesPageAction =
+    | SuitesPageSetCurrentSuiteAction
+    | SetSectionExpandedStateAction;

lib/static/modules/actions/suites.ts

@@ -0,0 +1,10 @@
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+
+interface ChangeTestRetryPayload {
+    browserId: string;
+    retryIndex: number;
+}
+
+export const changeTestRetry = (result: ChangeTestRetryPayload): Action<typeof actionNames.CHANGE_TEST_RETRY, ChangeTestRetryPayload> =>
+    ({type: actionNames.CHANGE_TEST_RETRY, payload: result});

lib/static/modules/default-state.ts

@@ -52,7 +52,9 @@ export default Object.assign({config: configDefaults}, {
     apiValues: {
         toolName: ToolName.Testplane,
         extraItems: {},
-        metaInfoExtenders: {}
+        metaInfoExtenders: {},
+        imagesSaver: {saveImg: () => ''},
+        reportsSaver: {saveReportData: () => ''}
     },
     loading: {},
     modals: [],
@@ -93,5 +95,10 @@ export default Object.assign({config: configDefaults}, {
     app: {
         isInitialized: false,
         currentSuiteId: null
+    },
+    ui: {
+        suitesPage: {
+            expandedSectionsById: {}
+        }
     }
 }) satisfies State;