mirror of
https://github.com/supabase/supabase.git
synced 2026-05-22 17:00:43 +08:00
e6f779ea30
## Summary Adds the first batch of keyboard shortcuts for the Database → Schema Visualizer page, following the registry pattern established for the SQL editor and table editor. Fixes [FE-3115](https://linear.app/supabase/issue/FE-3115). ## Shortcuts | Shortcut | Action | | --- | --- | | `Mod+Shift+C` | Copy schema as SQL | | `Mod+Shift+M` | Copy schema as Markdown | | `D` then `P` | Download schema as PNG | | `D` then `S` | Download schema as SVG | | `O` then `A` | Open the auto-layout confirmation dialog | | `O` then `S` | Open the schema selector | All six entries appear in the Cmd+K command menu under "Shortcuts" and in the global shortcuts sheet (`Mod+/`) under a new "Schema Visualizer" group while the page is mounted. None are surfaced in Account → Preferences yet (`showInSettings: false`), matching how the SQL/table editor batches shipped. The schema selector and auto-layout button are wrapped in the unified `Shortcut` component so the keybind is shown on hover (Linear-style). The dropdown items for copy/download don't get hover hints since tooltips on dropdown items don't make sense — they're discoverable via Cmd+K instead. ## Toasts Each user-visible action now confirms via a sonner toast: - `Successfully copied as SQL` — fires on Copy as SQL (button or `Mod+Shift+C`). - `Successfully copied as Markdown` — fires on Copy as Markdown (dropdown or `Mod+Shift+M`). - `Successfully downloaded as PNG` / `Successfully downloaded as SVG` — already present in `useExportSchemaToImage`; fires on click or `D → P` / `D → S`. - `Failed to download current view: …` — error toast on download failure (also pre-existing). ## Notes - `Mod+Shift+C` and `Mod+Shift+M` collide with the SQL editor's `results.copy-csv` / `results.copy-markdown` shortcuts. They coexist cleanly because `useShortcut` only fires while the hook is mounted, and the two pages live on different routes. Both labels appear in the global shortcuts sheet honestly scoped per surface. - `SchemaSelector` was promoted to a `forwardRef` component that spreads extra props onto its outer `<div>`. This was needed for `<TooltipTrigger asChild>` to attach event handlers and the ref properly — previously they were silently dropped and the hover tooltip didn't render. - `SchemaSelector` and the auto-layout `AlertDialog` accept controlled `open` props now so the shortcuts can drive them and the tooltip can be suppressed while the popover/dialog is open (`Shortcut` gained a `tooltipOpen` passthrough for this). - Auto-layout still pops the existing confirmation dialog rather than running directly — destructive enough to keep the guardrail. ## Test plan - [x] On the Schema Visualizer page, each of the six shortcuts fires the corresponding action. - [x] Hover the schema selector and the Auto layout button — tooltip shows the action label and keybind badge. - [x] Open the schema selector popover (click or `O → S`) — hover tooltip is suppressed while open. - [x] Open the auto-layout confirm dialog (click or `O → A`) — hover tooltip is suppressed while open. - [x] Cmd+K shows all six entries under "Shortcuts" while on the page; navigating away unregisters them. - [x] `Mod+/` shortcuts sheet has a "Schema Visualizer" group listing all six. - [x] Copy as SQL / Markdown each fire a confirmation toast; PNG / SVG downloads each fire a confirmation toast. - [x] On the SQL editor results page, `Mod+Shift+M` / `Mod+Shift+C` still copy results (no regression from the duplicate keybinds). - [x] The download dropdown items still work via click; PNG/SVG downloads succeed. - [x] All other consumers of `SchemaSelector` (~15 callsites) render unchanged after the `forwardRef` promotion. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcuts for schema visualizer: copy as SQL/Markdown, download PNG/SVG, auto-layout, and focus selector * Success toasts when copying content to clipboard * **Improvements** * Schema selector and auto-layout dialog can be opened/closed via keyboard and programmatically * Shortcut tooltips can be suppressed when related overlays/dialogs are open * Schema Visualizer added to the shortcuts reference sheet * **Tests** * E2E tests dismiss transient toasts to avoid UI interference <!-- end of auto-generated comment: release notes by coderabbit.ai -->
59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import { RegistryDefinations } from '../types'
|
|
|
|
export const SCHEMA_VISUALIZER_SHORTCUT_IDS = {
|
|
SCHEMA_VISUALIZER_COPY_SQL: 'schema-visualizer.copy-sql',
|
|
SCHEMA_VISUALIZER_COPY_MARKDOWN: 'schema-visualizer.copy-markdown',
|
|
SCHEMA_VISUALIZER_DOWNLOAD_PNG: 'schema-visualizer.download-png',
|
|
SCHEMA_VISUALIZER_DOWNLOAD_SVG: 'schema-visualizer.download-svg',
|
|
SCHEMA_VISUALIZER_AUTO_LAYOUT: 'schema-visualizer.auto-layout',
|
|
SCHEMA_VISUALIZER_FOCUS_SCHEMA: 'schema-visualizer.focus-schema',
|
|
}
|
|
|
|
export type SchemaVisualizerShortcutId =
|
|
(typeof SCHEMA_VISUALIZER_SHORTCUT_IDS)[keyof typeof SCHEMA_VISUALIZER_SHORTCUT_IDS]
|
|
|
|
export const schemaVisualizerRegistry: RegistryDefinations<SchemaVisualizerShortcutId> = {
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_COPY_SQL]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_COPY_SQL,
|
|
label: 'Copy schema as SQL',
|
|
sequence: ['Mod+Shift+C'],
|
|
showInSettings: false,
|
|
options: { registerInCommandMenu: true },
|
|
},
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_COPY_MARKDOWN]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_COPY_MARKDOWN,
|
|
label: 'Copy schema as Markdown',
|
|
sequence: ['Mod+Shift+M'],
|
|
showInSettings: false,
|
|
options: { registerInCommandMenu: true },
|
|
},
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_DOWNLOAD_PNG]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_DOWNLOAD_PNG,
|
|
label: 'Download schema as PNG',
|
|
sequence: ['D', 'P'],
|
|
showInSettings: false,
|
|
options: { ignoreInputs: true, registerInCommandMenu: true },
|
|
},
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_DOWNLOAD_SVG]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_DOWNLOAD_SVG,
|
|
label: 'Download schema as SVG',
|
|
sequence: ['D', 'S'],
|
|
showInSettings: false,
|
|
options: { ignoreInputs: true, registerInCommandMenu: true },
|
|
},
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_AUTO_LAYOUT]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_AUTO_LAYOUT,
|
|
label: 'Open auto-layout dialog',
|
|
sequence: ['O', 'A'],
|
|
showInSettings: false,
|
|
options: { ignoreInputs: true, registerInCommandMenu: true },
|
|
},
|
|
[SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_FOCUS_SCHEMA]: {
|
|
id: SCHEMA_VISUALIZER_SHORTCUT_IDS.SCHEMA_VISUALIZER_FOCUS_SCHEMA,
|
|
label: 'Open schema selector',
|
|
sequence: ['O', 'S'],
|
|
showInSettings: false,
|
|
options: { ignoreInputs: true, registerInCommandMenu: true },
|
|
},
|
|
}
|