Add view in browser button

lib/static/new-ui/app/App.tsx

@@ -1,4 +1,4 @@
-import {Eye, ListCheck} from '@gravity-ui/icons';
+import {Picture, ListCheck} from '@gravity-ui/icons';
 import {ThemeProvider, Toaster, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
 import '@gravity-ui/uikit/styles/fonts.css';
 import '@gravity-ui/uikit/styles/styles.css';
@@ -35,7 +35,7 @@ const pages = [
     {
         title: 'Visual Checks',
         url: PathNames.visualChecks,
-        icon: Eye,
+        icon: Picture,
         element: <VisualChecksPage/>,
         children: [<Route key={'image'} path='/visual-checks/:hash?/:browser?/:attempt?/:stateName?' element={<VisualChecksPage/>} />]
     }

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

@@ -3,7 +3,7 @@ import React, {KeyboardEventHandler, MouseEventHandler, ReactNode} from 'react';
 
 interface IconButtonProps {
     icon: ReactNode;
-    tooltip: ReactNode;
+    tooltip?: ReactNode;
     onClick?: MouseEventHandler;
     onKeyDown?: KeyboardEventHandler;
     view?: ButtonView;

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

@@ -63,7 +63,7 @@ export function SettingsPanel(): ReactNode {
 
     sections.push(
         <PanelSection key="base-host" title={'Base Host'} description={<>URLs in Meta and in test steps&apos; commands are affected by this.</>}>
-            <TextInput onChange={onBaseHostChange} value={baseHost} hasClear/>
+            <TextInput onChange={onBaseHostChange} value={baseHost} hasClear qa="base-host" />
         </PanelSection>
     );
 

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

@@ -1,10 +1,11 @@
-import {ArrowRotateLeft, ChevronRight} from '@gravity-ui/icons';
+import _ from 'lodash';
+import {ArrowRotateLeft, ChevronRight, Eye} from '@gravity-ui/icons';
 import {Button, Checkbox, Icon} from '@gravity-ui/uikit';
 import classNames from 'classnames';
 import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {getToggledCheckboxState, isCheckboxChecked, isCheckboxIndeterminate} from '@/common-utils';
+import {getToggledCheckboxState, getUrlWithBase, isCheckboxChecked, isCheckboxIndeterminate} from '@/common-utils';
 import {EntityType, TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 import {toggleBrowserCheckbox, toggleGroupCheckbox, toggleSuiteCheckbox, thunkRunSuite} from '@/static/modules/actions';
 import {getAreCheckboxesNeeded, getBrowsers, getBrowsersState, getSuites} from '@/static/new-ui/store/selectors';
@@ -14,6 +15,7 @@ import {RunTestsFeature} from '@/constants';
 import {TestSpec} from '@/adapters/tool/types';
 import styles from './index.module.css';
 import {useIsRunning} from '@/static/new-ui/hooks/useIsRunning';
+import {State} from '@/static/new-ui/types/store';
 
 interface TreeViewItemTitleProps {
     className?: string;
@@ -50,7 +52,25 @@ const getVisibleSuiteBrowsers = (
 export function TreeViewItemTitle({item}: TreeViewItemTitleProps): React.JSX.Element {
     const dispatch = useDispatch();
     const areCheckboxesNeeded = useSelector(getAreCheckboxesNeeded);
+
+    const suiteUrl = useSelector<State, string | undefined>((state): string | undefined => {
+        if (!state.tree.browsers.byId[item.entityId]) {
+            return;
+        }
+
+        const lastResult = _.last(state.tree.browsers.byId[item.entityId].resultIds);
+
+        if (lastResult) {
+            const result = state.tree.results.byId[lastResult];
+
+            return result.metaInfo?.url ?? result.suiteUrl;
+        }
+
+        return;
+    });
+
     const groups = useSelector(state => state.tree.groups.byId);
+    const baseHost = useSelector(state => state.view.baseHost);
     const checkStatus = useSelector(state => getItemCheckStatus(state, item));
     const isVisualChecksPage = /\/visual-checks/.test(location.hash); // @todo: remove after implement search on visual checks page
 
@@ -169,6 +189,20 @@ export function TreeViewItemTitle({item}: TreeViewItemTitleProps): React.JSX.Ele
         <div className={classNames(styles.actionsContainer, {
             [styles['actions-container--no-checkbox']]: !areCheckboxesNeeded || isVisualChecksPage
         })}>
+            {item.entityType === EntityType.Browser && suiteUrl && (
+                <Button
+                    view='flat'
+                    title="View in browser"
+                    href={getUrlWithBase(suiteUrl, baseHost)}
+                    target="_blank"
+                    className={styles.actionButton}
+                    qa="view-in-browser-tree"
+                >
+                    <Button.Icon>
+                        <Icon data={Eye}/>
+                    </Button.Icon>
+                </Button>
+            )}
             <ClipboardButton
                 className={styles.actionButton}
                 size='m'

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

@@ -1,4 +1,4 @@
-import {ArrowRightArrowLeft, ArrowUturnCcwLeft, Check, Eye} from '@gravity-ui/icons';
+import {ArrowRightArrowLeft, ArrowUturnCcwLeft, Check, Picture} from '@gravity-ui/icons';
 import {Button, Hotkey, Icon, SegmentedRadioGroup as RadioButton, Select, Flex} from '@gravity-ui/uikit';
 import React, {ReactNode, createRef, useCallback, useEffect, useRef} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
@@ -170,7 +170,7 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
                             onClick={onVisualChecks}
                             qa="go-visual-button"
                         >
-                            <Icon data={Eye}/>Go to Visual Checks<Hotkey className={isFocused ? styles.hotkey : styles.hotkeyHidden} view="light" value="g" />
+                            <Icon data={Picture}/>Go to Visual Checks<Hotkey className={isFocused ? styles.hotkey : styles.hotkeyHidden} view="light" value="g" />
                         </Button>
                         {isEditScreensAvailable && (
                             <>

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

@@ -1,8 +1,9 @@
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useMemo} from 'react';
 import _ from 'lodash';
 import * as icons from '@gravity-ui/icons';
 
 import {useSelector} from 'react-redux';
+import {getUrlWithBase} from '@/common-utils';
 import {ResultEntityCommon} from '@/static/new-ui/types/store';
 import {getCurrentResult} from '@/static/new-ui/features/suites/selectors';
 import {getIconByStatus} from '@/static/new-ui/utils';
@@ -24,12 +25,25 @@ const getSuiteDuration = (suite: ResultEntityCommon): string | undefined => {
 
 export const TestStatusBar = (): ReactNode => {
     const suite = useSelector(getCurrentResult);
+    const baseHost = useSelector(state => state.view.baseHost);
 
     if (!suite) {
         return null;
     }
 
-    const badges = suite.attachments?.find(({type}) => type === AttachmentType.Badges) as BadgesAttachment;
+    const badges = useMemo(() => {
+        const list = [...(suite.attachments?.find(({type}) => type === AttachmentType.Badges) as BadgesAttachment)?.list || []];
+
+        if (suite?.suiteUrl) {
+            list.unshift({
+                title: 'View in browser',
+                icon: 'Eye',
+                url: getUrlWithBase(suite.metaInfo?.url ?? suite.suiteUrl, baseHost)
+            });
+        }
+
+        return list;
+    }, [suite.metaInfo?.url, suite?.suiteUrl, baseHost]);
 
     return (
         <div className={styles['test-status-bar']}>
@@ -43,9 +57,9 @@ export const TestStatusBar = (): ReactNode => {
                     {getSuiteDuration(suite)}
                 </div>
             </div>
-            {(badges?.list && badges.list.length > 0) && (
+            {(badges && badges.length > 0) && (
                 <div className={styles['test-status-bar__badges']} data-qa="suite-badges">
-                    {badges.list.map((badge: BadgeType) => (
+                    {badges.map((badge: BadgeType) => (
                         <Badge
                             key={badge.title}
                             title={badge.title}

test/func/fixtures/fixtures.testplane.conf.js

@@ -30,6 +30,7 @@ module.exports.getFixturesConfig = (projectDir, projectName) => {
             'html-reporter-tester': {
                 enabled: true,
                 path: fixturesPath,
+                baseHost: 'https://example.com:123',
                 generateBadges: () => [
                     {
                         title: 'TASK-128',

test/func/fixtures/plugins/.testplane.conf.js

@@ -7,6 +7,7 @@ const {getFixturesConfig} = require('../fixtures.testplane.conf');
 module.exports = _.merge(getFixturesConfig(__dirname, 'plugins'), {
     plugins: {
         'html-reporter-tester': {
+            baseHost: 'https://example.com:123',
             pluginsEnabled: true,
             plugins: [
                 {

test/func/fixtures/testplane/.testplane.conf.js

@@ -12,6 +12,7 @@ module.exports = _.merge(getFixturesConfig(__dirname, 'testplane'), {
         },
         'html-reporter-tester': {
                 enabled: true,
+                baseHost: 'https://example.com:123',
                 path: 'report',
                 diffMode: '3-up-scaled-to-fit',
                 generateBadges: () => [

test/func/tests/.testplane.conf.js

@@ -59,6 +59,7 @@ const config = _.merge(commonConfig, {
         },
         'html-reporter-tester': {
             enabled: true,
+            baseHost: 'https://example.com:123',
             path: `reports/${projectUnderTest}`,
             diffMode: '3-up',
             yandexMetrika: {

test/func/tests/common/new-ui/suites-page/view-in-browser.testplane.js

@@ -0,0 +1,48 @@
+if (process.env.TOOL === 'testplane') {
+    describe(process.env.TOOL || 'Default', () => {
+        describe('New UI', () => {
+            describe('View in browser button behavior', () => {
+                it('should exist and have correct link on startup', async ({browser}) => {
+                    const treeItem = await browser.$('[data-list-item*="test with image comparison diff/chrom"]');
+                    await treeItem.moveTo();
+
+                    const eyeElement = await treeItem.$('a[data-qa="view-in-browser-tree"]');
+                    const link = await eyeElement.getAttribute('href');
+
+                    await expect(eyeElement).toBeClickable();
+                    expect(link).toBe('https://example.com:123/fixtures/testplane/index.html');
+                });
+
+                it('should change in accordance to the baseHost in header', async ({browser}) => {
+                    const settings = await browser.$('[data-qa="footer-item-settings"]');
+                    await settings.click();
+
+                    const baseHostInput = await browser.$('[data-qa="base-host"] input');
+                    await baseHostInput.setValue('http://some-host.dev:33');
+
+                    await settings.click();
+
+                    const treeItem = await browser.$('[data-list-item*="test with image comparison diff/chrom"]');
+                    await treeItem.moveTo();
+
+                    const eyeElement = await treeItem.$('a[data-qa="view-in-browser-tree"]');
+                    const link = await eyeElement.getAttribute('href');
+
+                    expect(link).toBe('http://some-host.dev:33/fixtures/testplane/index.html');
+                });
+
+                it('should exist in suite page', async ({browser}) => {
+                    const treeItem = await browser.$('[data-list-item*="test with image comparison diff/chrom"]');
+                    await treeItem.click();
+
+                    const eyeElement = await browser.$('[data-qa="suite-badges"] a');
+                    const link = await eyeElement.getAttribute('href');
+
+                    await expect(eyeElement).toBeClickable();
+
+                    expect(link).toBe('https://example.com:123/fixtures/testplane/index.html');
+                });
+            });
+        });
+    });
+}