From 573487e0fbacad976ebaaff2dba480be71d8eb45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= Date: Wed, 22 Nov 2023 13:21:26 +0100 Subject: [PATCH] feat(command-bar): add shortcut help (#18810) --- .../components-command-bar--shortcuts.png | Bin 0 -> 17004 bytes .../CommandBar/CommandBar.stories.tsx | 10 +++++++ .../lib/components/CommandBar/CommandBar.tsx | 5 +++- .../lib/components/CommandBar/Shortcuts.tsx | 23 ++++++++++++++++ .../components/CommandBar/commandBarLogic.ts | 13 +++++++-- .../components/CommandBar/shortcutsLogic.ts | 26 ++++++++++++++++++ .../src/lib/components/CommandBar/types.ts | 1 + 7 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 frontend/__snapshots__/components-command-bar--shortcuts.png create mode 100644 frontend/src/lib/components/CommandBar/Shortcuts.tsx create mode 100644 frontend/src/lib/components/CommandBar/shortcutsLogic.ts diff --git a/frontend/__snapshots__/components-command-bar--shortcuts.png b/frontend/__snapshots__/components-command-bar--shortcuts.png new file mode 100644 index 0000000000000000000000000000000000000000..32f4e7ff34955912131cfe10212d80d8fab59936 GIT binary patch literal 17004 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 literal 0 HcmV?d00001 diff --git a/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx index f114b91f54a4c..8289a88918ef3 100644 --- a/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx +++ b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx @@ -277,3 +277,13 @@ export function Actions(): JSX.Element { return } + +export function Shortcuts(): JSX.Element { + const { setCommandBar } = useActions(commandBarLogic) + + useEffect(() => { + setCommandBar(BarStatus.SHOW_SHORTCUTS) + }, []) + + return +} 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 ( - {barStatus === BarStatus.SHOW_SEARCH ? : } + {barStatus === BarStatus.SHOW_SEARCH && } + {barStatus === BarStatus.SHOW_ACTIONS && } + {barStatus === BarStatus.SHOW_SHORTCUTS && } ) } 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 ( +
+

Keyboard shortcuts

+

Site-wide shortcuts

+
+
+ Open search +
+
+ Open command palette +
+
+
+ ) +} 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([ hideCommandBar: true, toggleSearchBar: true, toggleActionsBar: true, + toggleShortcutOverview: true, }), reducers({ barStatus: [ @@ -18,9 +19,15 @@ export const commandBarLogic = kea([ 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([ // 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..0b7c4ee85a594 --- /dev/null +++ b/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([ + 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'