mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Ali Waseem
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 -->
75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { TooltipContentProps } from '@ui/components/shadcn/ui/tooltip'
|
|
import { Fragment, type ReactNode } from 'react'
|
|
import { KeyboardShortcut, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
|
|
|
import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
|
|
import { SHORTCUT_DEFINITIONS, type ShortcutId } from '@/state/shortcuts/registry'
|
|
|
|
interface ShortcutTooltipProps {
|
|
shortcutId: ShortcutId
|
|
children: ReactNode
|
|
side?: TooltipContentProps['side']
|
|
align?: TooltipContentProps['align']
|
|
sideOffset?: number
|
|
delayDuration?: number
|
|
/**
|
|
* Override the label from the registry. Use when the wrapped element's
|
|
* action is a narrower/contextual variant of the registered shortcut.
|
|
*/
|
|
label?: string
|
|
/**
|
|
* Controlled open state for the tooltip. Pass `false` to force the tooltip
|
|
* closed (e.g. while a popover or dialog opened by the wrapped element is
|
|
* visible). Leave `undefined` for default uncontrolled behavior.
|
|
*/
|
|
open?: boolean
|
|
}
|
|
|
|
/**
|
|
* Wraps any element to show its bound keyboard shortcut on hover/focus, in the
|
|
* style of Linear's shortcut tooltips: `"<label> <key> [then <key>]"`.
|
|
*
|
|
* Uses Radix's `asChild` trigger, so the wrapped element remains fully
|
|
* interactive — clicks, focus, and event handlers pass through untouched.
|
|
*
|
|
* @example
|
|
* <ShortcutTooltip shortcutId={SHORTCUT_IDS.RESULTS_COPY_MARKDOWN}>
|
|
* <Button onClick={handleCopy}>Copy</Button>
|
|
* </ShortcutTooltip>
|
|
*/
|
|
export const ShortcutTooltip = ({
|
|
shortcutId,
|
|
children,
|
|
side,
|
|
align,
|
|
sideOffset,
|
|
delayDuration,
|
|
label: labelOverride,
|
|
open,
|
|
}: ShortcutTooltipProps) => {
|
|
const def = SHORTCUT_DEFINITIONS[shortcutId]
|
|
const label = labelOverride ?? def.label
|
|
|
|
return (
|
|
<Tooltip delayDuration={delayDuration} open={open}>
|
|
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
<TooltipContent
|
|
side={side}
|
|
align={align}
|
|
sideOffset={sideOffset}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<span>{label}</span>
|
|
<span className="flex items-center gap-1">
|
|
{def.sequence.map((step, i) => (
|
|
<Fragment key={i}>
|
|
{i > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
|
|
<KeyboardShortcut keys={hotkeyToKeys(step)} />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)
|
|
}
|