dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-08 02:45:07 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,871 Commits 1,784 Branches 62 Tags
codex/fix-tanstack-e2e
Commit Graph
165 Commits
Author SHA1 Message Date
Danny White d067e81a69 fix(ui): align primary colours across text, buttons, and controls (#50697) 
## Problem

Primary colour serves readable text and selected controls, but those
uses need different shades. Light mode needs darker text, while dark
mode needs a deeper button fill. Fixed brand green on interactive chrome
also prevents a custom primary hue from carrying through the interface.
Some slider tracks and selected text are hard to read.

## Solution

- Keep `--primary` for accessible text and small selected indicators.
Use `--primary-solid` for button fills, which need a deeper shade in
dark mode.
- Add `--primary-bright` for focus rings, selected control chrome, chart
accents, and other interactive highlights. It follows `--primary-hue`;
`brand-*` stays fixed for Supabase identity.
- Make slider troughs clearer and text selection translucent with theme
foreground text.
- Document the split in the design-system colour guide.

| Before | After |
| --- | --- |
| <img width="980" height="244" alt="Before: light mode primary
controls"
src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793"
/> | <img width="982" height="204" alt="After: light mode primary
controls"
src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20"
/> |
| <img width="610" height="120" alt="Before: slider track"
src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122"
/> | <img width="622" height="126" alt="After: slider track"
src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42"
/> |
| <img width="652" height="512" alt="Before: dark mode controls"
src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a"
/> | <img width="658" height="498" alt="After: dark mode controls"
src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22"
/> |

## Review instructions

1. Compare light and dark mode in the [colour usage
guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors).
Check primary ink, primary-solid, primary-bright, and fixed brand
swatches.
2. In Studio, open the ‘new table’ sheet in [Table
Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor).
Tab through the new table sheet's fields and toggles. Check the focus
rings, selected controls, and the sheet's edges in both themes. You do
not need to save a table.
3. Select text in Studio in both themes, including a link or
primary-coloured label. The selection and text should remain legible.
4. Check the
[Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field)
Price Range slider: the unused track should remain visible in both
themes. The selected field card border should follow primary-bright.
5. Check the
[Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button)
and [Radio
Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group)
previews. In dark mode, `primary` button fill should be deeper than
primary
[text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text);
selected radios should remain readable.
 2026-09-24 09:56:31 +10:00
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564) 
## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

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

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 16:19:03 +10:00
Danny WhiteandJoshen Lim a31ca2bad0 fix(ui): make brand text readable across themes (#49871) 
## What kind of change does this PR introduce?

Bug fix and design-system update. Resolves DEPR-316.

Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR
(https://github.com/supabase/supabase/pull/50564) stacked on this one.

## What is the current behavior?

`text-brand` resolves to the canonical bright brand green in places that
need readable text, which fails WCAG AA on light surfaces. A separate
`text-brand-display` token adds another green for large type.

## What is the new behavior?

- `text-brand` maps to accessible `--primary` (light mode darkened to
meet ~4.5:1 AA)
- `--hue` / `--primary-hue` aligned to 157.5
- `text-brand-display` removed; former display callsites use
`text-brand`
- Bright fills/borders stay on `brand-default`
- Design-system colour and typography docs updated

| Before | After |
| --- | --- |
| <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13
09@2x"
src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7"
/> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42
05@2x"
src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114"
/> |
| <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13
53@2x"
src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e"
/> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41
37@2x"
src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc"
/> |
| <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16
30@2x"
src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc"
/> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42
52@2x"
src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c"
/> |
| <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18
53@2x"
src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427"
/> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43
19@2x"
src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b"
/> |
| <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32
04@2x"
src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d"
/> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44
13@2x"
src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8"
/> |
| <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34
44@2x"
src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79"
/> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44
56@2x"
src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1"
/> |

## To test

Test each callsite **in light mode** (dark mode is largely unchanged).

### WWW

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/):
“Scale to millions” uses readable brand text (display token is gone)
-
[Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers):
small “Careers” eyebrow readable; green dividers stay bright
`brand-default`
-
[Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us):
email / policy links use readable brand text
-
[Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions):
“Ask about early access to BYOC” readable

### Docs

- [Docs
homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs):
“DOCS” wordmark and resource links readable
- [Database
overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview):
nav / footer brand links readable
- [JavaScript
reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction):
active sidebar treatment readable

### Design system

-
[Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography):
documents `text-brand` only (no display)
- [Colour
usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage):
`text-brand` vs `bg-brand-default`
- [Design-system
homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/):
brand text examples across themes

### Studio

- [Auth
providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright
- [Database
policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true):
template hover text more legible
- [Database
connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections):
“Live” status readable; animated dot stays bright green

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-09-22 10:07:28 +10:00
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161) 
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
 2026-09-11 17:05:26 +10:00
Alaister YoungAlaister YoungIvan Vasilov
 		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>
 2026-09-10 16:45:54 +08:00
kemal.earthandClaude Opus 5 839c7a9cbb feat(studio): full-screen pricing panel variants (#49640) 
## 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?

Incorporating the parent PR.

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
 2026-08-31 11:53:16 +02:00
Mert YEREKAPANandkemal d11705ded0 feat(studio): add plan-change panel presentation experiment (#49534) 
## What

A/B test for the plan-change side panel
(`/org/_/billing?panel=subscriptionPlan`) — gated behind PostHog flag
`pricingPanelPlanPresentation` (multivariate, 3 arms).

The current panel drops `description`, `preface`, and `footer` from
`shared-data/plans.ts` and uses a much smaller type scale than the www
pricing page, so the two surfaces look unrelated and plan differences
are hard to reason about. This experiment tests whether matching the www
style and surfacing plan gaps improves upgrade conversion.

| Variant | Surface |
| --- | --- |
| `control` | Current panel — no change (baseline cohort, still tracked)
|
| `parity` | www pricing page style: mono uppercase heading,
description, CTA above price, large mono price, preface ("Everything in
the Free Plan, plus:"), 13px features |
| `gaps` | `parity` + gap rows at the bottom showing what the plan is
missing (✗ Daily backups, ✗ Email support, dimmed ✓ 1-day log retention)
|

## Variants

Control
<img width="3520" height="2394" alt="Arc 2026-08-26 16 14 09"
src="https://github.com/user-attachments/assets/95464e83-b377-4754-85ee-c65dce0206c7"
/>

Parity
<img width="3520" height="2394" alt="Arc 2026-08-26 16 14 01"
src="https://github.com/user-attachments/assets/f50e66e2-7cbe-4e65-b1fb-083efd79ff00"
/>

Gaps
<img width="3520" height="2394" alt="Arc 2026-08-26 16 29 48"
src="https://github.com/user-attachments/assets/fbb08a12-1b76-4ce5-9247-20a6e8399be3"
/>


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

* **New Features**
* Added a refreshed subscription plan selector with pricing,
descriptions, features, exclusions, and plan-specific messaging.
* Added upgrade and downgrade actions with loading states and
eligibility-based controls.
* Added plan comparison views highlighting missing and lower-tier
features.
* Added tailored handling for enterprise plans and supported billing
arrangements.
* Improved accessibility by respecting reduced-motion preferences during
plan highlights.

* **Tests**
* Expanded coverage for plan eligibility, feature comparisons, and
presentation variants.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: kemal <hello@kemal.earth>
 2026-08-31 11:53:16 +02:00
Ivan Vasilov b5477a89a3 chore: Update API types (#48981) 
Update the API types by running `api:codegen`. Some of the changes are
fixed in code, some of the type changes had to be reverted (JIT Access,
SSO features).

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

* **Billing**
  * Updated subscription messaging to reflect AWS Marketplace billing.
  * Removed outdated partner-billing downgrade notices.

* **Bug Fixes**
* Improved request handling for API keys, custom domains, SQL snippets,
branches, and storage operations.
  * Improved legacy signing-key compatibility.
  * Refined temporary database access availability messaging.

* **Updates**
  * Removed Fly as an available cloud provider for region selection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-13 09:48:13 +02:00
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377) 
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-07-29 00:48:56 +08:00
Julian Domke 3f2091395e fix(billing): exit survey does not fire after downgrade via cancellation button (#47956) 2026-07-15 14:23:20 +02:00
Joshen Lim 87c5f74ceb Add CTA to update tax ID if run into tax ID issues when upgrading plan (#47767) 
## Context

There's a chance users may run into tax ID issues when upgrading a plan
as such:
<img width="412" height="120" alt="image"
src="https://github.com/user-attachments/assets/4c559ae0-d942-4c10-b83a-c5944a2a49ee"
/>

Adding a CTA here to guide users and mitigate confusion on how to
proceed to remediate

<img width="399" height="147" alt="image"
src="https://github.com/user-attachments/assets/3bcaca14-bd77-4168-b9ab-cd6b75f79e24"
/>


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

* **Bug Fixes**
* Improved billing-profile validation feedback by standardizing error
messaging for tax ID vs. billing address country mismatches.
* Added an in-toast “Update tax ID” action to guide users directly to
the fix.
* Updated the billing dialog’s close behavior so it returns users to the
relevant address section (including scrolling to it automatically).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-10 10:06:29 +08:00
Ali Waseem d949a19f97 fix(studio): extend downgrade error toast duration (#47780) 
## Summary
- Downgrading to Free tier is blocked server-side when an org has an
active branch, but the resulting error toast in `ExitSurveyModal.tsx`
used the default 4s toast duration, making it easy to miss.
- Adds `duration: 10_000, dismissible: true`, matching the pattern
already used for other important billing error toasts
(`org-subscription-update-mutation.ts`, `NewOrgForm.tsx`).

Fixes FE-3882

## Test plan
- [ ] Attempt to downgrade an org with an active branch to Free tier and
confirm the error toast stays visible for 10s and can be dismissed

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved the downgrade error message to stay visible longer and be
easier to dismiss, making failures clearer for users.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-09 07:58:03 -06:00
Alaister YoungAlaister YoungJoshen LimSaxon Fletcher
 		9af6e65df4 fix(studio): DOM-nesting hydration errors, ghost deleted-snippet nav, and migrations query 400s (#47667) 
App-level fixes that reproduce on BOTH the Next and TanStack builds —
split out of #47657 (which stays TanStack-only) for reviewability. All
were found by a full-site click-through of the dashboard.

## Invalid HTML nesting (React 19 "will cause a hydration error" console
errors)

- **FormLayout description rendered in a `<p>`**
(`packages/ui-patterns`): consumers pass arbitrary JSX (the RowEditor's
`created_at` timezone note passes a `<div>` with `<p>`s) →
`<p>`-in-`<p>` / `<div>`-in-`<p>`. Container is now a `<div>` with
identical classes (Tailwind preflight makes them render the same).
- **Switch toggles nested inside Tooltip trigger buttons**
(button-in-button) in ColumnEditor ("Allow Nullable" + "Is Unique"),
ExtensionRow, and PublicationsTableItem → repo-standard `TooltipTrigger
asChild` + `<div>` wrapper.
- **Saved log queries rendered a `<div>` directly inside `<tbody>`**
(`/logs/explorer/saved`) → rows are now proper `<tr><td colSpan>`
wrappers; the component itself is untouched (it's valid in its sidebar
usage).
- **Nested anchors in observability metric cards**: a card-level
`<Link>` wrapped MetricCard's "More information" `<Link>` (identical
URLs) → the chevron affordance renders as a `<span>` when no `href` is
passed; clicks bubble to the card link, tooltips preserved.
Design-system standalone usage unaffected.
- **`objectFit="cover"` passed to modern `next/image`** on the featured
integration card (unknown-prop warning) — the className already had
`object-cover`; prop dropped.

## Ghost dead-snippet after deletion

Deleting the active SQL snippet left its id in `useDashboardHistory`
(`history.sql`), so the "SQL Editor" nav item navigated to
`/sql/<deleted-id>` — content fetch 404s, no editor pane renders, and a
phantom tab reappears. Fixed both ends: delete flows now purge dashboard
history (and the tabs store clears a stale `previewTabId`), and
`/sql/[id]` treats a snippet 404 as "clean up + `router.replace` to
`/sql/new` + toast" instead of rendering the dead state. Unit tests for
the store/history cleanup.

## `pg-meta` migrations query 400s on every project load

`ActivityStats` on project home runs the migrations list query, whose
SQL was a bare `select * from supabase_migrations.schema_migrations` —
that table only exists once a migration has run, so every other project
logged a failed `?key=migrations` request on every load (visible in
production consoles too). The SQL is now guarded with `to_regclass` +
`query_to_xml` (same pattern as the advisor lints' `storage.buckets`
guard), returning zero rows instead of erroring; legacy version-only
tables still work. Tested against real dockerized Postgres (absent
table, populated ordering, special chars, legacy schema) + MSW hook
tests.

Found and verified via /test-supabase-local (browser click-through +
console audit on both builds).

## To test

Console must stay free of React DOM-nesting errors ("cannot be a
descendant of" / "cannot contain a nested") on each surface:

1. Table editor → Insert row panel (`created_at` field renders its
timezone note) and Edit column panel ("Allow Nullable"/"Is Unique"
tooltips still hover).
2. `/database/extensions` and `/database/publications` → toggle switches
render, tooltips hover.
3. `/logs/explorer/saved` (with ≥1 saved query) → rows render full-width
inside the table, hover shows Actions.
4. `/observability` → no nested-anchor error on load; card body click
and the chevron both navigate; label help-icons still show tooltips.
5. `/integrations` → no `objectFit` unknown-prop warning; featured card
images still cover.
6. **Ghost snippet**: open a SQL snippet → delete it via the sidebar →
click the "SQL Editor" nav item → lands on `/sql/new` (no phantom tab,
no 404 content fetch). Direct-load `/sql/<random-uuid>` → toast +
redirect to `/sql/new`.
7. **Migrations 400**: load project home with a project that has never
run a migration → the `pg-meta/<ref>/query?key=migrations` request
returns **200** with `[]` (previously a 400 on every load). Database →
Migrations still lists real migrations when they exist.


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

## Summary by CodeRabbit

* **Bug Fixes**
* Deleted SQL snippets are fully removed from dashboard history and
stale editor/tab state; users are redirected with a toast.
  * Closing preview tabs no longer leaves stale references.
* Improved toggle/tooltip/dialog interactions to avoid broken UI,
including metric headers showing tooltips even without direct links.
* Migrations display safely when migration tables/relations are missing.

* **UI Improvements**
* Refreshed layout for saved queries, form descriptions, and integration
imagery.

* **Tests**
* Added coverage for snippet history cleanup, tab removal, migrations
SQL behavior, and query edge cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


---

### Review feedback: `query_to_xml` breaks on Multigres (Ivan)

The defensive migrations query (added here to stop the `?key=migrations`
400 when the table doesn't exist yet) originally guarded with
`query_to_xml`, which is forbidden through Multigres's pooler (MUL-736 /
PSQL-1318). Rewritten without `query_to_xml`/`xmltable` using the
splinter#170 pattern: a PL/pgSQL `do` block guarded by `to_regclass`
(PL/pgSQL defers planning, so a missing table never errors) stashes the
rows into a transaction-local GUC via `set_config`, and a trailing
`select` reads them back with `jsonb_array_elements`. Verified that
postgres-meta sends the whole SQL as one simple-query string → single
implicit transaction → the local GUC survives to the `select` and
doesn't leak into the pooled connection. 6/6 dockerized-Postgres tests
(absent table → `[]`, populated/ordered/special-chars, legacy
version-only table, full pg-meta-shaped multi-statement string, GUC
non-leakage).

Note (out of scope, pre-existing):
`packages/pg-meta/src/sql/studio/advisor/lints.ts` still uses
`query_to_xml` — a separate pre-existing Multigres risk that should get
its own splinter-pattern sync.

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
 2026-07-08 12:32:11 +08:00
Gildas Garcia b30db91d71 chore: cleanup UI patterns exports (#47406) 
## Problem

We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.

## Solution

- Remove the UI patterns index file
- Fix invalid impors
 2026-06-30 09:23:17 +02:00
Gildas Garcia c6fc456910 chore: cleanup duplicate exports studio (#47387) 
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
 2026-06-29 15:46:16 +02:00
Alaister YoungAlaister YoungIvan Vasilov
 		9eab4f8fbf build(studio): Vite/TanStack-Start build pipeline behind flag (stack 1/6, from #46424) (#47107) 
**Stack 1/6** of the TanStack Start migration (#46424), split into
reviewable, independently-mergeable PRs.

> [!IMPORTANT]
> **Next stays the default and only active framework after this PR.**
This wires up the Vite/TanStack-Start build pipeline behind the
`STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the
TanStack build isn't functional or tested until later PRs in the stack.
Nothing about the Next build, dev, or deploy changes behaviourally here.

## What's in this PR
- **Dispatch:** `dev`/`build`/`start` now go through
`scripts/dispatch.js`, which runs the Next variant unless
`STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as
`dev:next`/`build:next`/`start:next`.
- **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`,
vite/tanstack deps, `turbo.jsonc`.
- **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`,
`target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks
the whole app, so the companion adaptations below land with it.
- **Shared adaptations (companions to the tsconfig change):**
`BufferSource` casts, `packages/ui` unused-`React` import removals, etc.
- **Routing/middleware plumbing:** `next.config.ts` +
`redirects.shared.ts` (redirect rules now shared with `vercel.ts`),
`proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`.

## Verification
Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next
build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules
improved"), prettier ✓.


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

* **New Features**
* Added a hosted API endpoint allowlist to return 404 for non-supported
`/api/*` routes.
* Introduced a TanStack route-migration checklist and expanded TanStack
Start routing support.
* **Improvements**
* Enhanced deployment refresh/detection by tightening cookie handling
for “latest deployment” updates.
* Centralized redirect/maintenance-mode rules for consistent platform vs
self-hosted behavior.
* Improved production serving with a dedicated static + proxy server and
a post-build smoke test.
* **Dependencies**
* Updated TanStack-related packages and React Table/query tooling
versions.
* **Documentation / Chores**
* Updated formatting and tooling config; added shared build environment
parsing utilities.
<!-- 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>
 2026-06-24 17:55:22 +08:00
Julian DomkeandGildas Garcia 1b41e0bff2 fix(billing): clicking outside downgrade modal closes it (#47070) 
Replaced the `DowngradeModal`'s `AlertDialog` with a normal `Dialog`,
since `AlertDialog` won't close if you click outside the modal by
design.


Left is current PR, right is staging:
<img width="1600" height="537" alt="Screenshot 2026-06-18 at 10 07 46"
src="https://github.com/user-attachments/assets/ce1bcc17-d1c9-4fcd-ad3b-f2fcfd8824f6"
/>


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

* **Refactor**
* Updated the downgrade confirmation modal to use the newer dialog UI
components.
* Preserved the existing warning and checklist content (including
project impact and email/reset notices) and kept the same confirm/cancel
behavior and disabled state handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-06-19 08:03:15 +00:00
Gildas GarciaandIvan Vasilov 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>
 2026-06-16 23:59:58 +02:00
K-Dog (Kevin) b347c8341d chore(etl): etl add-on forward compat (#46869) 
Prep work for new ETL pipeline add-on, forward compatible
 2026-06-12 16:06:55 +08:00
Julian Domke dfaf59010b feat(billing): show cancel subscription button on billing page (#46500) 
Extracts the Cancellation Flow from the subscriptions side panel and
adds a new button that initiates the flow (old journey is still
possible):

(screenshots see below)

Verified manually:


- ✅ confirmed the old downgrade flow works, Team -> Pro; Pro -> Free
- ✅ confirmed the new downgrade flow works
- ✅ button does not show up when on free plan; no flicker
- ✅ button does not show up on enterprise/platform plan
- ✅ verified button is disabled when managed by AWS marketplace
(hardcoded in `useSelectedOrganizationQuery`)
- ✅ verified button is disabled if `canUpdateSubscriton` is false,
hardcoded in `useAsyncCheckPermissions`
- ✅ modal for exceeding-free-projects shows up


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

* **New Features**
* Added a guided subscription cancellation flow with confirmation steps,
member/usage checks, and an exit survey.
* Exposed a visible "Cancel Subscription" control in billing settings,
enabled/disabled with contextual tooltip messaging.

* **Improvements**
* Downgrade/exit survey confirm action can be disabled when appropriate;
exit survey confirm label updated to "Downgrade Now".

* **Chores**
  * Added frontend telemetry for cancellation button interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-05 09:17:53 +02:00
Alaister YoungandAlaister Young 7e9badc6b8 chore(studio): migrate useStaticEffectEvent to React 19 useEffectEvent (#46415) 
Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in
React 19.2 with the same signature as the userland polyfill. This drops
the local hook in `apps/studio` and `apps/www` in favor of the built-in.

**Removed:**
- `apps/studio/hooks/useStaticEffectEvent.ts`
- `apps/www/hooks/useStaticEffectEvent.ts`
- `.claude/skills/use-static-effect-event/` — skill is obsolete

**Changed:**
- 26 call sites: dropped the `useStaticEffectEvent` import, added
`useEffectEvent` to the existing `react` import, renamed call sites
- `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19
- `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale
"Studio uses React 18, skip these patterns" warning

## To test

- `pnpm typecheck --filter=studio` — passes locally
- `pnpm typecheck --filter=www` — passes locally
- `grep -rn "useStaticEffectEvent"` returns nothing outside
`node_modules`
- Smoke-test areas that use the hook: schema visualizer edges
(intersection check), spreadsheet import, sign-in/CLI login flows, side
panels with unsaved-changes prompts

**Out of scope:** pre-existing Tailwind lint warning on
`DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to
this migration

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

* **Refactor**
* Internal event handling migrated to React’s built-in event hooks
across the Studio app; no user-facing changes.

* **Documentation**
* Clarified React 19 compatibility and noted Studio now targets React
19.
  * Removed obsolete documentation for a deprecated internal hook.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46415?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: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-05-28 23:30:42 +08:00
Danny WhiteJoshen LimClaude Sonnet 4.5Stephen Morgan
 		a45776ecb9 feat(studio): restrict auth email template editing for free projects (#45396) 
## What kind of change does this PR introduce?

Feature / abuse-prevention update. Resolves DEPR-198.

## What is the current behaviour?

Free projects using Supabase's built-in email service can edit raw Auth
email template subjects and HTML in Studio. That is the risky cohort
this project is trying to constrain.

## What is the new behaviour?

### Template editing restrictions

For free projects using Supabase's built-in email service, Studio keeps
Auth email templates viewable and previewable but disables subject/body
editing and saving. Editing is unlocked by setting up Custom SMTP,
configuring a send-email hook, or upgrading to a paid plan.

**Grandfathering:** projects created before `2026-06-01T00:00:00Z` (the
platform enforcement cutoff) are exempt; their editing UI stays
unlocked. This mirrors `FREE_TIER_TEMPLATE_BLOCK_CUTOFF_DATE` in the
platform PR exactly.

| After |
| --- |
| <img width="1024" height="759" alt="Emails Authentication Fizz Test
Supabase-173BB09B-0FB9-4133-8202-9E310DDB347A"
src="https://github.com/user-attachments/assets/c966212d-ed0c-443b-8197-440cc2937ef6"
/> |
| <img width="1024" height="759" alt="Emails Authentication Fizz Test
Supabase-CD5845EB-0E45-4779-8989-44E775B2411A"
src="https://github.com/user-attachments/assets/055a64d6-b5e8-4d37-a261-6e280f04536a"
/> |

### Warning dialogs on transitions that reset templates

Two flows now surface a warning before the user commits to a state
change that resets their custom email templates to defaults:

1. **Disabling custom SMTP** (SMTP settings page): a confirmation dialog
warns that templates will be reset to defaults and the email rate limit
reduced to 2 per hour. On confirm, Studio resets all 13 templates via
the existing per-template reset endpoint (`Promise.allSettled`). The
"won't be able to edit" sentence is shown only for post-cutoff projects;
grandfathered projects skip it. The corresponding server-side
enforcement is in the Platform PR:
https://github.com/supabase/platform/pull/33129

2. **Downgrading to the Free plan** (billing settings): an admonition in
the existing downgrade confirmation modal warns that custom templates
will be reset to defaults and won't be editable without custom SMTP. The
admonition is shown only when the org has at least one post-cutoff
project; orgs whose projects are all grandfathered skip it.

| Custom SMTP | Downgrading |
| --- | --- |
| <img width="862" height="586" alt="66764"
src="https://github.com/user-attachments/assets/6470c8a6-2f79-40a5-ad3b-bfe5b0ba9c54"
/> | <img width="1268" height="1552" alt="CleanShot 2026-05-22 at 17 28
37@2x-FEB1901E-38E6-42DF-8C27-0A036D8A1B94"
src="https://github.com/user-attachments/assets/e8caa9e6-c3ed-4787-b771-af77a43eb854"
/> |

### Informational admonition when enabling SMTP

When a user enables custom SMTP for the first time, a sandwiched
admonition above the save footer informs them that the email rate limit
will be increased to 30 per hour and can be adjusted.

_This is just a minor cosmetic change, unrelated to the email template
disabling. Sorry._

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Emails Authentication Chisel
Toolshed Supabase-54317D18-803C-4A58-8211-2359355D083B"
src="https://github.com/user-attachments/assets/29eff649-02dc-40f3-a379-0b4d484a76c7"
/> | <img width="1024" height="759" alt="Emails Authentication Chisel
Toolshed Supabase-9E12399E-E9FB-4F9A-B029-A08008EA4B50"
src="https://github.com/user-attachments/assets/e542ed86-4da6-407e-8293-0f4c0f071e18"
/> |

## How to test

All existing projects pre-date the enforcement cutoff
(`2026-06-01T00:00:00Z`) and are grandfathered, so the restriction UI
won't appear by default. To force the restricted state locally,
back-date the cutoff in one file:

In
`apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils.ts`,
temporarily change:

```ts
export const FREE_TIER_TEMPLATE_BLOCK_CUTOFF_DATE = '2026-06-01T00:00:00Z'
```

to:

```ts
export const FREE_TIER_TEMPLATE_BLOCK_CUTOFF_DATE = '2025-01-01T00:00:00Z'
```

Revert before committing. With the cutoff back-dated, use a free-plan
project and:

- **Template restriction + admonition:** navigate to Authentication >
Emails with no custom SMTP configured. Subject/body fields should be
read-only and the "Set up SMTP" admonition should appear, with its
dropdown offering upgrade and send-email hook options.
- **SMTP disable warning:** enable custom SMTP on a project, then
disable it via Authentication > SMTP Settings. The confirmation dialog
should warn that templates will reset to defaults and that editing will
be restricted after disabling.
- **Downgrade warning:** in billing settings, initiate a downgrade to
the Free plan. The downgrade modal should include an admonition warning
about template reset and restricted editing (only if the org has at
least one post-cutoff project).

## Additional context

The default Auth email template copy was also improved across docs,
examples, and UI library snippets (separate prior commits).

The per-template reset button (`ResetTemplateDialog`) was migrated to
the async `AlertDialogAction` pattern introduced in #45960; the dialog
stays open and shows a loading state while the reset is in-flight,
closes on success, and stays open on error.

Closes PRODSEC-183

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Stephen Morgan <stephen@doublethink.co.nz>
 2026-05-28 17:23:45 +12:00
Pamela Chia 47c084e51d refactor(studio): migrate telemetry to useTrack (#46140) 
## Summary

I migrated every `useSendEventMutation` call site in `apps/studio` to
`useTrack`, deleted the legacy hook, and added a lint guardrail so it
can't return. `useTrack` is the type-safe replacement: it auto-injects
`groups: { project, organization }` from the selected project/org and
types `action` + `properties` against `TelemetryEvent`. Existing call
sites built groups manually and were not type-checked at the action
level. The migration covers 81 files (60 trivial swaps, 9 org-only, 3
pre-auth, 5 bespoke, 4 test mocks).

## Changes

- Migrated trivial call sites across `pages/project/[ref]`,
`components/interfaces/*` (Reports, Storage, Realtime/Inspector,
SQLEditor, Functions, EdgeFunctions, Integrations, ProjectAPIDocs,
Branching/BranchManagement, TableGridEditor, Connect, Docs, Auth,
Support, Home, ProjectHome, App), `components/layouts/*`, and
`components/ui/*`.
- Migrated org-only sites (`Organization/Documents/*`,
`Organization/BillingSettings/Subscription/*`,
`Organization/SecuritySettings.tsx`,
`Account/Preferences/DashboardSettingsToggles.tsx`) by dropping the
manual `groups: { organization: ... }` and letting `useTrack`
auto-inject. Verified `useSelectedProjectQuery` is disabled on org
routes (gates on URL `[ref]`).
- Migrated pre-auth sites (`SignInForm.tsx`, `sign-in-mfa.tsx`,
`profile.tsx`) where neither project nor org is resolved.
- Bespoke handling:
- `execute-sql-mutation.ts` and `table-row-create-mutation.ts`: pass `{
project: projectRef }` via `groupOverrides` since the mutation can
target a non-selected project ref.
- `useStudioCommandMenuTelemetry.ts`: kept a direct `sendTelemetryEvent`
call because studio groups must override pre-built event groups
(opposite of `useTrack`'s override direction).
- `AIAssistantOption.tsx`: passes sentinel-aware `groupOverrides` so
`NO_PROJECT_MARKER`/`NO_ORG_MARKER` continue to suppress group emission.
- `SidePanelEditor.utils.tsx`: utility functions `createTable` and
`updateTable` now take a `track: Track` parameter (threaded from
`SidePanelEditor.tsx`); dropped the `organizationSlug` arg since groups
are no longer assembled manually.
- Branch-event attribution: preserved `parentProjectRef` overrides on
`branch_updated`, `branch_merge_completed`, `branch_merge_failed`,
`branch_merge_submitted`, `branch_delete_button_clicked`,
`branch_review_with_assistant_clicked`, and
`branch_*_merge_request_button_clicked`. Original code grouped these
under the parent (production) project, not the branch ref;
auto-injection would have shifted them onto the branch.
- Switched 4 test mocks from `@/data/telemetry/send-event-mutation` to
`@/lib/telemetry/track`. Removed obsolete tests around manual groups and
`try/catch` on telemetry rejection.
- Deleted `apps/studio/data/telemetry/send-event-mutation.ts`. The
deleted module is its own guardrail: any reintroduction of the import
fails at TypeScript module resolution before lint runs.

## Testing

Tested on preview deploy:

- [x] SQL editor `CREATE TABLE` fires `table_created` with method
`sql_editor` and `groups.project` set to the mutation's `projectRef`.
- [x] Table editor creates a table from the side panel; `table_created`
fires from `SidePanelEditor.utils` via threaded `track`.
- [x] Help button (`/project/[ref]/...`) fires `help_button_clicked`
with auto-injected project + org groups.
- [x] Sign-in form fires `sign_in` with empty groups (pre-auth,
expected).
- [x] Org documents page (`/org/[slug]/documents`) fires
`document_view_button_clicked` with org group only, no stale project
ref.
- [x] Command menu (`Cmd+K`) inside a project still fires
`command_menu_opened` with studio's project/org overriding any
event-supplied groups.
- [x] Support form "Ask the Assistant" without selected org fires
`ai_assistant_in_support_form_clicked` with no project/org groups
(sentinels suppress).
- [x] On a branch, "Update branch" / "Merge branch" / "Close merge
request" events fire with `groups.project` set to the parent project
ref, not the branch ref.

Local checks:
- [x] 22/22 tests pass across the 4 updated test files
(`SidePanelEditor.utils.createTable`, `EdgeFunctionRenderer`,
`LayoutSidebar`, `PlanUpdateSidePanel`).
- [x] `rg useSendEventMutation apps/studio` returns 0 hits.

## Linear
- fixes GROWTH-860


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

* **Chores**
* Standardized telemetry across the Studio to a unified tracking system;
events now send simplified payloads with less contextual/grouping data.
* No user-facing flows changed; UI behavior, permissions, and
interactions remain the same.
* **Tests**
* Updated telemetry mocks and tests to align with the new tracking
approach.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46140?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-27 15:19:54 +08:00
Gildas Garcia 838fe7f976 chore: migrate Organization settings Modal to Dialog (#46332) 
## Problem

Organization settings still uses the deprecated `Modal` for:
- downgrading subscription
- requesting feedback after downgrading
- showing an alert about members limit
- requesting feedback after upgrading
- deleting a published OAuth app
- showing preview of a new OAuth app
- Revoking an OAuth app

## Solution

- use `Dialog` instead

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

* **Refactor**
* Replaced legacy modal UI with the app's modern dialog/alert-dialog
components across billing and OAuth settings (upgrade/downgrade, exit
survey, members-limit, delete/revoke, preview), keeping existing content
and flows.
* Confirm/cancel flows updated for more reliable async handling and
clearer loading/disabled states during actions.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46332?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-25 17:51:19 +02:00
Gildas Garcia 5d97339d41 chore: remove <Select> _Shadcn_ suffix (#45988) 
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Select` components

## Solution

Remove it. No other changes

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

## Summary by CodeRabbit

* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-15 16:39:57 +02:00
Gildas Garcia 86a3f8b03d chore: upgrade to react-19 (#45886) 
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))

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

* **New Features**
  * Upgraded workspace to React 19.

* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.

* **Chores**
  * Bumped vaul dependency versions.

* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-15 16:04:41 +02:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867) 
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
 2026-05-15 14:55:37 +02:00
Joshen Lim 28f5484369 Prevent request billing owner for downgrade of plan (#45823) 
Related PR: https://github.com/supabase/supabase/pull/45803

Opting for a simpler way to prevent requesting billing owners for
downgrading of plan as such:
<img width="933" height="258" alt="image"
src="https://github.com/user-attachments/assets/604b8c2f-9341-4aec-885c-e2d9d2861b9f"
/>

Currently we're incorrectly showing a "Request to upgrade to Free" CTA

## To test

- [ ] For a pro plan or above organization, and a user that has a
"Developer" role, ensure that you're not able to downgrade the org nor
send a upgrade request


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

* **Bug Fixes**
* Clarified CTA behavior for users without billing update permission:
downgrade actions now show a disabled button with an explicit tooltip,
while non-downgrade upgrade attempts prompt a request to billing owners.
Tooltip messaging has been refined across enterprise, free-tier, and
marketplace-managed plans for clearer guidance.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45823)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-13 21:32:34 +08:00
Gildas GarciaandDanny White 1fbed21528 chore: migrate old <Alert> usages to <Admonition> (#45797) 
## Problem

Some pages still use the old `<Alert>` component

## Solution

- [x] Use the new `<Admonition>`
- [x] Remove `<Alert>` 

## Screenshots

### Table Editor - Disable RLS modal
Before:
<img width="582" height="527" alt="image"
src="https://github.com/user-attachments/assets/bbc5b874-2569-4cd6-98c0-5edd5ac78e0f"
/>

After:
<img width="543" height="505" alt="image"
src="https://github.com/user-attachments/assets/bb1da899-2163-4b26-ba0b-74726e0cb5df"
/>

### Organization Billing
Before:
<img width="1111" height="512" alt="image"
src="https://github.com/user-attachments/assets/6fb410fb-9ac0-4fb7-8dde-e304ddee7ece"
/>

After:
<img width="1103" height="531" alt="image"
src="https://github.com/user-attachments/assets/6eda6ede-edc6-482f-ab9c-d085402cbd64"
/>




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

* **Refactor**
* Replaced Alert UIs with Admonition across billing, settings, storage,
integrations, and editor interfaces.
  * Removed the deprecated AlphaPreview component.

* **Chores**
* Removed the Alert component from the UI library, including its styles,
tests, and theme configuration.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45797)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
 2026-05-12 16:48:06 +02:00
Gildas Garcia 678aec3845 chore: migrate Input usages to Shadcn component in various screens/components (#45604) 
## Screenshots

### Table editor: foreign record selector
Before:
<img width="802" height="213" alt="image"
src="https://github.com/user-attachments/assets/82ee3ce6-ac72-4b49-b1b0-2e635688cbb1"
/>

After:
<img width="609" height="194" alt="image"
src="https://github.com/user-attachments/assets/e9cc09c1-1c6b-4099-8cae-abe08f50fda9"
/>


### Account - Add TOTP
Before:
<img width="527" height="679" alt="image"
src="https://github.com/user-attachments/assets/b9f4a626-e24b-46e3-8385-700ef181308b"
/>

After:
<img width="531" height="684" alt="image"
src="https://github.com/user-attachments/assets/549745a7-9655-4a7d-9e0e-51f75b6a1c61"
/>

### Organisation Audit Logs Details
Before:
<img width="673" height="1321" alt="image"
src="https://github.com/user-attachments/assets/0bb360cf-6f27-4574-b9af-485a3836b17b"
/>

After:
<img width="669" height="1273" alt="image"
src="https://github.com/user-attachments/assets/0382c662-e270-41fd-a8ee-08528dedfce3"
/>

### Data API Integration Docs
Before:
<img width="1115" height="891" alt="image"
src="https://github.com/user-attachments/assets/db0c7698-53b7-4422-aac3-5e674b0bf151"
/>

After:
<img width="1193" height="1272" alt="image"
src="https://github.com/user-attachments/assets/927e5c43-413b-49c1-9b71-8ab628179c70"
/>

### Edge Function Edit Secret
Before:
<img width="599" height="255" alt="image"
src="https://github.com/user-attachments/assets/d6aa2f87-e247-4724-9e43-02b71933241c"
/>

After:
<img width="596" height="261" alt="image"
src="https://github.com/user-attachments/assets/d94acb41-07e1-497f-9697-830390526f4a"
/>

### JWT Key Details
Before:
<img width="536" height="549" alt="image"
src="https://github.com/user-attachments/assets/43672adc-dc0e-4e65-b7d4-b4537d22f6ea"
/>

After:
<img width="523" height="517" alt="image"
src="https://github.com/user-attachments/assets/e501e8a8-7f41-46a0-bb69-d240cea594f0"
/>

### Realtime Filter Popover
Before:
<img width="403" height="576" alt="image"
src="https://github.com/user-attachments/assets/73842450-ba87-456b-98fc-625b99149449"
/>

After:
<img width="387" height="564" alt="image"
src="https://github.com/user-attachments/assets/f2b35035-947c-4342-84dd-3548f9bd5e9f"
/>

### Realtime broadcast message dialog
Before:
<img width="520" height="393" alt="image"
src="https://github.com/user-attachments/assets/4f4a1a93-e0cf-4268-ae4e-baf8b8a62e74"
/>

After:
<img width="525" height="392" alt="image"
src="https://github.com/user-attachments/assets/e1c1934a-1812-4013-8606-9b846dc2498d"
/>

### Impersonation Popover
Before:
<img width="604" height="501" alt="image"
src="https://github.com/user-attachments/assets/9abdc604-94f8-4ed4-9a95-4688e6504e76"
/>
<img width="587" height="599" alt="image"
src="https://github.com/user-attachments/assets/5293c80c-9abd-43eb-899f-da759c83b598"
/>

After:
<img width="594" height="585" alt="image"
src="https://github.com/user-attachments/assets/5eaf2162-2d7f-444c-9052-c9afb00080f6"
/>
<img width="590" height="597" alt="image"
src="https://github.com/user-attachments/assets/149dc7c1-689c-4e0f-a884-c6f5b0228ebc"
/>

### Storage move item
Before:
<img width="521" height="285" alt="image"
src="https://github.com/user-attachments/assets/7d0f945f-add5-412b-813a-9325b260ab28"
/>

After:
<img width="529" height="274" alt="image"
src="https://github.com/user-attachments/assets/ab0891a1-b31b-40b6-be53-92afc95095ea"
/>

### Table Editor - Spreadsheet import
Before:
<img width="673" height="506" alt="image"
src="https://github.com/user-attachments/assets/7a722908-10c2-4c04-95fb-b12d3c23557c"
/>

After:
<img width="671" height="638" alt="image"
src="https://github.com/user-attachments/assets/689b1fb6-031c-4a02-9e7f-739356c1453d"
/>

### Org Billing downgrade survey
Before:
<img width="788" height="655" alt="image"
src="https://github.com/user-attachments/assets/c7a0d4c6-e9b9-4c6c-9cf1-e7d05016233f"
/>

After:
<img width="1630" height="1354" alt="image"
src="https://github.com/user-attachments/assets/e3f5473b-db9a-42b1-9242-40480c25fc02"
/>

### Project API Docs
Before:
<img width="1030" height="396" alt="image"
src="https://github.com/user-attachments/assets/95643b21-811a-4ba7-918a-5e655c262ac1"
/>

After:
<img width="1012" height="457" alt="image"
src="https://github.com/user-attachments/assets/d5559646-bb89-43b6-ad62-c5684b54b3fb"
/>


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

* **Refactor**
* Standardized form field layouts across panels, dialogs, and modals for
a more consistent editing and reading experience.
* Replaced several Input-based textareas with dedicated
TextArea/ExpandingTextArea controls and aligned labels with wrapper
layouts for clearer accessibility.
* Introduced grouped/composable input controls, added additional
read-only detail fields and labeled value/copy blocks, and tightened
header/layout spacing and control alignment.
  * Swapped notice styles for improved warning/admonition presentation.

* **Chores**
  * Removed a deprecated AutoTextArea component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-07 17:07:11 +02:00
Joshen Lim aab3924eef Refactor Invoice estimate tooltip in plan update confirmation dialog (#45446) 
## Context

Main fix is to ensure that the tooltip here is scrollable - but also
adding some refactors
This is the org billing page when downgrading an org

### Before
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/6094c2e6-c1bb-460f-a2d2-347c1d7d2e77"
/>

### After
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/9d0ac9a6-6e89-4758-af14-8144a8a86469"
/>

## Changes involved
- Use HoverCard for invoice estimate in plan confirmation dialog
- Also nudge the UI a little, e.g use a separate column for the compute
prices + adjust text color to improve clarity
- Refactor usage of `any` for some of the TS declarations

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

* **New Features**
* Added an invoice estimate tooltip in subscription settings showing
monthly charges with plan fees, combined compute rows, per-project
compute costs, optional compute credits, and a total monthly estimate.

* **Refactor**
* Simplified the plan update flow by consolidating subscription preview
handling and extracting the invoice UI into the new tooltip component.

* **Chores**
* Improved internal type definitions for subscription preview data and
pricing tier identifiers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-05 10:54:18 +08:00
Ignacio DobronichandJoshen Lim cf9d88700d fix: top-up loading state and show plan item on downgrade (#45430) 
## Summary

- **Subscription downgrade dialog**: The plan name row was being hidden
in the charge breakdown when `changeType === 'downgrade'`, so users
downgrading (e.g. Team → Pro) couldn't see which plan the cost referred
to. Removed the downgrade exclusion so the plan name row renders
consistently across upgrade/downgrade flows.
- **Credit Top Up dialog**: The submit button only
reflected `executingTopUp`/`paymentConfirmationLoading`, but
the `onSubmit` handler runs several async steps first (hCaptcha, billing
profile validation, Stripe `createPaymentMethod`) before the mutation
flips `isPending`. That left a clickable window where users could
trigger multiple top-ups. Added `form.formState.isSubmitting` to
both `loading` and `disabled` so the button is locked for the full
submit lifecycle.

## Test plan

- [ ]  Downgrade from Team → Pro and confirm the Pro plan row appears in
the charge breakdown
- [ ]  Open Credit Top Up, submit, and rapidly click the Top Up button —
verify only one charge is initiated
- [ ]  Verify Top Up button shows a loading state immediately on click
(before the mutation starts)


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

* **Bug Fixes**
* Consistently show subscription plan cost during billing adjustments,
including downgrades.
* Improve Top Up button to reflect form submission state and prevent
duplicate submissions.

* **Style**
* Enhanced text contrast for better readability in billing information
displays.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-04-30 14:40:08 -03:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318) 
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
 2026-04-30 10:53:24 +00:00
Gildas Garcia 718021fc7b chore: migrate Listbox to Shadcn components (#45279) 
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Listbox />` usage to the new Shadcn component.

## Screenshots

### Billing
Before:
<img width="536" height="458" alt="image"
src="https://github.com/user-attachments/assets/c8883bd8-cbbd-47cd-84a4-e37a36c05cd6"
/>

After:
<img width="541" height="451" alt="image"
src="https://github.com/user-attachments/assets/9c848b1b-e72a-413c-b264-48340ce0c7ef"
/>

### Foreign Key Editor
Before:
<img width="463" height="995" alt="image"
src="https://github.com/user-attachments/assets/4debeeeb-94bd-439d-8f57-a84a2ed5230a"
/>
<img width="428" height="241" alt="image"
src="https://github.com/user-attachments/assets/81a21d58-c023-445a-a6e8-c9be22b53075"
/>

After:
<img width="451" height="1007" alt="image"
src="https://github.com/user-attachments/assets/18c781c0-4f52-4ca2-99e6-1fc34dc857e3"
/>
<img width="434" height="240" alt="image"
src="https://github.com/user-attachments/assets/13fbb3ad-ef3c-499d-a27e-26cfae89ae44"
/>


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

* **Refactor**
* Replaced legacy dropdowns with a unified Select component and
consistent form layout across payment method, org transfer,
foreign-key/column selectors, region selection, and other dropdowns.
* **Chores**
* Removed the legacy listbox implementation and its public exports from
the UI package.
* **Tests**
* Removed old listbox unit tests and updated e2e selectors to target the
new Select-based controls.
* **Style**
  * Deleted obsolete listbox-specific styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-28 14:30:49 +02:00
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285) 
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
 2026-04-28 11:33:53 +02:00
Danny WhiteClaude Sonnet 4.6Raúl Barroso
 		9e3a10d557 feat(studio): payment method states for Stripe Projects orgs (#44965) 
## What kind of change does this PR introduce?

UI changes for Stripe-managed billing surfaces.

- Resolves DEPR-537
- Related to DEPR-538

## What is the current behaviour?

Stripe-connected organisations still look too self-serve in Studio.

- Payment Methods still reads mostly like ordinary Supabase card
management, even though billing is handled through a Shared Payment
Token via Stripe Projects
- invoice messaging still implies support is the path to changing
payment methods, even for Stripe-managed orgs
- the Subscription Plan flow still needs Stripe-specific guardrails so
users are redirected to the correct upgrade path rather than trying to
self-serve everything in Studio
- the base branch now correctly separates `integration_source` from
`billing_partner`, but this stacked work still needs to carry that split
through the Stripe billing-token surfaces

## What is the new behaviour?

This PR makes the Stripe-managed billing surfaces behave like
Stripe-managed billing surfaces, while leaving AWS and Vercel on the
existing `billing_partner` path.

- Payment Methods now keeps the familiar saved-card row, but augments
Stripe-managed rows with Shared Payment Token context, token status, and
Stripe Projects affordances
- Stripe-managed invoice messaging now points users to Stripe Projects
rather than to support for payment-method changes
- the Subscription Plan flow keeps the existing managed-billing shape,
with Stripe-specific guardrails layered in where plan changes should be
handled outside Studio
- AWS and Vercel continue to use the existing partner-managed alerts and
CTAs driven by `billing_partner` / `billing_via_partner`

| Subscription plan sheet |
| --- |
| <img width="1780" height="448" alt="CleanShot 2026-04-24 at 17 21
43@2x"
src="https://github.com/user-attachments/assets/34c0f3ba-fc42-4d07-97a2-0e4f4cefc55e"
/> |
| _Upgrade instructions_ |
| <img width="1786" height="460" alt="CleanShot 2026-04-24 at 17 20
12@2x"
src="https://github.com/user-attachments/assets/bb67c835-b9b2-4648-b0e1-9c2f8d2317d3"
/> |
| _Downgrade instructions_ | 

> [!NOTE]
> The below screenshots are outdated. The _Shared Payment Token_
terminology has been removed in favour of more generic copy such as
_Stripe Projects token_.

| Stripe payment method states |
| --- |
| <img width="1436" height="234" alt="CleanShot 2026-04-23 at 19 03
49@2x"
src="https://github.com/user-attachments/assets/52ed7a00-dfba-4b66-9a07-a6346692d3c8"
/> |
| _Healthy_ |
| <img width="1434" height="224" alt="CleanShot 2026-04-23 at 19 04
50@2x"
src="https://github.com/user-attachments/assets/94efd943-b7bf-4da2-9e1b-1828aae97126"
/> |
| _Card expiring soon_ |
| <img width="1436" height="236" alt="CleanShot 2026-04-23 at 19 06
51@2x"
src="https://github.com/user-attachments/assets/272cb707-c724-4629-890e-853972e53a18"
/> |
| _Card expired_ |
| <img width="1308" height="238" alt="CleanShot 2026-04-23 at 19 07
21@2x"
src="https://github.com/user-attachments/assets/3eadd2a9-def3-4f43-850e-7d82adfb0b57"
/> |
| _Token expired_ |

## Dependencies

This PR is stacked on:

- #44328

It also depends on the private platform work that exposes Stripe project
connection state and SPT details:

- https://github.com/supabase/platform/pull/31874
- https://github.com/supabase/platform/pull/31940

## Platform dependency status

Most of the remaining platform work for this stack is now covered by the
private dependency below:

- https://github.com/supabase/platform/pull/31940

That PR is expected to provide the SPT details and paid-flow fixes this
Studio work depends on. In practice, the main caveat here is less
“Studio still needs a bunch of new platform work” and more “do not merge
this until `platform#31940` has landed and the end-to-end Stripe-managed
flow has been rechecked”.

## Local testing

Use the same local Stripe setup as the base branch, with
`integration_source: 'stripe_projects'` returned consistently for:

- `/platform/organizations`
- `/platform/organizations/:slug/projects`
- `/platform/projects/:ref`

For payment method demos, the temporary local mock currently lives in
private `platform` on:

- `/platform/organizations/:slug/payments`

That mock can be flipped between:

- healthy token + healthy underlying card
- healthy token + card expiring soon
- healthy token + expired card
- expired token

Then verify:

- the org and project connection affordances from #44328 still render
correctly
- Payment Methods shows Stripe-managed token context rather than
implying ordinary self-serve card management
- regression test ordinary non-Stripe payment methods too, to confirm
the standard saved-card row still renders with the existing `Expires:`
copy and no Shared Payment Token affordances
- invoice messaging points Stripe-managed orgs to Stripe Projects rather
than support
- Subscription Plan keeps the managed-billing guardrails for Stripe
- AWS and Vercel orgs still show the existing partner-managed messaging
rather than the Stripe-specific notices

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

* **New Features**
* Stripe-managed organizations show Stripe Projects billing guidance,
replace in-app payment management with Stripe links, and adjust billing
copy.
* Payment methods support Shared Payment Tokens (SPTs): token
expiry/status badges with tooltips, “Handled via Stripe Projects”
indicator, token last4/expiry display, and disabled local update/delete
actions for SPTs.

* **API**
* Payments response now includes optional shared payment token details
for payment methods.

* **Documentation**
  * Added links to Stripe Projects billing docs in relevant flows.

* **Tests**
  * Updated and added tests covering Stripe-managed and SPT behaviors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Raúl Barroso <code@raulb.dev>
 2026-04-28 12:17:29 +10:00
Ignacio Dobronich 4763ac8374 fix: show plan name on empty orgs (#45247) 
## Summary

- Show the plan name row in the monthly invoice estimate tooltip even
when the organization has no projects, so the section no longer appears
headerless next to the tax line.

## Test plan

- [ ]  Open an org with no projects → Subscription plan update dialog →
hover the "Monthly invoice estimate" tooltip → verify the plan name +
price row is visible.
- [ ]  Repeat on an org with projects → verify plan, Compute row, and
project breakdown all still render as before.

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

## Summary by CodeRabbit

* **Refactor**
* Improved rendering of the Monthly invoice estimate table in the
subscription plan update dialog, with reorganized display logic for plan
and project billing rows.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-27 14:29:34 -03:00
Gildas Garcia 416210d666 chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263) 
## Problem

With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore

## Solution

- [x] Remove the `_Shadcn_` suffix 
- [x] Update exports and imports 

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

## Summary by CodeRabbit

* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-27 11:07:06 +02:00
Danny WhiteClaude Sonnet 4.6Ivan Vasilov
 		1ab7251060 chore(studio): clarify partnered orgs and projects (#44328) 
## What kind of change does this PR introduce?

UI improvements.

- Resolves DEPR-401
- Resolves DEPR-424
- Resolves DEPR-425

## What is the current behaviour?

Studio currently blurs two different concepts together:

- `billing_partner` / `billing_via_partner`, which represent real
billing ownership for marketplace-managed organisations such as AWS and
Vercel
- Stripe connection state, which is not actually partner billing in the
same sense, but was previously being mocked through the same UI paths

That made the Stripe work harder to reason about and left some local
behaviour dependent on temporary overrides rather than the API shape we
want to ship.

## What is the new behaviour?

This PR separates those concerns while keeping the existing AWS and
Vercel marketplace experience intact.

- AWS and Vercel continue to use `billing_partner` /
`billing_via_partner` for billing ownership, lockouts, and manage CTAs
- Stripe display state now comes from `integration_source`, which lets
Studio show Stripe-specific badges and alerts without treating Stripe as
a billing partner
- organisation-level partner UI is unified across AWS, Vercel, and
Stripe, including the org banner, navbar icon treatment, and
organisation cards
- project-level Stripe UI now appears only when the project itself is
marked as Stripe-connected, including the project switcher, project list
surfaces, and a project-level banner
- Stripe-connected organisations are no longer incorrectly blocked
behind the AWS/Vercel-style billing management alerts for invoices,
billing address, payment methods, or plan changes
- banner dismissal is scoped to the relevant org/project and
partner/integration state

## Review order

Most of the diff size here is regression tests and generated types. The
behavioural changes are concentrated in a smaller set of files.

Recommended review order:

1. `integration_source` vs `billing_partner` data-model split and
org/project query mapping
2. org-level UI: partner icon, org banner, org dropdown/card treatment
3. billing gating updates for Stripe vs AWS/Vercel
4. project-level Stripe UI: dropdown, list surfaces, banner
5. tests and generated types

| Stripe Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/d0ef338c-3b41-4c6d-b3bd-f21a2c182840"
/> |

| Vercel Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/1dc57770-3f24-45ac-840f-34680555cde8"
/> |

| AWS Org(s) |
| --- |
| <img width="1024" height="759" alt="Organizations Supabase"
src="https://github.com/user-attachments/assets/7847dad0-ee30-4a65-ab0b-b3b16af0d34f"
/> |

| Stripe Org, Non-Stripe Project |
| --- |
| <img width="1152" height="885" alt="Mallet Toolshed
Supabase-1673E019-792C-462C-B6F8-C5DDB810B331"
src="https://github.com/user-attachments/assets/556fbea3-b5ae-4f2f-96b9-6f66c6654e4a"
/> |

| Stripe Org, Stripe Project |
| --- |
| <img width="1152" height="885" alt="Hammer Toolshed
Supabase-7E86C17C-561F-4221-BD16-EAFF7D41AAE0"
src="https://github.com/user-attachments/assets/94f8daf6-0320-413e-8d56-59f9acaaea15"
/> |

| Vercel Org |
| --- |
| <img width="1024" height="759" alt="Projects Toolshed
Supabase-A7891653-9366-4B99-89DD-789D70CD52E3"
src="https://github.com/user-attachments/assets/c87ee6e8-4451-4866-a905-23a38b2593e3"
/> |

| AWS Org |
| --- |
| <img width="1024" height="759" alt="Projects Toolshed
Supabase-58A43ECE-569E-4541-9463-346A90B02CFF"
src="https://github.com/user-attachments/assets/9350a180-4d58-42a1-ad1a-95893c2e8b12"
/> |

This also removes the old Stripe mock override path in Studio so the
frontend matches the intended API model more closely.

## ~~Dependencies~~ (merged!)

This work depends on the private platform change that exposes
`integration_source` on the relevant organisation and project payloads:

- https://github.com/supabase/platform/pull/31874

_Update: now merged._

## Local testing

### Stripe

If you have the private `platform` repo checked out locally, make sure
your local API returns `integration_source: 'stripe_projects'`
consistently for the Stripe-linked org/project you are testing.

Important responses:

- `/platform/organizations`
- `/platform/organizations/:slug/projects`
- `/platform/projects/:ref`

Verify:

- org banner and org icon show the Stripe connected state
- unopened and opened project switcher both show Stripe only for
Stripe-linked projects
- project cards / table rows show the Stripe chip only for Stripe-linked
projects
- the project-level Stripe banner appears across project surfaces
- billing address, tax ID, invoices, payment methods, and plan changes
remain editable in Studio for Stripe orgs

### Vercel

Use a Vercel Marketplace org with real `billing_partner` /
`billing_via_partner` values.

Important org-level endpoints for local mocking in `platform`:

- `/platform/organizations`
- `/platform/organizations/:slug`
- `/platform/organizations/:slug/billing/subscription`

Project-level Vercel indicators still come from
`/platform/integrations/:slug`, not `integration_source`.

### AWS

Use an AWS Marketplace org with real `billing_partner` /
`billing_via_partner` values.

Important org-level endpoints for local mocking in `platform`:

- `/platform/organizations`
- `/platform/organizations/:slug`
- `/platform/organizations/:slug/billing/subscription`

AWS does not currently have a Stripe-like project-level indicator in
these org/project payloads.

## Notes

- `billing_partner` is no longer the right abstraction for the
Stripe-connected case in this PR. It remains the source of truth for
marketplace billing ownership, while Stripe currently uses
`integration_source` as a connection/display signal.
- I re-ran `pnpm api:codegen` while tightening this PR and kept only the
generated type changes this branch actually depends on, to avoid
unrelated API drift in the review.

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

* **New Features**
  * Stripe Projects integration added for billing and project flows
* Partner icons/badges shown across org and project lists, dropdowns,
and rows
* Dismissible, partner-specific marketplace/integration banners with
contextual CTA behavior
* Improved partner-billing detection to drive billing UI and
invoice/plan availability

* **Tests**
* Extensive new test coverage for billing UI, partner-managed fallbacks,
banners, icons, and related flows
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
 2026-04-23 12:17:24 +10:00
Ignacio Dobronich 18e21a410b fix: adjust charge breakdown for prorated credits and subtotal calculation (#45075) 
Reorders the itemized charge breakdown in the subscription upgrade
preview dialog to: Plan → Tax → Subtotal → Unused Time → Credits. Also
appends a "Includes proportional tax if applicable" note to the unused
time tooltip when tax is being applied, so users understand the prorated
credit already reflects tax.

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

## Summary by CodeRabbit

* **Bug Fixes**
* Reorganized proration breakdown display order in subscription plan
updates for improved clarity.
* Enhanced unused time charge tooltip to conditionally include tax
information.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-21 14:11:57 -03:00
oniani1andGildas Garcia 595061e20c fix(studio): show empty org warning when there are no active projects (#44870) 
Closes #44872

The "Empty organization" admonition in the subscription upgrade dialog
checks `.length === 5` instead of `.length === 0`. The warning text says
"This organization has no active projects" but only shows for orgs with
exactly 5 active projects.

Introduced in #44494 (b9e83b25).

The adjacent `.length === 1` check for the single-project note is
correct, confirming this is a count comparison that should be `0`.

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-04-15 09:45:15 +02:00
Ignacio Dobronich 69e00c6bbc feat: validate and save tax id using the customer endpoint (#44682) 
## Summary

Reorder AddPaymentMethodForm and PaymentMethodSelection to use a dry run
validation → Stripe payment setup → real update flow:

- Validate address and tax ID via `dry_run: true` before touching Stripe
- Proceed with Stripe payment method creation / 3DS only if validation
passes
- Persist the customer profile update with dry run disabled after Stripe
succeeds
- Add `dry_run` support
to `useOrganizationCustomerProfileUpdateMutation`
- Add `getFormValues()` to `PaymentMethodElementRef` to read address and
tax ID form state
- Delete the now-unused `organization-tax-id-update-mutation.ts`

## Test plan

### Adding a Payment Method

From the billing dashboard `/org/_/billing`:

- [ ]  Add a payment method with a valid tax ID: should dry-run
validate, then create the payment method via Stripe, then persist the
billing profile
- [ ]  Add a payment method with an invalid tax ID: should show a
validation error from the dry run and not proceed to Stripe payment
setup
- [ ]  Add a payment method with the "primary billing address" checkbox
unchecked: should skip the customer profile update entirely and only
create the payment method
- [ ]  Add a payment method where Stripe 3DS fails: billing profile
should not be persisted (only the dry run ran)

### Credit Top Up

- [ ]  Top up credits with a new payment method and valid tax ID: should
dry-run validate, then create the payment method, then process the
top-up
- [ ]  Top up credits with a new payment method and invalid tax ID:
should show a validation error from the dry run and not proceed to
Stripe payment method creation

### Plan Upgrade

- [ ]  Upgrade plan with a new payment method and valid tax ID: should
dry-run validate before creating the payment method
- [ ]  Upgrade plan with a new payment method and invalid tax ID: should
show a validation error and not proceed to Stripe
- [ ]  Upgrade plan with an existing payment method: should proceed
without dry-run validation
 2026-04-14 13:42:34 -03:00
kemal.earth fe67f11190 fix(studio): spacing on pricing table header (#44676) 
## 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?

Missing a `w-full` to apply `justify-between`. 

| Before | After |
|--------|--------|
| <img width="894" height="98" alt="Screenshot 2026-04-08 at 17 05 26"
src="https://github.com/user-attachments/assets/c3c2cfe3-0280-4772-bbad-9570b5595981"
/> | <img width="897" height="101" alt="Screenshot 2026-04-08 at 17 05
18"
src="https://github.com/user-attachments/assets/36b65fc0-bb9c-43c4-a6da-670c753f846a"
/> |






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

## Summary by CodeRabbit

## Style
* Adjusted the subscription plan panel header to span the full available
width.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-08 17:24:10 +01:00
Ignacio Dobronich f6eb9a024e feat: refresh tax preview on address change (#44470) 
## Summary

- Passes billing address and tax ID from the payment form to the
subscription preview endpoint, so taxes are recalculated live as the
user updates their details
- Debounces address/tax ID changes (1s) in `NewPaymentMethodElement` to
avoid excessive API calls while typing
- Decouples the preview refetch from the payment form's mount state -
uses `keepPreviousData` so the form stays mounted and the breakdown dims
with `opacity-50` instead of unmounting/remounting during refetches.
Shimmer skeleton only shows on initial load.
- Disables the "Confirm upgrade" button while a refetch is in progress
to prevent submitting with stale tax data
- Respects the "Use address as my org's billing address" checkbox: the
preview should mirror what will actually happen - if the checkbox is
unchecked, the address won't be saved to Orb, so it shouldn't be used
for the tax estimate either. Otherwise the user sees one price and gets
charged another. The logic for this lives in `PlanUpdateSidePanel`


``` mermaid
flowchart TD
    A[User opens upgrade dialog] --> B[Fetch subscription preview]
    B --> C[Show payment form + price breakdown]

    C --> D[User edits address or tax ID]
    D -->|1s debounce| E{Use as billing address?}

    E -->|Yes| F[Re-fetch preview with new address]
    E -->|No| G[Re-fetch preview without address override]

    F --> H[Update breakdown — form stays mounted]
    G --> H

    H --> C

```

## Test plan

- [x]  Open the plan upgrade dialog, verify the payment form and
breakdown load normally on first open
- [x]  Change the billing address country - verify the breakdown dims
briefly and updates with new tax amounts without the payment form
unmounting
- [x]  Toggle the tax ID on/off and change its value - verify the
preview refreshes after ~1s debounce
- [x]  Confirm the upgrade button is disabled while the preview is
refetching
- [x]  Uncheck "Use address as my org's billing address" - verify the
preview refetches without address/tax overrides
- [x]  Re-check the checkbox - verify the preview refetches again with
the current form address
- [x] Assert that adding a new billing address in the CreditTopUp form
works and saves the address

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

* **New Features**
* Payment and subscription flows now propagate billing address and tax
ID via new callbacks; subscription preview requests include these values
and preserve prior results while fetching.
* Preview updates are debounced to reduce noise; loading state disables
confirm actions and visually dims charge breakdown.

* **UX**
* Address input emits complete normalized address updates (empty second
line cleared).
  * Tax ID input emits updates and explicit clears (null).
* “Use address as my org's billing address” is now controlled and
reports changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-07 13:02:49 -03:00
Ignacio Dobronich 41e6b66d7b feat(billing): show tax in subscription upgrade preview (#44258) 
This PR moves the client-side "Charge Today" calculation to the backend
- relying on the `preview` endpoint data to show the `Charge Today`,
`Prorated Credits` and `Customer Balance` in the Subscription Upgrade
Preview.

It also includes fields for displaying Tax information in the preview,
only for enabled orgs. Do note that at the moment the Tax Preview will
not change if the address in the Subscription Preview changes, that will
be tackled in a follow-up PR.

## Changes

- Replace client-side charge calculation with backend data: The upgrade
dialog previously computed the prorated credit and total charge locally
(using subscription period timestamps and plan prices). This PR uses the
`upfront_charge` object returned by the subscription preview API
instead.
- Display itemized tax breakdown: When the backend returns tax data, the
dialog now shows a line-by-line breakdown: plan cost → subtotal (if
different) → tax (with rate %) → total charged today.
- Use `tax_status` from the subscription preview to conditionally show
tax details, and display a warning when tax calculation fails.


## Testing

### No taxes - Upgrade from Free to Paid Plan
- With a Free Org with a billing address in Canada or any other
non-enabled jurisdiction, start the upgrade to the Pro Plan
- Assert that only the Charge Today field is shown in the summary
<img width="410" height="298" alt="image"
src="https://github.com/user-attachments/assets/e8c7e12e-833d-41d5-aec3-00092b12782f"
/>

### Taxes - Upgrade Plan
- Update an Org's Orb Customer on the Free or Pro Plan with the
`automatic_tax_enabled: true` flag.
```
curl --location --request PUT 'https://api.withorb.com/v1/customers/external_customer_id/{ORG_SLUG}' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: ••••••' \
--data '{
  "tax_configuration": {
    "tax_exempt": false,
    "tax_provider": "numeral",
    "automatic_tax_enabled": true
  }
}'
```
- Update the Org address to a valid taxable address, like: 
```
  "address": {
    "country": "US",
    "line1": "100 Congress Ave",
    "city": "Austin",
    "state": "TX",
    "postal_code": "78701"
  }
```
- Assert that the tax information is shown in the preview, including Tax
Rate, Prorated credits (if applicable), Customer balance (if applicable)
and the price of the intended plan.

<img width="465" height="470" alt="image"
src="https://github.com/user-attachments/assets/dd6a7e27-1708-48a8-bbf3-5435e6d582c2"
/>






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

## Summary by CodeRabbit

* **New Features**
* Added itemized breakdown of subscription charges, including plan cost,
unused time credits, subtotal, and applicable taxes.
  * Enhanced billing estimates with detailed tax information display.

* **Improvements**
* Updated "Charge today" calculations to reflect real-time preview data
for greater accuracy.
* Improved billing estimate UI layout and clarity with better
organization of charge details.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-06 13:24:59 -03:00
K-Dog (Kevin) b2d8772d75 chore: do not preload plan change data on page load (#44562) 
The data is preloaded even though the modal is never visible
 2026-04-06 09:26:02 +00:00
Ignacio Dobronich 4189e76341 fix: round currency value to 2 decimal places in subscription upgrade preview (#44502) 
This PR removes the `Math.round` from the `Totals` in the subscription
upgrade preview.

| Before | After |
|--------|-------|
| <img width="388" height="397" alt="image"
src="https://github.com/user-attachments/assets/f0f63ad5-c7c0-44b2-9ebc-59c9e4ad66c0"
/> | <img width="422" height="457" alt="image"
src="https://github.com/user-attachments/assets/98a7f69f-429a-42eb-98ce-20de4974c29e"
/> |
| <img width="563" height="401" alt="image"
src="https://github.com/user-attachments/assets/083942f5-90b2-4c91-b195-4526694e365d"
/> | <img width="766" height="467" alt="image"
src="https://github.com/user-attachments/assets/854e127d-db45-48d4-b3a9-fdb010748f71"
/> |

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved precision of billing calculations in subscription plans, with
monthly invoice estimates and plan totals now displaying more accurate
currency amounts.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-02 17:22:50 -03:00
CharisCopilotIvan Vasilov
 		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>
 2026-04-01 10:22:37 +02:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849) 
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-03-17 11:17:42 +01:00
Matt Linkous 5b2721c0db fix(studio): update log drain empty state to show pro tier upgrade (#43462) 
Updates the log drain empty state now that log drains are available to
pro tier
 2026-03-05 18:48:25 +00:00