Merge pull request #23411 from Spielboerg/hide-shortcut-page-when-disabled

UI: Hide keyboard shortcuts entry from menu when shortcuts are disabled
(cherry picked from commit a3274ac)

Author: ghengeveld

code/core/src/manager/components/sidebar/Menu.stories.tsx

@@ -56,13 +56,13 @@ export const Expanded: Story = {
   globals: { sb_theme: 'light' },
   render: () => {
     const menu = useMenu(
-      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (Converted from ts-ignore)
         getShortcutKeys: () => ({}),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
-        isWhatsNewUnread: () => true,
+        isWhatsNewUnread: () => false,
         getDocsUrl: () => 'https://storybook.js.org/docs/',
       },
       false,
@@ -73,7 +73,7 @@ export const Expanded: Story = {
     );
     return (
       <DoubleThemeRenderingHack>
-        <SidebarMenu menu={menu} isHighlighted />
+        <SidebarMenu menu={menu} />
       </DoubleThemeRenderingHack>
     );
   },
@@ -96,14 +96,27 @@ export const Expanded: Story = {
   ],
 };
 
-export const ExpandedWithoutWhatsNew: Story = {
+export const ExpandedWithShortcuts: Story = {
   ...Expanded,
   render: () => {
     const menu = useMenu(
       { whatsNewData: undefined } as State,
       {
         // @ts-expect-error (invalid)
-        getShortcutKeys: () => ({}),
+        getShortcutKeys: () => ({
+          shortcutsPage: ['⌘', '⇧​', ','],
+          toggleNav: ['⌥', 'S'],
+          togglePanel: ['⌥', 'A'],
+          toolbar: ['⌥', 'T'],
+          panelPosition: ['⌥', 'D'],
+          fullScreen: ['⌥', 'F'],
+          search: ['⌥', 'K'],
+          prevComponent: ['⌥', '↑'],
+          nextComponent: ['⌥', '↓'],
+          prevStory: ['⌥', '←'],
+          nextStory: ['⌥', '→'],
+          collapseAll: ['⌥', '⇧', '↑'],
+        }),
         getAddonsShortcuts: () => ({}),
         versionUpdateAvailable: () => false,
         isWhatsNewUnread: () => false,
@@ -113,7 +126,7 @@ export const ExpandedWithoutWhatsNew: Story = {
       false,
       false,
       false,
-      false
+      true
     );
 
     return (
@@ -133,3 +146,41 @@ export const ExpandedWithoutWhatsNew: Story = {
     await expect(releaseNotes).not.toBeInTheDocument();
   },
 };
+
+export const ExpandedWithWhatsNew: Story = {
+  ...Expanded,
+  render: () => {
+    const menu = useMenu(
+      { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
+      {
+        // @ts-expect-error (invalid)
+        getShortcutKeys: () => ({}),
+        getAddonsShortcuts: () => ({}),
+        versionUpdateAvailable: () => false,
+        isWhatsNewUnread: () => true,
+        getDocsUrl: () => 'https://storybook.js.org/docs/',
+      },
+      false,
+      false,
+      false,
+      false,
+      false
+    );
+
+    return (
+      <DoubleThemeRenderingHack>
+        <SidebarMenu menu={menu} isHighlighted />
+      </DoubleThemeRenderingHack>
+    );
+  },
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await new Promise((res) => {
+      setTimeout(res, 500);
+    });
+    // @ts-expect-error (non strict)
+    await Expanded.play(context);
+    const releaseNotes = await canvas.queryByText(/What's new/);
+    await expect(releaseNotes).not.toBeInTheDocument();
+  },
+};

code/core/src/manager/container/Menu.tsx

@@ -4,11 +4,11 @@ import React, { useCallback, useMemo } from 'react';
 import { Badge } from 'storybook/internal/components';
 import { STORIES_COLLAPSE_ALL } from 'storybook/internal/core-events';
 
-import { CheckIcon, InfoIcon, ShareAltIcon, WandIcon } from '@storybook/icons';
+import { CheckIcon, CommandIcon, InfoIcon, ShareAltIcon, WandIcon } from '@storybook/icons';
 
 import type { API, State } from 'storybook/manager-api';
 import { shortcutToHumanString } from 'storybook/manager-api';
-import { styled, useTheme } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 import type { Link } from '../../components/components/tooltip/TooltipLinkList';
 
@@ -32,25 +32,20 @@ const Key = styled.span(({ theme }) => ({
   padding: '0 6px',
 }));
 
-const KeyChild = styled.code(
-  ({ theme }) => `
-  padding: 0;
-  vertical-align: middle;
-
-  & + & {
-    margin-left: 6px;
-  }
-`
-);
+const KeyChild = styled.code({
+  padding: 0,
+  verticalAlign: 'middle',
+  '& + &': {
+    marginLeft: 6,
+  },
+});
 
 export const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
-  <>
-    <Key>
-      {keys.map((key, index) => (
-        <KeyChild key={key}>{shortcutToHumanString([key])}</KeyChild>
-      ))}
-    </Key>
-  </>
+  <Key>
+    {keys.map((key) => (
+      <KeyChild key={key}>{shortcutToHumanString([key])}</KeyChild>
+    ))}
+  </Key>
 );
 
 export const useMenu = (
@@ -88,6 +83,7 @@ export const useMenu = (
   const whatsNewNotificationsEnabled =
     state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
   const isWhatsNewUnread = api.isWhatsNewUnread();
+
   const whatsNew = useMemo(
     () => ({
       id: 'whats-new',
@@ -107,6 +103,7 @@ export const useMenu = (
       title: 'Keyboard shortcuts',
       onClick: () => api.changeSettingsTab('shortcuts'),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.shortcutsPage} /> : null,
+      icon: <CommandIcon />,
     }),
     [api, enableShortcuts, shortcutKeys.shortcutsPage]
   );
@@ -138,7 +135,7 @@ export const useMenu = (
   const addonsToggle = useMemo(
     () => ({
       id: 'A',
-      title: 'Show addons',
+      title: 'Show addons panel',
       onClick: () => api.togglePanel(),
       active: isPanelShown,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.togglePanel} /> : null,
@@ -249,7 +246,7 @@ export const useMenu = (
           about,
           ...(state.whatsNewData?.status === 'SUCCESS' ? [whatsNew] : []),
           documentation,
-          shortcuts,
+          ...(enableShortcuts ? [shortcuts] : []),
         ],
         [
           sidebarToggle,
@@ -284,6 +281,7 @@ export const useMenu = (
       next,
       collapse,
       getAddonsShortcuts,
+      enableShortcuts,
     ]
   );
 };

scripts/bench/utils.ts

@@ -43,7 +43,6 @@ export async function getPreviewPage(page: Page) {
    * This loop will keep trying to access the iframe until it's available.
    */
   for (let i = 0; i < 10; i++) {
-    // eslint-disable-next-line @typescript-eslint/no-loop-func
     await page.waitForFunction(() => {
       return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
     });

scripts/event-log-checker.ts

@@ -71,7 +71,9 @@ async function run() {
       });
     }
 
-    if (events.length === 0) throw new Error('No events were logged');
+    if (events.length === 0) {
+      throw new Error('No events were logged');
+    }
     const [bootEvent, mainEvent] = definition.noBoot ? [null, events[0]] : events;
 
     const storybookVersion = versions.storybook;