mirror of
https://github.com/supabase/supabase.git
synced 2026-05-23 01:39:34 +08:00
create-pull-request/patch
26 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Ali Waseem
|
6f88585a7e |
feat(studio): add keyboard shortcuts for Advisors (#46238)
## Summary Adds discoverable keyboard shortcuts for the Advisors area, covering both navigation between advisor sub-pages and in-page actions on the Security/Performance Advisor pages. Built on the shared shortcut registry (`apps/studio/state/shortcuts/`) so they show up in the command menu and follow the existing chord conventions (`V` for adVisor, mirroring auth-nav / database-nav). Linear: [FE-3413](https://linear.app/supabase/issue/FE-3413) ### Shortcuts | Shortcut | Action | Scope | | --- | --- | --- | | `V` then `S` | Go to Security Advisor | Anywhere under `/project/<ref>/advisors/*` | | `V` then `P` | Go to Performance Advisor | Anywhere under `/project/<ref>/advisors/*` | | `V` then `R` | Go to Advisor Settings (Rules) | Anywhere under `/project/<ref>/advisors/*` | | `1` | Switch to Errors tab | Security / Performance Advisor page | | `2` | Switch to Warnings tab | Security / Performance Advisor page | | `3` | Switch to Info tab | Security / Performance Advisor page | | `Shift+R` | Refresh / rerun the advisor | Security / Performance Advisor page | | `Escape` | Close lint details panel | When a lint row is selected | ## Test plan - [x] From anywhere in Advisors, `V S` / `V P` / `V R` route to Security / Performance / Rules - [x] On Security and Performance Advisor pages, `1` / `2` / `3` switch tabs and update the `preset` query param - [x] `Shift+R` reruns the linter (disabled while a refresh is in-flight) - [x] `Escape` closes the lint details side panel when a lint is selected - [x] Digit shortcuts do not fire while typing in inputs (`ignoreInputs: true`) - [x] Shortcuts appear in the command menu under the Advisors group <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added keyboard shortcuts for Advisors (tab navigation, refresh/rerun, close detail) with visible shortcut hints on tabs, refresh/rerun buttons, close controls, and the Advisors menu; pages wire shortcuts to tab switching, refresh, and close actions. * **Chores** * Registered Advisors shortcuts globally and added an Advisors navigation group for discovery in the shortcuts reference. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46238?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> |
||
|
Danny White
|
a27487fe58 |
feat(studio): add keyboard shortcuts for platform webhooks (#46198)
## What kind of change does this PR introduce? Feature. Resolves FE-3418 ## What is the current behaviour? Platform webhooks (org and project) have no keyboard shortcut coverage. Every action requires a mouse click. ## What is the new behaviour? Adds seven shortcuts across the four UI states of the platform webhooks pages: **List page** | Shortcut | Action | |---|---| | `Shift+F` | Focus search input | | `Shift+N` | Open "New endpoint" sheet | **Endpoint detail page** (when viewing a specific endpoint) | Shortcut | Action | |---|---| | `Shift+E` | Open the edit sheet | | `Shift+U` | Copy the endpoint URL | **Create / edit form sheet** | Shortcut | Action | |---|---| | `Mod+Enter` | Submit the form (create or save) | **Delivery details sheet** (when a delivery row is open) | Shortcut | Action | |---|---| | `Shift+R` | Retry the delivery (only active for non-success deliveries) | | `Shift+C` | Copy the active tab's payload (switches label between "Copy event payload" / "Copy response payload") | All shortcuts: - Are surfaced via `ShortcutTooltip` / `Shortcut` tooltips on their buttons - Appear in the keyboard shortcuts reference sheet (`Mod+/`) under a new **Platform Webhooks** group - Are gated so they only fire in the appropriate UI state (e.g. `Shift+E` is disabled while the edit sheet is already open) - Apply to both the org-level (`/org/[slug]/webhooks`) and project-level (`/project/[ref]/settings/webhooks`) pages as both use the same `PlatformWebhooksPage` component **Shared shortcuts reused** (no new IDs): `LIST_PAGE_FOCUS_SEARCH`, `LIST_PAGE_NEW_ITEM`, `ACTION_BAR_SAVE`. ## To test The platform webhooks UI is behind a feature flag for internal folks. Enable it in Studio via **Account → Feature Previews → Platform Webhooks**. The backend is not yet integrated, so you can test all the shortcuts on the 1–2 mock endpoints (and their deliveries) that appear. **List page** (`/org/[slug]/webhooks` or `/project/[ref]/settings/webhooks`): - [ ] `Shift+F` moves focus to the search input - [ ] `Shift+N` opens the "New endpoint" sheet (tooltip visible on hover of the button) **New endpoint sheet**: - [ ] Fill in a name and a valid URL, select at least one event type - [ ] `Mod+Enter` submits and creates the endpoint **Endpoint detail page**: - [ ] `Shift+E` opens the edit sheet (tooltip visible on the Edit button) - [ ] `Shift+U` copies the endpoint URL and shows a toast (tooltip visible on the copy icon next to the URL) **Edit sheet**: - [ ] `Mod+Enter` saves changes **Delivery details sheet** (click a delivery row to open): - [ ] `Shift+R` retries a failed/pending delivery (button and shortcut absent for successful deliveries) - [ ] On the **Event** tab: `Shift+C` copies the event payload, toast reads "Copied event payload" - [ ] On the **Response** tab: `Shift+C` copies the response payload, toast reads "Copied response payload" - [ ] Tooltip on both Copy buttons reflects the active tab label **Shortcuts reference sheet** (`Mod+/`): - [ ] A **Platform Webhooks** group appears when on an endpoint detail page or with the delivery sheet open with the relevant shortcuts listed - [ ] The basic shortcuts are shown under **List pages** when on the root Webhooks page --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Danny White
|
25c8194579 |
feat(studio): add Connect sheet shortcut guidance (#46185)
## What kind of change does this PR introduce? Feature, docs update. - Resolves FE-3419 - First pass for DEPR-578 ## What is the current behaviour? The Connect sheet can be opened from visible UI and command-menu actions, but it does not have a direct keyboard shortcut. Studio also has shortcut conventions in code, but limited agent-facing review guidance for contributors adding or touching Studio UI. ## What is the new behaviour? FE-3419: - Adds `O then C` to open the Connect sheet for active healthy projects. - Mounts the shortcut from the always-rendered Connect sheet, so it works without first opening the lazy command menu. - Surfaces the shortcut on the Connect button tooltip, in the shortcuts reference sheet, and on the Connect command-menu action. - Forces the tooltip closed while the sheet is open so Escape closes the sheet without also driving tooltip state. - Tracks keyboard shortcut opens with the existing Connect sheet telemetry event. - Moves single-item AI Assistant and Inline Editor shortcuts to the _Global Actions_ section in the cheatsheet. DEPR-578: - Adds a short Studio shortcut convention to `.claude/CLAUDE.md`. - Adds scoped Copilot review guidance for Studio shortcut coverage, discovery, and collision checks. - Points the guidance back to the existing shortcut registry, `useShortcut`, `Shortcut`, and `ShortcutTooltip` implementation context. | After | | --- | | <img width="1576" height="188" alt="CleanShot 2026-05-21 at 11 30 40@2x" src="https://github.com/user-attachments/assets/ba9d68c8-27ea-4c89-8016-d95d5bcea3ea" /> | | <img width="830" height="364" alt="CleanShot 2026-05-21 at 11 48 51@2x-FC627CB5-4A1C-49E2-B748-8AF0A3EBD7BC" src="https://github.com/user-attachments/assets/d6aa52c1-56b2-4731-8e6b-088e29da43ed" /> | Validation: - `pnpm --dir apps/studio exec vitest --run components/ui/GlobalShortcuts/ShortcutsReferenceSheet.test.tsx components/interfaces/ConnectButton/Connect.Commands.test.tsx components/interfaces/ConnectSheet/useConnectSheetShortcut.test.ts` - `git diff --check` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcut to open the Connect sheet from anywhere; Connect button displays the shortcut and is enabled only for eligible projects. * New "Global Actions" group in the shortcuts reference including AI Assistant, Inline Editor, and Connect. * **Documentation** * Added Studio keyboard-shortcuts guidance and linked it in project instructions. * **Tests** * Added tests covering connect shortcut behavior and command registration. * **Telemetry** * Connect-sheet open events now record keyboard shortcut as a source. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46185?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: Ali Waseem <waseema393@gmail.com> |
||
|
Ali Waseem
|
3d9fb2f98d |
feat(realtime): shortcuts for realtime (#46001)
## 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> |
||
|
Ali Waseem
|
83992c55f7 |
feat(log-explorer): arrow key and deeper shortcuts for log explorer (#45989)
Closes [FE-3378](https://linear.app/supabase/issue/FE-3378/featlogs-keyboard-shortcuts-for-function-logs-invocations-and-logs). ## Summary Adds a shared shortcut registry for every `LogsPreviewer` surface — Function Logs, Function Invocations, and the Logs Explorer — and brings the grid keyboard model in line with the Auth Users / Table Editor patterns. ## Shortcuts | Key | Action | | --- | --- | | `↑` / `↓` | Move single-row selection; opens side panel | | `Shift+Space` | Toggle current row in multi-select | | `Mod+A` | Toggle all visible rows in multi-select | | `Esc` | Staged: clear multi-select → close side panel | | `Shift+R` | Refresh logs | | `Shift+H` | Toggle histogram | | `Shift+L` | Load older logs | | `Shift+P` | Open time range picker | | `Mod+Shift+J / M / C` | Copy selected rows as JSON / Markdown / CSV (existing global handler) | ## Other changes - `ShortcutTooltip` on search, refresh, histogram, load older, and time-picker controls. - `onSearchInputEscape` wired on the logs search bar (clear → blur). - Visual row highlight (`rdg-row--focused`) when a row is keyboard-focused or multi-selected. - Multi-select copy dropdown gains a **Copy as CSV** entry and shows the keybind on each item via `ShortcutBadge`. - Manual arrow-nav (`navigate()`) updates `selectedRow` directly without going through `onRowClick`, so multi-select checkmarks survive keyboard navigation. ## Test plan - [x] Function Logs and Function Invocations: all shortcuts above fire while the page is mounted, no firing in other tabs. - [x] Logs Explorer: same shortcuts work; copy keybinds still copy *all* rows when nothing is multi-selected. - [x] Arrow keys on first load select the first row even when the focus sink is the active element. - [x] Selecting rows via checkbox or `Shift+Space`, then pressing arrow keys, preserves the checkmarks. - [x] Escape on a populated search input clears it; Escape on an empty input blurs it. - [x] Esc with multi-select active clears the selection before closing the side panel. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * CSV export for log selections (adds CSV alongside JSON and Markdown). * New logs-preview keyboard shortcuts: search focus, refresh, chart toggle, date picker, load older, navigation, and selection. * **Improvements** * Shortcut badges and tooltip integration across the logs UI. * Search input focus/ref support and controlled date-picker visibility. * Better no-results/error rendering and expanded copy dropdown sizing. * **Tests** * Added CSV formatting tests covering RFC 4180 edge cases. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45989) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
bffe49bb1d |
feat(edge-functions): keyboard shortcuts on overview, detail, and test sheet (#45947)
Closes [FE-3245](https://linear.app/supabase/issue/FE-3245/add-keyboard-shortcuts-to-edge-functions-pages). Adds keyboard shortcuts across the Edge Functions surface, mirroring the patterns already in place for Database / Auth / Storage. ## Summary Three layers of new shortcuts, plus one quality-of-life fix on the existing search input: ### 1. Edge Functions list page (`/project/:ref/functions`) | Key | Action | |---|---| | `Shift+F` | Focus the search input | | `Shift+N` | Route to `/functions/new` (deploy a new function) | | `F` then `C` | Clear search filter | | `Shift+R` | Refresh the functions list (new toolbar button) | | `S` then `C` | Reset sort to `name:asc` | | `Esc` (in search) | Clears value, then blurs on a second press (`onSearchInputEscape`) | ### 2. Edge Functions section nav (active anywhere under `/functions/*`) | Key | Action | |---|---| | `F` then `O` | Functions overview | | `F` then `K` | Secrets | Wired through `EdgeFunctionsProductMenu` items via `shortcutId`, registered by `<ProductMenuShortcuts />` mounted in `EdgeFunctionsLayout`. ### 3. Per-function detail (active anywhere under `/functions/:slug/*`) | Key | Action | |---|---| | `1` | Overview | | `2` | Invocations | | `3` | Logs | | `4` | Code | | `5` | Settings | | `Shift+T` | Open the Test sheet | | `Shift+D` | Toggle the Download popover | | `Shift+C` | Copy the function URL (with toast) | ### 4. Test sheet (active when `EdgeFunctionTesterSheet` is open) | Key | Action | |---|---| | `Mod+Enter` | Send Request — first binding for this; mirrors `SQL_EDITOR_RUN` semantics | ### 5. New per-function Overview (`edgeFunctionsOverview` flag) | Key | Action | |---|---| | `I` then `M` | 15 min | | `I` then `H` | 1 hour | | `I` then `T` | 3 hours | | `I` then `D` | 1 day | | `Shift+R` | Refresh combined stats query | | `O` then `L` | Open Logs (or Invocations if unified-logs preview is off) | `ShortcutTooltip` added to the most prominent buttons (search, refresh, copy URL, download, test, send request). Interval/refresh/open-logs on the overview are registered without inline tooltips but remain discoverable via `Cmd+K` and the shortcut reference sheet (`Mod+/`). ## Implementation notes - New reference group `NAVIGATION_FUNCTION_DETAIL` ("Function Page Navigation") added to keep the reference sheet grouped sensibly. - Three new registry files: `functions-list.ts`, `functions-nav.ts`, `functions-detail.ts`, `functions-detail-nav.ts`, `functions-overview.ts`. - Three new hooks: `useFunctionsListShortcuts`, `useFunctionsDetailShortcuts`, `useEdgeFunctionOverviewShortcuts`. - `EdgeFunctionsLayout` refactored to share a single `useGenerateEdgeFunctionsMenu` hook between `<ProductMenu>` and `<ProductMenuShortcuts>` (matches the AuthLayout / DatabaseLayout pattern). - Download popover hoisted to controlled state so `Shift+D` can toggle it. ## Test plan ### Functions list page - [x] On `/project/:ref/functions`, press `Shift+F` — search input gains focus and value is selected - [x] Type in the search → press `Esc` → value clears (focus retained). Press `Esc` again → blurs - [x] Press `Shift+N` → routes to `/functions/new` - [x] With a non-default sort, press `S` then `C` → sort resets to `name:asc`. Confirm shortcut is disabled when already at default - [x] Press `Shift+R` → list refetches; loading indicator appears on the new Refresh button - [x] Press `F` then `C` → search clears ### Section nav (anywhere under `/functions/*`) - [x] From any page under `/functions/*`, press `F` then `O` → navigates to Functions list - [x] Press `F` then `K` → navigates to Secrets - [x] Verify the chord doesn't fire while typing in an input ### Per-function detail (any sub-page) - [x] On any function detail tab, press `1`/`2`/`3`/`4`/`5` → navigates to Overview / Invocations / Logs / Code / Settings respectively (digits 2 and 3 only on platform builds) - [x] Press `Shift+T` → Test sheet opens. Press escape to close - [x] Press `Shift+D` → Download popover opens; press escape to close - [x] Press `Shift+C` → URL copied + toast appears - [x] Hover the URL copy button, Download button, Test button — `ShortcutTooltip` shows the chord ### Test sheet - [x] Open the Test sheet (button or `Shift+T`) - [x] Without focusing anything, press `Mod+Enter` → request fires - [x] With focus inside the body editor / a header input, press `Mod+Enter` → request still fires (`Mod+`-keys bypass input guard) - [x] While `isPending`, `Mod+Enter` is a no-op (shortcut disabled) - [x] Hover Send Request → tooltip shows `Mod+Enter` ### New overview (with `edgeFunctionsOverview` flag enabled) - [x] Press `I` then `M` / `H` / `T` / `D` → interval segmented buttons highlight accordingly and chart re-fetches - [x] Press `Shift+R` → stats refetch - [x] Press `O` then `L` → routes to logs (or invocations when unified-logs preview is off) ### Regression checks - [x] `Cmd+/` opens the reference sheet and the new "Edge Functions Navigation" and "Function Page Navigation" groups render - [x] `Cmd+K` command palette includes the new shortcut entries under "Shortcuts" - [x] On the list page, the existing X button on the search still clears value - [x] Esc handler does not interfere with closing modals/popovers elsewhere on the page <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added comprehensive keyboard shortcuts for Edge Functions (navigation, tab switching, chart intervals, create/refresh, test/send request, download, copy URL) with visible shortcut hints on relevant buttons and inputs. * **Refactor** * Layouts and product menu updated to surface and wire these shortcuts across the UI. * **Tests** * Shortcut reference tests updated to include Edge Functions groups and entries. * **Documentation** * Shortcut reference sheet labels updated to include Edge Functions sections. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45947) <!-- 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> |
||
|
Ali Waseem
|
712cf7e60b |
feat(storage): add keyboard shortcuts for storage screens (#45837)
## Summary
Adds keyboard shortcuts to the Storage section, mirroring the
conventions already established for Auth Users and Database pages:
- **Storage navigation chords** (`S, F` / `S, A` / `S, V` / `S, 3`)
active only inside `StorageLayout`.
- **Files (bucket list) page** shortcuts for search, create, refresh,
reset filters, reset sort.
- **Storage Explorer** shortcuts for upload, new folder, view toggle,
refresh, search, multi-select download/move/delete, and an Escape
ladder.
- `ShortcutTooltip` wired into the relevant buttons so users can
discover keybinds on hover.
- Reload spinner is now driven by a shared store flag, so it shows
whether you click the button or fire the shortcut.
## Test plan
### Storage navigation chords
Active anywhere under `/project/<ref>/storage/*`.
| Keybind | Action |
|---------|--------|
| `S` then `F` | Go to Files |
| `S` then `A` | Go to Analytics buckets (platform + feature-flagged) |
| `S` then `V` | Go to Vector buckets (platform + feature-flagged) |
| `S` then `3` | Go to S3 settings (platform only) |
### Files (bucket list) page
At `/project/<ref>/storage/files`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search buckets") | Selects existing text |
| `Shift+N` | Create new bucket | Opens the create-bucket modal |
| `F` then `C` | Reset filters | Clears the search string |
| `Shift+R` | Refresh buckets | Refetches the bucket list |
| `S` then `C` | Reset bucket sort | Only fires when sort ≠ default
(Created at) |
### Storage Explorer (inside a bucket)
At `/project/<ref>/storage/files/buckets/<bucketId>`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search files") | Opens the search input if
hidden, then focuses |
| `Shift+R` | Refresh | Refetches all opened folders; spinner reflects
state |
| `I` then `F` | Upload files | Disabled w/o ` STORAGE_WRITE ` or at
bucket root with no folder |
| `I` then `N` | Create folder | Same permission gates as Upload |
| `V` then `C` | View as columns | |
| `V` then `L` | View as list | |
| `Shift+D` | Download selected | Only fires when ≥1 item selected;
single vs many handled |
| `Shift+M` | Move selected | Only fires when ≥1 item selected AND `
STORAGE_WRITE ` granted |
| `Mod+Backspace` | Delete selected | Only fires when ≥1 item selected
(` Mod ` = ⌘ on macOS / ` Ctrl ` on Win/Linux) |
| `Escape` | Clear selection | If ≥1 item selected |
| `Escape` | Close file preview | If no selection and preview pane open
|
| `Escape` | Close search | If no selection, no preview, and search is
open |
### Tips while testing
- [x] Chords (two-key sequences): press the first key, release, then
press the second key within ~1s
- [x] Hover any wired button (search, Refresh, Upload, Create folder,
View, Download, Move, Delete, the bucket Create button, sidebar items)
to see the keybind in a tooltip
- [x] Most actions also appear under "Shortcuts" in `Cmd+P`
- [x] Chords starting with a plain letter (` S, F ` / ` I, F ` / ` V, C
` / ` F, C ` / ` S, C `) won't fire while typing in an input — click out
first
- [x] `Escape` does fire from inside the search field (closes the
search)
- [x] `Cmd+/` opens the full shortcuts reference
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcuts added across Storage: buckets (refresh, clear sort,
create, search), explorer (upload, create folder, refresh, download,
move, delete, clear search), and navigation shortcuts for
Files/Analytics/Vectors/S3.
* **UI**
* Shortcut keytips/tooltips added to relevant buttons and menu items for
discoverability.
* **Documentation/Tests**
* Shortcut reference sheet labels updated and covered by a new test.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45837)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
|
||
|
Ali Waseem
|
f06b877ac6 |
feat(auth-users): add keyboard shortcuts to users page (#45650)
Closes [FE-3173](https://linear.app/supabase/issue/FE-3173/add-keyboard-shortcuts-to-auth-users-page) ## Shortcuts | Key | Action | |---|---| | `Shift+F` | Focus search input | | `F C` | Reset filters | | `Shift+R` | Refresh users | | `S C` | Reset sort to default | | `Mod+A` | Toggle selection on all loaded users | | `Mod+Backspace` | Open bulk-delete confirm modal | | `Esc` | Clear row selection + cell focus | | `Esc` (panel open) | Close user details panel | | `↑` / `↓` | Move focus into the grid; native arrow nav after | | `Enter` (row focused) | Open user details panel | | `I U` | Open Create user modal | | `I I` | Open Send invitation modal | ## Test plan - [ ] `Shift+F` focuses the search input - [ ] `F C` clears keywords, user type, providers - [ ] In the search input: Esc clears value, Esc again blurs - [ ] `Shift+R` refreshes - [ ] `S C` resets sort; no-op at default - [ ] `Mod+A` toggles all loaded users when ≤ 20 are loaded - [ ] `Mod+Backspace` opens the delete confirmation when a selection exists - [ ] `↑` / `↓` from cold load enters the grid; subsequent arrows navigate cells - [ ] `Enter` on a focused row opens the panel - [ ] `Esc` with panel open closes it; without panel, clears selection + cell focus - [ ] `I U` opens the Create user modal - [ ] `I I` opens the Send invitation modal - [ ] All shortcuts appear in `Cmd+K` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Comprehensive keyboard shortcuts for user management (focus search, refresh, reset filters, bulk select, open delete modal, close panel). * Improved keyboard navigation in the user list with cell-level movement and Enter-to-select behavior. * Search input: Escape clears search/keywords and it can be focused programmatically. * Shortcut hint badges added to "Send invitation" / "Create new user" dropdown items. * **Chores** * Centralized refresh behavior for consistent interaction. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Ali Waseem
|
0278672102 |
feat(studio): add Auth sub-page navigation chords (#45696)
## Summary - Adds contextual `A + <letter>` chord shortcuts for jumping between Authentication sub-pages while `AuthLayout` is mounted, mirroring the existing database-nav chord pattern. - Wires the shared `LIST_PAGE_*` shortcuts (focus search, create new, reset filters, schema selector) onto the Auth list pages so they behave like the Database list pages. - Fills in the previously-missing `A + U` chord for the **Users** page so every entry in the Auth menu has a chord. Resolves [FE-3187](https://linear.app/supabase/issue/FE-3187/add-a-u-keyboard-shortcut-for-auth-users-page). ## Auth navigation chords Active anywhere under `/project/<ref>/auth/*`. Press `A` then the listed letter. | Page | Chord | | --- | --- | | Overview | `A` `O` | | Users | `A` `U` | | OAuth Apps | `A` `A` | | Email | `A` `E` | | Policies | `A` `P` | | Sign In / Providers | `A` `I` | | Passkeys | `A` `K` | | OAuth Server | `A` `V` | | Sessions | `A` `S` | | Rate Limits | `A` `R` | | Multi-Factor | `A` `M` | | URL Configuration | `A` `L` | | Attack Protection | `A` `T` | | Auth Hooks | `A` `H` | | Audit Logs | `A` `G` | | Performance | `A` `F` | ## Auth list-page shortcuts Each Auth list page opts into the shared `LIST_PAGE_*` registry — same chords as the Database list pages (`Shift+F`, `Shift+N`, `F` `C`, `O` `S`). Coverage matches the controls each page actually exposes: | List page | Search (`Shift+F`) | New (`Shift+N`) | Reset filters (`F` `C`) | Schema selector (`O` `S`) | | --- | :---: | :---: | :---: | :---: | | Custom Auth Providers | ✓ | ✓ | ✓ | — | | OAuth Apps | ✓ | ✓ | ✓ | — | | Policies | ✓ | — | ✓ | ✓ | | Auth Hooks | — | ✓ | — | — | | Redirect URLs | — | ✓ | — | — | | Third-Party Auth | — | ✓ | — | — | ## Test plan - [x] While anywhere under `/project/<ref>/auth/*`, every chord in the navigation table jumps to the corresponding page. - [x] On each list page in the second table, the marked shortcuts focus the search input / open the create flow / reset filters / open the schema picker as expected. - [x] Chords are not active outside of `/project/<ref>/auth/*` and do not trigger while typing in inputs (where `ignoreInputs` applies). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Global keyboard shortcuts for Auth pages: navigate auth sections, focus/search inputs, reset filters, and open "Add" flows (providers, OAuth apps, hooks, URLs, policies). * "Add" controls in lists respond to shortcuts and show appropriate disabled/tooltip states when unavailable. * Product menu and shortcuts reference now include an "Auth Navigation" section and per-item shortcut hints. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Danny White
|
f32977f04d |
chore(studio): show active shortcuts in reference sheet (#45614)
## What kind of change does this PR introduce? UI chore. ## What is the current behavior? The Keyboard shortcuts sheet renders shortcut definitions from the static registry, so contextual Database navigation shortcuts appear in the sheet even when `DatabaseLayout` is not active. This makes the Navigation section noisy as more product-specific navigation shortcuts are added. ## What is the new behavior? The shortcuts sheet now reads the mounted, enabled shortcut set at runtime. Global navigation remains under Navigation when it is the only navigation scope, and splits into _**Global** Navigation_ plus _**Database** Navigation_ when contextual database shortcuts are active. This also replaces the one-off `DatabaseNavShortcuts` component with a reusable `ProductMenuShortcuts` registrar so future product layouts can register scoped navigation shortcuts from their product menu model. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added keyboard shortcut support for product menu navigation items with router integration * **Improvements** * Keyboard shortcuts are now organized into logical groups (Global Navigation and Database Navigation) * Shortcut reference dynamically displays only active shortcuts instead of static definitions <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Ali Waseem
|
2e904abebf |
feat(studio): add D + letter shortcuts for Database sub-pages (#45546)
## Summary Adds a contextual `D + <letter>` chord pattern for jumping between Database sub-pages, mounted only while `DatabaseLayout` is active. Establishes the pattern we can repeat for other sections (Auth, Storage, Functions, etc.). Linear: [FE-3140](https://linear.app/supabase/issue/FE-3140/define-subnavigation-pattern-for-database-management-page) ## Pattern - Chords are 2-key sequences (`D`, `<letter>`) — no global leader, no `G` prefix. - Registration is contextual: `<DatabaseNavShortcuts />` lives inside `DatabaseLayout`, so the leading `D` is only "owned" while the user is under `/project/<ref>/database/*`. Doesn't burn a global key. - Hover tooltips on each sub-menu item show the chord, anchored to the label text (Linear-style). Powered by `<ShortcutTooltip>` already used in the main nav. - Items hidden by feature flags (Roles, Column Privileges, Replication) auto-disable the chord — no muscle-memory navigating to a 404. ## Shortcuts added | Sub-page | Chord | Notes | |---|---|---| | Tables | `D T` | | | Functions | `D F` | | | Triggers | `D R` | t**R**iggers — `T` taken by Tables | | Indexes | `D I` | | | Extensions | `D X` | e**X**tensions | | Schema Visualizer | `D V` | | | Enumerated Types | `D E` | | | Publications | `D U` | p**U**blications — avoids collision with Schema Visualizer's `D P` (Download as PNG) | | Column Privileges | `D C` | flag-gated | | Settings | `D ,` | mirrors global `G ,` for project settings — avoids collision with Schema Visualizer's `D S` (Download as SVG) | | Replication | `D L` | rep**L**ication — flag-gated | | Roles | `D O` | r**O**les — flag-gated | | Backups | `D B` | platform-only | | Migrations | `D M` | | External-link sub-menu items (Policies, Wrappers, Webhooks, Security Advisor, Performance Advisor, Query Performance) are intentionally not chorded — they route out of `/database/*` and don't belong to the section's namespace. ## Collision audit Other shortcuts active on database pages (table-list, schema-visualizer) were checked against the new chords: - **Schema Visualizer** (`/database/schemas`): `D P` (Download PNG), `D S` (Download SVG), `O A`, `O S`. Publications and Settings were remapped to `D U` and `D ,` to avoid the `D P` / `D S` clashes. - **List pages** (`/database/tables`, etc.): `Shift+F`, `Shift+N`, `O S`, `F C` — no overlap with `D + <letter>`. ## Files - `state/shortcuts/registry/database-nav.ts` — new registry module with the 14 chord definitions. - `state/shortcuts/registry.ts` — spreads the new IDs/definitions into the canonical registry. - `components/interfaces/DatabaseNavShortcuts.tsx` — null-rendering hook component that wires `useShortcut` for each chord, keyed off `useGenerateDatabaseMenu` so URLs and feature gating stay in sync with the sidebar. - `components/layouts/DatabaseLayout/DatabaseLayout.tsx` — mounts the component. - `components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx` — tags each menu item with its `shortcutId`. - `components/ui/ProductMenu/ProductMenu.types.ts` — adds optional `shortcutId?: ShortcutId` field. - `components/ui/ProductMenu/ProductMenuItem.tsx` — renders the hover tooltip when an item has a `shortcutId`, anchored to the label span. ## Test plan - [ ] On `/project/<ref>/database/tables`, press `D F` — navigates to `/database/functions`. - [ ] On `/project/<ref>/database/schemas`, press `D P` — downloads the PNG (Schema Visualizer wins, no nav conflict). - [ ] On `/project/<ref>/database/schemas`, press `D U` — navigates to `/database/publications`. - [ ] On `/project/<ref>/database/tables`, press `D ,` — navigates to `/database/settings`. - [ ] Hover any sub-menu item with a chord — pill appears next to the label after ~1s. - [ ] On a project with the Replication flag off — `D L` does nothing. - [ ] Navigate to `/auth` — pressing `D F` does nothing (chord unmounts with the layout). - [ ] Type `D` then `F` slowly inside an input — does not navigate (input-focus guard). |
||
|
Ali Waseem
|
618c902e1a |
feat(studio): add keyboard shortcuts to Database listing pages (#45467)
## Summary Adds the `O→S` / `Shift+F` / `Shift+N` / `F→C` shortcut set across every Database listing page, on top of the schema-visualizer pattern from #45386. Fixes [FE-3131](https://linear.app/supabase/issue/FE-3131). A shared `list-page.*` registry replaces what would have been a per-page registry file for each route, and `useShortcut`/`Shortcut` gain a `label` override so a single ID renders contextually in Cmd+K and hover tooltips. ## Pages and shortcuts | Page | `O→S` | `Shift+F` | `Shift+N` | `F→C` | | --- | --- | --- | --- | --- | | Tables | Open schema selector | Search tables | Create new table | Clears search + entity-type filter | | Functions | Open schema selector | Search functions | Create new function | Clears search + Return Type + Security | | Triggers — data | Open schema selector | Search triggers | Create new trigger | Clears search + Table filter | | Triggers — event | — | Search event triggers | Create new event trigger | Clears search + Owner filter | | Enumerated Types | Open schema selector | Search enumerated types | Create new enumerated type | Clears search | | Indexes | Open schema selector | Search indexes | Create new index | Clears search | | Roles | — | Search roles | Add new role | Clears search + filter type → 'all' | | Publications | — | Search publications | — | Clears search | | Extensions | — | Search extensions | — | Clears search | `Shift+N` only fires when the page-specific gate allows it (permission + unlocked schema + any other prerequisite like `hasTables` for triggers). ## Test plan - [ ] On each of the 9 pages, all four shortcuts behave as listed in the table above - [ ] Hover the wrapped controls — tooltip shows the page-specific label and the right keybind badge - [ ] Open the schema selector via `O→S` — the hover tooltip is suppressed while the popover is open - [ ] `Shift+N` is a no-op on locked schemas / when permission is missing / when a prereq fails (e.g. no tables on Triggers data) - [ ] `Shift+F` focuses the search input; while focused, Escape clears (with text) → Escape blurs (when empty) - [ ] `Cmd+K` shows the page-specific shortcut name while on each page; the entry goes away on navigation - [ ] `Mod+/` reference sheet shows one "List pages" group with 4 generic entries - [ ] No regression to existing schema-visualizer / table-editor / SQL-editor shortcut behavior <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a dedicated list-page shortcut group in the shortcuts reference. * **Improvements** * Keyboard shortcuts across database list pages: focus & select search, reset filters, and create-new-item shortcuts. * Escape now clears/searches or blurs inputs to avoid accidental popover closes. * Create/new buttons respond to shortcuts when allowed; disabled actions keep permission tooltips for clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Danny White
|
61c6c51b81 |
feat(studio): improve keyboard shortcuts reference (#45352)
## What kind of change does this PR introduce? Feature improvement to the Studio keyboard shortcuts reference and command palette behaviour. ## What is the current behavior? The keyboard shortcuts sheet does not support filtering, some shortcut labels are harder to scan at a glance, and the command palette shows "Show all keyboard shortcuts" before the more contextual shortcuts in the `Shortcuts` section. ## What is the new behavior? Adds live filtering to the keyboard shortcuts sheet, keeps the sheet width stable on small breakpoints, renders arrow-based shortcuts more compactly, and moves "Show all keyboard shortcuts" to the end of the `Shortcuts` section so contextual actions appear first. https://github.com/user-attachments/assets/315a1a36-0cfb-4a0d-b6de-ef3c86aa9a05 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added search for keyboard shortcuts with live filtering, group-aware results, clear-search action, and empty-state handling * Added arrow key symbols for clearer shortcut visuals * **Improvements** * Updated shortcut visuals and typography for a tighter, pill-style presentation * Improved command menu ordering so shortcut-related entries appear in a logical sequence * **Tests** * Added tests covering shortcut search behavior, display formatting, and platform-specific key rendering <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
fa8f49b261 |
feat(studio): add keyboard shortcuts to the SQL editor (#45335)
## Summary Adds the first batch of keyboard shortcuts for the SQL editor, following the registry pattern established for the table editor. ## Shortcuts | Shortcut | Action | Notes | | --- | --- | --- | | `Esc` | Blur the SQL editor | Registered as a Monaco command with a context-key precondition so inline widgets keep owning `Esc` (suggest, find, parameter hints, snippet/rename mode, accessibility help, inline suggestions, and selection cancellation). | | `Shift+E` | Focus the SQL editor | Pairs with `Esc` for mouse-free round-trip. | | `Alt+Shift+F` | Prettify SQL | Now wired through the registry; the tooltip and dropdown badge in `UtilityActions` read the keybind from the same source of truth. Works from inside the editor (Monaco action) and from anywhere on the page (`useShortcut`). | | `Mod+Shift+Enter` | Run EXPLAIN ANALYZE | Routes results into the Explain tab. Surfaces in the Monaco context menu next to "Run Query". | | `Shift+N` | Open a new SQL snippet | Navigates to `/sql/new?skip=true` to avoid the redirect-to-last-visited effect that fires on plain `/sql/new`. | All entries appear in the command menu (`Mod+P`) under "Shortcuts" while their host components are mounted. None are surfaced in Account → Preferences → Keyboard shortcuts yet (`showInSettings: false`), matching how the table editor shortcuts shipped. ## Notes - The blur shortcut intentionally lives on the Monaco instance rather than the document-level hotkey listener — the document listener can't preempt Monaco's own `Esc` handling. Other shortcuts that need to fire while the editor has focus (run, save, format, explain) are registered as Monaco actions; everything else uses `useShortcut`. - Format and explain are double-registered (Monaco action + `useShortcut`) so they fire whether the editor is focused or not. The Monaco actions don't read the user's enable/disable preference yet — same asymmetry as the existing run/save actions. - `Shift+N` is scoped to the SQL editor route. To make it work globally we'd register it at a higher layout level. ## Test plan - [x] Inside editor: `Esc` blurs; suggest/find/parameter hints still close on `Esc`; multi-cursor selection collapses on first `Esc`, blurs on second. - [x] Outside editor: `Shift+E` returns focus to the editor. - [x] `Alt+Shift+F` formats from inside and outside the editor; tooltip + dropdown badge show the correct keybind. - [x] `Mod+Shift+Enter` runs EXPLAIN ANALYZE and switches to the Explain tab. - [x] `Shift+N` opens a fresh snippet without bouncing back to the previous one. - [x] All five shortcuts appear in `Mod+P` with the right badges. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcuts for SQL editor: format SQL, run EXPLAIN ANALYZE, focus/blur editor, and open a new SQL snippet. * Added "Prettify SQL" and "Run EXPLAIN ANALYZE" actions to the editor context menu with shortcuts. * Centralized registration of SQL editor shortcuts so they appear across the app. * **UX Improvements** * Escape key blurs editor focus when appropriate to allow easy exit without disrupting editor widgets. * **Style** * Adjusted success toast capitalization for copied Markdown. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Ali Waseem
|
e7c33bf580 |
feat(studio): add insert, filter, sort, refresh shortcuts to the table editor (#45191)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature — a second batch of table editor shortcuts, stacked on top of #45178. ## What is the current behavior? Inserts / filters / sort / refresh are all mouse-only. No keyboard access, and no affordance for discovering what keybinds might exist. ## What is the new behavior? ### New shortcuts | Keybind | Action | Surface | |---|---|---| | `I` then `R` | Insert row | hotkey + Cmd+K + inline keybind in Insert dropdown | | `I` then `C` | Insert column | hotkey + Cmd+K + inline keybind in Insert dropdown | | `I` then `U` | Import data from CSV | hotkey + Cmd+K + inline keybind in Insert dropdown | | `Shift+F` | Focus filters | hotkey + Cmd+K — focuses the new filter bar's freeform input | | `F` then `C` | Clear filters | hotkey + Cmd+K — gated on `filters.length > 0` | | `S` then `C` | Clear sort | hotkey + Cmd+K — gated on `sorts.length > 0` | | `Shift+R` | Refresh table | hotkey + Cmd+K + hover tooltip on the Refresh button | All are `ignoreInputs: true` so they don't fire while typing. The insert / clear-filters / clear-sort shortcuts use two-step chords so they don't clobber single-letter keys users might reach for elsewhere; Focus filters and Refresh keep their Shift-prefixed single-step bindings. ### Infrastructure - **New `<ShortcutBadge>`** (`components/ui/ShortcutBadge.tsx`) — inline keybind display. Reads the sequence straight from the registry, so the ID is the single source of truth. Renders multi-step chords with a "then" separator between steps. Defaults to `variant="inline"` (the flat `text-foreground/40` style used across the app in `RunButton`, `ActionBar`, `OperationQueueSidePanel`, etc.) with `variant="pill"` available if someone needs the boxed style. - **Insert dropdown restyled** — each `DropdownMenuItem` in `HeaderNew`'s Insert menu now shows its keybind inline on the right (centered vertically, with `pr-4` + `shrink-0` so long table names in the description never crowd the badge). - **`RefreshButton`** swapped from `ButtonTooltip` to `<Shortcut>` so the keybind tooltip renders automatically from the registry. - **`FilterPopoverPrimitive` untouched** — the old filter bar is being deleted, so Shift+F is scoped to the new filter bar only. The handler focuses `[data-testid="filter-bar-freeform-input"]` (the existing freeform input in the ui-patterns `FilterBar` → `FilterGroup`). ## Additional context Stacked on #45178 (FE-3057 — initial table editor shortcuts). Rebase after that one merges. ### Test plan - [x] Open a table → Insert dropdown shows keybind to the right of each item, no wrap encroachment even with long table names - [x] `I` then `R` opens the Row editor; `I` then `C` opens the Column editor; `I` then `U` opens the CSV import flow - [x] `Shift+F` focuses the new filter bar's freeform input - [x] Add a filter → `F` then `C` clears it; shortcut disabled in Cmd+K when no filters are applied - [x] Sort a column → `S` then `C` clears sort; shortcut disabled when no sorts - [x] `Shift+R` refreshes the table (spinner shows on the Refresh button); hover the button → keybind tooltip - [x] All seven new entries show up in Cmd+K when their gates are satisfied <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added keyboard shortcuts for table actions: insert row, insert column, import CSV, refresh, focus filters, clear filters, and clear sorts. * Shortcuts are available in the command menu and show visual keyboard hints. * **UI** * Menu entries now display shortcut badges. * Refined dropdown spacing/layout and updated the refresh control to surface its shortcut. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
42b431a270 |
feat(studio): add keyboard shortcuts to the table editor (#45178)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature — a set of new keyboard shortcuts for the table editor, along with infrastructure to register, gate, and surface them. ## What is the current behavior? Clicking into the grid "traps" the keyboard: Escape doesn't pop out, there are no shortcuts for row selection / deletion / navigation, and the search-tables input grabs focus on page load. ## What is the new behavior? ### New shortcuts (all scoped to the table editor) | Keybind | Action | Surface | |---|---|---| | `Esc` | Exit grid selection — clears the highlighted cell and drops focus back to the page | hotkey | | `↑` / `↓` | Start grid navigation from the first cell when no cell is selected | hotkey | | `Shift+Space` | Toggle selection on the current row | hotkey + checkbox tooltip | | `Mod+A` | Toggle selection on all displayed rows (matches Excel) | hotkey + header-checkbox tooltip + Cmd+K | | `Mod+Shift+A` | Toggle selection on all rows in the table | hotkey + "Select all rows in table" button tooltip + Cmd+K | | `Mod+Backspace` | Delete selected rows | hotkey + delete-button tooltip + Cmd+K | ### Infrastructure - **Split registry** — table-editor shortcuts moved to `state/shortcuts/registry/table-editor.ts`, spread into `SHORTCUT_IDS`. Makes it easy to scope a runtime check to a specific surface. - **`eventMatchesAnyShortcut`** (`state/shortcuts/matchEvent.ts`) — queries the hotkey library's live `SequenceManager` so gated shortcuts (`enabled: false`) are correctly excluded. Covered by `matchEvent.test.ts`. - **`handleCellKeyDown`** now calls `event.preventGridDefault()` whenever the keystroke matches an active table-editor shortcut, so rdg's "start editing on key press" default doesn't compete with shortcut actions (e.g. typing `Shift+X` no longer opens edit mode with `X` as input). - **`<Shortcut>` / `<ShortcutTooltip>`** used on the header checkbox, the per-row checkbox, the "Select all rows in table" button, and the delete button — keybinds show up on hover (Linear-style) so users can discover them without reading docs. - **CSS** — `.rdg:not(:focus-within) .rdg-cell[aria-selected='true']` drops the selected-cell outline whenever focus leaves the grid, reinforcing the "you're out" feedback after `Esc`. - **`useShortcut`** wraps the Cmd+K-registered action to close the command menu after firing (previously menu stayed open after selecting an action). - **Search-tables input** no longer auto-focuses on load, so arrow shortcuts work immediately without clicking out first. ## Additional context Linear: FE-3057 ### Test plan - [x] Open any table → `↓` selects the first cell; subsequent arrows navigate rows - [x] `Esc` drops focus out of the grid and re-enables `↓` to re-enter - [x] Click a cell → `Shift+Space` toggles that row's selection (checkbox) - [x] `Mod+A` toggles all displayed rows - [x] With pagination + some rows selected → `Mod+Shift+A` toggles "Select all rows in table" - [x] With rows selected → `Mod+Backspace` deletes them (existing confirmation flow) - [x] Hover the header checkbox / per-row checkbox / delete button → keybind tooltip after ~500ms - [x] Cmd+K with selection → the relevant action shows up; selecting it closes the palette and runs <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added table editor keyboard shortcuts for navigation, row selection, and cell actions, with command-menu integration and visible shortcut tooltips. * **Improvements** * Better keyboard handling in grid cells allowing external shortcuts to override default behavior. * Select-all/deselect-all toggle and improved select-row UX; selected-cell styling no longer shows when grid loses focus. * Command menu now reliably closes before executing shortcut actions. * Removed autofocus on the table editor search input for consistent focus behavior. * **Tests** * Added unit tests covering shortcut matching and command-menu shortcut behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
ec7233b33c |
feat(studio): add keyboard shortcuts reference (#45197)
## What kind of change does this PR introduce? Feature. ## What is the current behaviour? Keyboard shortcuts can be discovered piecemeal through command palette entries, tooltips, and preferences, but there is no universal shortcut reference surface. ## What is the new behaviour? Adds a global `Mod+/` shortcut and command palette action to open a keyboard shortcuts reference sheet. The sheet renders registered shortcuts grouped from general dashboard actions through navigation and more specific surfaces. | Preview | | --- | | <img width="820" height="928" alt="CleanShot 2026-04-24 at 11 27 51@2x" src="https://github.com/user-attachments/assets/8ceb4a35-7adc-474b-8702-5c08a4219d25" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a comprehensive keyboard shortcuts reference sheet that displays all available shortcuts organized into logical categories. * New keyboard shortcut Mod+/ (Cmd+/ on Mac) opens the reference sheet instantly from anywhere within the application. * Shortcuts are displayed with their formatted keyboard combinations, with multi-step sequences clearly separated for easy reference and discovery. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
fa4053cd59 |
fix(studio): preserve ignoreInputs across re-renders in useShortcut (#45174)
## Summary Fixes [FE-3060](https://linear.app/supabase/issue/FE-3060/modshiftc-modshiftm-shortcuts-suppressed-when-a-table-editor-cell-is). `Mod+Shift+C` (Copy as CSV) and `Mod+Shift+M` (Copy as Markdown) — and any other Meta/Ctrl/Escape shortcut registered via `useShortcut` without an explicit `ignoreInputs` — stopped firing when focus landed on a `react-data-grid` cell in the table editor (or any other input/contenteditable). ## Fix In `apps/studio/state/shortcuts/useShortcut.tsx`, only include `ignoreInputs` in the options object when it's actually set, so TanStack's register-time default sticks across re-renders. Updated the `ignoreInputs resolution` test to assert that the key is omitted (rather than passed as `undefined`) when neither caller nor registry set it. ## Test plan - [x] SQL editor results: `Cmd+Shift+C`, `Cmd+Shift+M`, `Cmd+Shift+J`, `Cmd+Shift+D` still fire - [x] `Mod+ArrowUp` / `Mod+ArrowDown` / `Mod+ArrowLeft` / `Mod+ArrowRight` inside a focused cell editor still blocked (registry sets `ignoreInputs: true`) - [x] Unit tests: `pnpm vitest run state/shortcuts/useShortcut.test.tsx` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed keyboard shortcut handling to properly respect the hotkey library's default configuration values when custom options are not explicitly specified. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
d67050c44e |
test(studio): add unit tests for shortcut primitives (#45162)
## Summary Closes [FE-3056](https://linear.app/supabase/issue/FE-3056/add-unit-tests-for-new-shortcut-primitives). Backfills unit coverage for the shortcut primitives added in the recent keyboard-shortcut overhaul — these shipped with no tests. - **`state/shortcuts/formatShortcut.test.ts`** (16 tests) — `hotkeyToKeys`: `Mod → Meta` mapping (case-sensitive, substring-safe), single/multi-modifier combos, named keys, punctuation, edge cases. - **`state/shortcuts/useShortcut.test.tsx`** (26 tests) — mocks `useHotkeySequence`, `useRegisterCommands`, and `useIsShortcutEnabled` to unit-test: sequence/callback wiring (single-step + multi-step G-chords), full option-resolution priority (caller → registry → fallback) for `enabled` / `timeout` / `ignoreInputs`, global-preference AND gating, command-menu registration across all four enable permutations, stable action identity, stale-closure protection via `useLatest`, and badge rendering with/without the "then" separator. - **`components/ui/Shortcut.test.tsx`** (12 tests) — mocks `useShortcut` and `ShortcutTooltip` to verify prop forwarding (including rerender behavior), tooltip positioning props, unset-prop hygiene, and the `asChild` pass-through contract (clicks on the child do not fire `onTrigger`). 54 tests total, all passing. ## Test plan - [x] `pnpm --filter studio test state/shortcuts/formatShortcut.test.ts state/shortcuts/useShortcut.test.tsx components/ui/Shortcut.test.tsx` - [x] `tsc --noEmit` clean across the three test files <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Tests** * Added comprehensive test coverage for the Shortcut component, verifying rendering, hook integration, and tooltip behavior. * Added test suite for hotkey key formatting, covering plain keys, named keys, modifiers, and edge cases. * Added test suite for the useShortcut hook, validating hotkey sequences, enablement logic, command menu integration, and callback handling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Ali Waseem
|
3838e32d33 |
chore(studio): migrate useKeyboardShortcuts to useShortcut (#45100)
## Summary - Follow-up to #45099 — migrates the final legacy hotkey hook (`useKeyboardShortcuts` in `apps/studio/components/grid/components/common/Hooks.tsx`) to `useShortcut`, backed by `SHORTCUT_DEFINITIONS`. - Adds 4 registry entries (`TABLE_EDITOR_JUMP_FIRST_ROW` / `_LAST_ROW` / `_FIRST_COL` / `_LAST_COL`), all `showInSettings: false` so they stay non-configurable (same as today). - Adds `ignoreInputs` to `ShortcutOptions` and threads it through `useShortcut` → `useHotkeySequence`. Replaces the legacy `whitelistNodes: ['INPUT', 'TEXTAREA', 'SELECT']` with the built-in TanStack option, which also covers `contenteditable`. - Drops the `navigator.appVersion` macOS/Windows detection in `Shortcuts.tsx` (`Mod` resolves this automatically) and the manual `event.stopPropagation()` calls (TanStack's default is `stopPropagation: true`). - Deletes `Hooks.tsx` — no remaining consumers. Closes FE-3049. ## Why `ignoreInputs: true` on these entries `Mod+Arrow*` is a Ctrl/Meta combo. TanStack's default for Ctrl/Meta combos is `ignoreInputs: false`, which would fire the shortcut even when focus is in a text input — not what we want. Setting `ignoreInputs: true` in the registry preserves the legacy whitelist behavior. ## Test plan All shortcuts should still fire with **Cmd** (macOS) / **Ctrl** (Win/Linux). Test surface: **Table Editor** → open any table with rows and multiple columns. **Grid navigation (with a cell selected — click a cell first)** - [x] `Cmd+ArrowUp` jumps selection to row 0 in the same column - [x] `Cmd+ArrowDown` jumps selection to the last row in the same column - [x] `Cmd+ArrowLeft` jumps selection to the first non-frozen column in the same row - [x] `Cmd+ArrowRight` jumps selection to the last column in the same row (not the trailing "add column" cell) **Whitelist regression (most important — the `ignoreInputs` check)** - [x] Open the **Filter** popover on a table → put focus in the filter value `<input>` → type with arrow keys / use `Cmd+ArrowLeft/Right` for word-jump → cursor moves in the input, grid selection does **not** jump - [x] Same for a `<textarea>` (e.g. row editor → a text column with a textarea) — `Cmd+ArrowUp/Down` should not hijack focus away from the textarea - [x] Same for a `<select>` (e.g. row editor → enum / boolean column) — arrow keys behave normally - [x] Editing a cell value in-place (double-click a cell to enter edit mode) — arrow keys navigate the text, don't jump the grid **Platform check** - [x] On macOS, the shortcuts fire with `Cmd` (not `Ctrl`) - [x] On Windows/Linux, they fire with `Ctrl` (not `Cmd`) — `Mod` resolution - [x] None of the new entries appear in Account → Preferences → Keyboard shortcuts (all `showInSettings: false`) **Regression checks** - [x] `pnpm --filter=studio typecheck` passes (verified locally) - [x] Existing shortcuts from #45099 (`Cmd+K`, `Cmd+I`, `Cmd+S` in op queue, results copy, etc.) still work unchanged <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added four keyboard shortcuts for table navigation: jump to first/last row and first/last column using Mod+Arrow keys. * Added a shortcut option to prevent triggers when focus is in input fields. * **Bug Fixes** * Improved keyboard shortcut handling for more consistent behavior across platforms. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
40791f9846 |
chore(studio): migrate useHotKey to useShortcut (#45099)
## Summary - Migrates all 11 `useHotKey` call sites across 9 files to `useShortcut`, backed by `SHORTCUT_DEFINITIONS` in `state/shortcuts/registry.ts`. - Adds 10 new registry entries (all `showInSettings: false` to keep behavior identical to today — these were not previously user-configurable). - Deletes `apps/studio/hooks/ui/useHotKey.ts`. - Simplifies `ActionBar.handleSave` — the legacy hook passed a `KeyboardEvent` the callback used for `preventDefault`/`stopPropagation` and a textarea-plain-Enter guard; all of that is redundant under `useShortcut` (TanStack handles default/propagation; `Mod+Enter` never fires on plain Enter). - Removes a stale commented-out `useHotKey` reference in `DataTableFilterCommand.tsx`. Part of FE-3025 (legacy hotkey hook cleanup). `useKeyboardShortcuts` in `grid/components/common/Hooks.tsx` will be migrated in a follow-up. ## Test plan All shortcuts should still fire with **Cmd** (macOS) / **Ctrl** (Win/Linux). **Table Editor — operation queue** (requires pending unsaved edits on a row) - [x] `Cmd+S` saves pending edits - [x] `Cmd+.` toggles the operation queue side panel - [x] `Cmd+Z` undoes the latest edit and re-fetches the affected table rows - [x] With no pending edits, none of the above fire (gated by `isEnabled`) **Table Editor — side panel editor forms** (row, table, column, policy, etc.) - [x] `Cmd+Enter` submits the form when the panel is visible - [x] Does not submit if the form is disabled/loading or the panel is hidden **Unified Logs — data table** - [x] `Cmd+B` toggles the filter controls sidebar (desktop) - [x] `Cmd+B` opens the filter drawer (mobile, `<sm` breakpoint) - [x] `Cmd+Esc` resets active column filters (reset button visible) - [x] `Cmd+U` resets column order + visibility - [x] `Cmd+J` toggles live mode **Unified Logs — reset focus** - [x] `Cmd+.` blurs the currently focused element / resets focus to body **AI Assistant panel** - [x] While editing a message, `Cmd+Esc` cancels the edit **Regression checks** - [x] `pnpm --filter=studio typecheck` passes (verified locally) - [x] None of the new shortcut entries appear in Account → Preferences → Keyboard shortcuts (all `showInSettings: false`) - [x] Existing shortcuts (`Cmd+K`, `Cmd+I`, `Cmd+E`, results copy/download) still work unchanged <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Refactor * Implemented a centralized keyboard shortcut registry system for managing shortcuts consistently across the application * Updated multiple UI components throughout the interface to use the new shortcut management system * All existing keyboard shortcuts continue to function without any changes in behavior or user experience ## Chores * Removed legacy keyboard shortcut hook implementation <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
a7341c70ea |
feat(shortcuts): add showInSettings flag to ShortcutDefinition (#44997)
Closes [FE-3021](https://linear.app/supabase/issue/FE-3021/hide-shortcut-in-settings-option-for-new-api). ## Summary - Adds an optional `showInSettings` field to `ShortcutDefinition` (defaults to `true`). - `HotkeySettings` filters out entries where `showInSettings === false` before rendering the Account → Preferences → Keyboard shortcuts list. - No registry entries are flipped in this PR — opt-in per shortcut as needed. ## Test plan - [x] Confirm all existing shortcuts still appear under Account → Preferences → Keyboard shortcuts. - [x] Temporarily set `showInSettings: false` on one entry and verify it disappears from the list. - [x] `pnpm --filter studio exec tsc --noEmit` passes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcuts can now be selectively hidden from the Account preferences settings based on configuration. * **Refactor** * Updated keyboard shortcut filtering logic to respect visibility settings. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
e8df67d5d5 |
chore: migrate shortcuts to new hooks API (#44955)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Cleanup shortcuts with new hooks <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Centralized keyboard shortcut system for consistent shortcut behavior across the app and moved preference toggles to a unified registry. * **New Features** * Added explicit shortcuts for Command Menu, AI Assistant, Inline Editor, and result copy/download actions. * Hotkey preferences UI now renders dynamically from the centralized shortcut list. * **Tests** * Test helpers updated to include the command menu provider for accurate shortcut behavior in tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
3ed436de74 |
feat: new shortcuts hook with registrations (#44954)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? - Brand new hook APIs for registering shortcuts using tanstack hotkeys - Support for command menu injection when shortcut is added <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Centralized keyboard shortcuts system with per‑shortcut registration and per‑user enable/disable preferences stored locally * Added a "Copy results as Markdown" shortcut (Mod+Shift+M) * Shortcuts can be surfaced in the Command Menu with a visual shortcut badge for discoverability * **Documentation** * Legacy keyboard shortcut hooks marked as deprecated and documentation updated to point to the new shortcut API <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
