Clarifies what the Vercel environment-variable sync toggles actually do
and guards the risky path. Enabling Preview/Development sync pushes this
project's **production** credentials into those Vercel environments —
previously this wasn't clear, so users expected isolated preview
deployments and were surprised when previews hit production.
Addresses **FE-3682** (support case SU-385292).
**Changed:**
- Reworded the sync section: a single heading + intro that makes clear
the toggles sync this project's production credentials to the selected
Vercel environments, and that most projects only need `production`.
- Recommend Branching for preview isolation, linking to the in-dashboard
branches page (`/project/<ref>/branches`) instead of docs.
- Switched the toggle rows to `FormItemLayout` (`flex-row-reverse`) for
consistent layout/spacing; descriptions now clarify these are the
**Vercel** environments.
**Added:**
- Inline `Admonition` warning when Preview/Development sync is enabled,
with branching-aware copy (a "Not recommended with Branching" variant
when Branching is on, explaining production creds are used until a
branch finishes provisioning).
- Confirmation dialog before saving whenever Preview/Development sync is
on, naming exactly which credentials get exposed (project ref, API URL,
anon + service role keys, DB connection strings). Production-only saves
skip the dialog.
## Screenshots
<img width="707" height="630" alt="Screenshot 2026-06-25 at 6 43 23 PM"
src="https://github.com/user-attachments/assets/30d45527-5a48-44c2-bdb7-2e576f5e4c7d"
/>
**Default state (production only)**
<img width="704" height="786" alt="Screenshot 2026-06-25 at 6 43 46 PM"
src="https://github.com/user-attachments/assets/75a12f65-99d0-4aad-9360-a7a6e6c91ca1"
/>
**Preview + Development enabled — inline warning (no Branching)**
<img width="535" height="373" alt="Screenshot 2026-06-25 at 6 44 18 PM"
src="https://github.com/user-attachments/assets/29d75804-fa93-402b-8cee-1faedd0ac9c7"
/>
**Confirmation dialog (no Branching)**
<img width="705" height="824" alt="Screenshot 2026-06-25 at 6 48 09 PM"
src="https://github.com/user-attachments/assets/c3f7bf97-7c6e-4be4-9a5b-90d422b03f81"
/>
**Inline warning — Branching enabled**
<img width="530" height="415" alt="Screenshot 2026-06-25 at 6 48 20 PM"
src="https://github.com/user-attachments/assets/a5ede69e-6186-488e-bf1e-49007b231201"
/>
**Confirmation dialog — Branching enabled**
## To test
- Open a project's **Integrations → Vercel** settings with a connected
Vercel project (the project-scoped connection form).
- Toggle **Preview** and/or **Development** on → inline warning appears;
toggle both off → it disappears.
- On a project with **Branching enabled**, confirm the warning shows the
"Not recommended with Branching" variant.
- Click **Save** with Preview/Dev on → confirmation dialog appears
naming the credentials. **Cancel** aborts (no save), **Sync
credentials** saves.
- Save with **only Production** on → no dialog, saves directly.
- Confirm the **Branching** links navigate to `/project/<ref>/branches`.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a confirmation step before syncing Preview or Development
environment variables.
* Improved the sync settings UI with clearer descriptions and a warning
message when these environments are enabled.
* Made the sync flow aware of project branching status, with guidance
that adapts to the project setup.
* **Bug Fixes**
* Improved the save flow so successful updates now reset the form, close
the dialog, and show a success message consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## What kind of change does this PR introduce?
UI bug fix. Resolves FE-3617.
## What is the current behavior?
On `/org/[slug]/integrations`, the Vercel section renders full-width and
the page uses a mixed layout: GitHub still uses the old Scaffold
two-column pattern while `VercelSection` was migrated to `PageSection`
without a page container in #46868.
## What is the new behavior?
- Migrates `/org/[slug]/integrations` to `PageHeader` + `PageContainer
size="small"` + `PageSection`, matching project settings integrations
- Puts the Vercel "Install Vercel Integration" CTA in the same dashed
card pattern as "Add new project connection" (org + project)
- Consolidates GitHub into a shared `GitHubSection` with
`isProjectScoped`, mirroring `VercelSection`
| Before | After |
| --- | --- |
| <img width="1728" height="997" alt="Integrations Peels Org
Supabase-BEB84402-99AA-4EF2-8B8F-3CAE98FEA33D"
src="https://github.com/user-attachments/assets/f52741d5-9c31-4707-a10f-c613e0b80bf4"
/> | <img width="1728" height="997" alt="Integrations Freebie
Supabase-975CF6FD-135B-4E84-AD0B-B47CD8F2AC73"
src="https://github.com/user-attachments/assets/1d665601-a38e-4e6b-b205-fde99efa2237"
/> |
## To test
- [x] `/org/{slug}/integrations`: GitHub and Vercel sections contained,
vertically stacked
- [x] Vercel connection tree connectors render correctly when
integration is installed
- [x] `/project/{ref}/settings/integrations`: no regression
- [x] Org keyboard shortcut for add connection still works
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
## 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>
<img width="1521" height="967" alt="image"
src="https://github.com/user-attachments/assets/8d7bed1f-3ed8-4311-bd4b-92345ae02a52"
/>
Updates project settings integration page to more aligned with our
updated layout guidance (as defined in layout.mdx in design system).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined the integrations settings page layout and visual design across
AWS PrivateLink, GitHub, and Vercel integration sections for improved
consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- On the Free plan the GitHub integration form disables the branching
section, but the create/update payloads still included `branch_limit`,
`new_branch_per_pr`, and `supabase_changes_only`.
- These three fields are now only sent when the org has the
`branching_limit` entitlement.
## Manual testing
- [ ] As a Free plan org, open Project Settings → Integrations → GitHub
and connect a repository. In the network tab, verify the `POST
/platform/integrations/github/connections` request body does **not**
include `branch_limit`, `new_branch_per_pr`, or `supabase_changes_only`.
- [ ] Still on a Free org, edit the working directory / production
branch on an existing connection. Verify the `PATCH` body also omits
those three fields.
- [ ] As a Pro (or higher) plan org with branching enabled, repeat both
flows and confirm the three branching fields are still sent with the
values from the form.
- [ ] Confirm the UI itself is unchanged: the branching controls remain
disabled on Free and editable on Pro+.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed GitHub integration to conditionally send branching-related
configuration fields based on user access permissions, preventing
unnecessary data transmission for users without branching access.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46388?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 -->
Light rewording of the "How does the GitHub integration work?" section
on Integrations > GitHub
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1289" height="863" alt="image"
src="https://github.com/user-attachments/assets/d661f107-b358-4894-8531-80441d60ab91"
/>
GitHub integration is now available on the free plan and so we'd like to
start promoting code-first workflows as much as possible. One way to do
that is to set the tone straight away by asking a user to connecting
their GitHub repository to a project as part of project creation.
This PR:
- decouples GitHub connection and repo selection into a separate
component we can make use of in integration settings and project
creation.
- Adds new GitHub fields to project creation form and sends them off to
project creation endpoint
- Pre-fills project name based on repo selection
To test locally:
- Ensure you have GitHub integration set up locally (using ngrok etc)
- Ensure you are on the connected platform branch
- Open create a new project page
- Connect GitHub as part of the creation form and select a repo
- Create the project and wait for status to be healthy
- Check project settings integrations page and ensure repo is connected
Note:
- this requires changes on the management api end to accept new GitHub
fields
- it might make sense to pull out GitHub connection/authorization from
GitHub repository selection but in the current state they are tied
together.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* GitHub repository selection now available during project creation with
integrated authorization flow
* GitHub connection status and compute availability indicators now
displayed on project dashboard
* Project name auto-populates from selected GitHub repository name when
available
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Context
Main fix is actually just the disabled check on the "Merge branch"
button
We're preventing merging of branches via the dashboard if the project
has GH integration + "Deploy to production" enabled (the latter we're
checking via if the `git_branch` property from the main branch exists,
from the GET branches API endpoint)
However, the `git_branch` property persists even after disabling the GH
integration (by design), and hence we were incorrectly disabling the
"Merge branch" button if the user removed the GH integration. Hence the
fix is to also check if the project has an active GH integration
## Other changes
- Refactored the merge page into smaller components
- Added an admonition to callout the "Deploy to production" + what steps
to take (otherwise it's not clear at all what to do in this scenario)
<img width="1451" height="524" alt="image"
src="https://github.com/user-attachments/assets/9df7d432-b220-4f71-b8f4-5ed0fd426afc"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Redesigned merge request page interface with dedicated components for
title, subtitle, and merge actions, improving user clarity and
experience.
* Added GitHub production deployment restriction messaging—users cannot
proceed with merge requests when this integration deployment method is
enabled.
* **Refactor**
* Enhanced GitHub integration connection query patterns and overall code
organization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Just happened to pass by this - refactor to use Admonition instead of
Alert + fix spacing + use InlineLink
e.g General settings while on a preview branch
### Before
<img width="795" height="364" alt="image"
src="https://github.com/user-attachments/assets/28ab66ab-bd10-408e-afb5-24e287efc705"
/>
### After
<img width="759" height="349" alt="image"
src="https://github.com/user-attachments/assets/db62925d-f2e2-4c10-9cab-ce8204f2077c"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Preview-branch notices across Settings now use a unified admonition
design with adjusted spacing for improved visual consistency.
* **Refactor**
* Standardized branch-notice layout and inline navigation links across
Addons, General, and Integrations; each notice now links directly to its
respective settings page for clearer navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## What kind of change does this PR introduce?
Docs update and UI copy improvement.
## What is the current behavior?
The GitHub integration working directory helper uses an inline tooltip
for examples. In the form layout, the tooltip alignment and inline code
wrapping can make the helper harder to scan.
The integration settings pages also mix markdown-rendered copy with JSX
copy, duplicate the integration cover image helper, and use slightly
different heading, spacing, and button copy patterns across GitHub,
Vercel, and AWS PrivateLink.
## What is the new behavior?
The GitHub working directory field now keeps the helper copy concise and
links to a dedicated docs section with examples for repository root and
nested `supabase/` directories.
The integration settings sections now use a more consistent JSX
structure and copy treatment across GitHub, Vercel, and AWS PrivateLink,
including shared cover imagery and matching explanatory section
hierarchy.
| Before | After |
| --- | --- |
| <img width="1838" height="696" alt="CleanShot 2026-04-24 at 14 35
32@2x"
src="https://github.com/user-attachments/assets/f9843018-fbf5-4c18-a0c3-1842b665f3fd"
/> | <img width="1842" height="700" alt="CleanShot 2026-04-24 at 14 30
21@2x-64E8726E-0B89-4C5A-8A47-CE1AA24F3D1A"
src="https://github.com/user-attachments/assets/bb017464-2b43-4dfe-94b8-a586aedea318"
/> |
| <img width="1884" height="1432" alt="CleanShot 2026-04-24 at 14 40
19@2x"
src="https://github.com/user-attachments/assets/b34e4573-cd7c-4588-83a0-0e1941019552"
/> | <img width="1844" height="1424" alt="CleanShot 2026-04-24 at 14 39
02@2x"
src="https://github.com/user-attachments/assets/4f82b01c-cb27-4f01-b2da-76b7f6e298a5"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Clarified GitHub integration setup: provide a Working directory value,
how to compute it from the repo root (including "." for root), examples,
and updated “initialize” spelling.
* **Refactor**
* Simplified integration form descriptions (tooltips → inline text +
Learn more link).
* Reworked GitHub and Vercel integration content to use consistent
headings, layout, and shared image handling.
* Reorganized integration settings rendering for clearer UI states.
* **Style**
* Minor copy, casing, and button text/spacing adjustments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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?
Wording change
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Just provides an example of what to include
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Clarified the "Working directory" guidance in GitHub Integration
settings: must be a relative path to the directory that contains the
supabase/ folder (not the supabase folder itself). Added an
example-driven tooltip and updated the placeholder to "." to reflect the
expected format and reduce confusion. This improves clarity and prevents
setup errors for repository-based workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
<img width="3504" height="2226" alt="cleanshot_2026-02-09_at_08 54 44_2x
(1)"
src="https://github.com/user-attachments/assets/967f2dab-09a7-4c46-9849-0e9f524fba70"
/>
When enabling GitHub integration for a project that already has a
connection, the create-connection API returns "already exists" error
while the branch settings update succeeds, causing both an error and
success toast to stack. Handle this by suppressing the error toast for
"already exists" so only the branch success toast is shown.
Fixes DEVWF-1128
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved error handling for GitHub connection creation. Suppresses
redundant error notifications when a connection already exists and
displays clearer error messages for other failures.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude <noreply@anthropic.com>
Previously, the POST to `/v1/projects/{ref}/branches` didn't work on
free projects, which left some Supabase projects setup without a default
branch. Easy fix for those projects would be to disable/enable the whole
integration.
This PR fixes that so that when the user wants to setup a production
sync, the code checks if there's branches already setup and if not, sets
the selected branch as default.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
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>
Adds the Github Integration entitlement to the
GitHubIntegrationConnectionForm.
### Testing
- Head to `/project/_/settings/integrations` with an org on the Free
Plan
- Assert that you see the upgrade prompt:
<img width="829" height="272" alt="image"
src="https://github.com/user-attachments/assets/9b852595-b486-4ef9-99c8-3359463c9dc3"
/>
- Head to `/project/_/settings/integrations` with an org on the Pro Plan
- Assert that you don't see the upgrade prompt and you're able to enable
and make changes to the Github Integration
## Context
Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months
- advisorRules
- newJwtSecrets
- isWorkOSTPAEnabled
- EnableOAuth21
- gitlessBranching
- showRefreshToast
- awsPrivateLinkIntegration
- useBedrockAssistant (Already not used)
- enableStripeSyncEngineIntegration
- ShowExplainWithAiInQueryPerformance
Doing it in 2 parts so its easier for review
- Add a warning about spend cap not applied on brahching when enabling
github integration
- Reduce default concurrent branches to avoid extra costs incurring
<img width="1247" height="833" alt="Screenshot 2026-02-16 at 18 58 14"
src="https://github.com/user-attachments/assets/9e93161d-7d80-4e6b-a102-3791b309c897"
/>
Fixes: DEVWF-1144
## What kind of change does this PR introduce?
Bug fix https://github.com/supabase/cli/issues/4793
## What is the new behavior?
Updates config description to be less confusing.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated field labels in GitHub integration settings for
clarity—renamed "Supabase directory" to "Working directory" with revised
description text.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Fix the Vercel avatar image when going back to the URL.
* Fix portal issues on org and project linkers.
* Remove misleading comment.
* Use png format when requesting Vercel avatar.
* Fix a type error.
* Fix a missing import.
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* 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.
* init request upgrade plan modal
* Consolidate UpgradeToPro components across UI + use UpgradePlanButton, UpgradePlanButton determines whether to show request upgrade CTA
* Allow to pass icon to Admonition
* Tiny fix on upgrade plan button CTA to consider addons
* Hook up upgrade request endpoint
* Update API types
* remove hardcode
* Add request upgrade CTA in plan side panel
* Fix disk compute
* Show request upgrade button for change to large compute
* Nit
* Midway
* Add projects-infinite-query and remove use projects query in account audit logs
* Remove useProjectsQuery from RouteValidationWrapper
* Remove useProjectsQuery from OrganizationCard
* Remove useProjectsQuery in new project page
* Deprecate useProjectByRefQuery, replace all usage with just useProjectDetailQuery
* Remove useProjectsQuery from Organization Audit logs
* Fix check
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
Alaister Young
