feat(command-bar): add shortcut help (#18810)

frontend/src/lib/components/CommandBar/CommandBar.stories.tsx

@@ -277,3 +277,13 @@ export function Actions(): JSX.Element {
 
     return <CommandBar />
 }
+
+export function Shortcuts(): JSX.Element {
+    const { setCommandBar } = useActions(commandBarLogic)
+
+    useEffect(() => {
+        setCommandBar(BarStatus.SHOW_SHORTCUTS)
+    }, [])
+
+    return <CommandBar />
+}

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -9,6 +9,7 @@ import { BarStatus } from './types'
 import './index.scss'
 import { SearchBar } from './SearchBar'
 import { ActionBar } from './ActionBar'
+import { Shortcuts } from './Shortcuts'
 
 interface CommandBarOverlayProps {
     barStatus: BarStatus
@@ -56,7 +57,9 @@ export function CommandBar(): JSX.Element | null {
 
     return (
         <CommandBarOverlay barStatus={barStatus}>
-            {barStatus === BarStatus.SHOW_SEARCH ? <SearchBar /> : <ActionBar />}
+            {barStatus === BarStatus.SHOW_SEARCH && <SearchBar />}
+            {barStatus === BarStatus.SHOW_ACTIONS && <ActionBar />}
+            {barStatus === BarStatus.SHOW_SHORTCUTS && <Shortcuts />}
         </CommandBarOverlay>
     )
 }

frontend/src/lib/components/CommandBar/Shortcuts.tsx

@@ -0,0 +1,23 @@
+import { useMountedLogic } from 'kea'
+
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+import { shortcutsLogic } from './shortcutsLogic'
+
+export const Shortcuts = (): JSX.Element => {
+    useMountedLogic(shortcutsLogic)
+
+    return (
+        <div className="flex flex-col h-full p-5">
+            <h3>Keyboard shortcuts</h3>
+            <h4>Site-wide shortcuts</h4>
+            <div className="space-y-1">
+                <div>
+                    <KeyboardShortcut command k /> Open search
+                </div>
+                <div>
+                    <KeyboardShortcut command shift k /> Open command palette
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/src/lib/components/CommandBar/commandBarLogic.ts

@@ -10,6 +10,7 @@ export const commandBarLogic = kea<commandBarLogicType>([
         hideCommandBar: true,
         toggleSearchBar: true,
         toggleActionsBar: true,
+        toggleShortcutOverview: true,
     }),
     reducers({
         barStatus: [
@@ -18,9 +19,15 @@ export const commandBarLogic = kea<commandBarLogicType>([
                 setCommandBar: (_, { status }) => status,
                 hideCommandBar: () => BarStatus.HIDDEN,
                 toggleSearchBar: (previousState) =>
-                    previousState === BarStatus.HIDDEN ? BarStatus.SHOW_SEARCH : BarStatus.HIDDEN,
+                    [BarStatus.HIDDEN, BarStatus.SHOW_SHORTCUTS].includes(previousState)
+                        ? BarStatus.SHOW_SEARCH
+                        : BarStatus.HIDDEN,
                 toggleActionsBar: (previousState) =>
-                    previousState === BarStatus.HIDDEN ? BarStatus.SHOW_ACTIONS : BarStatus.HIDDEN,
+                    [BarStatus.HIDDEN, BarStatus.SHOW_SHORTCUTS].includes(previousState)
+                        ? BarStatus.SHOW_ACTIONS
+                        : BarStatus.HIDDEN,
+                toggleShortcutOverview: (previousState) =>
+                    previousState === BarStatus.HIDDEN ? BarStatus.SHOW_SHORTCUTS : previousState,
             },
         ],
     }),
@@ -36,6 +43,8 @@ export const commandBarLogic = kea<commandBarLogicType>([
                     // cmd+k opens search
                     actions.toggleSearchBar()
                 }
+            } else if (event.shiftKey && event.key === '?') {
+                actions.toggleShortcutOverview()
             }
         }
         window.addEventListener('keydown', cache.onKeyDown)

frontend/src/lib/components/CommandBar/shortcutsLogic.ts

@@ -0,0 +1,26 @@
+import { kea, path, connect, afterMount, beforeUnmount } from 'kea'
+
+import { commandBarLogic } from './commandBarLogic'
+
+import type { shortcutsLogicType } from './shortcutsLogicType'
+
+export const shortcutsLogic = kea<shortcutsLogicType>([
+    path(['lib', 'components', 'CommandBar', 'shortcutsLogic']),
+    connect({
+        actions: [commandBarLogic, ['hideCommandBar']],
+    }),
+    afterMount(({ actions, cache }) => {
+        // register keyboard shortcuts
+        cache.onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                // hide command bar
+                actions.hideCommandBar()
+            }
+        }
+        window.addEventListener('keydown', cache.onKeyDown)
+    }),
+    beforeUnmount(({ cache }) => {
+        // unregister keyboard shortcuts
+        window.removeEventListener('keydown', cache.onKeyDown)
+    }),
+])

frontend/src/lib/components/CommandBar/types.ts

@@ -2,6 +2,7 @@ export enum BarStatus {
     HIDDEN = 'hidden',
     SHOW_SEARCH = 'show_search',
     SHOW_ACTIONS = 'show_actions',
+    SHOW_SHORTCUTS = 'show_shortcuts',
 }
 
 export type ResultType = 'action' | 'cohort' | 'insight' | 'dashboard' | 'experiment' | 'feature_flag' | 'notebook'