mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
docs/cli-deploy-next-step
13 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Alaister Young
|
1966209483 |
chore(deps): upgrade vitest to v5 (#49994)
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the handful of things v5 turned into hard errors, and drops the `vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes redundant. **Changed:** - `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog) - `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies moved to module scope (v5 throws on nested calls). Affects the Studio and docs setup files and four Studio tests. - `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()` instead of assigning `global.navigator`, which now reaches jsdom's getter-only property. - `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used to leak a throwing mock for the rest of the file, which v5's coverage provider now trips over. A later test in the same file had been asserting the leak's side effect (valid JSON reported as invalid) and now asserts the correct behavior. - `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation resolves through a peer now, so it lands on each package's own `vitest` instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type errors in dev-tools after the reshuffle. - `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range. - `vite: catalog:` added to dev-tools, www, and common. Without it they resolved a newer vite than the catalog pin, which forked a second vitest instance in the lockfile. There's now one. - ai-commands custom matcher types use v5's `Matchers<R, T>` form. - 110 test files: `vi.clearAllMocks()` removed from `beforeEach`/`afterEach` hooks, along with hooks that only did that and the imports they left unused. Calls that also reset/restore mocks are untouched. Second commit, mechanical. **Added:** - `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter output there) **Removed:** - `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves tsconfig paths itself. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while 5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. **Perf** (local, medians of 3 runs, same machine): | Suite | v4.1.4 | v5.0.0 | |---|---|---| | studio | 144.1s | 141.7s (-2%) | | studio `--coverage` | 156.9s | 146.4s (-7%) | | ui-patterns | 6.27s | 5.07s (-19%) | | ui `--coverage` | 3.35s | 2.14s (-36%) | | www | 0.89s | 0.47s (-47%) | Studio is dominated by jsdom environment setup per file, which v5 doesn't change. `vitest doctor` recommends keeping the current pool config: the vm pools and `isolate: false` all break tests. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for vitest. - CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint should all be green. The lint ratchet was checked locally: warning counts on touched Studio files are identical to master. - `pnpm test:studio` locally passes with coverage (588 files, 6240 tests). - Open a Studio test that uses `toBeInTheDocument` in your editor and confirm no type errors on jest-dom matchers, in Studio and in `packages/dev-tools`. - Known pre-existing failures unrelated to this PR: one dev-tools test (`getEventCountBadge` capped pill) fails on master too. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Tests - Improved test coverage for JSON validation and mobile navigation behavior. - Updated test setup, cleanup, environment configuration, and matcher support across application and shared package suites. - Removed obsolete coverage for alternate MCP transport selection. ## Chores - Streamlined TypeScript path resolution and Vitest reporter output handling. - Updated testing libraries and Vitest tooling across documentation, Studio, website, and shared packages. - Added Vitest reporter output to ignored files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Danny White
|
f5d0bf5d98 |
fix(ui): let command dropdowns scroll on touch inside overlays (#50103)
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? A command dropdown cannot be scrolled by touch when it sits inside a dialog or sheet. Radix wraps a modal dialog's overlay in a scroll lock that cancels wheel and touch events whose target is not inside the sheet. A dropdown portals to the body, so it falls outside that boundary and its scroll events get cancelled. Callers have been rediscovering this one at a time and fixing only half of it. `MultiSelectorList` stops wheel events reaching the document, and `SchemaSelector` and `FunctionSelector` expose a `stopScrollPropagation` prop that does the same. None of them handle touch, so the desktop symptom is fixed everywhere and the mobile one is fixed nowhere. ## What is the new behavior? `CommandList` keeps wheel and touch events off the document itself. That covers every command dropdown in the monorepo, in an overlay or not, with no call-site changes. A caller's own `onWheel` or `onTouchMove` still runs. The workarounds this replaces are removed: the handler in `MultiSelectorList`, and the `stopScrollPropagation` prop on `SchemaSelector` and `FunctionSelector` along with its four call sites. One behavior change worth naming: overscrolling past the end of a dropdown no longer scrolls the page behind it. That is what a dropdown should do, and it is what the four `stopScrollPropagation` call sites were already opting into. #50072 depends on this. It swaps two selects for comboboxes, and Radix Select brings its own scroll lock, so without this the swap would regress touch scrolling. ## To test - On the deploy preview, [open a project's Connect sheet](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_) and pick the MCP tab. - Narrow the window to phone width and switch on touch emulation in devtools. - Open the features dropdown and drag the list. It should scroll, and the sheet behind it should stay put. - Repeat with a mouse wheel to confirm desktop scrolling still works. - [Open Authentication > Hooks](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/auth/hooks) > Create hook, open the schema picker, and confirm it still scrolls by wheel now that `stopScrollPropagation` is gone. - [Open the SQL editor](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/sql/new)'s schema picker on a page with no overlay and confirm the list scrolls normally. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved wheel and touch scrolling behavior in command lists, selectors, and multi-select menus. - Reduced unwanted scroll-lock interference when using selectors inside overlays such as dialogs and sheets. - Preserved support for supplied scroll event callbacks. - **Accessibility** - Added clearer accessible labels to the Connect and mobile navigation menu buttons. - Updated the Connect button text behavior for icon-only and standard presentations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Gildas Garcia
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Danny White
|
7283459a02 |
chore(studio): use ShortcutBadge in Connect command (#46245)
## What kind of change does this PR introduce?
Refactor
## What is the current behavior?
FE-3452: `Connect.Commands.tsx` has a local `ConnectShortcutBadge`
component that hand-rolls the same Fragment + `KeyboardShortcut` +
"then" separator loop that `ShortcutBadge` already provides.
FE-3453: The `'header_button' | 'connect_section' | 'keyboard_shortcut'`
union is written out twice: once in `app-state.ts` and once in the
`ConnectSheetOpenedEvent` telemetry type in `telemetry-constants.ts`.
## What is the new behavior?
FE-3452: `ConnectShortcutBadge` is removed; the badge uses
`<ShortcutBadge shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET} />` inline.
FE-3453: A `ConnectSheetSource` type is exported from
`telemetry-constants.ts` and imported into `app-state.ts`.
## Additional context
- Resolves FE-3452
- Resolves FE-3453.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated shortcut badge rendering to use a shared component across
the application, improving code maintainability and reducing
duplication.
* Introduced a centralized type definition for connect sheet source
tracking, enhancing type consistency throughout the codebase.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46245?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: 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> |
||
|
Ivan Vasilov
|
ea0523ce02 |
Fix the Connect button to show the text. (#45646)
The connect button was missing its text Before: <img width="833" height="244" alt="Screenshot 2026-05-06 at 17 46 23" src="https://github.com/user-attachments/assets/c03e972f-bef6-4bd7-8819-dd51509c58eb" /> After: <img width="678" height="208" alt="Screenshot 2026-05-06 at 17 46 58" src="https://github.com/user-attachments/assets/5b020017-133e-47c3-8138-925c27299665" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved screen reader accessibility in the Connect button by refining how text visibility is handled based on button display mode. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
f7ea722b35 |
Consolidate grid header actions in table editor into a single row (#45504)
## Consolidate Table Editor grid header actions into a single row https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b ## Changes involved - Index advisor, Realtime, and API docs are now behind a dropdown menu button (Treated as secondary actions) - Grid header actions shifted into the same row as filter bar (more space for data grid) - Header actions will hide while filter bar is in focus (remove distractions, more space for filter bar) ## Changes to filter bar - Filter bar will refocus when deleting a filter - Clicking on the search icon will focus on the free form input of the filter bar <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a “More” dropdown in grid actions to access Realtime, API docs, and Index Advisor. * New dialogs for enabling Index Advisor and toggling Realtime are now consistently managed. * **Improvements** * Improved filter focus handling with auto-refocus when conditions change and responsive header behavior. * Adjusted popover alignment, separator visuals, header/footer/pagination layout and sizing. * Filter bar now supports programmatic focus; Connect button supports icon-only mode. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Mert YEREKAPAN
|
da81b2f14d |
feat(studio): add click tracking for top bar buttons (#45414)
## Summary Adds PostHog click/open tracking for every interactive element in the Studio top bar. Previously only 5 of ~16 surfaces were tracked. ### New events (16) | Event | Surface | |---|---| | `home_logo_clicked` | Supabase logo | | `header_back_to_dashboard_clicked` | Mobile back chevron | | `header_exceeding_usage_badge_clicked` | "Exceeding usage limits" badge | | `organization_dropdown_opened` | Org dropdown trigger | | `project_dropdown_opened` | Project dropdown trigger | | `branch_dropdown_opened` | Branch dropdown trigger | | `merge_request_button_clicked` | MR trigger (separate from existing success event) | | `connect_button_clicked` | Connect CTA | | `feedback_dropdown_opened` | Feedback dropdown trigger | | `advisor_button_clicked` | Advisor toggle | | `inline_editor_button_clicked` | SQL editor toggle | | `assistant_button_clicked` | AI Assistant toggle | | `user_dropdown_opened` | Account dropdown | | `local_dropdown_opened` | Local-dev settings dropdown | | `local_version_popover_opened` | CLI version popover | ### Notes - Uses `useTrack` (per `telemetry-standards`), all event names use approved `_clicked` / `_opened` verbs. - Dropdown `onOpenChange` handlers guard against Radix's double-fire by only tracking when `open === true`. - `merge_request_button_clicked` fires on the trigger click; the existing `branch_create_merge_request_button_clicked` continues to fire on successful MR creation. - Pre-existing tracked surfaces (`command_menu_opened`, `help_button_clicked`, `header_upgrade_cta_clicked`, `send_feedback_button_clicked`) are unchanged. ## Test plan - [x] Spot-check each event fires once per interaction in PostHog Live Events - [x] Verify no double-fire on dropdown close <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Added telemetry tracking for many header/navigation interactions (logo, back-to-dashboard, usage badge, connect/merge/advisor/assistant/inline-editor buttons, and multiple dropdowns/popovers). * **Tests** * Updated tests to stub telemetry calls so UI tests remain stable and deterministic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
4a0bb36ca8 |
style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Pamela Chia
|
578a73f966 |
feat(studio): connectSection experiment — replace Getting Started with Connect section (#43629)
## Summary Re-ports PR #43119 against the current `ProjectHome` codebase (the original PR targeted `HomeNew/` which was removed during the `homeNew` graduation in #43437). Also unifies the `connectSheet` and `connectSection` feature flags into a single `connectSection` flag — the `connectSheet` flag is removed entirely, so both the ConnectSheet (header) and ConnectSection (homepage row) are controlled by one experiment. - Adds `connectSection` PostHog experiment flag that controls two things: 1. Swaps the Getting Started section for a Connect section on the project homepage for new projects (< 10 days old) 2. Swaps the legacy Connect dialog for the new ConnectSheet panel in the header - **Control** (`getting-started`): existing Getting Started section + legacy Connect dialog in header - **Treatment** (`connect`): new 4-tile Connect section + ConnectSheet in header - `undefined` (loading): neither section renders, avoiding flash - Tiles filtered by the same `useIsFeatureEnabled` flags as ConnectSheet (`show_app_frameworks`, `show_mobile_frameworks`, `show_orms`) - Connect tile clicks tracked via `home_connect_action_clicked`; section render tracked via `home_connect_section_exposed`; sheet opens tracked via `connect_sheet_opened` with source attribution (`header_button` or `connect_section`) ## Changes - `packages/common/telemetry-constants.ts` — new `home_connect_section_exposed`, `home_connect_action_clicked`, and `connect_sheet_opened` event types - `ConnectSheet/ConnectSheet.tsx` — read `connectTab` query param and sync to active mode on open; `handleModeChange` keeps param in sync on tab switch; fire `connect_sheet_opened` event with source attribution on open - `ConnectButton/ConnectButton.tsx` — set `connectSource=header_button` query param on click - `ProjectHome/ConnectSection.tsx` — new component (4-tile connect card); set `connectSource=connect_section` on tile click - `ProjectHome/Home.tsx` — experiment flag wiring - `LayoutHeader/LayoutHeader.tsx` — read `connectSection` flag instead of `connectSheet` to toggle ConnectSheet vs legacy Connect dialog ## Test plan To test on the Vercel preview, set `connectSection=connect` to 100% in PostHog (or override via cookie `ph_override_connectSection=connect`). No separate `connectSheet` flag is needed — `connectSection` controls both features. - [x] Treatment (`connect` variant) — "Get connected" section renders on new project, Getting Started hidden - [x] Control (`getting-started`) — Getting Started renders, Connect section hidden - [x] Mature project (> 10 days) — neither section regardless of flag - [x] Clicking each tile opens ConnectSheet on the correct tab (Framework / Direct / ORM / MCP) - [x] Switching tabs inside sheet updates `connectTab` URL param - [x] Closing sheet clears `connectTab` param - [x] Direct URL deep-link (`?showConnect=true&connectTab=orm`) opens sheet on correct tab - [x] Dark mode — background gradient renders correctly - [x] Light mode — background switches to light gradient - [x] Responsive layout — 4 cols (xl), 2×2 (md), stacked (mobile) - [x] Telemetry — `home_connect_section_exposed` fires once on load; `home_connect_action_clicked` fires with correct `mode` - [x] Treatment — header Connect button opens ConnectSheet (not legacy Connect dialog) - [x] Control — header Connect button opens legacy Connect dialog (not ConnectSheet) - [x] Telemetry — clicking a ConnectSection tile fires `connect_sheet_opened` with `source: 'connect_section'` - [x] Telemetry — clicking header Connect button fires `connect_sheet_opened` with `source: 'header_button'` --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Francesco Sansalvadore
|
b997b7fb13 |
feat(studio): org project branch mobile selector (#43238)
- add new [OrgSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-214b339101a9c06864ea2755ac7246eb4c971ce74c5d3169b1385a28ee1d4227) and [ProjectBranchSelector](https://github.com/supabase/supabase/pull/43238/changes#diff-82d25c128c306b61bea7481026f58f670a229874f23ca3a1a1d78ddeabde21e0) components to the mobile navigation, replacing the previous which took up a lot of horizontal space - org/project/branch dropdowns now open up in the bottom MobileSheetNav for a better mobile ux - desktop nav remains unchanged |
||
|
Saxon Fletcher
|
0d761b0434 |
Connect sheet final content (#42374)
<img width="2892" height="2342" alt="image" src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e" /> This is the third and final PR to complete the new connect sheet. First: https://github.com/supabase/supabase/pull/42367 Second: https://github.com/supabase/supabase/pull/42373 This re-adds the Direct, ORM, MCP tabs and their content, including via connect.schema. To test: - Flag will be enabled on all staging projects - Click connect and notice new Sheet - Click all tabs and ensure content is correct <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Multi-mode connection flow with mode selector and icons (framework, direct DB, ORM, MCP) * New framework/variant/library selector, richer connection guides and install steps (Prisma, Drizzle, direct) * MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth commands and configuration UIs * **Refactor** * Connect schema and state rebuilt to be mode-driven with improved step resolution and cascading state updates * **Tests** * Expanded unit tests covering framework resolution, connect flows, and mode behaviors * **Chores** * ESLint ignores updated for content files <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Saxon Fletcher
|
0e60c5f341 |
Chore/connect sheet/button (#42367)
This is the first smaller PR in the broader change of updating our Connect dialog (see [here](https://github.com/supabase/supabase/pull/42276)). This PR focuses on decoupling the ConnectButton our of the Connect dialog and into its own component . The button includes a flag to render the new sheet. The new sheet is empty for the time being as the flag is at 0%. To test: - Enable flag and click button, see new Sheet - Disable and see old dialog - Create a new project -> in getting started section see "connect to app" step -> Click connect button and make sure it works <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** - Added a Connect button component and an alternative Connect sheet. - Added curl syntax highlighting for code blocks. * **Changes** - Connection dialog moved to a controlled open-state pattern; Connect replaced legacy entry points across the UI and can be feature-flagged. - Connection actions simplified and no longer depend on framework selection. * **Removals** - Removed legacy framework selector, default framework constant, and related tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
