Commit Graph
74 Commits
Author SHA1 Message Date
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
Danny White 1131e3e2ce fix(ui): default Button variant to default instead of primary (#50160)
## What kind of change does this PR introduce?

Bug fix / design-system alignment for the legacy `Button` from `ui`.

## What is the current behavior?

Omitting `variant` on the legacy `Button` falls back to brand-green
`primary`. That makes accidental greens easy, and it is hard to spot the
real main action on busy pages.

## What is the new behavior?

- Legacy `Button` now defaults to neutral `default`
- Intentional primary CTAs (create, save, submit, marketing CTAs, and
matching `ButtonTooltip` usages) now set `variant="primary"` so their
appearance is unchanged
- Neutral actions that previously relied on the old fallback (cancel,
close, back, dashboard nav, and similar) become grey/white
- Design-system docs updated; regression tests cover the new default

`Button_Shadcn_` is unchanged. It already uses its own CVA default.

This is PR 1 of 2 in a stack. PR 2 drops now-redundant
`variant="default"` props.

## To test

Studio (http://localhost:8082):

- `/sign-in`: Sign in stays green
- Open a project → Database → Tables: New table stays green
- Auth → Users → Invite: Invite user stays green; Cancel / dismiss
controls stay neutral
- Project Settings → General: edit a field so Cancel and Save appear.
Cancel is neutral, Save is green

Design system (http://localhost:3003):

- Components → Button: default demo is neutral; primary demo is green;
featured preview is the default variant

Marketing (optional):

- www header: Start your project stays green; logged-in Dashboard is
neutral

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

- **Style**
- Buttons now default to a neutral style, while primary actions across
Studio, documentation, marketing pages, forms, dialogs, and error states
use prominent primary styling.
- Updated button examples and previews clarify the distinction between
default and primary variants.
  - Event registration now includes a directional arrow icon.

- **Tests**
- Added coverage confirming default button styling and explicit primary
styling behave as expected.
- Updated related test fixtures to use primary styling where
appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-10 11:23:17 +10:00
Danny WhiteandJoshen Lim 6b1fc3d11d recover failed Vercel deploy connections (#48474)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

A failed Vercel connection after project creation is only logged,
leaving the project-creation screen in its loading state.

## What is the new behavior?

The flow preserves the created project and shows the connection error
with retry and open-project actions in the standard project-creation
footer.

Project-creation failures remain ordinary inline form errors. Connection
failures are owned by this flow without a duplicate toast or a no-op
error handler.

| Before | After |
| --- | --- |
| ![Create Vercel Project
Supabase](https://github.com/user-attachments/assets/18dfb6d1-614a-4298-bf28-8399d86c7bca)
| <img width="1024" height="563" alt="Create Vercel Project Supabase"
src="https://github.com/user-attachments/assets/b7d3fdca-d7a0-4b50-9231-3cf7dc371a87"
/> |

## To test

### Before on master

1. Switch to `master`.
2. With local Studio running and while signed in, open an organisation
you can access. Copy its slug from
`http://localhost:8082/org/<YOUR_ORG_SLUG>`.
3. Open
`apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx`.
4. Find `isSuccessNewProject={isSuccessNewProject}` in the
`ProjectCreationFooter` props and temporarily change it to:
   ```tsx
   isSuccessNewProject={true}
   ```
5. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then
open it:
`http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`.
6. Confirm **Create new project** remains in its loading state and there
is no error, retry action, or route to the created project. This
represents the current stuck state.
7. Revert the temporary edit before switching branches.

### After on this branch

1. Switch to `dnywh/vercel-deploy-recovery`.
2. With local Studio running and while signed in, open an organisation
you can access. Copy its slug from
`http://localhost:8082/org/<YOUR_ORG_SLUG>`.
3. Open
`apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx`.
4. Find the conditional beginning with `newProjectRef === undefined`
inside `InterstitialLayout`.
5. Replace that whole conditional with:
   ```tsx
   <VercelConnectionError
     projectRef="abcdefghijklmnopqrst"
     message="Connection request failed"
     onRetry={() => undefined}
   />
   ```
6. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then
open it:
`http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`.
7. Confirm the admonition says **Unable to connect to Vercel** and
**Your Supabase project was still created. Error: Connection request
failed**.
8. Confirm **Open project** and **Retry connection** appear as compact,
right-aligned footer buttons. The retry action is intentionally inert in
this visual-only mock, and no project or Vercel connection is created.
9. Revert the temporary edit.

## Additional context

Follows #48473. The consistency follow-up #48640 is stacked on this PR.



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

- **New Features**
- Added inline error messages to project creation forms for integration,
API, and validation failures.
- Added clear Vercel connection states, including waiting, connecting,
success, and error screens.
  - Added retry actions and links to open successfully created projects.

- **Bug Fixes**
- Improved error handling so Vercel connection issues remain visible in
context instead of appearing only as notifications.

- **Tests**
- Added coverage for partial-success messaging, project links, and retry
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-06 10:49:50 +10:00
Danny White 9b3e0a9060 show Vercel connection errors inline (#48473)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

Vercel install and project-link failures use transient toasts.

## What is the new behavior?

Failures remain visible below the relevant action and clear when the
user retries or changes a selection.

The Vercel mutation hooks expose errors without choosing their
presentation. Interstitial callers render them inline, while existing
non-interstitial callers explicitly retain their toasts.

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Install Vercel Integration
Supabase"
src="https://github.com/user-attachments/assets/6348cdd2-220a-4ad8-89f9-7fc51de36a3c"
/> | <img width="1024" height="759" alt="Install Vercel Integration
Supabase"
src="https://github.com/user-attachments/assets/ecc50c4e-daab-4f6d-bf86-7282e2aff92c"
/> |

## To test

1. Switch to `dnywh/inline-vercel-errors` (this branch).
2. Open `apps/studio/pages/integrations/vercel/install.tsx`.
3. Find the `actionError` assignment immediately below
`useVercelIntegrationCreateMutation` and replace the whole assignment
with:
   ```tsx
   const actionError = 'Creating Vercel integration failed: Test error'
   ```
4. With local Studio running and while signed in, open
`http://localhost:8082/integrations/vercel/install?code=test&configurationId=test&source=marketplace`
5. Confirm the error remains visible below **Install integration**. No
Vercel installation or real authorisation code is required.
6. Revert the temporary edit.

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

## Bug Fixes

* Improved error handling across Vercel project connection and
installation flows.
* Validation, duplicate-connection, and connection failures now appear
inline in the relevant setup steps.
* Errors clear automatically when the selected project or organization
changes.
* Notifications remain available in supported flows, including new
project creation and side-panel setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-05 16:06:58 +10: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
Danny WhiteandJoshen Lim c9ed51c99e fix(studio): add return to Vercel escape hatch (#48311)
## 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?

Bug fix / UX improvement for the Vercel Deploy Button create-project
interstitial.

## What is the current behavior?

On the Vercel create-project step, the organization picker is locked
(correct — the integration is bound to that org) and Cancel is hidden.
If the org can't create a free project (member free-project limits),
users hit a dead end: Upgrade may not help, and there's no way out of
the popup.

Also includes a small capitalisation nit on the Vercel install page.

| Before |
| --- |
| <img width="800" height="629" alt="Create Vercel Project Supabase"
src="https://github.com/user-attachments/assets/2acdc7a3-eb99-43c6-9135-557370647da1"
/> |

## What is the new behavior?

- Replaces `hideCancelButton` with `cancelAction: 'studio' | 'vercel' |
'hidden'`
- Vercel create flow shows **Return to Vercel**, which redirects to the
install `next` URL (closing the popup cleanly)
- Free-project-limit admonition adds a Vercel-only hint pointing at that
button: “Or return to Vercel and restart with a different organization.”
- Main `/new` Cancel behaviour is unchanged
- Org picker stays disabled

## Additional context

Org switching mid-create is intentionally not allowed. That would orphan
the Vercel install. Returning to Vercel is the safe escape hatch so
users can restart Deploy Button with another org, or free a project slot
/ upgrade and try again.

## To test

As far as I can tell, this is impossible to test on prod. Shortly after
merge though, you could test the following:
- [ ] Happy path: create still works; Return to Vercel is secondary and
does not block submit
- [ ] Free-limit blocked org: Create disabled, Return to Vercel visible
and redirects to `next`
- [ ] Main `/new`: Cancel still goes to last org / organizations

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

- **New Features**
- Enhanced project creation flow for Vercel: when a valid return
destination is available, users can choose **“Return to Vercel”**.
- Added additional messaging in the free-project-limit warning to guide
users back to Vercel and restart with a different organization (when
applicable).
- **Bug Fixes**
- Improved cancel behavior and routing consistency by only enabling
Vercel return when the destination is valid.
- **Style**
- Updated the Vercel integration interstitial title capitalization for
consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-28 08:14:01 +10:00
Danny WhiteandJoshen Lim 69570a357d fix(studio): route vercel deploy-button params to create despite marketplace source (#48258)
## What kind of change does this PR introduce?

Bug fix for the Vercel Deploy Button → Studio handoff.

## What is the current behavior?

Vercel sometimes opens our install popup with `source=marketplace` while
still sending Deploy Button params (`currentProjectId`, `external-id`).
We trust `source` alone, so users are routed to choose-project (connect)
instead of create — which is why create never gets reached in the Deploy
Button flow.

## What is the new behavior?

- When both Deploy Button signals (`currentProjectId` + `externalId`)
are present, route to create even if Vercel sent `source=marketplace` /
`external`
- Hide Skip (and related empty-state copy) on choose-project when those
signals are present, so Deploy Button users can't continue without
linking

## Additional context

Stacked on #48230.

Test plan:
- [ ] Unit tests for `resolveVercelInstallSource` /
`hasVercelDeployButtonSignals` pass
- [ ] Deploy Button flow with mislabeled `source=marketplace` + both
params → lands on create after org install/continue
- [ ] Genuine marketplace install (no `currentProjectId`/`external-id`)
→ still lands on choose-project with Skip available
- [ ] If choose-project is opened with both Deploy Button params, Skip
is hidden

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

- **New Features**
- Improved Vercel installation handling for Deploy Button workflows,
ensuring the correct setup path is selected.
- Added clearer project-connection guidance when no projects are
available (including conditional skip copy).

- **Bug Fixes**
- Prevented Deploy Button installations from incorrectly offering a skip
option.
- Preserved the skip-and-connect-later guidance for other Vercel
installation flows.
- Improved recognition of Deploy Button installations even when the
reported Vercel source differs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-25 00:00:37 +10:00
Joshen LimandDanny White 7f42765070 Joshen/fe 3983 no way to create a new project in vercel integration when (#48230)
## Context

For the Vercel integration flow (e.g "Deploy with Vercel" button on GH)
If an organization has no projects, there currently isn't a way to
create a project and connect it in the same session - users can only hit
"Skip".

This addresses that by directing users to the /deploy-button/new-project
route in this scenario

<img width="505" height="539" alt="image"
src="https://github.com/user-attachments/assets/6cc85030-42c7-4e58-b4b3-cb8ac0f5da9e"
/>

## Other changes involved
- Also separates `ProjectLinker` into smaller components - preference
for avoiding declaration of components within a component

## To test

I'm not sure if this can be tested on staging to be honest, but
otherwise we can give it a go on production after the changes are
through, as this doesn't change any existing logic to the usual "Connect
project" flow

I did try clicking the "Deploy with Vercel" button on a repo, and just
changing the URL to the staging URL at the Supabase step - seems to work

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

## Summary

* **UI Improvements**
* Streamlined the Vercel/GitHub project-linking step while keeping the
same create/connect/skip flow, including the searchable project picker,
branding/status indicators, and the feature-flagged “create new project”
option.
* On the Vercel choose-project step, the default selection now reflects
the current project context.

* **Bug Fixes / Tests**
* Improved Vercel install routing query handling to preserve
deploy-button configuration when present, with updated automated test
coverage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-07-24 11:22:57 +08:00
Joshen LimandDanny White d0e781a960 Allow users to continue with org if integration installed (#48231)
## Context

For the Vercel integration, if the source is marketplace, currently
selecting an organization that already has the integration installed
prevents the user from proceeding.
<img width="267" height="172" alt="image"
src="https://github.com/user-attachments/assets/ba3aafa0-f753-4797-89cd-a7f1e16bbdb2"
/>


Whereas users should just be able to proceed and select a project from
within the organization
<img width="435" height="226" alt="image"
src="https://github.com/user-attachments/assets/e659bc20-6980-4ef2-af5c-8612af99668b"
/>


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

* **New Features**
* Enhanced the Vercel integration installation flow with dynamic primary
button text (“Continue” vs “Install integration”) based on installation
status.
* **Bug Fixes**
* Updated the install button so it no longer disables when the selected
organization already has the Vercel marketplace integration installed.
  * Removed the “already installed” warning from the main render path.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-07-24 10:49:21 +08:00
Danny WhiteandJoshen Lim 0324f3422a chore(studio): polish vercel deploy-button new project interstitial (#48113)
## 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?

Studio UI polish for the Vercel deploy-button new-project connect flow
(DEPR-616 follow-up).

## What is the current behavior?

- Deploy-button project creation still used
`VercelIntegrationWindowLayout` (top bar + Docs/Support footer) while
install and choose-project already use shared `InterstitialLayout`
- The remove-integration note sat as a floating admonition above the
form
- Advanced / internal-only config sections could show double dividers,
and the Oriole radio bottom border could clip inside the collapsible

## What is the new behavior?

- Deploy-button new-project uses `InterstitialLayout` with
`VercelIntegrationLogo` and `VercelIntegrationFooter`, matching the
other Vercel connect surfaces
- Regular `/new` project creation is unchanged; Panel chrome is only
flattened when `isVercelIntegrationFlow` is set
- Removes unused `VercelIntegrationWindowLayout` /
`IntegrationWindowLayout`
- Fixes Advanced/Internal-only dividers and collapsible border clipping

| Before | After |
| --- | --- |
| <img width="965" height="1107" alt="Supabase"
src="https://github.com/user-attachments/assets/99c1225c-c9e5-4fac-bd64-17920403e447"
/> | <img width="965" height="1107" alt="Create Vercel Project Supabase"
src="https://github.com/user-attachments/assets/c42bff96-5f9f-4c8b-8f3c-093e380f90ed"
/> |

## Additional context

### Testing

With Studio running locally and while signed in:

1. Open
`http://localhost:8082/integrations/vercel/<your-org-slug>/deploy-button/new-project`
2. Confirm the interstitial card: Vercel + Supabase logo pair, “Create a
new project” title, form fields, and the muted remove-integration footer
under the card
3. Confirm there is no old window chrome (no “Marketplace Connector” /
“Deploy Button” top bar, no Docs/Support footer)
4. Optionally submit and confirm project creation still works
5. Spot-check `/new` to confirm the normal project creation form is
unchanged

If you have advanced config enabled, expand Advanced Configuration and
confirm single dividers (not doubles) and that the Oriole option’s
bottom border is not clipped.

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

## Summary by CodeRabbit

* **New Features**
* Added configurable width to the shared interstitial layout for Vercel
project creation.
  * Updated the Vercel “new project” flow to use the interstitial UI.

* **Bug Fixes**
* Prevented child borders/shadows from being clipped in expandable
configuration sections.

* **Refactor**
* Removed legacy Vercel/window layout components and updated routing to
rely on the interstitial flow.
* Switched advanced and internal-only configuration sections to render
inside panel content.

* **Documentation**
* Refreshed Vercel integration route guidance in the migration checklist
and inline route comments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-22 00:08:00 +10:00
Joshen Lim 6e0078182b Consolidate project creation UI for vercel integration flow (#47995)
## Context

There's 2 areas of the dashboard that has the project creation flow -
and this PR consolidates both to use the same UI components to minimise
duplication + keep things consistent

### Before
<img width="1920" height="957" alt="image"
src="https://github.com/user-attachments/assets/2a7ab79d-71c7-43f2-925b-1e1666cc3a69"
/>

### After
<img width="1389" height="957" alt="image"
src="https://github.com/user-attachments/assets/f8465568-af99-46eb-80ee-7ac345383231"
/>

## Changes involved
- What this means for the project creation flow for Vercel Integration:
  - Smart region can be selected
  - Compute size can be selected
  - Enable Data API can be checked
  - Automatic RLS enable can be checked
- How it differs from the main project creation flow on `new/slug`
  - Organization selection is disabled (cannot be changed)
  - The following UI is hidden:
    - "Internal configuration" section
    - "GitHub repository" field
    - "Free project info" at the bottom
    - "Cancel" button

Eventually we could looking into reducing the differences more, e.g
having data seeding for both ways, and showing GitHub repository field
for Vercel integration

Resolves DEPR-616
Resolves FE-3905

## To test
Tbh, I'm not really sure how you'd be able to test the vercel
integration locally or on staging, this seemingly can only be done when
changes land on prod.

- What I'd do however is to just test the project creation flow
minimally by landing on
`/integrations/vercel/_/deploy-button/new-project`
  - Project creation can work, but just not the connection creation part

- And also test project creation on `/new/slug` as well

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

## Summary by CodeRabbit

* **New Features**
  * Added “Create sample tables with seed data” during project creation.
* Enhanced Vercel integration setup with a guided creation flow and
post-creation connection step.
* Added an option to disable organization selection in specialized
flows.
* Added support for triggering a callback after successful project
creation.
  * Added support for hiding the Cancel button in specialized flows.

* **UI Improvements**
* Refined the connected GitHub repository selector button/dropdown
visuals.
* Improved security options behavior for different project creation
contexts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-17 15:19:38 +08:00
4fd5f8adf1 Vercel project connect layout (#47623)
Bring the Vercel project connect layout up to date with other connect
screens. Follows up from https://github.com/supabase/supabase/pull/47550
which is required.

| Before | After |
| --- | --- |
| <img width="2368" height="1680" alt="image"
src="https://github.com/user-attachments/assets/f5c0b8ef-8fb5-4176-b0cf-98e33958dcc8"
/> | <img width="848" height="808" alt="image"
src="https://github.com/user-attachments/assets/e64c289f-0b73-4605-ad38-4552d3d6f934"
/> |

<img width="883" height="733" alt="image"
src="https://github.com/user-attachments/assets/7ccd9b72-de6a-4c21-ac8e-abe773bb8116"
/>


## Testing

- Open the deploy preview or staging URL for
`/dashboard/integrations/vercel/acme-production/marketplace/choose-project`
with callback params from a real Vercel Marketplace install redirect
(see _Vercel_ subheading below).

### Vercel

- Run through the [install
flow](https://github.com/supabase/supabase/pull/47550) on a real project
until you get to the project connection screen, copy the url and paste
into staging preview


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

## Summary by CodeRabbit

* **New Features**
* Introduced interstitial-style Vercel integration experiences for both
install and choose-project flows, with improved page titles and clearer
environment-variable guidance (including tooltip details).

* **Bug Fixes**
* Improved Vercel integration matching by configuration id and
strengthened loading/error handling with more specific “not found”
messaging.

* **Refactor**
* Enhanced the Vercel/GitHub project chooser with a dedicated
interstitial mode.
* Updated partner logo rendering to support optional styling
customization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2026-07-10 18:22:36 +08:00
Saxon FletcherandDanny White 09ea558d54 Vercel install layout (#47550)
Bring the Vercel install layout up to date with other connect screens.
Resolves DEPR-615.

| Before | After |
| --- | --- |
| <img width="1600" height="1200" alt="CleanShot 2026-07-03 at 10 51
59@2x"
src="https://github.com/user-attachments/assets/6a8c2910-8c45-4c7d-8d38-8b80c5cf4c83"
/> | <img width="1150" height="1318" alt="CleanShot 2026-07-03 at 11 56
17@2x"
src="https://github.com/user-attachments/assets/3a5add5c-fea4-44f3-a368-5732257b27d9"
/> |

## Testing

- Open the deploy preview or staging URL for
`/dashboard/integrations/vercel/install` with callback params from a
real Vercel Marketplace install redirect (see _Vercel_ subheading
below).
- Confirm the install screen renders with the selected Supabase account,
organization picker, and primary install CTA.
- Remove required callback params such as `code`, `configurationId`, or
`source` to verify the "Missing Vercel installation details" warning
state.
- Clicking "Install integration" with an expired or reused `code` can
show `Creating Vercel integration failed: Failed to get Vercel access
token`; that is expected for preview UI validation. A full successful
install requires a fresh Vercel-generated code from the install flow.

To reiterate; this won’t work because the code will be invalid. But it
should show that everything is hooked up right for prod.

### Vercel

1. Go to Supabase. Open either org-level or project (settings) level
integrations.
2. Tap "[Install Vercel
Integration](https://vercel.com/integrations/supabase-local)".
3. Follow the install instructions from that Vercel page. This should
open a browser window.
4. Copy the URL of that browser window. Take the params and paste them
instead at the end of the deploy preview URL.

Example of #4:

```txt
Before:
https://supabase.com/dashboard/integrations/vercel/install?code=jDhIBDlD58zzLVtuSNjJpUSu&configurationId=icfg_v3dKllQIniSOwdVI3gypnZh3&next=https%3A%2F%2Fvercel.com%2Ftest-5706s-projects%2F~%2Fintegrations%2Ficfg_v3dKllQIniSOwdVI3gypnZh3%2Finstalled&source=marketplace&teamId=team_mPkGQZjTLBEUXh15b03iVsTg

After
https://studio-staging-git-chore-install-layout-supabase.vercel.app/dashboard/integrations/vercel/install?code=jDhIBDlD58zzLVtuSNjJpUSu&configurationId=icfg_v3dKllQIniSOwdVI3gypnZh3&next=https%3A%2F%2Fvercel.com%2Ftest-5706s-projects%2F~%2Fintegrations%2Ficfg_v3dKllQIniSOwdVI3gypnZh3%2Finstalled&source=marketplace&teamId=team_mPkGQZjTLBEUXh15b03iVsTg
```

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

## Summary by CodeRabbit

* **New Features**
* Updated the installation experience with a cleaner, more guided
layout.
* Added clearer organization selection during setup, including
visibility into which organizations are already installed.

* **Bug Fixes**
  * Improved loading and error handling during installation.
* Added clearer warnings for missing setup details, already-installed
integrations, and cases with no available organizations.
* Fixed routing behavior so organization selection is preserved more
reliably.

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

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-07-06 19:34:20 +10:00
Pamela Chia 98cfe3307e feat(telemetry): fix creation-funnel tracking gaps (#47386)
## Summary

The creation-funnel instrumentation that shipped Jun 25 (#47291, #47293)
had real gaps, surfaced by the weekly telemetry audit and confirmed
against production PostHog data before I touched code. The two automated
reports also contradicted each other on `errorReason`; I checked
production (every value is a controlled slug) and the emit path (only
`useTrackFunnelError` sets it, and it only accepts classified slugs), so
I left the type as-is rather than add a cross-package abstraction for a
risk that cannot occur today.

## Changes

- Classify HTTP 401/403/404 API errors as `unauthorized` / `forbidden` /
`not_found` instead of the catch-all `other`. In production the
`org_creation` `other` bucket was ~96% 401s (~1,300 real over 4 days),
invisible in reason breakdowns. The status-code fallback runs after the
message-pattern match, so specific reasons still win and it only rescues
errors that would otherwise be `other`.
- Add a single `tier` property (`tier_free` / `tier_pro` / `tier_payg` /
`tier_team`) to `organization_creation_completed`, which previously
carried no properties. One canonical billing slug (matching
`SubscriptionTier`) instead of two overlapping plan/tier fields, so the
org-creation funnel segments cleanly by tier and joins against
subscription data. `tier_payg` is uncapped PRO.
- Freeze the submitted tier at submit time (snapshot in `createOrg`)
rather than reading live form state in the success callback, so the
event records the tier that was actually created even if the user edits
the form during the async payment flow.
- Emit `project_creation_form_exposed` with `surface: 'vercel'` on the
integration deploy-button project-creation page (the enum value existed
but was never fired). Gated on the URL `slug` so the impression is
captured as soon as the form renders, matching the sibling exposure hook
on that page.

I also checked the confirm-modal error path flagged in the insights
post: it already classifies via the shared
`useProjectCreateMutation.onError`, so adding instrumentation there
would double-count. No change made.

## Testing

These are analytics events with no UI change, so correctness is in what
lands in PostHog. Post-deploy validation I will run against production
(project 34344):

- `dashboard_error_created` where `origin='org_creation'` and
`errorReason='other'` drops ~96%, with `unauthorized` / `not_found`
appearing.
- `organization_creation_completed.tier` populated on 100% of new events
with one of the four tier slugs.
- `project_creation_form_exposed` with `surface='vercel'` goes from 0 to
greater than 0.

## Linear

- fixes GROWTH-948


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

* **New Features**
* Added telemetry for organization creation completion that includes the
selected billing tier.
* Added one-time telemetry when the Vercel project creation form is
exposed.
* **Bug Fixes**
* Improved API error classification to more accurately distinguish
unauthorized, forbidden, and not found responses.
* **Documentation**
* Updated telemetry event definitions to require tier metadata for
organization creation events.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-30 23:11:53 +08:00
Sean Oliver 2c651ddabc fix(experiment): make dataApiRevokeOnCreateDefault flag reads shape-agnostic (#46289) 2026-05-23 09:30:25 -07:00
Sean Oliver fdceb29260 fix(telemetry): exposure event captures dataApiDefaultPrivileges + drop race-fix hook (#46085)
## 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?

Bug fix.

## What is the current behavior?

This PR addresses three issues with the implementation of the
`dataApiRevokeOnCreateDefault` experiment
([GROWTH-858](https://linear.app/supabase/issue/GROWTH-858)) on the
frontend side:

1. The `project_creation_default_privileges_exposed` event payload
captures `dataApiEnabled`, which is the parent "Enable Data API" toggle.
That value defaults to `true` for everyone in both arms, which doesn't
help understand how people are interacting with the form.

2. The hook itself was gating on PostHog JS SDK values rather than our
backend server values being sent from `/telemetry/feature-flags`.

3. The form on `/new/[slug]` captures `dataApiDefaultPrivileges`
defaults once at mount via react-hook-form's `defaultValues`. If the
flag is still loading when the page mounts,
`useDataApiRevokeOnCreateDefaultEnabled()` returns `false` (coerced from
undefined), and the form locks the field to the legacy default of
`true`. The flag later resolving has no effect, and treatment users get
the legacy default visually and in the exposure event.

## What is the new behavior?

1. Main-surface payload now sends `dataApiDefaultPrivileges` — the form
field the experiment actually controls (`true` = legacy grants kept,
`false` = revoked on create). Post-fix data will let us read out whether
treatment users actually got the new default.

2. Hook is simplified: drop `orgCountReady`, drop the `onFeatureFlags`
subscription, drop the `posthogClient` import. It now fires once when
the flag resolves, period. Vercel surface is unchanged (still no
`dataApiDefaultPrivileges` since there's no user-facing toggle there).
Tests updated.

3. New useEffect in `/new/[slug]` watches the raw flag value and syncs
`dataApiDefaultPrivileges` to the correct experiment-driven default when
the flag resolves, gated on `getFieldState(...).isDirty` so we don't
clobber intentional user input.

## Additional context

Backend half of this fix is at supabase/platform#32933 (passes
`org_count` and `signup_timestamp` in `personProperties` so the audience
filter actually evaluates correctly). Both PRs are needed for the
experiment to bucket at 5% and be measurable.

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

* **Changes**
* Telemetry now records the selected default-privileges setting
(dataApiDefaultPrivileges) in project-creation events; the previous
dataApiEnabled field was removed.
* Project-creation flows apply the experiment-driven default for that
setting once the experiment resolves, but they do not overwrite
user-edited choices. Vercel new-project flow syncs with the experiment
until the user changes the checkbox.

* **Tests**
* Updated tests to validate tracking, deduplication, and sync/timing
behaviors for dataApiDefaultPrivileges.

<!-- 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/46085?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-19 12:54:36 -07:00
Pamela Chia 0bed80b340 chore(telemetry): clean up frontend event catalog (#45964)
## Summary
Resolves 13 findings (2 HIGH, 5 MEDIUM, 6 LOW) from the frontend
telemetry audit: 1 action-string collision, 1 camelCase experiment name,
9 dead events removed, 4 missing org groups attached, 1 ambiguous
property renamed, 1 raw-string property narrowed, plus consolidations
and a structural tightening on TABLE_EVENT_ACTIONS.

## Changes
### HIGH
- Rename `EventPageCtaClickedEvent.action` to
`www_event_page_cta_clicked` so it no longer collides with the pricing
CTA event (which had a different schema sharing the same action string)
- Snake_case the header-upgrade experiment exposure name
(`headerUpgradeCta_experiment_exposed` →
`header_upgrade_cta_experiment_exposed`); PostHog flag key and
`?source=` URL param unchanged

### MEDIUM
- Remove 4 dead `ProjectCreation*Step*` events (referenced a v2 route
that doesn't exist; 0 emissions)
- Remove 4 dead experiment exposure events:
`ProjectCreationRlsOptionExperimentExposed`, `HomeNewExperimentExposed`,
`TableCreateGeneratePoliciesExperimentExposed`,
`TableCreateGeneratePoliciesExperimentConverted` (0 emissions)
- Attach org group to `dpa_request_button_clicked` (0% had `$group_0`
per Hex)
- Delete `RegisterStateOfStartups2025NewsletterClicked` (interface
naming outlier, 0 emissions, page renamed to 2026)
- Rename `AssistantSuggestionRunQueryClickedEvent.category` to
`mutationType` with tightened literal union (`'functions' |
'rls-policies' | 'unknown'`)
- Attach org group to `project_creation_default_privileges_exposed` on
Vercel surface via explicit `groupOverrides` (auto-injection misses
because `useSelectedOrganizationQuery` is undefined on that page)

### LOW
- Consolidate `IndexAdvisorBannerEnableButtonClickedEvent` +
`IndexAdvisorDialogEnableButtonClickedEvent` into one event with
`origin: 'banner' | 'dialog'`
- Rename `ImportDataFileDroppedEvent` → `ImportDataFileAddedEvent` so
the interface name matches the action and the verb is on the approved
list
- Rename `LogDrainConfirmButtonSubmittedEvent` → `LogDrainRemovedEvent`
and action to `log_drain_removed` (fires on delete-confirm modal,
matches `CronJobRemovedEvent` pattern)
- Add `type` property to `CronJobRemovedEvent` (parsed from the job's
command), matching the create/update event shape
- Tighten `TABLE_EVENT_ACTIONS` values with `satisfies` against the
event union so renames in the union fail typecheck here too
- Attach org group to `www_pricing_plan_cta_clicked` at 5 emission sites
when an org is available in the page context
- Narrow `unified_logs_row_clicked.logType` from raw `string` to the
5-literal `LOG_TYPES` union (zod already validates server values)

### Bundled refactor
Migrated 5 emission sites from deprecated `useSendEventMutation` to
`useTrack` while their containing files were being edited: `DPA.tsx`,
`DisplayBlockRenderer.tsx`, `Grid.tsx` (2 events), `DeleteCronJob.tsx`.
Full sweep of the remaining ~79 files is a separate follow-up.

## Testing

Mostly just renaming of events

## Linear
- fixes GROWTH-798


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

## Summary by CodeRabbit

* **Refactor**
* Standardized telemetry to a unified tracking system for more
consistent analytics.
  * Simplified experiment exposure reporting for upgrade prompts.

* **New Features**
* More granular tracking for CSV import, cron job deletions, log drain
removals, DPA downloads/requests, and pricing CTAs.
  * Assistant now classifies mutation queries more precisely.

* **Bug Fixes**
* Improved default-privileges exposure logic on Vercel deployments
(skips when org missing).

<!-- 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/45964)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-18 18:21:58 +08: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 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
Gildas GarciaandAli Waseem bcfc666284 chore: migrate remaining old input usages (#45791)
## Problem

We still use our old `Input` in some places. This means multiple
components are bundled for the same use cases and we have some design
differences across the application.

## Solution

- [x] Migrate to the new ShadCN inputs
- [x] Fix `<InputGroupButton>` cannot be used with components that
triggers modal, popovers, dropdowns
- [x] Fix `<FormLayout>` does not display errors for inputs that are not
inside a React Hook Form
- [x] Fix `InputGroup` invalid design 

## Screenshots

### Table Editor - table edition sidepanel

Before:
<img width="758" height="1206" alt="image"
src="https://github.com/user-attachments/assets/d4da4af0-a9d3-4967-935f-554233d7896b"
/>

After:
<img width="747" height="1209" alt="image"
src="https://github.com/user-attachments/assets/6286e6a0-317f-486c-a8b4-0e233706ba0f"
/>

### Table Editor - row edition sidepanel
Before:
<img width="675" height="710" alt="image"
src="https://github.com/user-attachments/assets/9fdfe819-6d62-40c8-bdc8-fa6051dab834"
/>

After: (I placed the TextArea button at the bottom because ShadCN
reserves a full line space for it. It was weird at the top.
<img width="674" height="714" alt="image"
src="https://github.com/user-attachments/assets/611d5f8d-de12-4c16-ac38-bd9192cd6d73"
/>

### Database settings - password reset modal
Before:
<img width="773" height="548" alt="image"
src="https://github.com/user-attachments/assets/17f679a7-3aed-4cf9-8245-194a8a16823f"
/>

After:
<img width="563" height="311" alt="image"
src="https://github.com/user-attachments/assets/08888471-4cc8-4a3c-bf1e-8dce364f1aa6"
/>

### Database - Event triggers
Before:
<img width="1134" height="453" alt="image"
src="https://github.com/user-attachments/assets/e9d06d58-782c-4ccb-93c0-2ce1ca8c5748"
/>

After:
<img width="1115" height="451" alt="image"
src="https://github.com/user-attachments/assets/c437acb0-c602-4dd2-b249-66c7a7e739d6"
/>


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

* **New Features**
* Copy action now shows confirmation state (“Copy” → “Copied”) when
copying error details.

* **UI Improvements**
* Unified form-field layouts and input-group composition across editors,
settings, and integration forms for a more consistent experience.
* Password-strength feedback moved into field layout for clearer
messaging.
* Improved inline input/button/dropdown behaviors and non-React-form
error display.

* **Removed**
  * Display configuration settings component.

[![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/45791)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-05-13 09:40:00 +02: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
Alaister YoungandAlaister Young 409a38a4ea [FE-3145] feat(studio): use data_api_revoke_default_privileges flag (#45683)
Swap the project-creation revoke from custom `db_sql` over to the new
`data_api_revoke_default_privileges` API field. Same behaviour, just
delegated to the platform so non-studio flows (branches, CLI, terraform)
can apply the same revoke logic — addresses
[FE-3145](https://linear.app/supabase/issue/FE-3145/swap-frontend-to-use-revoke-default-privileges-flag).

Backend support landed in supabase/platform#32158 and
supabase/platform#32493 (FUP that decoupled the flag from
`data_api_use_api_schema`).

**Changed:**
- `apps/studio/data/projects/project-create-mutation.ts` — accepts
`dataApiRevokeDefaultPrivileges` and forwards it as
`data_api_revoke_default_privileges`
- `apps/studio/pages/new/[slug].tsx` — drops the inline
`buildDefaultPrivilegesSql('revoke')` injection in `dbSql`, passes the
flag instead
-
`apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx`
— same swap on the Vercel deploy-button flow
- `packages/api-types/types/platform.d.ts` — adds the new field to
`CreateProjectBody`

**Preserved:**
- The `dataApiRevokeOnCreateDefault` PostHog flag still gates the
default checkbox state and telemetry — only the SQL application changes
- `data_api_use_api_schema: false` stays as-is — projects keep `public`
+ `graphql_public` exposed, no project-shape change

## To test

- Project creation form (`/new/<org>`):
- With PostHog flag off: "Automatically expose new tables" defaults to
checked → request body has `data_api_revoke_default_privileges: false`
- Manually uncheck the box → request body has
`data_api_revoke_default_privileges: true`, project ends up with revoked
default grants on `public`
- With "Enable Data API" off → `data_api_revoke_default_privileges:
false` (no point revoking when nothing's exposed)
- Vercel deploy-button flow
(`/integrations/vercel/<slug>/deploy-button`):
  - Same checkbox behaviour as above
  - Migration SQL from the GitHub repo still runs as `db_sql` separately

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

## Summary by CodeRabbit

* **New Features**
* Added support for a dedicated `dataApiRevokeDefaultPrivileges` option
during project creation.

* **Refactor**
* Simplified Data API privilege configuration by using a dedicated
parameter instead of SQL-based management across project creation flows.

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-05-08 13:24:25 +08:00
Inian e61853c59c fix(studio): clarify default privileges toggle covers tables (#45458)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated UI labels and descriptions across the Data API settings to
clarify that default privileges apply to new tables only (removed
references to functions).

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-04 11:35:02 +02: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
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264)
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08: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
Gildas Garcia 502c098d90 chore: migrate old <Checkbox /> usage to the new Shadcn component (#45211)
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Checkbox />` usage to the new Shadcn component.
There's one visual change: no more green background or outline.

## Screenshots

### On `apps/www`

Before:
<img width="1095" height="772" alt="image"
src="https://github.com/user-attachments/assets/b14a0477-d8ac-4ae5-a1c3-63657609e4e5"
/>

After:
<img width="1085" height="766" alt="image"
src="https://github.com/user-attachments/assets/f4c2156c-38e1-4834-b013-e39b8c3dd76e"
/>


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

* **Refactor**
* Unified checkbox appearance and behavior across the app for consistent
toggles, labels, and interactions.

* **Bug Fixes**
* Fixed selection issues including shift-select edge cases and
click-propagation in lists; added ARIA labels for improved
accessibility.

* **Chores**
* Removed legacy checkbox implementation, associated styles, tests, and
deprecated theme entries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-24 17:38:01 +02:00
d1a7d64e63 [FE-3023] feat(studio): default privileges toggle at project creation (#45034)
<img width="783" height="414" alt="Screenshot 2026-04-20 at 3 02 37 PM"
src="https://github.com/user-attachments/assets/a353c35a-3de5-4bfa-ab31-829c79c43165"
/>

Adds a "Default privileges for new entities" checkbox under "Enable Data
API" in both the main create flow and the Vercel deploy-button flow.
Default checked (current behaviour). When unchecked, runs
`buildDefaultPrivilegesSql('revoke')` after the base init script so new
entities in `public` aren't auto-granted to `anon` / `authenticated` /
`service_role`.

This PR decouples the two surfaces:

- **`tableEditorApiAccessToggle`** — unchanged; still gates only the
integrations → Data API settings UI.
- **`dataApiRevokeOnCreateDefault`** (new) — controls only the default
state of the new checkbox at project creation. `true` → checkbox
unchecked by default (revoke runs); `false`/absent → checkbox checked by
default (no behaviour change).

The new flag is already live in PostHog at **0% rollout, off for
everyone**, so shipping this PR changes nothing until the flag is
explicitly flipped.

## Added

- `apps/studio/hooks/misc/useDataApiRevokeOnCreateDefault.ts` — reads
the new PostHog flag. Returns `false` in `IS_TEST_ENV` so existing E2E
flows don't silently change default behaviour.
- Checkbox UI in `SecurityOptions.tsx` (main flow) and
`pages/integrations/vercel/[slug]/deploy-button/new-project.tsx` (Vercel
flow), with copy matching the integrations → Data API settings page.
- Tooltip + dimmed state for the main-flow checkbox when "Enable Data
API" is unchecked (can't configure default privileges if Data API is
off).
- Telemetry: `dataApiDefaultPrivilegesGranted` (raw checkbox value) and
`dataApiRevokeOnCreateDefaultEnabled` (raw flag, conditionally included
using the existing raw-flag pattern so undefined flag state → omitted
property, not `false`).
- Vitest unit tests for the new hook.

## Changed

- `pages/new/[slug].tsx`: removed the `false &&` rollback guard. Revoke
SQL now runs only when `dataApi && !dataApiDefaultPrivileges`. Dropped
the now-unused `useDataApiGrantTogglesEnabled` import.
- `pages/integrations/vercel/[slug]/deploy-button/new-project.tsx`: this
flow was **never rolled back** — it still ran revoke whenever
`tableEditorApiAccessToggle` was on for a user. Now correctly gated on
the new flag + checkbox state.
- `packages/common/telemetry-constants.ts`: added the two new properties
and corrected the `tableEditorApiAccessToggleEnabled` docstring (it no
longer claims to control project-creation revoke behaviour).

## Kill switch

Flipping `dataApiRevokeOnCreateDefault` to off in PostHog fully disables
the revoke SQL for new projects without needing a redeploy — the
checkbox just defaults to checked again.

## Follow-ups (not blockers)

- joshenlim's review comments on PR 43704: (1) Auth Policies table row
incorrectly showing "exposed via Data API" based on schema-level check
instead of table-level at
`apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx:64`;
(2) Data API integrations page showing zero exposed tables even after
exposing one. Both unrelated to this PR but will be more visible once
the checkbox lands.
- Once this flag fully rolls out, the old `tableEditorApiAccessToggle`
docstring/comments elsewhere should stop claiming it controls project
creation.

## To test

- **Flag off (default state, simulates post-merge):** create a project
with and without "Enable Data API" checked. The new "Default privileges
for new entities" checkbox should default to **checked**. Submitting
should produce an identical result to today — new tables in `public` are
reachable via the Data API.
- **Flag on (simulate rollout):** override the flag locally. The
checkbox should default to **unchecked**. Creating a project with it
unchecked should run the revoke SQL; create a new table in `public`
afterwards and confirm it's not reachable via the Data API until grants
are added.
- **Enable Data API off:** the new checkbox should render disabled +
dimmed with a tooltip reading "Enable the Data API to configure default
privileges." The revoke SQL should not run in this case regardless of
checkbox state.
- **Vercel flow:** repeat at
`/integrations/vercel/<slug>/deploy-button/new-project` — verify both
checkbox states.

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

* **New Features**
* Added an "Automatically expose new tables and functions" checkbox to
project creation and Vercel deploy flow; enabled only when Data API is
available (disabled with tooltip otherwise) and affects initial project
provisioning.

* **Telemetry**
* Tracks exposure of the default-privileges control and includes
checkbox state and feature-flag status on project-creation submissions.

* **Tests**
* Added tests for flag behavior, exposure tracking, deduplication, and
submission telemetry.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com>
2026-04-21 13:15:40 +08:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
49ad1eb325 [FE-2479] chore(studio): revoke default grants in public on project creation (#43704)
When the `tableEditorApiAccessToggle` feature flag is enabled, project
creation now appends SQL to revoke default privileges for `anon`,
`authenticated`, and `service_role` on the `public` schema. This runs
after the base image init script's default grants. This is temporary
while we're still using a feature flag. Eventually it'll be moved into
the base image.

Applies to both the main project creation flow and the Vercel deploy
button flow.

Part of the "Secure by Default" initiative – new projects created under
this flag won't automatically expose tables/functions/sequences to the
Data API via default privileges. Users can still opt in at a table
level.

## Notes

Reusing the existing `useDataApiGrantTogglesEnabled()` flag here rather
than creating a new one – it's the same feature surface area and avoids
unnecessary flag proliferation.

## To test

1. **With flag enabled:**
- Enable the `tableEditorApiAccessToggle` flag in PostHog for your user
   - Create a new project via the dashboard
   - Create a new table
- Confirm in `/project/_/integrations/data_api/settings` that the new
table is not exposed by default

2. **With flag disabled:**
   - Disable the flag (or use a different user without it)
   - Create a new project
- Verify default privileges are intact and tables are accessible via the
Data API as usual

3. **With RLS event trigger enabled too:**
- Enable both the feature flag and the "enable RLS event trigger"
checkbox during project creation
   - Verify both SQL statements run correctly on the new project

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-03-18 12:22:42 +08:00
Ivan Vasilov db4b10f328 fix: Check the password strength before creating a project (#41586)
* Fix types and lint warnings for the password strength function.

* Simplify the form for creating project. Move the password warning into the form schema. Minor fixes.

* Fix the name of the field.

* Move the common behaviour in a function.

* Minor fixes.
2025-12-24 16:18:29 +01:00
Ivan Vasilov 0d5be306ef chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.

* Migrate keepPreviousData usage.

* Migrate all uses of InfiniteQuery.

* Fix refetchInterval in queries.

* Migrate all use of isLoading to isPending in mutations.

* Fix accessing location in claim-project.

* Fix a bug in duplicate query keys.

* Migrate all queries to use isPending.

* Revert "Fix accessing location in claim-project."

This reverts commit 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Ivan Vasilov 43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
Ivan Vasilov a40ccc4b45 chore: Clean onSuccess and onError props on useQuery (#40641)
* Remove all onSuccess and onErrors from useQuery.

* Minor fixes to all refetchInterval.

* Fix smaller type issues.
2025-11-20 14:08:56 +01:00
Joshen Lim b4d38fabd0 Chore/barrel files bye part 05 (#40016)
* Clean up barrel files part 4

* nit

* Part 5 of cleaning up barrel files

* Revert changes for types

* Nit
2025-10-31 13:15:31 +08:00
Alaister YoungandCharis a3e7cb7285 chore: move password check to frontend (#39927)
* chore: move password check to frontend

* remove barrel file export and fix test import

* move import inside function

* Update apps/studio/lib/password-strength.ts

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* fix test

---------

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
2025-10-28 23:24:35 +08:00
Joshen LimandIvan Vasilov 8e9d3de3bc chore/projects pagination part 06 (#39351)
* CmdK OrgProjectSwitcher to swap useProjectsQuery with useProjectsInfiniteQuery

* Remove usage of useProjectsQuery in ProjectDropdown

* Remove usage of useProjectsQuery in NotificationsPopover

* Remove usage of useProjectsQuery in NotificationsFilter

* Remove usage of useProjectsQuery from LoadingState

* Clean

* Remove usage of getProjects from org-ai-details and fix missing key props in AIOnboarding

* Remove useAutoProjectsPrefetch from org/[slug]/index

* Fix TS  + clean up

* Clean

* Remove usage of useProjectsQuery in NewOrgForm

* Remove usage of useProjectsQuery in SupportForm -> AIAssistantOption

* Remove usage of useProjectsQuery in PlanUpdateSidePanel

* Remove usage of useProjectsQuery in NoProjectsOnPaidPlan

* Remove useProjectsQuery in IntegrationPanels

* Remove useProjectsQuery from IntegrationPanels 2

* Remove useProjectsQuery from IntegrationConnection

* Remove useProjectsQuery from ProjectLinker, SidePanelVercelProjectLinker, and choose-project

* Clean up

* Rename a state to be in the same style.

* Remove button ref, it was used to match the width. Use sameWidthAsTrigger.

* Remove console.log.

* Remove hardcoded width.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-10-10 10:56:28 +08:00
Danny White 8bf1fd5d10 chore: minor clarity improvements on new project creation (#38299)
* feat: basic clarity improvements

* feat: all switches

* feat: basic errors

* fix: simplify

* fix: properly separate sections

* fix: remove smart toggle closure

* fix: remember file size unit

* fix: validation

* fix: UpgradeToPro styles

* fix: UpgradeToPro styles for full-width

* feat: create modal match

* fix: tests

* chore: periods and color contrast

* fix: grammar

* fix: revert unrelated changes
2025-09-01 09:07:59 +10:00
Joshen Lim 0af359a864 Swap to use paginated projects endpoint (#38192) 2025-08-27 14:09:58 +07:00
Alaister YoungandJoshen Lim 29e107af4a [FE-1712] chore: use /available-regions endpoint for project creation (#37371)
* chore: use /available-regions endpoint for project creation

* fix types

* make postgres version selection work

* Small nit refactors

* Feature flag changes + fix icons for flags in various places

* Fix creating projects when selecting a smart region

* Fix sending region selection to create project endpoint

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-19 16:36:59 +08:00
Joshen Lim cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* Replace all usage of useProjectContext with useSelectedProjectQuery

* Replace all usage of useSelectedProject with useSelectedProjectQuery

* Replace all usage of useProjectByRef with useProjectByRefQuery

* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery

* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks

* Deprecate ProjecContext
2025-08-06 10:53:10 +07:00
Saxon FletcherandJoshen Lim c76707012d basic typography classes (#37613)
* basic typography classes

* Clean up classes for where we use h1 tags

* Clean up classes for where we use h2, h3, h4

* Clean up classes for where we use h6

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-04 20:55:34 +10:00
Kamil Ogórek 07a0d279ea ref: Use organization_slug instead of org_id for project creation (#36629) 2025-06-24 17:27:23 +08:00
Alaister Young f7ab150cc3 chore: remove old vercel integration (#33295)
* chore: remove old vercel integration

* remove more unused files
2025-02-07 15:49:02 +08:00
Kamil Ogórek 06c3a3ec2b Enable branching for vercel marketplace (#32396)
* feat: Add support for branching for Vercel Marketplace resources

* docs: Remove Vercel Marketplace branching support note
2025-01-06 10:15:02 +01:00
590ed362ab feat: Redesign for the integrations pages (#30476)
* Initial commit.

* Minor type fixes.

* Add a integration for Queues. Refactor some of the integration layout.

* Migrate the Cron integration to the new style.

* Add useInstalledIntegrations hook.

* Add an integration entry for vault.

* Add an integration entry for GraphiQL.

* Add supabase webhooks.

* Feat/integrations get layout (#30538)

* scroll based icon

* Update header.tsx

* remove dep from overview

* moar

* more table stuff

* moar

* alt nav put in

* fix MotionNumber issues

* more

* trying both layouts

* Fix bunch of type errors.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

* Migrate Vercel and Github files to their own folders.

* Switch all integrations with the new designs.

* More fixes for links, pages structure and other random stuff.

* Remove unneeded file.

* Another set of fixes. Migrated most of the extension integrations.

* Migrated Vault and webhooks to the new style.

* Various fixes to make the animation work.

* Remove extra code.

* Tiny fixes 😬 i swear its tiny

* Refactor IntegrationOverviewTab

* chore/ update integrations routes (#30585)

* init

* add child support in tabs

* add webhooks

* Update IntegrationPageHandler.tsx

* fix id issues

* use messageId instead

* animation tweaks

* Move the description to the wrappers array.

* The useInstalledIntegrations now provides integrations which could be installed.

* Add static content for the various integrations.

* Move the page handler logic into the integrations definitions.

* Clean up some extra code.

* Add logic to make the overview tab the default tab.

* Don't show the header until the integration id has been checked.

* Add logic to the integration pages to avoid weird loading bugs, deselecting tabs if the integration hasn't been installed etc.

* Fix the webhooks overview tab.

* Fix the buttons for enabling extensions.

* Add padding to all custom tab contents.

* Small fixes

* Prettier lint

* Fix icon color + add empty state for when available integrations are all installed

* Fix ts errors

* Fiox

* Add enable webhooks cta

* Fix key

* Fix all lints

* Fix the queues create sheet.

* Fix the deletion of wrappers.

* Fix the minimum version alert for the wrappers extension.

* Make the queues table fit the whole container.

* Fix an issue which reset the tab when installing an extension.

* Address comments

* Add loading state for installed integrations in side nav

* Fix edit secret not rendering value in input field after subsequent openings

* Fix vault keys auto filling search input with vault

* Fix search input placeholder for cron

* Minor fix in install database extension copy

* Fix a bad redirect when reloading.

* Fix bad url redirects.

* Fix scrolling in create new/edit wrapper sheet.

* Add y padding to the wrappers rows.

* Fix merge errors.

* More merge fixes.

* Fix bad imports during the merge.

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-25 13:26:22 +01:00
Joshen Lim ecf001ab90 Refactor restore to new project by breaking into smaller components (#30604)
* Refactor restore to new project by breaking into smaller components

* Shift generateStrongPassword into a utils

* Update each notice component in restore to new project to be more consistent

* Add long polling in restore to new project

* Call refetch
2024-11-22 16:42:12 +08:00
Joshen LimandAlaister Young e6c249d9b5 Shift all uses of project api query to project settings v2 query, and deprecate project api query (#30029)
* Add perms check in projects API query

* Start deprecating use of projects-api-query, move to projects-settings-v2-query

* PRETTY

* Shift all uses of project api query to project settings v2 query, and deprecate project api query

* Fix

* Fix

* Small unrelated styling fix on join page

* Fix

* Update apps/studio/components/interfaces/Auth/Users/UserOverview.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2024-10-23 20:02:20 +08:00
divitandJoshen Lim 99c147a56c feat: support for restarting and resizing statuses (#29881)
* start using restarting and resizing statuses

* pretty 1

* Minor updates

* Small revert, to prevent conflicts

* PRETTY

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-10-17 11:52:22 +08:00