fix: improve working with browser versions and old URLs (#738)

* fix: show all browser versions if only browser id is specified in url

* fix: fix empty browsers select when using with browser versions

* fix: show version tag for browsers with multiple versions

* feat: implemented seamless migration from old URL in new UI

Author: shadowusr

.eslintignore

@@ -17,3 +17,4 @@ tmp
 **/playwright-report
 **/html-report/*
 examples/**
+wt/**

lib/static/modules/query-params.js

@@ -88,6 +88,18 @@ export function decodeBrowsers(browsers) {
         .map(decode);
 }
 
+export function expandBrowserVersions(filteredBrowsers, availableBrowsers) {
+    return filteredBrowsers.map(filteredBrowser => {
+        if (isEmpty(filteredBrowser.versions)) {
+            const availableBrowser = availableBrowsers.find(b => b.id === filteredBrowser.id);
+            if (availableBrowser) {
+                return {id: filteredBrowser.id, versions: [...availableBrowser.versions]};
+            }
+        }
+        return filteredBrowser;
+    });
+}
+
 export function setFilteredBrowsers(browsers) {
     const urlExtendedWithBrowsers = appendQuery(
         window.location.href,

lib/static/modules/reducers/filters.ts

@@ -6,6 +6,7 @@ import {DiffModeId, DiffModes, ViewMode} from '@/constants';
 import {BrowserItem} from '@/types';
 import * as localStorageWrapper from '@/static/modules/local-storage-wrapper';
 import {getViewQuery} from '@/static/modules/custom-queries';
+import {expandBrowserVersions} from '@/static/modules/query-params';
 import {isEmpty} from 'lodash';
 import {applyStateUpdate} from '@/static/modules/utils/state';
 
@@ -33,6 +34,8 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
 
             if (isEmpty(viewQuery.filteredBrowsers)) {
                 viewQuery.filteredBrowsers = state.browsers;
+            } else {
+                viewQuery.filteredBrowsers = expandBrowserVersions(viewQuery.filteredBrowsers as BrowserItem[], state.browsers);
             }
 
             const newState = applyStateUpdate(

lib/static/new-ui.css

@@ -110,4 +110,44 @@ a:hover {
 
 b {
     font-weight: 500;
-}
+}
+
+
+.toaster {
+    border: 1px solid rgb(229, 231, 235);
+    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
+    margin-right: 10px;
+    margin-bottom: 20px !important;
+}
+
+@keyframes toast-appear {
+    from {
+        opacity: 0;
+        scale: 0.95;
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+.toaster:global(.g-toast-animation-desktop_enter_active) {
+    animation: toast-appear .15s forwards ease;
+}
+
+.toaster:global(.g-toast-animation-desktop_exit_active) {
+    animation: toast-appear .15s forwards ease reverse;
+}
+
+.toaster :global(.g-toast__title) {
+    font-weight: 450;
+}
+
+.toaster :global(.g-toast__content) {
+    color: var(--g-color-private-black-400);
+}
+
+.toaster__icon--error {
+    color: var(--g-color-private-red-600-solid);
+}

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

@@ -1,6 +1,6 @@
 import {PlanetEarth} from '@gravity-ui/icons';
-import {Button, Flex, Icon, Select, SelectRenderControlProps, SelectRenderOption} from '@gravity-ui/uikit';
-import React, {ReactNode, Ref, useEffect, useState} from 'react';
+import {Button, Flex, Icon, Select, SelectRenderControlProps, SelectRenderOption, useSelectOptions} from '@gravity-ui/uikit';
+import React, {ReactNode, Ref, useEffect, useMemo, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {selectBrowsers} from '@/static/modules/actions';
@@ -75,48 +75,40 @@ export function BrowsersSelect(): ReactNode {
         setSelectedBrowsers(selectedItems);
     };
 
-    const renderOptions = (): React.JSX.Element | React.JSX.Element[] => {
+    const getOptionData = (browser: BrowserItem, version: string, content: string): {value: string; content: string; data: {id: string; version: string}} => ({
+        value: serializeBrowserData(browser.id, version),
+        content,
+        data: {id: browser.id, version}
+    });
+
+    const rawOptions = useMemo(() => {
         const browsersWithMultipleVersions = browsers.filter(browser => browser.versions.length > 1);
         const browsersWithSingleVersion = browsers.filter(browser => browser.versions.length === 1);
 
-        const getOptionProps = (browser: BrowserItem, version: string): {value: string; content: string; data: Record<string, unknown>} => ({
-            value: serializeBrowserData(browser.id, version),
-            content: browser.id,
-            data: {id: browser.id, version}
-        });
-
         if (browsersWithMultipleVersions.length === 0) {
-            // If there are no browsers with multiple versions, we want to render a simple plain list
-            return browsers.map(browser => <Select.Option
-                key={browser.id}
-                {...getOptionProps(browser, browser.versions[0])}
-            />);
+            // If there are no browsers with multiple versions, we want to render a simple flat list
+            return browsers.map(browser => getOptionData(browser, browser.versions[0], browser.id));
         } else {
-            // Otherwise render browser version groups and place all browsers with single version into "Other" group
-            return (
-                <>
-                    {browsersWithMultipleVersions.map(browser => (
-                        <Select.OptionGroup key={browser.id} label={browser.id}>
-                            {browser.versions.map(version => (
-                                <Select.Option
-                                    key={version}
-                                    {...getOptionProps(browser, version)}
-                                />
-                            ))}
-                        </Select.OptionGroup>
-                    ))}
-                    <Select.OptionGroup label="Other">
-                        {browsersWithSingleVersion.map(browser => (
-                            <Select.Option
-                                key={browser.id}
-                                {...getOptionProps(browser, browser.versions[0])}
-                            />
-                        ))}
-                    </Select.OptionGroup>
-                </>
-            );
+            // Otherwise render browser version groups and place all browsers with a single version in the "Other" group
+            const groups: {label: string; options: ReturnType<typeof getOptionData>[]}[] = [];
+
+            browsersWithMultipleVersions.forEach(browser => {
+                groups.push({
+                    label: browser.id,
+                    options: browser.versions.map(version => getOptionData(browser, version, version))
+                });
+            });
+
+            groups.push({
+                label: 'Other',
+                options: browsersWithSingleVersion.map(browser => getOptionData(browser, browser.versions[0], browser.id))
+            });
+
+            return groups;
         }
-    };
+    }, [browsers]);
+
+    const options = useSelectOptions({options: rawOptions});
 
     const isInitialized = useSelector(getIsInitialized);
 
@@ -171,6 +163,7 @@ export function BrowsersSelect(): ReactNode {
             <Select
                 disablePortal
                 value={selected}
+                options={options}
                 multiple={true}
                 hasCounter
                 filterable
@@ -182,9 +175,7 @@ export function BrowsersSelect(): ReactNode {
                 onUpdate={onUpdate}
                 onFocus={onFocus}
                 onClose={onClose}
-            >
-                {renderOptions()}
-            </Select>
+            />
         </>
     );
 }

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

@@ -65,42 +65,3 @@
 .modal-button-primary {
     composes: regular-button from global, action-button from global;
 }
-
-.error-toaster {
-    border: 1px solid rgb(229, 231, 235);
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
-    margin-right: 10px;
-    margin-bottom: 20px !important;
-}
-
-@keyframes toast-appear {
-    from {
-        opacity: 0;
-        scale: 0.95;
-    }
-
-    to {
-        opacity: 1;
-        scale: 1;
-    }
-}
-
-.error-toaster:global(.g-toast-animation-desktop_enter_active) {
-    animation: toast-appear .15s forwards ease;
-}
-
-.error-toaster:global(.g-toast-animation-desktop_exit_active) {
-    animation: toast-appear .15s forwards ease reverse;
-}
-
-.error-toaster :global(.g-toast__title) {
-    font-weight: 450;
-}
-
-.error-toaster :global(.g-toast__content) {
-    color: var(--g-color-private-black-400);
-}
-
-.error-toaster-icon {
-    color: var(--g-color-private-red-600-solid);
-}

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

@@ -93,8 +93,8 @@ export function GuiniToolbarOverlay(): ReactNode {
                 content: result.error.message + '. See console for details.',
                 isClosable: true,
                 autoHiding: 5000,
-                renderIcon: () => <TriangleExclamation className={styles.errorToasterIcon} width={20} height={20} />,
-                className: styles.errorToaster
+                renderIcon: () => <TriangleExclamation className='toaster__icon--error' width={20} height={20} />,
+                className: 'toaster'
             });
         }
     };

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

@@ -34,7 +34,7 @@ export function SuiteTitle(props: SuiteTitleProps): ReactNode {
                 ))}
             </div>}
             <div className={styles.titleContainer}>
-                <h2 className={classNames('text-display-1')}>
+                <h2 className={classNames('text-display-1')} data-qa="suite-title">
                     {suiteName ?? 'Unknown Suite'}
                 </h2>
                 <div className={styles.labelsContainer}>

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

@@ -37,11 +37,15 @@ import {getIconByStatus} from '@/static/new-ui/utils';
 import {Page} from '@/constants';
 import {usePage} from '@/static/new-ui/hooks/usePage';
 import {useHotkey} from '@/static/new-ui/hooks/useHotkey';
+import {useLegacyUrlMigration} from '@/static/new-ui/hooks/useLegacyUrlMigration';
 import {changeTestRetry, setCurrentTreeNode, setStrictMatchFilter} from '@/static/modules/actions';
 import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 export function SuitesPage(): ReactNode {
     const page = usePage();
+
+    useLegacyUrlMigration();
+
     const currentResult = useSelector(getCurrentResult);
     const treeData = useSelector(getSuitesTreeViewData);
     const resultImages = useSelector(getCurrentResultImages);

lib/static/new-ui/features/suites/components/SuitesPage/selectors.ts

@@ -2,6 +2,7 @@ import {createSelector} from 'reselect';
 import {
     getAllRootGroupIds,
     getBrowsers,
+    getBrowsersList,
     getBrowsersState,
     getGroups,
     getImages,
@@ -18,14 +19,14 @@ import {State} from '@/static/new-ui/types/store';
 
 // Converts the existing store structure to the one that can be consumed by GravityUI
 export const getSuitesTreeViewData = createSelector(
-    [getGroups, getSuites, getAllRootGroupIds, getBrowsers, getBrowsersState, getResults, getImages, getTreeViewMode, getSortTestsData],
-    (groups, suites, rootGroupIds, browsers, browsersState, results, images, treeViewMode, sortTestsData): TreeViewData => {
+    [getGroups, getSuites, getAllRootGroupIds, getBrowsers, getBrowsersState, getResults, getImages, getTreeViewMode, getSortTestsData, getBrowsersList],
+    (groups, suites, rootGroupIds, browsers, browsersState, results, images, treeViewMode, sortTestsData, browsersList): TreeViewData => {
         const currentSortDirection = sortTestsData.currentDirection;
         const currentSortExpression = sortTestsData.availableExpressions
             .find(expr => expr.id === sortTestsData.currentExpressionIds[0])
             ?? sortTestsData.availableExpressions[0];
 
-        const entitiesContext = {results, images, suites, treeViewMode, browsersState, browsers, groups, currentSortDirection, currentSortExpression};
+        const entitiesContext = {results, images, suites, treeViewMode, browsersState, browsers, groups, currentSortDirection, currentSortExpression, browsersList};
 
         const isGroupingEnabled = rootGroupIds.length > 0;
         if (isGroupingEnabled) {