dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-09 19:35:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
37,273 Commits 1,794 Branches 62 Tags
docs/debugging-guide
Commit Graph
3 Commits
Author SHA1 Message Date
Ali Waseem 42c0cb7171 feat(studio): keyboard shortcuts for observability pages (#46277) 
## Summary

Wires Linear-style keyboard shortcuts across all observability pages —
refresh, time picker, filters, and sub-page navigation — with hover
tooltips surfacing each binding.

| Page | Shortcut | Action |
| --- | --- | --- |
| Overview | `Shift+R` | Refresh report |
| Overview | `Shift+P` | Open time picker |
| Query Performance | `Shift+R` | Refresh report |
| Query Performance | `R` then `C` | Reset report
(`pg_stat_statements_reset`) |
| Query Performance | `Shift+F` | Search queries |
| Query Performance | `F` then `C` | Reset filters |
| API Gateway | `Shift+R` | Refresh report |
| API Gateway | `Shift+P` | Open time picker |
| API Gateway | `Shift+F` | Add filter |
| API Gateway | `F` then `C` | Reset filters |
| API Gateway | `Shift+S` | Filter requests by service |
| Database | `Shift+R` | Refresh report |
| Database | `Shift+P` | Open time picker |
| Auth | `Shift+R` | Refresh report |
| Auth | `Shift+P` | Open time picker |
| Data API | `Shift+R` | Refresh report |
| Data API | `Shift+P` | Open time picker |
| Storage | `Shift+R` | Refresh report |
| Storage | `Shift+P` | Open time picker |
| Realtime | `Shift+R` | Refresh report |
| Realtime | `Shift+P` | Open time picker |
| Edge Functions | `Shift+R` | Refresh report |
| Edge Functions | `Shift+P` | Open time picker |
| All observability pages | `U` then `O/Q/G/D/P/A/F/S/L` | Jump to
sub-page |

## Test plan

- [ ] Each shortcut fires on its page; tooltip on hover shows the
binding
- [ ] Picker shortcut toggles the popover open/closed without leaving
the tooltip visible
- [ ] Reset-report on Query Performance opens the confirm modal
- [ ] `Escape` on the query search clears the value, then blurs
- [ ] No "Shift+R already registered" / Tooltip controlled-uncontrolled
warnings in the console

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Keyboard shortcuts to navigate Observability pages and perform common
actions (refresh, toggle date picker/interval, focus search, reset
filters, create reports).
* Shortcut hints shown on relevant buttons and controls; date pickers
and interval dropdowns can be controlled via shortcuts.
* Global shortcut groups/registries added for Observability navigation
and page actions.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46277?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 -->
 2026-05-25 07:37:16 -06:00
Ali Waseem e6f779ea30 feat(studio): add keyboard shortcuts to the schema visualizer (#45386) 
## 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 -->
 2026-05-01 07:13:37 -06:00
Ali Waseem 28a2c25e0e feat(studio): add navigation shortcuts with hover tooltips (#45127) 
## Summary
- Adds `<Shortcut>` component: binds a registered shortcut + renders a
Linear-style hover tooltip (label + keybind pills) in one declaration
- Adds `<ShortcutTooltip>` as the lower-level primitive for cases where
binding lives elsewhere
- Registers 13 G-chord navigation shortcuts (`G H` / `G T` / `G S` / `G
D` / `G A` / `G B` / `G F` / `G R` / `G V` / `G O` / `G L` / `G I` / `G
,`)
- Wires shortcuts into `SideBarNavLink` — binding + dynamic-delay
tooltip (0ms collapsed, 1000ms expanded) replaces the old label-only
collapsed tooltip

Closes
[FE-3048](https://linear.app/supabase/issue/FE-3048/create-navigation-shortcuts).

## Test plan
- [x] Hover each main sidebar nav item with sidebar expanded — tooltip
appears after delay with label + shortcut pills
- [x] Collapse sidebar — tooltip appears instantly on hover
- [x] Press `G` then a registered letter anywhere outside text inputs —
navigates to that screen
- [x] Press `G` inside a text input — no navigation fires
- [x] Disabled nav items (project inactive) — no shortcut fires, no
tooltip anomaly
- [x] Feature-gated routes (auth/storage/realtime off) — shortcut is
gone with the route

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Global keyboard shortcuts added for navigating major app sections
(home, editors, database, auth, storage, functions, realtime, advisors,
observability, logs, integrations, settings).
* Navigation items display their keybinds in hover tooltips and can be
triggered via those shortcuts.
* Tooltip timing adapts to sidebar state (immediate when collapsed,
delayed when expanded).
* Shortcut-aware tooltip display now shows multi-step key sequences
clearly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-23 08:06:03 -06:00