mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
3d9fb2f98d
## What kind of change does this PR introduce? Feature — adds keyboard shortcuts for the Realtime section in Studio. ## What is the current behavior? No keyboard shortcuts exist for Realtime navigation or inspector actions. ## What is the new behavior? ### Navigation chords (layout-scoped, active on any Realtime page) | Shortcut | Action | |---|---| | `R I` | Go to Inspector | | `R P` | Go to Policies | | `R S` | Go to Settings | ### Inspector actions (active on the Inspector page) | Shortcut | Action | Gating | |---|---|---| | `Shift+J` | Join a channel | Only when no channel is joined | | `Shift+L` | Start/Stop listening | Only when a channel is joined | | `Shift+F` | Open filter popover | Only when a channel is joined | | `Shift+B` | Broadcast a message | Only when listening | | `Mod+Shift+C` | Copy selected message | Only when a message is selected | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Realtime Inspector: new keyboard shortcuts (join channel, toggle listening, toggle filters, broadcast) and a copy-message shortcut with toast feedback. * Channel & Filter popovers support controlled/uncontrolled open state; header now wires popover state through props. * Shortcut tooltips added to copy and broadcast actions; realtime page navigation shortcuts and menu shortcuts added. * **Tests** * Shortcut reference sheet tests updated to include realtime navigation and inspector groups. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46001?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
|
|
import type { Project } from '@/data/projects/project-detail-query'
|
|
import { IS_PLATFORM } from '@/lib/constants'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
export const generateRealtimeMenu = (project: Project | undefined): ProductMenuGroup[] => {
|
|
const ref = project?.ref ?? 'default'
|
|
const showRealtimeSettings = IS_PLATFORM
|
|
|
|
return [
|
|
{
|
|
title: 'Tools',
|
|
items: [
|
|
{
|
|
name: 'Inspector',
|
|
key: 'inspector',
|
|
url: `/project/${ref}/realtime/inspector`,
|
|
items: [],
|
|
shortcutId: SHORTCUT_IDS.NAV_REALTIME_INSPECTOR,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Configuration',
|
|
items: [
|
|
{
|
|
name: 'Policies',
|
|
key: 'policies',
|
|
url: `/project/${ref}/realtime/policies`,
|
|
items: [],
|
|
shortcutId: SHORTCUT_IDS.NAV_REALTIME_POLICIES,
|
|
},
|
|
...(showRealtimeSettings
|
|
? [
|
|
{
|
|
name: 'Settings',
|
|
key: 'settings',
|
|
url: `/project/${ref}/realtime/settings`,
|
|
items: [],
|
|
shortcutId: SHORTCUT_IDS.NAV_REALTIME_SETTINGS,
|
|
},
|
|
]
|
|
: []),
|
|
],
|
|
},
|
|
]
|
|
}
|