## 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>
<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 -->
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>
## 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 -->
* 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
* Update perms checking in audit logs
* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used
* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions
* Fix TS
* 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
* 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>
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* fix: update Permission params
* fix: upgrade check permission hook to support project level role
* fix: usePermissionsLoaded
* fix: Permission params can be undefined
* Scaffold new access management UI
* Add validation
* Update roles view
* Add tooltip
* Add button to apply role to all projects
* Update UI to select projects first instead of roles
* Merge master update UI
* Midway trying to implementation project level perms API
* First pass implementating updating project level permissions
* Add client side validation for assigning/removing roles
* Midway implementing new invites
* Integrate most of the project level permissions functionality
* fix: filter out org-level permissions before checking
* Add relevant UI guards in org level pages for project role POV
* Minor refactors
* Small refactors
* More fixes
* Moar refactors
* More fixes
* More fixes
* Refactor update role logic and smack some test cases on it
* Fixes
* Fix type issue
* Fix type
* more fixes, refactors, adding checks...
* MORE fixes
* Add perms checking for replicas
* Add ButtonTooltip component and use them to prevent repetition of pointer events auto for buttons with tooltips
* Convert all buttons with tooltips to use ButtonTooltip
* refactor
* PRettier
* Small fix
* Remove commented out code in organization-invitation-accept-mutation
* fix: switch to use the platform oauth authorizations routes
* Add perms checking for org audit logs and org oauth apps
* PRettier
* Fix incorrect URL for oauth app flow
* Fix incorrect URL for oauth app flow
* Fix
* Add perms checking for warehouse related UI
* Update roles helper icon
* remove unused lib
* Update package lock... again
* Update package lock... again
* Smalllll update
* Update some checks
* Add gate for project level permissions
* Last fix
* update codegen
* Update warehouse endpoint routes
* Fix
---------
Co-authored-by: phamhieu <phamhieu1998@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Fix downgrade network error causing UI crash
* Ensure that all try blocks have at least a catch block and not an empty finally block
* Update apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Update
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Remove size selection and add info on rr billing
* Add prompt in SQL editor if trying to run mutation query in read replica
* Fix
* Fix dropping replica not optimistically updating, and support new replica statuses
* Invalidate load balancers after read replicas are spun up
* fix
* start new github integration
* query/mutation updates
* progress
* branch management
* update codegen
* progress
* progress
* Refactor GitHub integration URLs
* Refactor GitHubIntegrationAuthorize component
* Updates
* Do not remove GitHub connection when creating new one
* Deleting a GH connection when branching is enabled for the project, will also disable branching for that project
* Add link to configure connection from org integration settings page
* Slight refactor
* Support updating CWD path
* Change cwd_path to workdir and disallow empty values
* Allow for triggering branches on supabase directory changes only
* Pass missing supabaseChangesOnly value
* Small style fix
* Add Authorization GitHub step
* Small change
* Fix supabase integrations form in project settings
* Revert URLa nd client ID
* Fix UI issues
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Kamil Ogórek <kamil.ogorek@gmail.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Danny White