} customBackgroundClassName={styles.asideHeaderBgWrapper}
renderContent={(): React.ReactNode => props.children} hideCollapseButton={true}
/>;
}
diff --git a/lib/static/new-ui/components/MetaInfo/index.module.css b/lib/static/new-ui/components/MetaInfo/index.module.css
new file mode 100644
index 000000000..a45bdff52
--- /dev/null
+++ b/lib/static/new-ui/components/MetaInfo/index.module.css
@@ -0,0 +1,11 @@
+.meta-info {
+ padding-right: 30px;
+}
+
+.meta-info-value {
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+}
diff --git a/lib/static/new-ui/components/MetaInfo/index.tsx b/lib/static/new-ui/components/MetaInfo/index.tsx
new file mode 100644
index 000000000..7693cc767
--- /dev/null
+++ b/lib/static/new-ui/components/MetaInfo/index.tsx
@@ -0,0 +1,146 @@
+import path from 'path';
+
+import {DefinitionList} from '@gravity-ui/components';
+import {mapValues, isObject, omitBy, isEmpty} from 'lodash';
+import React, {ReactNode} from 'react';
+import {connect} from 'react-redux';
+
+import {isUrl, getUrlWithBase, getRelativeUrl} from '@/common-utils';
+import {ResultEntity, State} from '@/static/new-ui/types/store';
+import {HtmlReporterValues} from '@/plugin-api';
+import {ReporterConfig} from '@/types';
+import styles from './index.module.css';
+
+const serializeMetaValues = (metaInfo: Record
): Record =>
+ mapValues(metaInfo, (v): string => {
+ if (isObject(v)) {
+ return JSON.stringify(v);
+ }
+
+ return v?.toString() ?? 'No value';
+ });
+
+interface MetaInfoItem {
+ label: string;
+ content: string;
+ url?: string;
+ copyText?: string;
+}
+
+export interface MetaInfoProps {
+ resultId: string,
+ qa?: string;
+}
+
+interface MetaInfoInternalProps extends MetaInfoProps {
+ result: ResultEntity;
+ testName: string;
+ metaInfoBaseUrls: ReporterConfig['metaInfoBaseUrls'];
+ apiValues: Pick;
+ baseHost: string;
+}
+
+function MetaInfoInternal(props: MetaInfoInternalProps): ReactNode {
+ const resolveMetaInfoExtenders = (): Record => {
+ const {testName, apiValues: {extraItems, metaInfoExtenders}} = props;
+
+ return omitBy(mapValues(metaInfoExtenders, (extender) => {
+ const stringifiedFn = extender.startsWith('return') ? extender : `return ${extender}`;
+
+ return new Function(stringifiedFn)()({testName}, extraItems);
+ }), isEmpty);
+ };
+
+ const {result, metaInfoBaseUrls, baseHost} = props;
+
+ const serializedMetaValues = serializeMetaValues({
+ ...result.metaInfo,
+ ...resolveMetaInfoExtenders()
+ });
+
+ const metaInfoItems: MetaInfoItem[] = Object.entries(serializedMetaValues).map(([key, value]) => ({
+ label: key,
+ content: value
+ }));
+
+ const metaInfoItemsWithResolvedUrls = metaInfoItems.map((item) => {
+ if (item.label === 'url' || metaInfoBaseUrls[item.label] === 'auto') {
+ const url = getUrlWithBase(getRelativeUrl(item.content), baseHost);
+ return {
+ label: item.label,
+ content: getRelativeUrl(item.content),
+ url,
+ copyText: url
+ };
+ }
+
+ if (metaInfoBaseUrls[item.label]) {
+ const baseUrl = metaInfoBaseUrls[item.label];
+ const resolvedUrl = isUrl(baseUrl) ? getUrlWithBase(item.content, baseUrl) : path.join(baseUrl, item.content);
+ // For file paths/arbitrary strings show them unchanged. If original value was URL, we don't want to mislead
+ // user by showing old URL, actually pointing to resolved URL, so we show an actual resolved URL here.
+
+ const displayName = isUrl(item.content) ? resolvedUrl : item.content;
+ return {
+ label: item.label,
+ content: displayName,
+ copyText: displayName,
+ url: resolvedUrl
+ };
+ }
+
+ if (!isUrl(item.content)) {
+ return item;
+ }
+
+ return {
+ label: item.label,
+ content: item.content,
+ url: item.content
+ };
+ });
+
+ const hasUrlMetaInfoItem = metaInfoItemsWithResolvedUrls.some(item => item.label === 'url');
+ if (!hasUrlMetaInfoItem && result.suiteUrl) {
+ metaInfoItemsWithResolvedUrls.push({
+ label: 'url',
+ content: getRelativeUrl(result.suiteUrl),
+ url: getUrlWithBase(getRelativeUrl(result.suiteUrl), baseHost)
+ });
+ }
+
+ return {
+ if (item.url) {
+ return {
+ name: item.label,
+ content:
+ {item.content}
+ ,
+ copyText: item.copyText ?? item.content
+ };
+ }
+
+ return {
+ name: item.label,
+ content: {item.content},
+ copyText: item.copyText ?? item.content
+ };
+ })
+ }/>;
+}
+
+export const MetaInfo = connect(
+ ({tree, config: {metaInfoBaseUrls}, apiValues, view}: State, {resultId}: MetaInfoProps) => {
+ const result = tree.results.byId[resultId];
+ const browser = tree.browsers.byId[result.parentId];
+
+ return {
+ result,
+ testName: browser.parentId,
+ metaInfoBaseUrls,
+ apiValues,
+ baseHost: view.baseHost
+ };
+ }
+)(MetaInfoInternal);
diff --git a/lib/static/new-ui/features/suites/components/CollapsibleSection/index.module.css b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.module.css
new file mode 100644
index 000000000..9a206edd3
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.module.css
@@ -0,0 +1,16 @@
+.expand-arrow {
+ transition: opacity .1s ease, transform .1s ease;
+}
+
+.summary {
+ cursor: pointer;
+ user-select: none;
+}
+
+.summary:hover {
+ opacity: .8;
+}
+
+.expand-arrow--expanded {
+ transform: rotate(180deg);
+}
diff --git a/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
new file mode 100644
index 000000000..409c065c9
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
@@ -0,0 +1,56 @@
+import {Disclosure, Flex} from '@gravity-ui/uikit';
+import React, {ReactElement, ReactNode} from 'react';
+import classNames from 'classnames';
+import {ChevronUp} from '@gravity-ui/icons';
+
+import styles from './index.module.css';
+import {connect} from 'react-redux';
+import {State} from '@/static/new-ui/types/store';
+import {getSectionId} from '@/static/new-ui/features/suites/components/CollapsibleSection/utils';
+import {bindActionCreators} from 'redux';
+import * as actions from '@/static/modules/actions';
+
+interface CollapsibleSectionProps {
+ id: string;
+ title: string;
+ body: ReactNode;
+}
+
+interface CollapsibleSectionInternalProps extends CollapsibleSectionProps{
+ sectionId: string;
+ expanded: boolean;
+ actions: typeof actions;
+}
+
+export function CollapsibleSectionInternal(props: CollapsibleSectionInternalProps): ReactNode {
+ const onUpdateHandler = (): void => {
+ props.actions.setSectionExpandedState({sectionId: props.sectionId, isExpanded: !props.expanded});
+ };
+
+ return
+
+ {(): ReactElement => {
+ return
+ {props.title}
+
+ ;
+ }}
+
+ {props.body}
+ ;
+}
+
+export const CollapsibleSection = connect((state: State, props: CollapsibleSectionProps) => {
+ const browserId = state.app.currentSuiteId;
+ let sectionId = '';
+
+ if (browserId && state.tree.browsers.byId[browserId]) {
+ const attemptIndex = state.tree.browsers.stateById[browserId].retryIndex;
+ sectionId = getSectionId(browserId, attemptIndex, props.id);
+ }
+
+ return {
+ sectionId,
+ expanded: state.ui.suitesPage.expandedSectionsById[sectionId] ?? true
+ };
+}, (dispatch) => ({actions: bindActionCreators(actions, dispatch)}))(CollapsibleSectionInternal);
diff --git a/lib/static/new-ui/features/suites/components/CollapsibleSection/utils.ts b/lib/static/new-ui/features/suites/components/CollapsibleSection/utils.ts
new file mode 100644
index 000000000..1d576321e
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/CollapsibleSection/utils.ts
@@ -0,0 +1,3 @@
+export const getSectionId = (_browserId: string, _attemptIndex: number, id: string): string => {
+ return id;
+};
diff --git a/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css b/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css
new file mode 100644
index 000000000..fa41fdf77
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css
@@ -0,0 +1,30 @@
+.heading {}
+
+.heading:hover .copy-button {
+ opacity: 1;
+}
+
+.separator {
+ margin: 0 4px;
+ display: inline-block;
+ width: 16px;
+ position: relative;
+}
+
+.invisible-space {
+ position: absolute;
+}
+
+.copy-button {
+ margin-left: 8px;
+ opacity: 0;
+ transition: opacity 0.1s ease;
+}
+
+.title-part-wrapper {}
+
+.title-part-wrapper:last-child {
+ align-items: center;
+ display: inline-flex;
+ white-space: nowrap;
+}
diff --git a/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx b/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx
new file mode 100644
index 000000000..c9cd05ffc
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx
@@ -0,0 +1,45 @@
+import React, {ReactNode} from 'react';
+import {connect} from 'react-redux';
+import {State} from '@/static/new-ui/types/store';
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {ChevronRight} from '@gravity-ui/icons';
+
+import styles from './index.module.css';
+import classNames from 'classnames';
+
+interface SuiteTitleProps {
+ className?: string;
+}
+
+interface SuiteTitlePropsInternal extends SuiteTitleProps {
+ suitePath: string[];
+}
+
+function SuiteTitleInternal(props: SuiteTitlePropsInternal): ReactNode {
+ return
+
+ {props.suitePath.map((item, index) => (
+
+ {item}
+ {index !== props.suitePath.length - 1 ?
+
:
+ }
+
+ ))}
+
+ ;
+}
+
+export const SuiteTitle = connect((state: State) => {
+ let suitePath: string[] = [];
+ const browserId = state.app.currentSuiteId;
+
+ if (browserId && state.tree.browsers.byId[browserId]) {
+ const browserName = state.tree.browsers.byId[browserId].name;
+ const suiteId = state.tree.browsers.byId[browserId].parentId;
+
+ suitePath = [...state.tree.suites.byId[suiteId].suitePath, browserName];
+ }
+
+ return {suitePath};
+})(SuiteTitleInternal);
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
index 2d0823863..38980d7fa 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
@@ -1,6 +1,37 @@
-.controls-row {
- align-items: center;
+.collapsible-section__body {
+ padding: 10px 30px 10px 2px;
+ word-break: break-all;
+}
+
+.collapsible-section__body a:link, .collapsible-section__body a:visited {
+ color: var(--color-link);
+}
+
+.collapsible-section__body a:hover {
+ color: var(--color-link-hover);
+}
+
+.card {
+ background-color: #fff;
display: flex;
- height: 28px;
- margin-top: var(--g-spacing-2);
+ flex-direction: column;
+ margin: 10px;
+ padding: 15px 20px 20px;
+ border-radius: 10px;
+}
+
+.card__title {
+ margin-bottom: 8px !important;
+}
+
+.tree-view-card {
+ height: calc(100vh - 20px);
+ margin-right: 2px;
+ gap: 8px;
+}
+
+.test-view-card {
+ margin-left: 2px;
+ max-height: calc(100vh - 20px);
+ gap: 12px;
}
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
index bc522d40f..af2b144f6 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -1,30 +1,68 @@
import {Flex} from '@gravity-ui/uikit';
import React, {ReactNode} from 'react';
import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
import {TestNameFilter} from '@/static/new-ui/features/suites/components/TestNameFilter';
import {SuitesTreeView} from '@/static/new-ui/features/suites/components/SuitesTreeView';
import {TestStatusFilter} from '@/static/new-ui/features/suites/components/TestStatusFilter';
import {BrowsersSelect} from '@/static/new-ui/features/suites/components/BrowsersSelect';
+import {SuiteTitle} from '@/static/new-ui/features/suites/components/SuiteTitle';
+import * as actions from '@/static/modules/actions';
+import {CollapsibleSection} from '@/static/new-ui/features/suites/components/CollapsibleSection';
+import {MetaInfo} from '@/static/new-ui/components/MetaInfo';
+import {State} from '@/static/new-ui/types/store';
+import {Card} from '@/static/new-ui/components/Card';
+import {AttemptPicker} from '../../../../components/AttemptPicker';
-function SuitesPageInternal(): ReactNode {
+import styles from './index.module.css';
+import classNames from 'classnames';
+
+interface SuitesPageProps {
+ actions: typeof actions;
+ currentResultId: string;
+}
+
+function SuitesPageInternal(props: SuitesPageProps): ReactNode {
return
-
- Suites
+
+ Suites
-
-
-
+
-
+
+
+
+
+
+ props.actions.changeTestRetry({browserId, retryIndex})} />
+
+
+