mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
Ali Waseem
3838e32d33
## 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 -->
Supabase Studio
A dashboard for managing your self-hosted Supabase project, and used on our hosted platform. Built with:
What's included
Studio is designed to work with existing deployments - either the local hosted, docker setup, or our CLI. It is not intended for managing the deployment and administration of projects - that's out of scope.
As such, the features exposed on Studio for existing deployments are limited to those which manage your database:
- Table & SQL editors
- Saved queries are unavailable
- Database management
- Policies, roles, extensions, replication
- API documentation
Managing Project Settings
Project settings are managed outside of the Dashboard. If you use docker compose, you should manage the settings in your docker-compose file. If you're deploying Supabase to your own cloud, you should store your secrets and env vars in a vault or secrets manager.
How to contribute?
- Branch from
masterand name your branches with the following structure{type}/{branch_name}- Type:
chore | fix | feature - The branch name is arbitrary — just make sure it summarizes the work.
- Type:
- When you send a PR to
master, it will automatically tag members of the frontend team for review. - Review the contributing checklists to help test your feature before sending a PR.
- The Dashboard is under active development. You should run
git pullfrequently to make sure you're up to date.
Developer Quickstart
Note
Supabase internal use: To develop on Studio locally with the backend services, see the instructions in the internal
infrastructurerepo.
# You'll need to be on Node v20
# in /studio
## For external contributors
pnpm install # install dependencies
pnpm run dev # start dev server
## For internal contributors
## First clone the private supabase/platform repo and follow instructions for setting up mise
mise studio # Run from supabase/platform alongside `mise infra`
## For all
pnpm run test # run tests
pnpm run test -- --watch # run tests in watch mode
Running within a self-hosted environment
Follow the self-hosting guide to get started.
cd ..
cd docker
docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up
Once you've got that set up, update .env in the studio folder with the corresponding values.
POSTGRES_PASSWORD=
SUPABASE_ANON_KEY=
SUPABASE_SERVICE_KEY=
Then run the following commands to install dependencies and start the dashboard.
npm install
npm run dev
If you would like to configure different defaults for "Default Organization" and "Default Project", you will need to update the .env in the studio folder with the corresponding values.
DEFAULT_ORGANIZATION_NAME=
DEFAULT_PROJECT_NAME=