## What kind of change does this PR introduce?
Feature and design-system cleanup. Resolves DEPR-551.
## What is the current behavior?
Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.
Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.
## What is the new behavior?
Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.
The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.
This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.
Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.
| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |
| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.
* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.
* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.
* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As part of RLS testing, adding @awaseem's idea for having "View data as
user" CTAs in the Auth Users's table
<img width="348" height="190" alt="image"
src="https://github.com/user-attachments/assets/855c8f54-0aba-478c-982b-1d9d29e419bd"
/>
## Other changes
Similar from @awaseem's suggestions, am also refactoring the Role
Impersonation UI a little, mainly from a copy writing POV to improve the
clarity of the UI.
- More action-oriented and contextual header for the role impersonation
popover
- e.g Table Editor -> "View data as a role", or SQL Editor -> "Run SQL
query as a role"
- Updated labels to be bit more intuitive from a builder's POV
- The actual database role is still mentioned in the option's
description (so we aren't obfuscating the actual postgres logic)
- Add label descriptors to elaborate what each role implies
- e.g Anon -> "Not logged in"
- Add docs button which points to
[here](https://supabase.com/docs/guides/database/postgres/row-level-security#authenticated-and-unauthenticated-roles)
that explains which roles Supabase uses
- (Nit) Refactor to use Card component
### Before
<img width="647" height="277" alt="image"
src="https://github.com/user-attachments/assets/9ebae084-38b7-4e21-886b-f609bd71976e"
/>
### After
<img width="604" height="309" alt="image"
src="https://github.com/user-attachments/assets/4d797309-1b6b-4fd0-aab3-63d5e144c53c"
/>
<img width="630" height="297" alt="image"
src="https://github.com/user-attachments/assets/ca748635-c5da-4426-a9c3-8cb5aeef47a6"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added "View data as user" and "Run SQL as user" actions to user rows
to impersonate a user and jump to table or SQL views.
* Impersonation now surfaces an identity card in new tabs showing the
impersonated identity and a Stop button.
* **UI/UX Improvements**
* Impersonation panels accept customizable headers, show clearer role
labels (Postgres), richer role descriptions, condensed RLS copy,
in-panel docs link, simplified "Stop" labels, and adjusted
typography/padding for consistent styling.
<!-- 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>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## 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 -->
## 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
Before:
<img width="556" height="236" alt="Screenshot 2026-04-20 at 10 34 05"
src="https://github.com/user-attachments/assets/c27ec1e8-0ca7-4abc-a548-73ad14ae241c"
/>
After:
<img width="585" height="215" alt="Screenshot 2026-04-20 at 10 33 54"
src="https://github.com/user-attachments/assets/63fecb2f-0305-43f1-9032-e470a2c29578"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Improved internal code organization for the user search component
styling to enhance maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## TL;DR
fixes the Auth Users provider badge for Web3 users so it reflects the
actual enabled provider state
## problem
Web3 authenticated users appeared `Disabled` in `Authentication -> Users
-> Provider Information`
This happened because the user provider is stored as `web3`, while the
actual enabled state is chain specific (`solana` / `ethereum`)
<p align="left">
<img width="443" height="281" alt="Image"
src="https://github.com/user-attachments/assets/4918cbdb-75a4-4bd9-b9e5-511dcced5447"
/>
</p>
## solution
When the provider is `web3`, resolve the enabled badge from
`raw_user_meta_data.custom_claims.chain` (saw that in the payload while
testing) and map it to the correct Web3 config flag:
- `solana` -> `EXTERNAL_WEB3_SOLANA_ENABLED`
- `ethereum` -> `EXTERNAL_WEB3_ETHEREUM_ENABLED`
<p align="left">
<img width="148" height="43" alt="image"
src="https://github.com/user-attachments/assets/9d21b8fc-da93-4dcd-9cdb-5c0eacef2a27"
/>
</p>
## ref:
- closes https://github.com/supabase/supabase/issues/44724
- closes https://github.com/supabase/supabase/issues/39568
- closes https://github.com/orgs/supabase/discussions/39563
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Corrected web3 provider enabled status detection by mapping user chain
configuration to provider settings.
* **Tests**
* Added test coverage for web3 user enabled status display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Removes the "API Docs" navigation item from the sidebar and mobile
menu
- Removes the `UI_PREVIEW_API_SIDE_PANEL` feature preview flag since the
feature is fully rolled out
- Makes API docs buttons unconditionally visible across Auth Users,
Storage, Edge Functions, and SecondLevelNav
## Test plan
- [x] `NavigationBar.utils` tests pass (26 tests)
- [x] `FileExplorerHeader` tests pass (6 tests)
- [x] TypeScript compiles with no errors
- [ ] Verify sidebar no longer shows "API Docs" nav item
- [ ] Verify API docs buttons still appear in Auth Users, Storage, and
Edge Functions pages
- [ ] Verify feature preview modal no longer lists "Project API
documentation"
Resolves FE-2759
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* APIDocs button can optionally display a label and use a custom
tooltip.
* **Chores**
* Removed the API docs side-panel feature flag and its localStorage key.
* “API Docs” navigation entry removed; sidebar no longer special-cases
that route.
* Back links and API Docs buttons now render consistently across the app
(no flag gating).
* **Tests**
* Tests updated to stop depending on the removed feature-flag behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## Context
Shifting more dashboard queries into pg-meta so that we centralize all
manually written queries in one place
Having them in packages/pg-meta also allows us to write tests for them
## To test
Just needs a smoke test on
- Table Editor
- Fetching entities
- Viewing definition
- SQL Editor
- View ongoing queries
- Abort queries
- Integrations
- Queues
- Database
- Migrations
-Triggers (Updating)
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>
## Context
We reached to a consensus that we'll keep manually written queries
within the `pg-meta` package
I'll shift queries over in several PRs but wanted to double check if the
changes here is a good folder structure
## Changes involved
- Am organizing dashboard queries in `pg-meta` based on product
- So folder structure will be `/sql/studio/[product]/*.ts`
- Every constant will be exported directly from `pg-meta`'s index
- So consumption in dashboard will just be `import { xxx } from
'@supabase/pg-meta`
cc @avallete and @soedirgo on this one - lemme know if this is alright,
or if there's a preferred way to do this
## What kind of change does this PR introduce?
Feature. Resolves DEPR-390
## What is the current behavior?
Projects aren’t sortable in either the card or table view.
## What is the new behavior?
Projects are sortable in both:
- Card view: sort dropdown
- Table view: sort dropdown or table column headers
| Before | After |
| --- | --- |
| <img width="1382" height="797"
alt="Supabase-4D1BFE40-875D-494C-8F17-A68D92826458"
src="https://github.com/user-attachments/assets/c4f17b77-bc90-447f-90cd-78a11c2e4129"
/> | <img width="1382" height="797"
alt="Supabase-D8C0AC7C-A28D-4AA6-BA7C-0FCD61DB5D11"
src="https://github.com/user-attachments/assets/d926d03d-2702-48e5-9d1f-0e09d163079d"
/> |
| <img width="1382" height="797"
alt="Supabase-0A545C5C-40B5-47F7-9ACD-2200879BB95E"
src="https://github.com/user-attachments/assets/f2103c32-a150-4db7-a78a-8bd610e2a028"
/> | <img width="1382" height="797"
alt="Supabase-0F7AB608-2E86-4F0C-BB60-C85D9B7F3D57"
src="https://github.com/user-attachments/assets/baa63f14-4059-483d-a9d6-33663e5cff43"
/> |
## Additional context
I wonder if this is overkill given most folks only have 1–2 projects.
Some ideas:
- Only sortable in table view via column headers
- Conditional rendering for folks with 2+ projects
- Opt-in feature
- Feature-flag
I’ve opted to make it global and synced for now.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This pull request standardizes the usage of props and value types for
the `ResizablePanelGroup` and `ResizablePanel` components across
multiple files in the codebase. Specifically, it replaces the deprecated
`direction` prop with `orientation`, and updates numeric prop values
(such as `defaultSize`, `minSize`, and `maxSize`) to be passed as
strings. This ensures consistency with the updated component API and
improves type safety.
**Component API Updates:**
* Replaced the `direction` prop with `orientation` for all usages of
`ResizablePanelGroup`
* Updated all `ResizablePanel` props (`defaultSize`, `minSize`,
`maxSize`) to be passed as strings instead of numbers, ensuring
compatibility with the latest API requirements.
* Removed deprecated or unnecessary props such as `order` from
`ResizablePanel` components, and ensured all size-related props are
consistently formatted as strings.
This pull request updates the `react-data-grid` dependency and refactors
code throughout the codebase to use the new import structure and updated
APIs. The changes improve compatibility with the latest version of
`react-data-grid`, simplify imports, and update row selection logic to
match new hook signatures. Additionally, some code is reorganized to use
absolute imports for internal components.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
<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>
* 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.
* feat(auth): allow opting in to creating indexes on `auth.users`
* chore: organize imports. use alert above table.
* chore: use default type to avoid 2 primary actions
* add useQueryStateWithSelect to Policies
* add useQueryStateWithSelect to Users
* use show for users param routing
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* Updated to use optimized search columns when getting user counts
* added unit tests for query builders
* minor
* Nit fix keywords URL param not getting loaded into search input field
* removed user footer
* updated tests for upstream
* updated integration tests
* updated tests to be int for paginated
* updated schema
* updated types
* updated type imports
* updated type imports
* Apply suggestion from @avallete
Co-authored-by: Andrew Valleteau <avallete@users.noreply.github.com>
* updated literal import
* refactor: use common escaping (#40186)
refactor: use utils for sql escaping
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Andrew Valleteau <avallete@users.noreply.github.com>
* 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.
* Add threshold value to persist sort by in auth users
* Update apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* Fix local storage values getting overriden when landing on auth users page directly, and merge useEffect for loading local storage values
* Nit
* Fix
* Update warning
* Fix
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* fix: add time zone to commit time and add to support message
The time zone isn't getting logged on the commit times, which makes it
confusing what the actual time is. Also added it to the support message
alongside the version number, to help quickly rule out outdated version
issues.
* Nit unrelated update auth users sort dropdown copy
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat: optimized users page
* Update UI
* Reinstate footer with count if mode is freeform
* Simplify disabled sort in performance mode
* Clean
* Small fix
* Final fixes
* Shift users SQL query to packages/pg-meta
* Nit unrelated: Clear query params from useLogsUrlState when going to logs tab of a selected user
* Shift user count SQL and get count estimate SQL into packages/pg-meta
* Fix
* Nit
* Nit
* Minor nits
* Refactor UX for searching
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
