I made the connected-project framework icons fall back when no shipped
SVG exists for a framework. The three icon sites built
`/img/icons/frameworks/<framework>.svg` straight from the integration's
framework preset, which is an open-ended string. They only fell back
when the value was empty, so any preset without an asset (`express`,
`hono`, `fastapi`, `tanstack-start` and others) showed a broken image
and logged a 404.
**Changed:**
- **Broken framework icons**: `getFrameworkIconUrl` returns the asset
URL only for slugs in a set that mirrors `public/img/icons/frameworks/`.
The integration connection row, the org project linker and the
marketplace project picker now show their existing fallback icon for any
other slug. A test keeps the set equal to the directory listing.
- **Framework type**: I deleted the hand-kept `VercelFramework` union.
It listed exactly the shipped icon slugs, while the API types the field
as `string | null`, and that mismatch is what made the old empty-only
check look safe.
**Note:** I rejected an `onError` fallback because the browser still
sends the 404 request. Adding logos for common presets is left for
design.
## To test
Tested on Vercel preview (staging): no real connection there uses these
presets, so I rewrote the org integrations response in the browser to
give one integration four connections.
- [x] Open an org's Integrations page with connections whose framework
has no shipped icon (`express`, `eve`, `tanstack-start-lovable`). Expect
the fallback badge and no request under
`/dashboard/img/icons/frameworks/` for those slugs. Observed: all three
rows showed the badge and the network log had no request for their SVGs.
- [x] Same page with a `nextjs` connection. Expect its framework logo.
Observed: `nextjs.svg` loaded with a 200.
- [x] Same page with the real, unmodified response (one connection with
`framework: null`). Expect the badge, no frameworks requests, and no new
console errors. Observed: as expected.
## Linear
- fixes GROWTH-1309
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Vercel integration and project views now display framework icons when
available and fall back to the Vercel icon when no matching icon exists.
* Framework metadata now supports values beyond a fixed list, while
unsupported frameworks continue to use the fallback icon.
* **Tests**
* Added coverage for supported and unsupported framework icons,
including base-path handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
## 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>
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>
## Problem
Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.
## Solution
- Cleanup those exports
- Update imports when necessary
No functional changes. If it builds, it's fine
* 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>
* 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>
* init
* moar
* moat
* moar
* add read replica bar
* moar
* Update DiskMangementPanelForm.tsx
* added temp state mang to test
* moar
* Prepare react queries + data from API for disk mgt
* moat
* moat
* moar
* Update DiskMangementReviewAndSubmitDialog.tsx
* badge updates
* Hook up actual endpoints for E2E testing, but commented out for now for local dev
* Hook up real data + clean up files and add tests
* Update APi types
* Hook up E2E and fix all validation logic
* Only show new disk mgt UI for orb billing
* Add note on RRs 25% more disk size
* Add state to handle free plan for disk mgt
* Update increase disk size CTA in reports/database
* Fix file spelling errors
* Address feedback
* Fix missing framer motion package in ui
* Address comments
* Address feedabck
* Minor fix
* Use new disk util endpoint
* Remove unused import
* Address feedback
* More addressing of feedback
* Update pricing details for IO2 - no included disk size
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.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>
* 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.
Pamela Chia