feat: add hotkeys panel to the menu

Author: shadowusr

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

@@ -0,0 +1,27 @@
+.hotkeys-panel {
+    height: 100%;
+}
+
+.divider {
+    margin: 16px 0;
+}
+
+.hotkeys-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 12px;
+}
+
+.hotkey-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+}
+
+.hotkey-title {
+    color: var(--color-neutral-500);
+    font-size: 15px;
+}
+

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

@@ -0,0 +1,37 @@
+import {Divider, Hotkey} from '@gravity-ui/uikit';
+import React, {ReactNode} from 'react';
+
+import {AsidePanel} from '@/static/new-ui/components/AsidePanel';
+import {PanelSection} from '@/static/new-ui/components/PanelSection';
+import {HOTKEYS_GROUPS} from '@/static/new-ui/components/MainLayout/hotkeys';
+import styles from './index.module.css';
+
+export function HotkeysPanel(): ReactNode {
+    const sections = HOTKEYS_GROUPS.map((group, groupIndex) => (
+        <PanelSection key={groupIndex} title={group.title}>
+            <div className={styles.hotkeysList}>
+                {group.items.map((item, itemIndex) => (
+                    <div key={itemIndex} className={styles.hotkeyItem}>
+                        <span className={styles.hotkeyTitle}>{item.title}</span>
+                        <Hotkey value={item.value} view="light" />
+                    </div>
+                ))}
+            </div>
+        </PanelSection>
+    ));
+
+    const lastSection = sections.pop();
+
+    return (
+        <AsidePanel title="Keyboard Shortcuts" className={styles.hotkeysPanel}>
+            {sections.map((section, index) => (
+                <React.Fragment key={index}>
+                    {section}
+                    <Divider orientation="horizontal" className={styles.divider} />
+                </React.Fragment>
+            ))}
+            {lastSection}
+        </AsidePanel>
+    );
+}
+

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

@@ -1,4 +1,4 @@
-import {Gear, CircleInfo} from '@gravity-ui/icons';
+import {Gear, CircleInfo, Keyboard} from '@gravity-ui/icons';
 import {FooterItem, MenuItem as GravityMenuItem} from '@gravity-ui/navigation';
 import {Hotkey, Icon} from '@gravity-ui/uikit';
 import classNames from 'classnames';
@@ -45,11 +45,28 @@ export function Footer(props: FooterProps): ReactNode {
         }
     }, [props.visiblePanel]);
 
+    const isHotkeysCurrent = props.visiblePanel === PanelId.Hotkeys;
     const isInfoCurrent = props.visiblePanel === PanelId.Info;
     const isSettingsCurrent = props.visiblePanel === PanelId.Settings;
 
     return <>
         <UiModeHintNotification isVisible={isHintVisible} onClose={(): void => setIsHintVisible(false)} />
+        <FooterItem compact={false} item={{
+            id: PanelId.Hotkeys,
+            title: 'Keyboard Shortcuts',
+            tooltipText: <>Keyboard Shortcuts <Hotkey value="mod+/" view="dark" /></>,
+            onItemClick: props.onFooterItemClick,
+            current: isHotkeysCurrent,
+            qa: 'footer-item-hotkeys',
+            itemWrapper: (params, makeItem) => makeItem({
+                ...params,
+                icon: <Icon className={classNames({
+                    [styles.footerItem]: !isHotkeysCurrent,
+                    [styles['footer-item--active']]: isHotkeysCurrent,
+                    disabled: !isInitialized
+                })} data={Keyboard} />
+            })
+        }} />
         <FooterItem compact={false} item={{
             id: PanelId.Info,
             title: 'Info',

lib/static/new-ui/components/MainLayout/hotkeys.ts

@@ -0,0 +1,45 @@
+import type {HotkeysGroup} from '@gravity-ui/navigation';
+
+export const HOTKEYS_GROUPS: HotkeysGroup[] = [
+    {
+        title: 'Navigation',
+        items: [
+            {title: 'Suites page', value: 's'},
+            {title: 'Visual Checks page', value: 'v'},
+            {title: 'Keyboard shortcuts', value: 'mod+/'},
+            {title: 'Info panel', value: 'i'},
+            {title: 'Settings panel', value: ','}
+        ]
+    },
+    {
+        title: 'Tests Tree',
+        items: [
+            {title: 'Toggle tree sidebar', value: 't'},
+            {title: 'Focus search', value: 'mod+k'},
+            {title: 'Clear search', value: 'escape'}
+        ]
+    },
+    {
+        title: 'Working with Tests',
+        items: [
+            {title: 'Previous test', value: '↑'},
+            {title: 'Next test', value: '↓'},
+            {title: 'Previous attempt', value: '←'},
+            {title: 'Next attempt', value: '→'},
+            {title: 'Run current test', value: 'r'},
+            {title: 'Run all/selected tests', value: 'shift+r'},
+            {title: 'Accept screenshot', value: 'a'},
+            {title: 'Undo accept', value: 'u'},
+            {title: 'Accept all/selected', value: 'shift+a'},
+            {title: 'Go to Suites / Visual Checks', value: 'g'}
+        ]
+    },
+    {
+        title: 'Time Travel Player',
+        items: [
+            {title: 'Show/hide player', value: 'p'},
+            {title: 'Play/pause', value: 'k'}
+        ]
+    }
+];
+

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

@@ -6,6 +6,7 @@ import {matchPath, useLocation, useNavigate} from 'react-router-dom';
 
 import {getIsInitialized} from '@/static/new-ui/store/selectors';
 import {SettingsPanel} from '@/static/new-ui/components/SettingsPanel';
+import {HotkeysPanel} from '@/static/new-ui/components/HotkeysPanel';
 import TestplaneIcon from '../../../icons/testplane-mono.svg';
 import styles from './index.module.css';
 import {Footer} from './Footer';
@@ -20,6 +21,7 @@ import {isSectionHidden} from '../../features/suites/utils';
 import {Page, PathNames} from '@/constants';
 
 export enum PanelId {
+    Hotkeys = 'hotkeys',
     Settings = 'settings',
     Info = 'info',
 }
@@ -133,12 +135,14 @@ export function MainLayout(props: MainLayoutProps): ReactNode {
 
     const navigateToSuites = useCallback(() => navigate(PathNames.suites), [navigate]);
     const navigateToVisualChecks = useCallback(() => navigate(PathNames.visualChecks), [navigate]);
+    const toggleHotkeysPanel = useCallback(() => togglePanel(PanelId.Hotkeys), [togglePanel]);
     const toggleInfoPanel = useCallback(() => togglePanel(PanelId.Info), [togglePanel]);
     const toggleSettingsPanel = useCallback(() => togglePanel(PanelId.Settings), [togglePanel]);
 
     useHotkey('s', navigateToSuites);
     useHotkey('v', navigateToVisualChecks);
     useHotkey('t', toggleTreeSidebar);
+    useHotkey('mod+/', toggleHotkeysPanel);
     useHotkey('i', toggleInfoPanel);
     useHotkey(',', toggleSettingsPanel);
 
@@ -160,6 +164,10 @@ export function MainLayout(props: MainLayoutProps): ReactNode {
         hideCollapseButton={true}
         renderFooter={(): ReactNode => <Footer visiblePanel={visiblePanel} onFooterItemClick={onFooterItemClick}/>}
         panelItems={[{
+            id: PanelId.Hotkeys,
+            children: <HotkeysPanel />,
+            visible: visiblePanel === PanelId.Hotkeys
+        }, {
             id: PanelId.Info,
             children: <InfoPanel />,
             visible: visiblePanel === PanelId.Info