feat: implement a button to switch between new and old UI

lib/constants/local-storage.ts

@@ -0,0 +1,8 @@
+export enum LocalStorageKey {
+    UIMode = 'ui-mode'
+}
+
+export enum UiMode {
+    Old = 'old',
+    New = 'new',
+}

lib/static/components/controls/browser-list/index.jsx

@@ -1,5 +1,7 @@
 'use strict';
 
+import {Button, Select, useSelectOptions} from '@gravity-ui/uikit';
+import classNames from 'classnames';
 import React, {useState, useMemo, useEffect} from 'react';
 import {compact} from 'lodash';
 import PropTypes from 'prop-types';
@@ -8,7 +10,6 @@ import {mkBrowserIcon, buildComplexId} from './utils';
 
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 import './index.styl';
-import {Button, Select, useSelectOptions} from '@gravity-ui/uikit';
 
 const BrowserList = ({available, onChange, selected: selectedProp}) => {
     const getOptions = () => {
@@ -138,7 +139,7 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
                 <div className='browserlist__row_content'>
                     {option.content}
                 </div>
-                <Button size='s' onClick={isTheOnlySelected ? selectExcept : selectOnly} className='action-button'>{isTheOnlySelected ? 'Except' : 'Only'}</Button>
+                <Button size='s' onClick={isTheOnlySelected ? selectExcept : selectOnly} className={classNames('regular-button', 'action-button')}>{isTheOnlySelected ? 'Except' : 'Only'}</Button>
             </div>
         );
     };

lib/static/components/controls/controls.less

@@ -130,7 +130,108 @@
     width: 200px;
 }
 
+@property --gradient-angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0turn;
+}
+
+@property --from-color {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: #00ffff00;
+}
+
+@property --to-color {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: #eee;
+}
+
 .report-info {
+    .new-ui-button {
+        margin-right: 1em;
+        transition: color 1s linear;
+        position: relative;
+
+        @keyframes glow {
+            from {background-position: 0}
+            to {background-position: 400%}
+        }
+
+        & .new-ui-button__glow {
+            opacity: 0;
+            left: 0;
+            filter: blur(10px);
+            transition: opacity 1s ease;
+            animation: 20s linear infinite glow;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
+            border-radius: 5px;
+            background-size: 400%;
+            z-index: -5;
+        }
+
+        &:hover .new-ui-button__glow {
+            opacity: 1;
+        }
+
+        @keyframes color-fade {
+            from {color: black}
+            to {color: white}
+        }
+
+        &:hover {
+            animation: 1s color-fade ease forwards;
+            animation-delay: .6s;
+        }
+
+        @keyframes pulse {
+            0% {
+                --gradient-angle: 0deg;
+                --to-color: rgb(108,71,255);
+            }
+
+            90% {
+                --to-color: rgb(108,71,255);
+                --from-color: #00ffff00;
+            }
+
+            100% {
+                --gradient-angle: 180deg;
+                --from-color: rgb(108,71,255);
+                --to-color: rgb(108,71,255);
+            }
+        }
+
+        &::before {
+            transition: none;
+            background-image: conic-gradient(from var(--gradient-angle) at -10% 100%, var(--from-color) 0%, var(--to-color) 100%);
+        }
+
+        &:hover::before {
+            animation: 1s ease pulse forwards;
+        }
+
+        @keyframes bg-fade {
+            from { background-color: #eee }
+            to { background-color: rgb(108,71,255) }
+        }
+
+        &::after {
+            background-color: #eee;
+            margin: 2px;
+            border-radius: 4px;
+        }
+
+        &:hover::after {
+            animation: 1s ease bg-fade forwards;
+            animation-delay: .7s;
+        }
+    }
+
     .label {
         margin: 0 15px 0 0;
     }

lib/static/components/controls/report-info.jsx

@@ -1,36 +1,50 @@
-import React, {Component} from 'react';
+import {Flask} from '@gravity-ui/icons';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {Label} from '@gravity-ui/uikit';
+import {Button, Icon, Label} from '@gravity-ui/uikit';
 import {isEmpty} from 'lodash';
 import {version} from '../../../../package.json';
+import useLocalStorage from '@/static/hooks/useLocalStorage';
+import {LocalStorageKey, UiMode} from '@/constants/local-storage';
 
-class ReportInfo extends Component {
-    static propTypes = {
-        gui: PropTypes.bool.isRequired,
-        timestamp: PropTypes.number.isRequired
-    };
+function ReportInfo(props) {
+    const {gui, timestamp} = props;
+    const lang = isEmpty(navigator.languages) ? navigator.language : navigator.languages[0];
+    const date = new Date(timestamp).toLocaleString(lang);
+
+    const [, setUiMode] = useLocalStorage(LocalStorageKey.UIMode, UiMode.New);
 
-    render() {
-        const {gui, timestamp} = this.props;
-        const lang = isEmpty(navigator.languages) ? navigator.language : navigator.languages[0];
-        const date = new Date(timestamp).toLocaleString(lang);
+    const onNewUiButtonClick = () => {
+        setUiMode(UiMode.New);
 
-        return (
-            <div className="report-info">
-                <Label qa='version-label' size='m' className='label'>
-                    Version
-                    <div className='detail'>{version}</div>
-                </Label>
-                {!gui && <Label qa='created-at-label' size='m' className='label'>
-                    Created at
-                    <div className='detail'>{date}</div>
-                </Label>}
-            </div>
-        );
-    }
+        if (window.location.pathname.endsWith('.html')) {
+            window.location.href = '/new-ui.html';
+        } else {
+            window.location.href = '/new-ui';
+        }
+    };
+
+    return (
+        <div className="report-info">
+            <Button className={'new-ui-button'} onClick={onNewUiButtonClick}><div className='new-ui-button__glow'></div><Icon data={Flask}/>Try New UI</Button>
+            <Label qa='version-label' size='m' className='label'>
+                Version
+                <div className='detail'>{version}</div>
+            </Label>
+            {!gui && <Label qa='created-at-label' size='m' className='label'>
+                Created at
+                <div className='detail'>{date}</div>
+            </Label>}
+        </div>
+    );
 }
 
+ReportInfo.propTypes = {
+    gui: PropTypes.bool.isRequired,
+    timestamp: PropTypes.number.isRequired
+};
+
 export default connect(
     ({gui, timestamp}) => ({gui, timestamp})
 )(ReportInfo);

lib/static/hooks/useLocalStorage.js

@@ -2,6 +2,11 @@ import {useCallback, useEffect, useState} from 'react';
 import useEventListener from './useEventListener';
 import * as localStorageWrapper from '../modules/local-storage-wrapper';
 
+/**
+ * @param key
+ * @param initialValue
+ * @returns {[*, function]} An array containing the current state value and a function to update it.
+ */
 export default function useLocalStorage(key, initialValue) {
     const readValue = useCallback(() => {
         return localStorageWrapper.getItem(key, initialValue);

lib/static/new-ui.css

@@ -63,9 +63,12 @@ body {
     }
 }
 
-.action-button {
+.regular-button {
     font-size: 15px;
     font-weight: 450;
+}
+
+.action-button {
     /* Sets spinner color */
     --g-color-line-brand: var(--g-color-text-hint);
 }

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

@@ -2,10 +2,9 @@ import {ThemeProvider} from '@gravity-ui/uikit';
 import React, {ReactNode, StrictMode} from 'react';
 import {MainLayout} from '../components/MainLayout';
 import {HashRouter, Navigate, Route, Routes} from 'react-router-dom';
-import {CircleInfo, Eye, ListCheck} from '@gravity-ui/icons';
+import {Eye, ListCheck} from '@gravity-ui/icons';
 import {SuitesPage} from '../features/suites/components/SuitesPage';
 import {VisualChecksPage} from '../features/visual-checks/components/VisualChecksPage';
-import {InfoPage} from '../features/info/components/InfoPage';
 
 import '@gravity-ui/uikit/styles/fonts.css';
 import '@gravity-ui/uikit/styles/styles.css';
@@ -23,8 +22,7 @@ export function App(): ReactNode {
             element: <SuitesPage/>,
             children: [<Route key={'suite'} path=':suiteId' element= {<SuitesPage/>} />]
         },
-        {title: 'Visual Checks', url: '/visual-checks', icon: Eye, element: <VisualChecksPage/>},
-        {title: 'Info', url: '/info', icon: CircleInfo, element: <InfoPage/>}
+        {title: 'Visual Checks', url: '/visual-checks', icon: Eye, element: <VisualChecksPage/>}
     ];
 
     return <StrictMode>

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

@@ -14,6 +14,6 @@
 }
 
 .retry-button {
-    composes: action-button from global;
+    composes: regular-button from global, action-button from global;
     margin-left: auto;
 }

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

@@ -2,7 +2,7 @@
     height: 30px;
     width: 100%;
     position: absolute;
-    z-index: 99;
+    z-index: 999999;
     display: flex;
     align-items: center;
     flex-direction: column;

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

@@ -6,3 +6,11 @@
     background-color: var(--color-bg-dark);
     width: 100%;
 }
+
+.footer-item {
+    color: var(--gn-aside-header-item-icon-color) !important;
+}
+
+.footer-item--active {
+    color: var(--gn-aside-header-item-current-icon-color) !important;
+}

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

@@ -1,11 +1,19 @@
-import {AsideHeader, MenuItem as GravityMenuItem} from '@gravity-ui/navigation';
+import {Gear} from '@gravity-ui/icons';
+import {AsideHeader, FooterItem, MenuItem as GravityMenuItem} from '@gravity-ui/navigation';
+import {Icon} from '@gravity-ui/uikit';
 import classNames from 'classnames';
-import React from 'react';
+import React, {ReactNode, useState} from 'react';
 import {useSelector} from 'react-redux';
 import {useNavigate, matchPath, useLocation} from 'react-router-dom';
+
+import {getIsInitialized} from '@/static/new-ui/store/selectors';
+import {SettingsPanel} from '@/static/new-ui/components/SettingsPanel';
 import TestplaneIcon from '../../../icons/testplane-mono.svg';
 import styles from './index.module.css';
-import {getIsInitialized} from '@/static/new-ui/store/selectors';
+
+enum PanelId {
+    Settings = 'settings',
+}
 
 interface MenuItem {
     title: string;
@@ -32,6 +40,11 @@ export function MainLayout(props: MainLayoutProps): JSX.Element {
 
     const isInitialized = useSelector(getIsInitialized);
 
+    const [visiblePanel, setVisiblePanel] = useState<PanelId | null>(null);
+    const onFooterItemClick = (item: GravityMenuItem): void => {
+        visiblePanel ? setVisiblePanel(null) : setVisiblePanel(item.id as PanelId);
+    };
+
     return <AsideHeader
         className={classNames({'aside-header--initialized': isInitialized})}
         logo={{text: 'Testplane UI', iconSrc: TestplaneIcon, iconSize: 32, onClick: () => navigate('/suites')}}
@@ -42,5 +55,26 @@ export function MainLayout(props: MainLayoutProps): JSX.Element {
         customBackgroundClassName={styles.asideHeaderBgWrapper}
         renderContent={(): React.ReactNode => props.children}
         hideCollapseButton={true}
+        renderFooter={({compact}): ReactNode => {
+            const isCurrent = visiblePanel === PanelId.Settings;
+            return <>
+                <FooterItem compact={compact} item={{
+                    id: PanelId.Settings,
+                    title: 'Settings',
+                    onItemClick: onFooterItemClick,
+                    current: isCurrent,
+                    itemWrapper: (params, makeItem) => makeItem({
+                        ...params,
+                        icon: <Icon className={classNames({[styles.footerItem]: !isCurrent, [styles['footer-item--active']]: isCurrent})} data={Gear} />
+                    })
+                }} />
+            </>;
+        }}
+        panelItems={[{
+            id: PanelId.Settings,
+            children: <SettingsPanel />,
+            visible: visiblePanel === PanelId.Settings
+        }]}
+        onClosePanel={(): void => setVisiblePanel(null)}
     />;
 }

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

@@ -0,0 +1,32 @@
+.container {
+    background-color: #fff;
+    padding: 20px;
+    width: 440px;
+    height: 100%;
+
+    --g-text-body-font-weight: 450;
+    --g-text-body-short-font-size: 15px;
+}
+
+.separator {
+    height: 1px;
+    background-color: var(--g-color-private-black-50);
+    margin: 20px 0;
+}
+
+.separator:first-of-type {
+    margin-top: 12px;
+}
+
+.setting-title {
+
+}
+
+.setting-subtitle {
+    color: var(--g-color-private-black-400);
+    margin-top: 4px;
+}
+
+.setting-control {
+    margin-top: 16px;
+}