From 57312d07a59f3a2cbbffc9d186ef1a8540d21e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Wed, 22 Nov 2023 11:03:02 +0100
Subject: [PATCH] feat(command-bar): add shortcut help

---
 .../lib/components/CommandBar/CommandBar.tsx  |  5 +++-
 .../lib/components/CommandBar/Shortcuts.tsx   | 23 ++++++++++++++++++
 .../components/CommandBar/commandBarLogic.ts  | 13 ++++++++--
 .../components/CommandBar/shortcutsLogic.ts   | 24 +++++++++++++++++++
 .../src/lib/components/CommandBar/types.ts    |  1 +
 5 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/CommandBar/Shortcuts.tsx
 create mode 100644 frontend/src/lib/components/CommandBar/shortcutsLogic.ts

diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
index 37ce7466d31d6..671a732af15da 100644
--- a/frontend/src/lib/components/CommandBar/CommandBar.tsx
+++ b/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>
     )
 }
diff --git a/frontend/src/lib/components/CommandBar/Shortcuts.tsx b/frontend/src/lib/components/CommandBar/Shortcuts.tsx
new file mode 100644
index 0000000000000..bb190fa160416
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
index 59aeab9a38862..bc380da1d90f9 100644
--- a/frontend/src/lib/components/CommandBar/commandBarLogic.ts
+++ b/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)
diff --git a/frontend/src/lib/components/CommandBar/shortcutsLogic.ts b/frontend/src/lib/components/CommandBar/shortcutsLogic.ts
new file mode 100644
index 0000000000000..f9b99469a0b4b
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/shortcutsLogic.ts
@@ -0,0 +1,24 @@
+import { kea, path, connect, afterMount, beforeUnmount } from 'kea'
+
+import { commandBarLogic } from './commandBarLogic'
+
+export const shortcutsLogic = kea([
+    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)
+    }),
+])
diff --git a/frontend/src/lib/components/CommandBar/types.ts b/frontend/src/lib/components/CommandBar/types.ts
index 1f3278f3727f6..3a6a482c26453 100644
--- a/frontend/src/lib/components/CommandBar/types.ts
+++ b/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'