<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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?
This is a follow up to #38170 adding unit tests for the functions and
e2e tests for the feature.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Tests**
* Added comprehensive test suites covering access token schemas, token
utilities (sorting, filtering, mapping, formatting, and expiration
logic), and permission utilities (action sorting and resource toggle
behavior). These tests exercise validation rules, edge cases,
deterministic date handling, immutability, and multiple branch scenarios
to improve reliability and coverage.
<!-- 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?
Introduces UI for Scoped PAT's.
## Additional context
WIP. Testing endpoints.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Scoped access tokens: create, view, delete, and manage granular
resource/action permissions with custom expiry options and scoped
creation flows.
* New scoped token UI: modal/sheet creation flow, resource access
selectors, permissions editor, and a scoped token list.
* **UI Improvements**
* Tabbed Classic vs Scoped tokens layout, refreshed tokens page,
improved forms, search/filtering, and table tweaks.
* **Bug Fixes / Maintenance**
* New data hooks and utilities for scoped tokens and token handling.
* **Removed**
* Legacy account settings layout and legacy token banner.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* fix: correct styling for access tokens action menu
* fix: use timestampinfo card for created and expired
* chore: remove unused tooltip components
* feat: bonus add sorting for expiry and used dates
* fix: coderabbit suggestions
* fix: colspan suggestion
* fix: line truncation for token
* fix: another colspan spotted
* 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.
* 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.
* chore: update react-day-picker
* fix(design system): date picker demos
* refactor(date picker): change logs date picker to use react-day-picker
* refactor(date pickers): change remaining date pickers to use react-day-picker
* cleanup(date pickers): minor code cleanup
* fix(date picker): fix behavior for single day selection
* Migrate all uses of invalidateQueries to use object syntax.
* Migrate the remainder of useInfiniteQuery.
* Migrate all setQueriesData.
* Migrate all fetchQuery uses.
* Migrate some leftover functions from RQ.
* Fix issues found by Charis.
* o11y: mirror and sanitize breadcrumbs
Mirror Sentry breadcrumbs as the basis for our own support logging. Also
adds more sanitization to breadcrumbs.
* feat(support form): toggle for attaching dashboard logs
Add a toggle to the support form when the category is "Dashboard bug",
to attach recent dashboard logs. Users can preview the attached logs and
opt out.
* feat(support links): dedicated support link component
Add a new component for support links, which:
- Uses the serializer for support link params to ensure
serialization/deserialization pairs correctly
- Snapshots breadcrumbs so the attached log on the support form will be
cut off at the support link click (otherwise we will get support form
actions cluttering up the log)
* tests(support form): extend timeout on flaky test
* Minor clean up
* fix(support form): allow url to specifically indicate no specified project
* minor nits
* Fix tests
* Fix tests
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat(preferences): allow disable hotkeys
Add a section in /account/me for disabling hotkeys. Only added one
hotkey for now (Cmd + E for toggling editor side panel) but we can add
more with the same pattern.
* refactor: remove default export on ProjectLayout
* feat(hotkeys): allow toggling of command menu and ai assistant hotkeys
* Nit
* PRettier lint
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: add shadow to tables on inner scroll
This adds a shadow to indicate the tables still have more content to scroll.
* chore: remove comments from file
* fix: update easing and duration of shadow transitions
* fix: some more column size fixes
* feat: generic ShadowScrollArea component
This creates a generic ShadowScrollArea component we can reuse eleswhere
* feat: working sticky last col and shadow
* chore: run prettier
* fix: bg hover of sticky column
* Fix hover states for table header and table row, and if last column is sticky
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat(profile): add self-serve editing of username and primary email
Users can now update `username` and choose a `primary_email` directly in the
Dashboard profile editor.
Changes:
- Add `username` and `primary_email` fields to the profile form.
- Introduce `Select_Shadcn_` dropdown listing the user's identities
(via `useProfileIdentitiesQuery`) for selecting a primary email.
- Default `primary_email` selection is derived from the current profile.
- Extend form submission to patch `username` and `primary_email` to the
profile API.
- Wire zod schema and react-hook-form defaults for new fields.
* chore: remove unused variable
* fix: disable username & primary_email modification for SSO users
* Small refactors
* Remove hard code
* Refactor to use FormItemLayout
* chore: add descriptions for primary_email and username
* chore: fix format and lint error
* chore: fix lint error
* Use identities to derive user dropdown profile image, and remove profile image from useProfile hook
---------
Co-authored-by: Chris Stockton <chris.stockton@supabase.io>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* fix: column sizes for access tokens
This fixes the column widths for the access tokens table so they dont collapse despite small strings for dates.
* fix: truncation for token name
* feat(studio): Add expiration date and last used to personal access tokens
* Nit polish
* ref: Mark expired tokens as such
* chore: run prettier
* Clean up
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: kemal <hello@kemal.earth>
* chore: branching off breaking down scoped pat work
This branches off the scoped PAT prototype and gives us a first base to go off. In this branch I will be migrating access tokens to their new visual style but they will be behaving as they currently do.
* chore: separate sheet and dialog
Separated the new scoped PAT sheet off. We can interchange. Anyway we will probably need to when opt in and out becomes available.
* fix: remove unused part of test
The test was still checking for permissions. Hidden that for now.
* Fix prettier
* Clean up
* Hide new token banner if deleting the new token that was created
* Clean up
* Nit prettier import sorts
* feat: remove future files for now
This removes some of the upcoming components for Scopted PATs as its not really in scope of this. Also tidys up imports etc in files
* Nit refactors
* Update warning dialog in NewAccessTokenDialog
* chore: regenerate types
* chore: regenerate types again
* fix: update mock response in new access token button test
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* use logsdatepicker in audit logs, fix error hiding filters
* use logsdatepicker in acc audit logs
* move filters out of err
* add hideWarnings to logs date picker. make "today" button scroll to current month. change icon and add tooltip in timerange reset button so its not confused with a close button
* fix filters below loading state
* Fix cron panel if unable to parse command
* Nit
* Address feedback
* Add a testcase for parsing cronjob when it ends with ;.
* Revert useEffect
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* chore: Refactor `NewAccessTokenButton` to use shadcn components
This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.
I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.
* add success and failure toasts
* add smoke test for `NewAccessTokenButton`, fix vitest config
This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.
Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.
This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.
* add warning comment in case of future config regression
* update test cases, reset form on dialog close, testing setup fixes
This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.
Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.
Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.
* ensure mocked date is a string
* update testing setup, pollyfills and add rich type support to addAPIMock
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* chore: Refactor `NewAccessTokenButton` to use shadcn components
This brings `NewAccessTokenButton` into conformance with the latest UI patterns of using shadcn based components, zod schemas, and react-hook-form for form submission.
I based this refactor on the implementation of `CreateSecretAPIKeyDialog`, which already made use of the above.
* add success and failure toasts
* add smoke test for `NewAccessTokenButton`, fix vitest config
This adds a minimal test for `NewAccessTokenButton` but more importantly fixes a critical bug in the vitest configuration for `studio`.
Because `restoreMocks: true` was set in the config, this meant that the mock implementation for `window.matchMedia` defined in the `tests/vitestSetup.ts` file was being **reset** to an empty function before each test suite was run. While this didn't appear to be a problem before, that appears to be because none of the existing tests had `motion.div` in their component trees. Since `motion.div` calls `addListener` on a media query as part of it's lifecycle, that meant that any test which included it would fail as `addListener` would be undefined in this situation. Removing `restoreMocks: true` from the config results in the desired mocking behavior.
This change is necessary in order to test any component that has the `FormItemLayout` component, as it uses `framer-motion` to animate in error messages for input elements.
* update test cases, reset form on dialog close, testing setup fixes
This fixes an issue with the polyfills for the testing environment, where a call to `useMutation` would fail as a result of `TransformStream` being set to `null`.
Basic tests for access token creation and form resetting added. Adds `@faker-js/faker` to the studio app devDependencies to generate mock data for `msw` endpoint response.
Adds `shx` to the docs app devDependencies to ensure that the `codegen:examples` script runs cross-platform.
* ensure mocked date is a string
* update testing setup, pollyfills and add rich type support to addAPIMock
* fix imports
* fix missing listen call for msw, resolve test type error
* fix imports
* Update studio testing setup files
Improves API mocking type safety and polyfills browser APIs necessary to run tests with framer-motion components
* fix missing listen call for msw, resolve test type error
* fix imports
* Shift test file
* Smol fix
* Nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: add mfa enforcement toggle
Allows toggling MFA enforcement on an organization level.
Depends on API change #22088
* fix: toggle and disable action for non-owner
* chore: disable for free plans
* chore: disable toggle for org MFA if current user doesn't have MFA enabled
* set initial state
* move org mfa to security page
* use zod resolver
* fix initial values
* useQueryClient in the organization-mfa-mutation
* chore: warn about losing access to mfa orgs
* Some refactors, fixes and improvements
* chore: feature flag mfa enforce page
* Tiny fix
* Leave comment
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* docs: user nav dropdown
* www: user dropdown nav
* update menus
* chore: add complete local storage allowlist
* move all local-storage to common
* reload after logOut
* add local storage key changes from #35175
* fix errors
* add more keys
* fix merge bugs
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* chore: add usercentrics for consent management
* client component to make next.js happy
* address feedback
* move consent state to common
* fix import
* ensure page events are sent correctly
* add feature flag provider to ui library site
* fix ui lib 500 error
* skip in test env
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
