Commit Graph

276 Commits

Author SHA1 Message Date
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
Jeremias Menichelli c49eb8bb7d Revert "chore(studio + design-system): more flexible Admonition" (#45535) 2026-05-05 00:18:27 +08:00
Danny White 5bfbae22a9 chore(studio + design-system): more flexible Admonition (#45302)
## 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 -->
2026-05-01 07:15:00 -06:00
Joshen Lim 7f8ae81d64 Clean up table editor header (#45452)
## Context

Resolves FE-3126

Just cleaning up the table editor header with a bit of refactors
(pre-req to investigating collapsing filter bar and table editor header
actions into a single row)

## Non-visual changes involved
- Break down components within `GridHeaderActions` into smaller ones
  - `IndexAdvisorPopover`
  - `SecurityDefinerViewPopover`
  - `RealtimeToggle`
- Deprecate use of `useUrlState` in `GridHeaderActions` to use
`useQueryState` instead
- Improve types for `TwoOptionToggle`

## Visual changes involved
- Collapse realtime button toggle into a button icon, with no text (just
tooltip)
- Adjust layout of buttons a little

### Before
<img width="796" height="118" alt="image"
src="https://github.com/user-attachments/assets/436bca94-4d91-471a-a184-487c6f78dc04"
/>

### After
<img width="731" height="132" alt="image"
src="https://github.com/user-attachments/assets/5fd30982-a1fc-4f92-a590-146d1e69d52a"
/>


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

* **New Features**
  * Index Advisor popover with recommendations.
  * Realtime toggle to manage realtime table publication.
  * Security Definer view popover with optional autofix.
  * Insert menu for adding rows/columns and CSV import.

* **Bug Fixes**
  * Adjusted filter bar input sizing for improved readability.

* **Refactor**
* Header layout updated and insert/import actions moved into dedicated
components.

* **Tests**
  * Updated end-to-end selectors for the Insert row menu item.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 18:45:21 +08:00
Ivan Vasilov 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
Gildas Garcia a5b36d91de chore: migrate <Toggle> to <Switch> (#45314)
## Screenshots

### Row editor
Before:
<img width="683" height="74" alt="image"
src="https://github.com/user-attachments/assets/0416859b-e471-4f11-be28-33e1e0e03415"
/>

After:
<img width="675" height="65" alt="image"
src="https://github.com/user-attachments/assets/57ff796e-a67d-42f5-9fe0-f7be831aabc6"
/>

### Studio lite
Before:
<img width="673" height="400" alt="image"
src="https://github.com/user-attachments/assets/51ff1cd3-3cc5-4aa2-befb-4f345a933186"
/>

After:
<img width="644" height="402" alt="image"
src="https://github.com/user-attachments/assets/4605ad0b-656f-4da2-86d7-8ec32dc54855"
/>

### Database function
Before:
<img width="745" height="949" alt="image"
src="https://github.com/user-attachments/assets/49fba21d-0d28-4037-beb7-9ecb13f12fe7"
/>

After:
<img width="746" height="949" alt="image"
src="https://github.com/user-attachments/assets/d6755b04-df97-4195-b473-98a0269923d9"
/>

### Privacy settings (`www`)
Before:
<img width="1122" height="808" alt="image"
src="https://github.com/user-attachments/assets/02f82691-f045-4d59-b5a4-1ce635e3d9af"
/>

After:
<img width="1110" height="768" alt="image"
src="https://github.com/user-attachments/assets/ef2ee049-4cbe-4209-851a-2f024ab0063b"
/>


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

* **Refactor**
* Replaced legacy toggle controls across the app with a unified Switch
component for consistent interaction.
* Improved labels, sizes, spacing and aria relationships for clearer UI,
better accessibility, and more predictable behavior (settings, filters,
editors, realtime controls, privacy modal).
* Removed the old Toggle implementation, styles, and top-level exports
from the UI package to standardize controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-29 16:32:36 +02:00
Gildas Garcia 718021fc7b chore: migrate Listbox to Shadcn components (#45279)
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Listbox />` usage to the new Shadcn component.

## Screenshots

### Billing
Before:
<img width="536" height="458" alt="image"
src="https://github.com/user-attachments/assets/c8883bd8-cbbd-47cd-84a4-e37a36c05cd6"
/>

After:
<img width="541" height="451" alt="image"
src="https://github.com/user-attachments/assets/9c848b1b-e72a-413c-b264-48340ce0c7ef"
/>

### Foreign Key Editor
Before:
<img width="463" height="995" alt="image"
src="https://github.com/user-attachments/assets/4debeeeb-94bd-439d-8f57-a84a2ed5230a"
/>
<img width="428" height="241" alt="image"
src="https://github.com/user-attachments/assets/81a21d58-c023-445a-a6e8-c9be22b53075"
/>

After:
<img width="451" height="1007" alt="image"
src="https://github.com/user-attachments/assets/18c781c0-4f52-4ca2-99e6-1fc34dc857e3"
/>
<img width="434" height="240" alt="image"
src="https://github.com/user-attachments/assets/13fbb3ad-ef3c-499d-a27e-26cfae89ae44"
/>


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

* **Refactor**
* Replaced legacy dropdowns with a unified Select component and
consistent form layout across payment method, org transfer,
foreign-key/column selectors, region selection, and other dropdowns.
* **Chores**
* Removed the legacy listbox implementation and its public exports from
the UI package.
* **Tests**
* Removed old listbox unit tests and updated e2e selectors to target the
new Select-based controls.
* **Style**
  * Deleted obsolete listbox-specific styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-28 14:30:49 +02:00
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
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.
2026-04-28 11:33:53 +02:00
Gildas Garcia bc3dc73240 chore: migrate old <Select /> usage to the new Shadcn component (#45232)
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Select />` usage to the new Shadcn component.

## Screenshots

### `www` Pricing 

Before:
<img width="637" height="697" alt="image"
src="https://github.com/user-attachments/assets/b6f261de-e587-411b-9408-faf94d709f1c"
/>

After:
<img width="644" height="756" alt="image"
src="https://github.com/user-attachments/assets/8cc4894c-64da-4e6a-960c-77cd162ac71d"
/>

### Observability

Before:
<img width="1015" height="452" alt="image"
src="https://github.com/user-attachments/assets/3d7e8613-e7a6-461d-a50d-e66c7c85fef1"
/>

After:
<img width="833" height="467" alt="image"
src="https://github.com/user-attachments/assets/98ace34f-25ec-48b5-aad3-fe812307b01d"
/>

### Docs Realtime

Used in pages:
- https://supabase.com/docs/guides/realtime/postgres-changes
- https://supabase.com/docs/guides/realtime/benchmarks

Before:
<img width="578" height="437" alt="image"
src="https://github.com/user-attachments/assets/22fa0048-be07-42e0-9153-65171fa3ccb9"
/>

After:
<img width="571" height="423" alt="image"
src="https://github.com/user-attachments/assets/e0adbde9-0c6f-48da-b377-516392185fb0"
/>

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

* **Refactor**
* Updated dropdown/select controls across the app to a consistent,
composable implementation
* Replaced advanced JWT generator in docs with a simplified JWT
generator component

* **Chores**
  * Removed legacy select component, associated styles and exports
  * Updated theme and tests to align with the new select implementation
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-27 15:35:50 +02:00
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264)
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08:00
Gildas Garcia 416210d666 chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)
## 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 -->
2026-04-27 11:07:06 +02:00
Gildas Garcia 502c098d90 chore: migrate old <Checkbox /> usage to the new Shadcn component (#45211)
## Problem

We want to reduce the code we ship and maintain.

## Solution

Migrate old `<Checkbox />` usage to the new Shadcn component.
There's one visual change: no more green background or outline.

## Screenshots

### On `apps/www`

Before:
<img width="1095" height="772" alt="image"
src="https://github.com/user-attachments/assets/b14a0477-d8ac-4ae5-a1c3-63657609e4e5"
/>

After:
<img width="1085" height="766" alt="image"
src="https://github.com/user-attachments/assets/f4c2156c-38e1-4834-b013-e39b8c3dd76e"
/>


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

* **Refactor**
* Unified checkbox appearance and behavior across the app for consistent
toggles, labels, and interactions.

* **Bug Fixes**
* Fixed selection issues including shift-select edge cases and
click-propagation in lists; added ARIA labels for improved
accessibility.

* **Chores**
* Removed legacy checkbox implementation, associated styles, tests, and
deprecated theme entries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-24 17:38:01 +02:00
Vaibhav d9b58fdf3e fix: paste seq sync (#45116)
## TL;DR
- extends https://github.com/supabase/supabase/pull/45076
- closes https://github.com/supabase/supabase/issues/45113


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

* **New Features**
* Sequence values now properly sync after bulk row inserts, ensuring
correct auto-increment behavior for subsequent inserts.

* **Tests**
* Added end-to-end coverage for CSV import, including a "Paste text"
import path that verifies custom-owned sequences are synchronized before
the next insert.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-04-22 14:34:12 +00:00
Alaister Young 75e08577c1 chore(studio): remove tableEditorApiAccessToggle flag (#45081)
Cleans up the `tableEditorApiAccessToggle` PostHog flag now that the
gated UI is shipping to everyone. Follow-up to #45034 — the new
project-creation checkbox makes the management UI a prerequisite, so no
reason to keep it behind a flag.

**Removed:**
- `useDataApiGrantTogglesEnabled` hook
- Old schemas-only multi-selector branch in the Data API settings page
(the rich per-table / per-function toggles + default-privileges switch
become the only UI)
- Flag gate around the `<ApiAccessToggle>` section in the table editor
side panel
- Flag gates around `updateTableApiAccess` calls in the save pipeline
(create / duplicate / update)
- `tableEditorApiAccessToggleEnabled` telemetry property + stale JSDoc /
docs references

**Changed:**
- `createTableApiAccessHandlerParams` no longer takes an `enabled` param
— it was always `true` after removal

## To test

- Integrations → Data API settings page: exposed tables, exposed
functions, default-privileges toggle all render and save correctly
- Table editor: creating, duplicating, and editing a table all run the
expected Data API privilege updates
- Project creation flow still works end-to-end (unchanged, but the
submit telemetry no longer includes `tableEditorApiAccessToggleEnabled`)

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

## Summary by CodeRabbit

* **Improvements**
* API access configuration is now always available in the table editor
and PostgreSQL settings, removing previous conditional gating.
* Simplified the "Automatically expose new tables and functions"
interface by consolidating UI branches.

* **Documentation**
* Updated telemetry guidance and examples with current feature-flag
references.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-04-22 21:37:48 +08:00
Ali Waseem 40791f9846 chore(studio): migrate useHotKey to useShortcut (#45099)
## Summary
- Migrates all 11 `useHotKey` call sites across 9 files to
`useShortcut`, backed by `SHORTCUT_DEFINITIONS` in
`state/shortcuts/registry.ts`.
- Adds 10 new registry entries (all `showInSettings: false` to keep
behavior identical to today — these were not previously
user-configurable).
- Deletes `apps/studio/hooks/ui/useHotKey.ts`.
- Simplifies `ActionBar.handleSave` — the legacy hook passed a
`KeyboardEvent` the callback used for `preventDefault`/`stopPropagation`
and a textarea-plain-Enter guard; all of that is redundant under
`useShortcut` (TanStack handles default/propagation; `Mod+Enter` never
fires on plain Enter).
- Removes a stale commented-out `useHotKey` reference in
`DataTableFilterCommand.tsx`.

Part of FE-3025 (legacy hotkey hook cleanup). `useKeyboardShortcuts` in
`grid/components/common/Hooks.tsx` will be migrated in a follow-up.

## Test plan

All shortcuts should still fire with **Cmd** (macOS) / **Ctrl**
(Win/Linux).

**Table Editor — operation queue** (requires pending unsaved edits on a
row)
- [x] `Cmd+S` saves pending edits
- [x] `Cmd+.` toggles the operation queue side panel
- [x] `Cmd+Z` undoes the latest edit and re-fetches the affected table
rows
- [x] With no pending edits, none of the above fire (gated by
`isEnabled`)

**Table Editor — side panel editor forms** (row, table, column, policy,
etc.)
- [x] `Cmd+Enter` submits the form when the panel is visible
- [x] Does not submit if the form is disabled/loading or the panel is
hidden

**Unified Logs — data table**
- [x] `Cmd+B` toggles the filter controls sidebar (desktop)
- [x] `Cmd+B` opens the filter drawer (mobile, `<sm` breakpoint)
- [x] `Cmd+Esc` resets active column filters (reset button visible)
- [x] `Cmd+U` resets column order + visibility
- [x] `Cmd+J` toggles live mode

**Unified Logs — reset focus**
- [x] `Cmd+.` blurs the currently focused element / resets focus to body

**AI Assistant panel**
- [x] While editing a message, `Cmd+Esc` cancels the edit

**Regression checks**
- [x] `pnpm --filter=studio typecheck` passes (verified locally)
- [x] None of the new shortcut entries appear in Account → Preferences →
Keyboard shortcuts (all `showInSettings: false`)
- [x] Existing shortcuts (`Cmd+K`, `Cmd+I`, `Cmd+E`, results
copy/download) still work unchanged

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

## Summary by CodeRabbit

## Refactor
* Implemented a centralized keyboard shortcut registry system for
managing shortcuts consistently across the application
* Updated multiple UI components throughout the interface to use the new
shortcut management system
* All existing keyboard shortcuts continue to function without any
changes in behavior or user experience

## Chores
* Removed legacy keyboard shortcut hook implementation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-22 06:19:32 -06:00
Vaibhav 2e3ddc3a52 fix: csv seq sync (#45076)
## TL;DR
fixes csv imports with explicit id values leaving auto generated primary
keys out of sync
by resolving the primary key sequence correctly after import

## ex:

| Before | After |
| --- | --- |
| <img width="378" height="201" alt="Before: stale sequence after CSV
import"
src="https://github.com/user-attachments/assets/34c827f5-c69b-4c05-aa67-9fb6fd65a040"
/> | <img width="435" height="196" alt="After: sequence synced after CSV
import"
src="https://github.com/user-attachments/assets/bb84f286-1b3e-44a5-965b-5f2faa3f7622"
/> |

## ref:
- closes https://github.com/supabase/supabase/issues/45073


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

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
* Fixed identity sequence synchronization during CSV imports. After
spreadsheet data is inserted, the system now properly updates sequence
values, ensuring subsequent rows receive correct identifiers.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-21 07:59:20 -06:00
Aditya Kumar Mishra cacee2585b fix(studio): await saveRow and surface foreign row errors to UI and Sentry (#44950)
Fixes #44949 

What kind of change does this PR introduce?
[x] Bug fix (non-breaking change which fixes an issue)

[ ] New feature (non-breaking change which adds functionality)

Description
This PR fixes a silent failure state in the Foreign Row Selector
(SidePanelEditor.tsx).

Previously, onSaveForeignRow called saveRow without awaiting it, and
included an entirely empty catch block. This meant that any database
write failures (RLS violations, network drops, foreign key constraint
violations) were swallowed into the void. The user received no visual
feedback that their save failed.

Changes:

Added await to saveRow to ensure the promise rejection is actually
caught by the try/catch block.
Added a toast.error notification to alert the user when the save fails.
Added Sentry.captureException to ensure these silent failures are
actually tracked in production observability. (Sentry was already
imported in the file).

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved error handling and user notifications when saving data in the
table editor, ensuring failures are properly communicated and logged.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-17 14:08:25 -04:00
Danny White 8939c97574 chore(studio): standardise keyboard shortcut UI (#44262)
## What kind of change does this PR introduce?

Chore / UI consistency fix. Resolves DEPR-418.

## What is the current behavior?

Shortcut hints are still hand-built in several high-traffic Studio
surfaces, which leads to inconsistent rendering and stale
platform-specific markup. Buttons in particular can end up with awkward
spacing and baseline alignment when shortcut labels are inserted
directly into the button text.

## What is the new behavior?

This PR standardises those shortcut hints around `KeyboardShortcut` and
updates the surrounding layout primitives to support that approach more
cleanly.

It includes:
- Design docs
- using `KeyboardShortcut` in the table side-panel `ActionBar`
- replacing hardcoded operation queue button shortcuts in
`OperationQueueSidePanel`
- standardising the command menu trigger shortcut chip and updating the
`LayoutHeader` overrides to match the new DOM shape
- replacing the AI editor empty-state `Cmd/Ctrl + K` hint with
`KeyboardShortcut`
- refining shared shortcut/button primitives so inline shortcuts align
better when used as button accessories
- keeping the SQL utility shortcut work on this branch consistent with
the same shared component approach

| Before | After |
| --- | --- |
| <img width="1454" height="902" alt="CleanShot 2026-03-27 at 15 55
32@2x"
src="https://github.com/user-attachments/assets/3a8de192-3f4c-480b-9d26-9b28becd0ee3"
/> | <img width="1488" height="906" alt="CleanShot 2026-03-27 at 15 29
31@2x-63A17C58-D023-4D3A-9355-6C40A6485328"
src="https://github.com/user-attachments/assets/46ef7f7a-2b8b-4c10-8935-84ca5ad44562"
/> |
| <img width="738" height="328" alt="CleanShot 2026-03-27 at 15 57
07@2x"
src="https://github.com/user-attachments/assets/ad459c41-867d-42f9-a8cb-c936af8326b7"
/> | <img width="726" height="290" alt="CleanShot 2026-03-27 at 15 56
29@2x-ECE4E10F-9693-4ED8-B085-DC436A839F52"
src="https://github.com/user-attachments/assets/95b4bfb4-ec34-4080-8b69-211b5045ca26"
/> |

## Later todo

- [ ] Replace the string-based SQL editor placeholder shortcut in
`SQLEditor` once that placeholder API supports rich content
- [ ] Refactor `CommandOption` to use `KeyboardShortcut` instead of
bespoke platform detection and command-key markup
- [ ] Standardise the remaining DataTable shortcut hints
(`DataTableToolbar`, `DataTableResetButton`, `DataTableFilterCommand`,
`DataTableFilterControlsDrawer`) around `KeyboardShortcut`


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

## Summary by CodeRabbit

* **New Features**
* Introduced a new KeyboardShortcut component for displaying keyboard
shortcuts with two visual variants (pill and inline).
* Standardized keyboard shortcut indicators across the application
interface for consistent user experience.

* **Bug Fixes**
* Fixed capitalization inconsistencies in button labels and hotkey
settings.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-08 09:42:55 -06:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
Gildas Garcia acb0929abe chore: migrate row sort in SupabaseGrid to DndKit (#44628)
## Problem

We currently have 3 different libraries for drag & drop, two of which
are not actively maintained anymore.

## Solution

Migrate all usage of the two unmaintained libraries to DndKit.
This PR focuses on using DndKit instead of `react-dnd` for the row
sorting popover in the table editor

## Screencast


https://github.com/user-attachments/assets/9d5cf43c-fbbd-4e5e-8b5a-e9e803b71421



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

## Summary by CodeRabbit

* **New Features**
* Enhanced sorting functionality with drag-and-drop support to reorder
sort rules.

* **Improvements**
  * Updated drag handle styling for better visual clarity and usability.
  * Simplified sorting interface architecture.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-07 15:33:36 +02:00
Gildas Garcia 8923d52511 chore: use dndkit for table editor columns sorting (#44617)
## Problem

We currently have 3 different libraries for drag & drop, two of which
are not actively maintained anymore.

## Solution

Migrate all usage of the two unmaintained libraries to DndKit.
This PR focuses on using DndKit instead of `react-beautiful-dnd` for
table editor columns sorting

## Screencast


https://github.com/user-attachments/assets/7c0bd298-4115-4c41-9dac-644c546d2c80

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

* **Improvements**
* Redesigned column drag handle with clearer grab affordance, hover and
disabled states.
* More reliable column reordering — drag-and-drop behaves consistently,
including edge cases when moving columns.
* Smoother drag interactions and improved visual feedback while moving
columns.

* **Chores**
* Replaced legacy drag-and-drop implementation with a streamlined,
modern reorder system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-07 14:50:28 +02:00
Usama Nadeem 33c890f564 fix(studio): allow selecting columns for empty-cell NULL conversion on CSV import (#44515)
Bug fix / enhancement to an existing Studio import flow.

## What is the current behavior?

Studio currently supports converting empty CSV cells to `NULL`, but the
behavior applies across all imported columns. That makes it impossible
to preserve empty strings in some columns while still treating empty
cells as `NULL` in others.

This follows up on the earlier CSV import fix discussed in #43281, which
addressed the underlying issue reported in #43258.

## What is the new behavior?

This PR updates the CSV import flow so users can choose exactly which
imported columns should convert empty cells to `NULL`.

The import flow now:
- keeps all imported columns selected by default for
backwards-compatible behavior
- lets users narrow that selection down to specific columns
- keeps preview behavior aligned with the actual inserted data

## Additional context

I manually verified the full create-table-from-CSV flow locally in
Studio, including saving the imported data and confirming that only the
selected columns were persisted as `NULL` while other empty cells
remained empty values.

Formatting was checked with Prettier.
A direct production build run was started locally, but the Next.js build
process remained running without producing a final result during this
session, so I am not claiming a completed local build verification here.

## Related issues

- Fix follow-up for #43281
- Original issue: #43258

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added a "Set empty cells as NULL" selector during spreadsheet import,
allowing users to specify which columns should treat empty strings as
NULL values rather than converting all nullable columns automatically.
* Enhanced import preview to display NULL representation for selected
empty-string columns.

* **Tests**
* Added test coverage for selective empty-string-to-NULL conversion
behavior.

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2026-04-06 12:35:07 -04:00
Ali Waseem 6be596ea34 feat: add user preference to enable queue operations (#44366)
## 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?

- Remove queue operations from feature preview into settings
- Refactor dashboard settings 
- Resolves DEPR-434

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

* **New Features**
* Dashboard settings panel in Account preferences with toggles for
Inline Editor and Queue Operations; “Dashboard” added to project
Configuration.

* **Removed**
* Old Inline Editor settings UI and the Queue Operations feature-preview
UI removed.

* **Refactor**
* Consolidated dashboard preferences into a single settings surface;
banners and actions now navigate to preferences; account/preferences
layouts and back-navigation behavior adjusted for platform vs
self-hosted.

* **Tests**
* Added tests for settings UI, menu generation, redirects, and
local-storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-04-06 13:52:53 +00:00
Ali Waseem a1c8587808 fix(studio): respect deselected columns in CSV import compatibility check (#44497) 2026-04-02 12:59:19 -06:00
Charis 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
Ali Waseem 636dcaa264 fix(studio): fix and filter Sentry issues (#44401)
## Summary

Fixes and filters several noisy Sentry issues affecting Studio.

### Code fixes
- **SUPABASE-APP-BG0** — `TypeError: Cannot read properties of undefined
(reading 'toString')` in JsonEditor. Guarded against `undefined`
`jsonStr` when `prettifyJSON` receives an undefined value.
- **SUPABASE-APP-BKM** — `TypeError: Cannot read properties of undefined
(reading 'join')` in UpgradeWarnings. Added fallback for
`error.dependents` being undefined from the API.
- **SUPABASE-APP-BVE** — `RangeError: Invalid time value` in filter date
picker. Validated date before passing to `Calendar` component.

### Sentry `ignoreErrors` filters
- **SUPABASE-APP-B1N / SUPABASE-APP-BMF / SUPABASE-APP-E4Q** — `cmdk`
`useSyncExternalStore` subscribe race condition (Chrome variant).
- **SUPABASE-APP-E5M** — Same `cmdk` subscribe error (Safari variant).
- **SUPABASE-APP-ASG** — Firefox `Node.removeChild` DOM manipulation
error (Chrome variant was already filtered).
- **SUPABASE-APP-AWE** — Non-Error object exceptions (`Object captured
as exception with keys:`).

### Ignored in Sentry (no code change)
- **SUPABASE-APP-ASG** — Resolved (now filtered in code).
- **SUPABASE-APP-FK9** — `SyntaxError: Invalid or unexpected token` from
`react-markdown` parser. Single user, one-off.
- **SUPABASE-APP-EV3** — React fiber error from DOM manipulation. Single
user, already archived.

## Test plan
- [ ] Verify JsonEditor opens correctly with valid and missing JSON
values
- [ ] Verify UpgradeWarnings renders when `dependents` is undefined
- [ ] Verify filter date picker handles invalid date strings gracefully
2026-03-31 12:21:09 -06:00
Usama Nadeem 55e0b34a18 fix(studio): add option to treat empty CSV cells as NULL on import (#43281)
When importing a CSV file, empty cells were always imported as empty
strings with no way to import NULL values instead. This adds a "Treat
empty cells as NULL" checkbox to the import configuration panel.

When enabled, PapaParse's transform option converts empty strings to
null before the data is parsed and previewed, so the imported rows
correctly contain NULL rather than empty strings.

Fixes #43258.

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

Empty cells in a CSV file are always imported as empty strings with no
way to import NULL values instead. Fixes #43258.

## What is the new behavior?

"Treat empty cells as NULL" checkbox is added to the import
configuration panel. When enabled, empty cells are imported as NULL
instead of empty strings. Toggling the checkbox instantly re-parses the
preview.

## Additional context

The fix uses PapaParse's transform option to convert empty strings to
null before parsing. Applies to both file uploads and pasted text.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2026-03-31 11:05:08 -04:00
Joshen Lim a1abc2d00f Refactor table editor logic for handling null and undefined values (#44331)
## Context

Resolves https://github.com/supabase/supabase/issues/43548

There's currently an issue with the Table Editor where if you have, for
example, a nullable `text` column with a default value, inserting a new
row and selecting "Set to NULL" doesn't do anything, and saving will
insert the row with the default value
<img width="700" height="258" alt="image"
src="https://github.com/user-attachments/assets/6a284ebb-c346-40a6-9a30-793118844084"
/>

This stems from a legacy logic in the Table Editor whereby we treat
`null` values as "no input" - which is incorrect as `null` values are
also valid values. So the PR here changes a few things to resolve this
properly:

## Changes involved
Main fix: 
- `undefined` will be the "no input" value instead, and it'll be the
default value when generating the row object for inserting a new row
- `NULL` or even empty string like `''` will be treated as they are
(valid inputs)

Secondary adjustments:
- (Queue operations) Queueing an insert with no value but default value
is NULL, will show the placeholder as `DEFAULT` instead of `NULL` for
better accuracy in representation
<img width="892" height="96" alt="image"
src="https://github.com/user-attachments/assets/02cf86bf-c17b-4e25-9a8f-17960b1d2575"
/>
- Added a `Set to Default` CTA here, but will only show up if adding a
new row or updating a queued insert row operation, which will set the
value of the input field back to `undefined` for PG to handle it as the
default value
<img width="734" height="208" alt="image"
src="https://github.com/user-attachments/assets/23887c0c-533e-4494-acbe-61309ff5d7c5"
/>


## To test
Verify within the Table Editor (along with queue operation feature
preview)
- For inserting a new row, setting value to NULL and setting value to
Default works
- For updating a row, setting value to NULL works
2026-03-30 23:33:53 +08:00
Joshen Lim 3debd400a6 Refactor ColumnEditor to use latest UI components + fix some UI oddities (#44214)
## Context

Refactors the Table Editor's `ColumnEditor` to use the latest UI
components, and fix some UI oddities along the way

## Bug fixes

- Fix header text vertical alignment
  - Before:
<img width="325" height="59" alt="image"
src="https://github.com/user-attachments/assets/e4bc07d4-2630-4a86-a87c-4bbbf94e2f52"
/>
  - After:
<img width="351" height="74" alt="image"
src="https://github.com/user-attachments/assets/d0a0a246-59b6-4d19-8674-8cc5eb33772c"
/>
- Fix closing a toast would close the panel as well
- Can verify by creating a new column, then hitting save without
entering anything. Will trigger some error toasts and closing them will
close the panel too
- Fix tooltips on "is nullable" and "is unique" showing up irregardless
if "is primary key" is toggled on or off
2026-03-26 14:36:21 +08:00
Gildas Garcia 16ec2c09c5 fix: cannot create nor edit foreign keys from schema visualiser (#44190)
## Problem

Users cannot create nor edit foreign keys when editing a table or a
column from the schema visualiser

## Solution

The foreign key edition component is always reading the current table
from the URL parameters. However, in the context of the schema
visualiser, the parameter does not exist.

Allows to override it from the side panel editor context

## How to test

- Create two tables
- Go to the schema visualiser and edit one of the table
- Click the _Add foreign key relation_ and add a foreign key to the
other table

- Edit one of the foreign key column
- You should be able to edit the relation
2026-03-25 18:12:11 +01:00
Joshen Lim 6e0fbbd2f4 Chore/minor qol improvements to queue operations (#44169)
## Context

Resolves FE-2877

Some minor UI nudges for the queue operations feature

- Update all "cancel" copy to "discard" for clarity
<img width="502" height="194" alt="image"
src="https://github.com/user-attachments/assets/719772ad-aa15-4f30-ae56-9c2aad4f6dd2"
/>
- Shift "review" and "cancel" actions in action bar into a dropdown
<img width="368" height="180" alt="image"
src="https://github.com/user-attachments/assets/8762625d-fe2e-4b63-84ab-1f078311d97e"
/>
2026-03-25 15:46:14 +08:00
Danny White 8cd43e3584 fix(studio): show queue changes label for queued table edits (#44168)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

When Queue table operations is enabled, Table Editor cell edit
affordances still say `Save changes`, even though the edit is queued for
later review and save.

## What is the new behavior?

Cell edit affordances in the Table Editor now say `Queue changes` when
the Queue table operations feature preview is enabled, and continue to
say `Save changes` otherwise.

| Before | After |
| --- | --- |
| <img width="640" height="796" alt="CleanShot 2026-03-25 at 17 55
20@2x"
src="https://github.com/user-attachments/assets/e0de99f0-2c08-4723-8f79-a7489ebdd355"
/> | <img width="672" height="838" alt="CleanShot 2026-03-25 at 17 55
08@2x-68362D24-A25C-41D5-920C-38B85E816F54"
src="https://github.com/user-attachments/assets/7b437259-673c-46c7-85df-51f1daa8826b"
/> |

## Additional context

This updates the inline text, JSON, and date/time editors, plus the JSON
side-panel cell editor path.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-25 15:44:51 +08:00
Ali Waseem 917a686fee chore: refactor queue operations with write operations into a single hook (#44097)
## 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?

Since queue operations is a feature users can opt-out of, we need to
make it cleaner to toggle between queuing vs straight edits. To do this,
refactor all the operations into a single hook and reference it in
places where we mutate the rows.

## Testing
- Test edit cells, rows, and deletes for non queue operations
- Test edit cells, rows, and deletes for queue operations, also double
check modifying the same rows that are not yet added

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-24 14:11:22 +00:00
Joshen Lim 19aea11aa9 Add cancel action in save queue action bar (#44065)
## Context

Related to the queue table operations feature preview

Adding a "cancel" action in the save queue operation bar for convenience
to clear all changes (instead of having to go into the review panel)

Also aligning the positioning of the CTAs to match the review panel
- "Review" imo is a secondary action, while "Save" or "Cancel" are the
primary ones
- Hence am shifting the "review" CTA to the left, contextually beside
the number of pending changes text
<img width="449" height="100" alt="image"
src="https://github.com/user-attachments/assets/c3faa6c1-e244-40ee-b251-44ab1e785c6e"
/>
- This also aligns with the CTA placements in the review panel
<img width="502" height="71" alt="image"
src="https://github.com/user-attachments/assets/35b7de0a-dbf4-4e8a-acef-53508c9b13b9"
/>
- Also removed plural grammar for the button CTAs - thinking thats not
necessary, wanna keep button CTA texts short and sweet + The "x pending
change(s)" also captures the plurality
2026-03-24 16:33:20 +08:00
Joshen Lim 77e053870c Use new sheet component + small nudges to UI (#43979)
## Context
Resolves FE-2826
Resolves FE-2825
Small refactors + UI nudges to the queue operations side panel

## Before

<img width="400" height="958" alt="image"
src="https://github.com/user-attachments/assets/b91e5d75-3b34-4da0-932b-d9d6096d326c"
/>


## After

<img width="400" height="960" alt="image"
src="https://github.com/user-attachments/assets/61261dbe-0df1-422d-8022-fa52ff8996ea"
/>
2026-03-20 19:32:38 +08:00
Joshen Lim 4d23ea7b82 Hide is unique option for column that's a primary key (#43974)
## Context

Table Editor - hide "Is unique" configuration for a column that's a
primary key - unnecessary to configure a column as unique if it's
already a primary key (redundant index is created)

## Changes involved

- TableEditor side panel: No longer shows is unique option under
configuration popover if column is a PK
- ColumnEditor side panel: Disable is unique + is nullable option if
column is a PK (Added tooltip)
<img width="810" height="151" alt="image"
src="https://github.com/user-attachments/assets/0f877706-1a56-44b7-864e-ba30efbb67f7"
/>


Also chucked in some minor refactors:
- Refactored some `any` types
- Refactored Column to use the latest Checkbox component
2026-03-20 17:12:53 +08:00
Joshen Lim 4b5038ef9e Refactor queue operations to not mutate the query client to simplify implementation (#43964)
## Context

If you've got a queued operation on a table, then switch tables, the
dashboard stalls for a few seconds before finally rendering the selected
table.

This was caused by an infinite loop in a useEffect calling
`reapplyOptimisticUpdates` due to `dataUpdatedAt` being in the
dependency array (which comes from react query)

Removing `dataUpdatedAt` would resolve the issue, but then it won't
solve the following comment in the code:
`// This ensures pending changes remain visible when switching tabs or
after data refresh`

## Changes involved

Opting to refactor the logic for rendering data in the Grid instead
- Avoid manipulating the data directly from the query client
  - Manual changes to the query client are hard to track when debugging
- Ideally the data in the query client are exactly what is coming from
the API
- Instead just compute the row data if there's operations applied, and
render that in the grid
  ```
  const baseRows = data?.rows ?? EMPTY_ARR
const rows = formatGridDataWithOperationValues({ operations, rows:
baseRows })
  ```
- Simplifies operations logic + data in react query remains as the
source of truth
- This also improves perceived performance, as previously we'd need to
invalidate the query client if we're removing any operation.
- A lot more apparent with the undo operation introduced
[here](https://github.com/supabase/supabase/pull/43957)
- Whereas now, we'll just revert back to whatever's in the query client
(and still do the invalidation behind the scenes) so things feel faster
2026-03-19 23:05:38 +08:00
Gildas Garcia df7e98bae6 Fix table creation transaction (#43909)
Fixes #42089
Supersedes #43352 and
https://github.com/supabase/postgres-meta/pull/1049

## Problem

When creating a table in the Dashboard, if a column-specific error
occurs (e.g., invalid enum value or broken foreign key), the Dashboard
displays an error toast, but the side panel remains open. In the
background, the table is actually created (partially), leading to a
_42P07: relation already exists_ error if the user tries to click _Save_
again.

## Solution

We actually had nested transactions which is not supported by Postgres.

- [x] Allow generating SQL without transactions from `@supabase/pg-meta`
- [x] Fix the table creation
- [x] Fix some accessibility issues
- [x] Add tests

## How to test

1. Click _New table_ in the Table editor
2. Add a column with an _int8_ type and set its default value to
`bazinga`
3. Click _Save_

You should see an error.
4. Fix the default value by setting it to `10`
5. Click _Save_

Results:
- You should see a success message about the table creation
- The table should have the column with the correct default value
2026-03-19 08:06:54 +01:00
Danny White 676c237422 fix(studio): prompt on unsaved changes in foreign key selector (#43888)
## What kind of change does this PR introduce?

Bug fix. Resolves FE-2802. Fixes #43882.

## What is the current behavior?

Second-level foreign key side panels in Table Editor can be dismissed
while dirty without a discard confirmation. That makes accidental
dismissal easy and is inconsistent with the shared dirty-form dismissal
pattern from FE-2802.

## What is the new behavior?

- Adds `DiscardChangesConfirmationDialog` handling to
`ForeignKeySelector`
- Guards all selector close paths behind a local dirty-state check
- Normalizes foreign key state so derived type metadata does not create
false dirty prompts
- Clarifies in `modality.mdx` that route-driven/page-unload flows should
use a navigation guard rather than the dialog/sheet close guard

| Dirty State | Dialog |
| --- | --- |
| <img width="1502" height="899" alt="test Table Editor AWS Healthy
Toolshed Supabase-D1EA9D5F-46EB-4DB5-830D-7CEF36A55B7E"
src="https://github.com/user-attachments/assets/3d866850-d062-4fb7-9949-2fd713e6088f"
/> | <img width="1502" height="899" alt="test Table Editor AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/1396361d-1d44-4206-862f-3379ea22be30"
/> |

## Additional context

Includes a focused unit test for foreign key dirty-state normalization.
2026-03-19 00:56:40 +00:00
Sean Oliver ce00372b40 chore(studio): add telemetry for data API access toggle rollout (#43913)
## Problem

PR #43704 added the `tableEditorApiAccessToggle` flag to revoke default
privileges on project creation, but there's no PostHog instrumentation
to measure the rollout or understand how users respond to the new
behavior.

## Changes

**1. Flag state on project creation**
(`project_creation_simple_version_submitted`)

Adds `tableEditorApiAccessToggleEnabled` property — reads the raw
PostHog flag via `usePHFlag` rather than going through
`useDataApiGrantTogglesEnabled`, which coerces `undefined` (flag still
loading) to `false` and would silently poison the data. When the flag
hasn't loaded, the property is omitted from the event entirely.

**2. Per-table toggle tracking** (`table_api_access_toggle_clicked`)

New event that fires when a user flips the Data API access switch in the
table editor side panel (new tables only — existing tables link out to
settings). Tracks `newState: 'enabled' | 'disabled'` and `schemaName` so
we can distinguish public-schema toggles from custom schemas.

Together these let us answer: what % of projects have the new defaults,
and how do those users respond (do they opt tables back in, and in which
schemas)?

Part of the Secure by Default initiative (#43704)
2026-03-18 12:59:47 -07:00
Gildas Garcia 57fee30b61 Chore/shift manual table editor queries into pg meta (#43848)
Move some studio queries to `pg-meta`, related to the table editor

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-18 16:45:09 +01:00
Ivan Vasilov 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 db14762aa6 feat: Add table and column menus in schema visualiser (#43693)
## Problem

- The schema visualiser lacks editing capabilities which leads to a lot
of navigation (ediing tables, columns)
- ReactFlow prevents users from selecting table and column names (to
copy them). Diasbling drag and pan on those texts would make moving
items cumbersome
- Long table and column names are hidden and even hide other elements

## Solution

- Add menus for both tables and columns
- Truncate long names with ellipsis and add a tooltip
- Hide menus when exporting to png/svg

[Screen Recording 2026-03-12 at
10.10.08.webm](https://github.com/user-attachments/assets/b2780266-e874-41d1-ac82-7c2c4ba5abf2)
2026-03-16 22:14:44 +01:00
Chris Stavitsky e217f747bd feat(studio) instrument sentry on table creation flow (#43673)
(working with @charislam @awaseem on this one)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

Per
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md):
-  `pnpm --filter studio build`
-  `pnpm test:prettier`
-  `pnpm format`

## What kind of change does this PR introduce?

Instruments `studio` app's table creation flow with Sentry.

## What is the current behavior?

The table creation flow isn't instrumented in detail, which means we
have less visibility into understanding performance problems or errors
within this specific flow.

## What is the new behavior?

The table creation flow is instrumented in detail. This instrumentation
allows for Sentry dashboards like this one (created based on locally
generated Supabase data), to help monitor anything going wrong with this
critical flow:

<img width="1915" height="1131" alt="image"
src="https://github.com/user-attachments/assets/e2c5380e-7b00-41c1-9109-3ee4e47ff63b"
/>

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-03-16 09:57:43 -06:00
Alaister Young 9652e8c4d3 [SEC-385] feat(studio): Add default privileges for new entities toggle (#43583)
Adds a new toggle in:
<img width="1161" height="356" alt="Screenshot 2026-03-10 at 17 17 06"
src="https://github.com/user-attachments/assets/b09ac1aa-a8f5-4fb4-8771-f113b140eac8"
/>

Other changes:
- form submissions with no table/function changes were failing because
an empty string got passed to executeSql. Added an early return when
there's nothing to execute

To test:
- Ensure the form is still in working order
- Create some tables and functions with the toggle on add off and make
sure your selected default applies
2026-03-12 09:38:03 +00:00
Gildas Garcia d6d419a12e fix: improve table editor truncated texts display (#43630)
Fixes #41579
Supersedes #42342 and #41580

## Problem

In the table editor, when the column type is long, it is truncated which
makes it hard to disambiguate `timestamp` from `timestampz` for
instance.

<img width="1310" height="360" alt="image"
src="https://github.com/user-attachments/assets/668b4022-944e-4d10-90b6-8b5173ec45e3"
/>

## Solution

- make the table editor a bit larger
- add a tooltip on the column type input
- I also added a tooltip on the default value input which suffers from
the same issue

Note: the column name already have a tooltip

<img width="623" height="418" alt="image"
src="https://github.com/user-attachments/assets/9aa5bc10-d627-42ee-b91a-1f8d83911ee0"
/>

<img width="640" height="357" alt="image"
src="https://github.com/user-attachments/assets/c6af4780-8308-4073-bf5c-937ff5822884"
/>
2026-03-12 08:58:26 +01:00
Gildas Garcia f66eb3f7bd feat: Allow to edit a column from the schema visualiser (#43592)
## Problem

Editing a column from the schema visualiser requires many clicks

## Solution

When hovering over a column in the schema visualiser, an edit button
should appear on the right side. Clicking this button should open the
column edit pane on the right side of the screen. This would reduce the
number of clicks required and allow users to make edits directly from
the visualiser instead of using it only as a visual aid.
2026-03-10 19:28:38 +01:00
Sean Oliver 0aa23980bb remove tableCreateGeneratePolicies experiment (failed variant) (#43498)
## Problem

The `tableCreateGeneratePolicies` A/B experiment tested an AI-assisted
policy generator (`RLSManagement`) as a variation in the table creation
side panel. The variation didn't pass — control wins, so the standard
RLS checkbox should be the permanent behavior.

## Changes

- Deleted `useTableCreateGeneratePolicies` hook (PostHog flag + exposure
tracking)
- Deleted the entire `RLSManagement/` component directory (variation UI
— `RLSManagement`, `PolicyList`, `PolicyListEmptyState`,
`ToggleRLSButton`)
- Removed experiment flag checks from `TableEditor.tsx` — RLS checkbox
is now always rendered (was already the control)
- Removed experiment conversion tracking from `SidePanelEditor.tsx`

## Testing

Verified `pnpm typecheck` passes clean. Table creation side panel
renders the RLS checkbox unconditionally as it did in the control.

GROWTH-653
2026-03-09 09:23:50 -07:00
Monica Khoury 7b8bec544e Fix spacing and schema prefix inconsistency in Table Editor (#43524)
Fixes this [Linear
issue](https://linear.app/supabase/issue/FE-2732/table-editor-header-spacing-and-schema-prefix-inconsistency.).

# Before

<img width="320" height="200" alt="image"
src="https://github.com/user-attachments/assets/45dc3a08-50df-4a03-b7ee-1b107c60059e"
/>
<img width="320" height="150" alt="image"
src="https://github.com/user-attachments/assets/c5cca6d5-a294-4137-8cf6-20e56678ebe6"
/>
<img width="320" height="150" alt="image"
src="https://github.com/user-attachments/assets/be54093b-8ff0-4c71-9934-574baac13039"
/>


# After

<img width="320" height="150" alt="CleanShot 2026-03-08 at 13 05 48@2x"
src="https://github.com/user-attachments/assets/4ed9817d-5ae7-45c2-9da7-6d1aec023975"
/>
<img width="320" height="150" alt="CleanShot 2026-03-08 at 13 06 06@2x"
src="https://github.com/user-attachments/assets/7ae0920e-0b5b-4eb3-993c-180d51ffd942"
/>
2026-03-09 08:40:55 -06:00
Marouane Souda efa40ea0e4 fix(studio): contrast ratio of JSON cell viewer colors in light mode (#40691)
JSON column viewer looks fine on dark mode, but barely visible on light
mode, especially when the value is of string type.

There are no colors that can satisfy the 4.5:1 contrast ratio (minimum
requirement for web and digital accessibility) on both white and black
background, so I had to pick different classes for ight mode (dark mode
is fine, I checked the colors against the dark background and the
contrast is good).

Even though the new colors may not look that contrasting to each other,
I prioritized accessibility, and made sure they all complied with the
4.5:1 contrast ratio.

Before:
<img width="499" height="179" alt="112"
src="https://github.com/user-attachments/assets/7f0821cf-6127-4246-a2c2-a78a5d31083a"
/>

After:
<img width="499" height="211" alt="222"
src="https://github.com/user-attachments/assets/0b5b2c35-9211-4a25-a9f5-eef4e5c8c8f3"
/>

Fixes #40633

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-03-06 08:38:49 -07:00