Commit Graph
44 Commits
Author SHA1 Message Date
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
2026-09-11 17:05:26 +10:00
Saxon Fletcher 9718eea593 refine role impersonation popover (#49467)
**Old**
<img width="979" height="839" alt="image"
src="https://github.com/user-attachments/assets/7239604f-a37f-483c-84eb-dbafabdeb73c"
/>

**New**
<img width="1185" height="645" alt="image"
src="https://github.com/user-attachments/assets/e699d75f-fd04-47dc-a8da-97f880e39796"
/>


## 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?

Studio UI refinement. This is PR 2 of 2 and depends on #49466.

## What is the current behavior?

The Run SQL query as a role submenu uses the full role-impersonation
card layout, making the nested popover substantially larger than the
surrounding query controls.

## What is the new behavior?

- Adds a compact role-impersonation presentation used only by the query
submenu.
- Uses horizontal FormItemLayout rows and base ToggleGroup, InputGroup,
Input, and Button components.
- Keeps role choices stacked while using tiny controls for user source,
user lookup, external-user fields, and MFA level.
- Keeps authenticated-user controls visible but disabled for Postgres
and Anonymous roles.
- Preserves project-user search, external-user claims, impersonation,
and stop-impersonating behavior.
- Leaves existing role selectors in GraphQL, Table Editor, Realtime, and
other surfaces unchanged.

## Verification

- Focused compact role-selector test
- Studio, UI, and UI Patterns typechecks
- Existing focused Toggle and MultiSelector tests
- Studio ESLint
- Local visual and interaction verification against the supplied
prototype



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Redesigned role impersonation with role-specific summaries and native
role icons.
* Added native and external user impersonation, including user-source
switching and MFA controls.
* Added user search, external user ID entry, and clearer active-user
controls with accessible labels.

* **Bug Fixes**
* Improved role switching, impersonation clearing, pending selections,
and error recovery.

* **Tests**
* Expanded coverage for role selection, user impersonation, MFA updates,
state transitions, and error handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-26 16:28:02 +08:00
Danny White 5f9ce727c0 fix(ui): systematise control surface fills and hover borders (#48887)
## What kind of change does this PR introduce?

Bug fix / design-system token hygiene for form and selector chrome.

## What is the current behavior?

After opaque default-button fills, text fields, selects, and selector
tiles drifted apart: inputs and selects mixed ad-hoc washes, hover
borders bounced between `border-stronger` / `border-foreground-muted`,
invalid fields had no hover step, and composites like InputGroup leaked
inner hover borders.

Follow-up to #48837 (opaque button fills) where Select rest still felt
darker than Input on forms such as scoped access tokens.

## What is the new behavior?

Named control roles and one interactive border:

| Role | Fill | Rest border | Hover / focus / open |
| --- | --- | --- | --- |
| Field (sunk) | `bg-field` | `border-control` | `border-control-hover`
|
| Raised control | `bg-control-raised` | `border-strong` |
`border-control-hover` |
| Overlaying action | card → popover | `border-strong` |
`border-control-hover` |
| Invalid field | `bg-destructive-200` | `border-destructive-400` |
`border-destructive` |

- `--field` / `--control-raised` / `--border-control-hover` live in
`semantic.css` (source of truth for roles; README points there)
- Input / Textarea / InputGroup / legacy TextArea use the field ladder
(incl. invalid hover)
- Select and empty MultiSelect use raised; filled MultiSelect sinks to
field
- Default + dashed Button, CommandMenu trigger, and radio
card/stacked/large use `border-control-hover`
- Studio selector tiles aligned: Connect mode, role impersonation,
DuckLake modes, compute “Contact us”

| Before and After |
| --- |
| <img width="1576" height="759" alt="Access Tokens Account Supabase"
src="https://github.com/user-attachments/assets/4bbe8b2b-a31a-4d63-80ba-04a1a8a5609d"
/> |
| <img width="1576" height="759" alt="Access Tokens Account Supabase"
src="https://github.com/user-attachments/assets/92271223-4103-4cc6-a7c0-9e4ff71cce30"
/> |

## Additional context

`--control-raised` aliases `--card` today (role name so fill can diverge
later). Rest `border-control` / `border-strong` both still map to
`--input` via compat; the shared interactive step is
`--border-control-hover`.

## To test

1. **[Account → Access
Tokens](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/account/tokens)**
Open Generate / New scoped token. Side-by-side Input, Select,
RadioGroupStacked, MultiSelect. Confirm sunk vs raised fills, shared
hover border, MultiSelect flips to sunk once a value is selected. Leave
a required field empty to check invalid rest → hover → focus.

2. **[Org →
Projects](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/org/_)**
Hover the dashed Status filter. Hover default / filled filter buttons
when active. Confirm hover/open borders match.

3. **[Project →
Connect](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_)**
Open Connect from the header. Mode grid tiles: hover + selected borders
match radio cards (no old muted-foreground ring).

4. **[Project →
Compute](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_/settings/infrastructure)**
(optional)
   Compute size radios + “Contact us” tile hover.
2026-08-18 16:54:25 +10:00
Joshen Lim 097a105663 joshenlim/fe 4176 add role impersonation to explorerquerysourcemenu (#49101)
## Context

Stacked off from https://github.com/supabase/supabase/pull/49098 - adds
role impersonation for both Notebook Query cell + Explorer Query tab

Note that this refactors the role impersonation state a little to
decouple some stuffs to make this work, since the role impersonation
state is global and we need a local state to support this UX

Similarly to row limit, for query tab its intentional that for now that
the role impersonation isn't scoped to the query draft atm as I wanna
avoid making changes to explorer-query given there was a couple of PRs
in flux that adjusts that file - will handle that separately

<img width="1117" height="577" alt="image"
src="https://github.com/user-attachments/assets/9bfd6287-efff-418b-a1c0-934ee2c840cb"
/>

<img width="1917" height="436" alt="image"
src="https://github.com/user-attachments/assets/bfd1be82-8f77-4764-bd3a-4b9c63169b82"
/>


## To test
- [ ] Verify that role impersonation works in notebook query cell
- [ ] Verify that role impersonation works in notebook query tab

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added role impersonation support to SQL Explorer queries.
* Users can select an impersonated role directly from database query
menus.
  * Query execution now applies the selected role when configured.
* Added local role selection state for individual query tabs and cells.
* Improved reuse and consistency of role impersonation controls across
the interface.
* Role selections and impersonation details remain synchronized across
supported query components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-17 14:22:50 +08:00
Gildas Garcia cabe14e5ca chore: remove _Shadcn_ suffix from ui tabs components (#47628)
## Problem

Now that we migrated all usages of the deprecated `Tabs` component, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR
does, no visual nor functional changes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Standardized tab components across the app so pages and dialogs now
use the same consistent tab UI.
* Improved tab-based views in design, docs, studio, learn, and website
experiences for a more uniform interface.

* **Chores**
* Updated shared UI exports to expose tab components directly,
simplifying future usage across the product.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-06 15:29:16 +02:00
Gildas Garcia 70c3bafe63 chore: CSS cleanup (#47443)
## Problem

- We have unused CSS from previous design system (`.sbui-*` classes)
- We use Tailwind `@apply` when we could set the tailwind classes on the
components directly

## Solution

- Delete all `.sbui-*` classes as we don't use them anymore
- Move classes directly on components when that make sense

## Notes

I did not migrate all `sbgrid` classes as they are applied in multiple
components

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Updated grid editors, placeholders, headers, and dropdowns for cleaner
spacing, truncation, and alignment.
* Improved layout consistency across text, number, time, JSON, and
foreign-key cells.
  * Adjusted search and impersonation inputs for better fit and padding.

* **Chores**
* Simplified and removed outdated styling overrides across the Studio
and web app.
* Reduced unused UI package surface by removing an unused input icon
container export.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-30 18:06:38 +02:00
Gildas Garcia c6fc456910 chore: cleanup duplicate exports studio (#47387)
## 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
2026-06-29 15:46:16 +02:00
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## 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>
2026-06-16 23:59:58 +02:00
Gildas Garcia d0fd4478c0 chore: migrate Popover usages to Shadcn components (#45980)
## 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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 15:20:28 +02:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
2026-05-15 14:55:37 +02:00
Gildas Garcia 678aec3845 chore: migrate Input usages to Shadcn component in various screens/components (#45604)
## Screenshots

### Table editor: foreign record selector
Before:
<img width="802" height="213" alt="image"
src="https://github.com/user-attachments/assets/82ee3ce6-ac72-4b49-b1b0-2e635688cbb1"
/>

After:
<img width="609" height="194" alt="image"
src="https://github.com/user-attachments/assets/e9cc09c1-1c6b-4099-8cae-abe08f50fda9"
/>


### Account - Add TOTP
Before:
<img width="527" height="679" alt="image"
src="https://github.com/user-attachments/assets/b9f4a626-e24b-46e3-8385-700ef181308b"
/>

After:
<img width="531" height="684" alt="image"
src="https://github.com/user-attachments/assets/549745a7-9655-4a7d-9e0e-51f75b6a1c61"
/>

### Organisation Audit Logs Details
Before:
<img width="673" height="1321" alt="image"
src="https://github.com/user-attachments/assets/0bb360cf-6f27-4574-b9af-485a3836b17b"
/>

After:
<img width="669" height="1273" alt="image"
src="https://github.com/user-attachments/assets/0382c662-e270-41fd-a8ee-08528dedfce3"
/>

### Data API Integration Docs
Before:
<img width="1115" height="891" alt="image"
src="https://github.com/user-attachments/assets/db0c7698-53b7-4422-aac3-5e674b0bf151"
/>

After:
<img width="1193" height="1272" alt="image"
src="https://github.com/user-attachments/assets/927e5c43-413b-49c1-9b71-8ab628179c70"
/>

### Edge Function Edit Secret
Before:
<img width="599" height="255" alt="image"
src="https://github.com/user-attachments/assets/d6aa2f87-e247-4724-9e43-02b71933241c"
/>

After:
<img width="596" height="261" alt="image"
src="https://github.com/user-attachments/assets/d94acb41-07e1-497f-9697-830390526f4a"
/>

### JWT Key Details
Before:
<img width="536" height="549" alt="image"
src="https://github.com/user-attachments/assets/43672adc-dc0e-4e65-b7d4-b4537d22f6ea"
/>

After:
<img width="523" height="517" alt="image"
src="https://github.com/user-attachments/assets/e501e8a8-7f41-46a0-bb69-d240cea594f0"
/>

### Realtime Filter Popover
Before:
<img width="403" height="576" alt="image"
src="https://github.com/user-attachments/assets/73842450-ba87-456b-98fc-625b99149449"
/>

After:
<img width="387" height="564" alt="image"
src="https://github.com/user-attachments/assets/f2b35035-947c-4342-84dd-3548f9bd5e9f"
/>

### Realtime broadcast message dialog
Before:
<img width="520" height="393" alt="image"
src="https://github.com/user-attachments/assets/4f4a1a93-e0cf-4268-ae4e-baf8b8a62e74"
/>

After:
<img width="525" height="392" alt="image"
src="https://github.com/user-attachments/assets/e1c1934a-1812-4013-8606-9b846dc2498d"
/>

### Impersonation Popover
Before:
<img width="604" height="501" alt="image"
src="https://github.com/user-attachments/assets/9abdc604-94f8-4ed4-9a95-4688e6504e76"
/>
<img width="587" height="599" alt="image"
src="https://github.com/user-attachments/assets/5293c80c-9abd-43eb-899f-da759c83b598"
/>

After:
<img width="594" height="585" alt="image"
src="https://github.com/user-attachments/assets/5eaf2162-2d7f-444c-9052-c9afb00080f6"
/>
<img width="590" height="597" alt="image"
src="https://github.com/user-attachments/assets/149dc7c1-689c-4e0f-a884-c6f5b0228ebc"
/>

### Storage move item
Before:
<img width="521" height="285" alt="image"
src="https://github.com/user-attachments/assets/7d0f945f-add5-412b-813a-9325b260ab28"
/>

After:
<img width="529" height="274" alt="image"
src="https://github.com/user-attachments/assets/ab0891a1-b31b-40b6-be53-92afc95095ea"
/>

### Table Editor - Spreadsheet import
Before:
<img width="673" height="506" alt="image"
src="https://github.com/user-attachments/assets/7a722908-10c2-4c04-95fb-b12d3c23557c"
/>

After:
<img width="671" height="638" alt="image"
src="https://github.com/user-attachments/assets/689b1fb6-031c-4a02-9e7f-739356c1453d"
/>

### Org Billing downgrade survey
Before:
<img width="788" height="655" alt="image"
src="https://github.com/user-attachments/assets/c7a0d4c6-e9b9-4c6c-9cf1-e7d05016233f"
/>

After:
<img width="1630" height="1354" alt="image"
src="https://github.com/user-attachments/assets/e3f5473b-db9a-42b1-9242-40480c25fc02"
/>

### Project API Docs
Before:
<img width="1030" height="396" alt="image"
src="https://github.com/user-attachments/assets/95643b21-811a-4ba7-918a-5e655c262ac1"
/>

After:
<img width="1012" height="457" alt="image"
src="https://github.com/user-attachments/assets/d5559646-bb89-43b6-ad62-c5684b54b3fb"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Standardized form field layouts across panels, dialogs, and modals for
a more consistent editing and reading experience.
* Replaced several Input-based textareas with dedicated
TextArea/ExpandingTextArea controls and aligned labels with wrapper
layouts for clearer accessibility.
* Introduced grouped/composable input controls, added additional
read-only detail fields and labeled value/copy blocks, and tightened
header/layout spacing and control alignment.
  * Swapped notice styles for improved warning/admonition presentation.

* **Chores**
  * Removed a deprecated AutoTextArea component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 17:07:11 +02:00
Alaister YoungandAlaister Young f8cc6c21bd [FE-2075] feat(studio): bump graphiql to v5 and use prebuilt component (#45404)
Adds `graphiql@5.2.2` and switches from our heavily-customised rebuild
(which used `@graphiql/react` + `@graphiql/toolkit` directly) to the
prebuilt component, restyled to match the dashboard. Role impersonation
re-added as a sidebar plugin.

This is a deliberately simpler setup than what we had – we lose some
layout customisation (sidebar is forced to the left, role impersonation
moves into the sidebar) but future upgrades become much easier since
we're no longer maintaining a fork-by-rewrite.

**Removed:**
- `apps/studio/components/interfaces/GraphQL/GraphiQL.tsx` – custom
rebuild
- `apps/studio/components/interfaces/GraphQL/graphiql.module.css` –
custom styles

**Changed:**
- Added `graphiql` ^5.2.2 (we previously didn't have the top-level
package, just the subpackages)
- `@graphiql/react` ^0.19.4 → ^0.37.3 (now Monaco-based; v0.19 was still
on CodeMirror 5)
- `@graphiql/toolkit` ^0.9.1 → ^0.11.3
- `GraphiQLTab.tsx` now wires up the prebuilt `<GraphiQL />` with worker
setup, theme bridge, and plugins
- New `graphiql.module.css` scopes restyling via `:global(...)` since we
can't add hashed classes to the library's DOM
- `RoleImpersonationSelector` gained an `orientation: 'horizontal' |
'vertical'` prop (default `horizontal`) so it fits in the sidebar pane –
all existing call sites unchanged
- `MonacoThemeProvider` exports `getTheme` so the GraphQL Monaco
instance can reuse Studio's theme

**Added:**
- Theme bridge: `supabase-graphql-dark` / `supabase-graphql-light`
Monaco themes synced with `next-themes` via `forcedTheme`
- Role impersonation sidebar plugin (gated on `field.jwt_secret` read
permission, same as before)

### Notes / tradeoffs

- We don't share Studio's monaco instance – Studio loads it via AMD/CDN,
GraphiQL bundles it as ESM. Both end up on `monaco-editor@0.52.2` but in
different module systems. Sharing would require ripping out Studio's CDN
loader (Studio-wide refactor, out of scope). GraphiQL's monaco is
dynamically imported and only loads when the GraphQL tab opens.
- The dark/light response panel uses different `--graphiql-response-bg`
tokens because the editor sits at very different baseline lightness in
each theme; a single token can't lift it meaningfully in both
directions.
- Session header (tabs row) is hidden – we don't expose multi-tab
workflows.

## To test

- Open `/project/<ref>/api/graphiql` in both light and dark themes –
editor + response panel backgrounds, sidebar borders, button radii
should all match the dashboard
- Run a query and confirm syntax highlighting works (GraphQL-specific
token `argument.identifier.gql` is purple)
- Open the doc explorer and history sidebar plugins
- As a user with `field.jwt_secret` read permission: open the Role
Impersonation sidebar plugin, pick a role, confirm subsequent queries
hit the API with the impersonated JWT
- As a user without that permission: confirm the Role Impersonation
plugin doesn't appear, history still does
- Toggle theme while GraphiQL is open – Monaco theme should swap without
a reload

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Vertical layout option for the role impersonation selector; radios can
expand to full width.

* **Improvements**
* Revamped GraphiQL integration with updated upstream package, plugins,
and editor theming for improved consistency and UX.
* New GraphiQL styling and layout for clearer pane separation and
polished controls.
* Role selector radios now support a full-width mode for improved
responsiveness.

* **Chores**
  * Updated GraphiQL-related dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-05-01 16:16:26 +08:00
Joshen Lim 87e8c59405 Add view data as user in auth users + refactor UI for role impersonation (#45358)
## 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 -->
2026-05-01 00:43:15 +08:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
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>
2026-04-30 10:53:24 +00:00
Joshen Lim 5f867e5f6c Feature Preview: RLS Tester (#45121)
## Context

Resolves FE-3077
Related discussion: https://github.com/orgs/supabase/discussions/45233

Verifying the correctness of your RLS policies set up has always been a
gap, as highlighted by a number of GitHub discussions like
[here](https://github.com/orgs/supabase/discussions/12269) and
[here](https://github.com/orgs/supabase/discussions/14401). As such,
we're piloting a dedicated UI for RLS testing (using role impersonation
as the base), in which you'll be able to
- Run a SQL query as a user (not logged in / logged in - this is the
role impersonation part)
- See which RLS policies are being evaluated as part of the query
- And hopefully be able to debug which policies are not set up correctly

Changes are currently set as a feature preview - and we'll iterate as we
get feedback from everyone 🙂 🙏

<img width="613" height="957" alt="image"
src="https://github.com/user-attachments/assets/83c37f8a-28fc-43b3-b0ff-e28571d8710c"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* RLS Tester: run queries as anon or authenticated users, view inferred
SQL, per-table policy summaries, and data previews of accessible rows.
* UI preview: new RLS Tester preview card and modal with opt-in toggle;
RLS Tester sheet with role/user selector and query editor.
  * SQLEditor: “Explain” tab is always visible.

* **Chores**
* Added supporting API endpoints, background checks for table RLS
status, and a local-storage flag to persist the preview opt-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-28 15:02:49 +08:00
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849)
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>
2026-03-17 11:17:42 +01:00
Gildas Garcia 9cf5800082 fix: order recently impersonated users in descending order on the SQL (#43447)
## Problem

When testing things in SQL Editor, you often have to impersonate the
same user many times. It's cumbersome to look for them. We have a
_Recents_ list but its order is not practical.

## Solution

Invert the order of the _Recents_ list so that the last impersonated
user is the first one

## How to test

- Create multiple users
- Open the SQL Editor
- Impersonate different users
- Check the order of the list
2026-03-05 16:07:19 +01:00
Joshen Lim c6b2fe6fee Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard (#41818)
* 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
2026-01-20 11:58:31 +08:00
Ivan Vasilov 0d5be306ef chore: Bump React Query to v5 (#40174)
* 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.
2025-12-10 10:10:29 +01:00
Joshen Lim 64e3e047eb Final final cleaning up barrel files (#40018)
* Final final cleaning up barrel files

* Fix merge conflict
2025-10-31 14:02:59 +08:00
Joshen Lim 75e1717a02 Remove barrel files part 02 (#39956)
* Remove barrel files part 02

* Clean up
2025-10-30 23:50:14 +08:00
5f533247e1 Update docs url to env var (#38772)
* 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>
2025-09-26 10:16:33 +00:00
Joshen Lim cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* 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
2025-08-06 10:53:10 +07:00
Saxon FletcherandJoshen Lim c76707012d basic typography classes (#37613)
* basic typography classes

* Clean up classes for where we use h1 tags

* Clean up classes for where we use h2, h3, h4

* Clean up classes for where we use h6

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-04 20:55:34 +10:00
Joshen Lim 1cccc8e106 Adjust layout of UserImpersonationSelector (#37533)
* Adjust layout of UserImpersonationSelector

* Small patch
2025-07-29 20:55:49 +08:00
Joshen LimandIvan Vasilov 31b8fbe487 Deprecate getAPIKeys from project settings v2, use new api keys endpoint instead (#37300)
* Deprecate getAPIKeys from project settings v2, use new api keys endpoint instead

* use getPreferredKeys where appropriate

* Prevent usage of secret key for storage and realtime inspector

* Add dashboard API api-keys endpoint

* Simplify

* Disable edge functions test if legacy api keys are disabled

* Revert

* Fix graphiql

* Remove all usage of api keys from project settings, except DisplayApiSettings

* Update

* Fix

* Small fix for an undefined upload url.

* Fix the storage state initialization when the resumable url changes.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-07-22 16:22:03 +08:00
Alaister Young 8c8110a34c chore: disable role impersonation for edge functions (#36599)
* chore: disable role impersonation for edge functions

* allow service role and anon
2025-06-24 12:01:33 +08:00
Terry Sutton 4fcc6f3026 Update user impersonation search (#35717)
* Update user impersonation search

* Fix spacing, make users unique in history

* Scrollable contaner
2025-05-22 09:00:57 -02:30
Alaister Young 1085987eb3 feat: support postgres custom access token hooks (#34893)
* chore: refactor role impersonation

* fix: handle undefined claims in role impersonation SQL generation

* feat: support postgres custom access token hooks

* remove unused hook

* fix ts
2025-04-17 17:30:22 +08:00
Joshen Lim a4d5af48c8 Downgrade and fix radix dialog version to 1.0.5, and remove unnecessary modal props from all usages of DropdownMenu (#35027)
* Downgrade and fix radix dialog version to 1.0.5, and remove unnecessary modal props from all usages of DropdownMenu

* Downgrade and fix radix dialog version to 1.0.5, and remove unnecessary modal props from all usages of DropdownMenu

* Fix PopoverPOrtal

* Fix
2025-04-15 17:29:32 +08:00
Jonathan Summers-Muir f79f1d0073 Fix/safari browser rendering Popover in grid header (#35024)
* fix: adds `portal` to force content popover into body

* update comments

* more
2025-04-15 10:53:40 +08:00
Sanden GockaandAlaister Young ecd7b5f4dd Prototype: Enhance Supabase Studio User Impersonation with External Auth Support (#32786)
* feat: add support for impersonation with external auth

* update typescript type

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-01-22 18:00:58 +08:00
Joshen LimandSaxon Fletcher 0710d62665 ReportsV2 P1: Add Query block component (#32738)
* Create QueryBlock component which will be a shared component used in AI Assistant and Reports

* Deprecate AIAssistantPanel/SqlSnippet.ts

* Fix user messages not getting persisted, only assistant messages

* Add loading state to for query results in QueryBlock + hide block view configuration if query block is not chart

* Address feedback

* Fix TS

* fix double border

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2025-01-15 13:08:26 +08:00
Ivan Vasilov d08719e2bb fix: Lowercase the search term before searching users table (#31070)
* Lowercase the search string when searching for users.

* Switch the lowercasing to be done to the query hook param.
2024-12-13 15:01:36 +01:00
Joshen Lim 8f4f7e3e57 Chore/deprecate old users management UI components (#30224)
* Remove usage of userManagementV2 flag and deprecate old user management UI component

* Remove usage of API users endpoint, to use the same SQL query as users-infinite-query

* Use user-infinite-query in UserImpersonationSelector and deprecate users-query

* Fix import statements
2024-11-05 09:10:10 +08:00
Joshen Lim b371266203 Chore/refactor auth users page to use data grid (#29105)
* Convert auth users page to use data grid

* Deprecate old components for auth users

* Remove unused state

* Remove unnecessary file

* Add copy cell value

* Reload -> Refresh

* Fix spelling

* Adjust sizing of search and dropdown

* Add feature flag and reinstate original auth/users UI

* Remove font mono on auth users data grid header and row cells

* Address comments
2024-09-10 11:02:25 +08:00
f0cacd6223 Add an Authenticator Assurance Level toggle for impersonating users in Studio (#28332)
* Add AAL2 toggle for user impersonation

* Move AAL toggle into user selector & tweak styles

- Since the AAL level can only be toggled before a user is selected, move the toggle into the user selection area
- Also display the AAL status in the UserImpersonatingRow and the RoleImpersonationPopover
- Improve display styles

* Run prettier

* - fixes light mode text issue
- adds "Advanced options" collapsible
- adds info tooltip linking to MFA docs

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
2024-08-02 15:39:16 +08:00
Jonathan Summers-MuirandFrancesco Sansalvadore 6d760a1a99 Feat/deep dark (#27026)
* chore: move to deeper dark

* tidy up boxes on www

* update deep-dark colors

* fix homepage product cards

* toned down pricing page a little

* update

* lots of color changes

* Update grid.scss

* Update EntityListItem.tsx

* Update EntityListItem.tsx

* fix partners page icon

* fix partners page colors

* update theme

* Update global.css

* combined dark theme so classic-dark does not break on other sites

* Update package-lock.json

* updated color tokens pipeline to support combined dark theme

* smol updates

* Update FeaturedThumb.tsx

* Update BlogFilters.tsx

* Update BlogListItem.tsx

* Update BlogListItem.tsx

* Update UserSettingsDropdown.tsx

* Update NavigationBar.tsx

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
2024-07-30 21:34:28 +08:00
Jordi EnricandJoshen Lim ca3ee86125 add anon users filter (#22440)
* add filter

* Fix type issue

* move anon users query to the api

* rm unused stuff

* type fix

* add featurefalg

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-04-12 12:26:45 +02:00
Kang MingandJoshen Lim 0a569e4790 feat: add anonymous sign-ins config (#21813)
* feat: add anonymous sign-ins config

* fix: update anonymous sign-ins toggle & policy editor

* Couple of UX changes

* fix: update user impersonation with is_anonymous claim

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-03-28 00:14:42 +07:00
Kevin Grüneberg f9a55935f5 chore: use type imports for types/interfaces (#21738) 2024-03-04 20:48:22 +08:00
Alaister Young ff2e283430 chore: move realtime inspector role impersonation popover (#19403) 2023-12-05 19:57:04 +10:00
e6006b9653 feat: user impersonation (#18945)
* feat: user impersonation

* refactor

* add anon impersonation

* add user impersonation to graphiql

* thanks Ivan for this one

* add radio buttons

* progress

* working user selector

* adds loading and error states to user selector

* nicer popover button

* default graphiql to use service role key

* styling updates

* fix padding in graphiql

* add service role warning to graphiql

* add user impersonation to realtime inspector

* add feature flag

* use Alert_Shadcn_ instead of old Alert

* Update apps/studio/lib/role-impersonation.ts

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* update title

* Update apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/Icons.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/Icons.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/Icons.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/Icons.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/Icons.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* add constant padding at the bottom of user selector

* update graphiql buttons font size

* make rls warning dismissable

* use text-foreground on rls warning title

* fix no results while impersonating a role

* fix error line number when impersonating a role

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2023-12-04 04:45:11 +00:00