Commit Graph

60 Commits

Author SHA1 Message Date
Ali Waseem
1c2d28d5b3 chore: wrap local storage into helper methods that are safer (#46628)
## 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?

- Noticing our code we have many patterns of calling localstorage and
handling those errors
- We should add those in a single well tested file
- Handle those errors in the singleton which makes it easier for us to
debug customer issues. Logger is outputing local storage warnings for
feature we expose
- Side effect of this is random crashes on studio when local storage
isn't available or handled correctly

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

* **Refactor**
* Improved browser storage handling across the app for more reliable
persistence and graceful behavior in restricted or non-browser
environments (settings, previews, charts, tabs, sign-in/session flows,
integrations, and UI state).

* **New Features**
* Introduced a safe storage layer to standardize and harden
local/session persistence.

* **Tests**
  * Added comprehensive tests covering the new safe storage behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-04 07:41:28 -06:00
Charis
a4334a2cc7 feat(studio): paginate Schema Designer via useInfiniteTablesQuery (#46402)
## 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?

Performance improvement / feature

## What is the current behavior?

The Schema Designer fetches all tables in a single request via
`useTablesQuery`. For schemas with 400+ tables this blocks first paint
on a large payload.

## What is the new behavior?

`SchemaGraph` uses `useInfiniteTablesQuery` (pageSize: 100) so the first
100 tables paint immediately. A "Load more tables" button appears above
the legend whenever more pages remain, letting users load the rest on
demand.

## Additional context

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

* **New Features**
* Added a "Find table…" selector and keyboard shortcut to quickly locate
and focus tables; supports incremental loading and debounced name search
(with literal wildcard handling).
* Schema Graph shows a bottom "Load more tables" control with loading
state and preserves view after loading more.

* **Refactor**
* Table listing switched to infinite/paginated retrieval and improved
"no tables" logic; server-side name filtering supported.

* **Tests**
* E2E tests add a schema-visualizer wait helper and update flows to
support the paginated visualizer.

<!-- 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/46402?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-29 15:12:22 -04:00
Alaister Young
7e9badc6b8 chore(studio): migrate useStaticEffectEvent to React 19 useEffectEvent (#46415)
Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in
React 19.2 with the same signature as the userland polyfill. This drops
the local hook in `apps/studio` and `apps/www` in favor of the built-in.

**Removed:**
- `apps/studio/hooks/useStaticEffectEvent.ts`
- `apps/www/hooks/useStaticEffectEvent.ts`
- `.claude/skills/use-static-effect-event/` — skill is obsolete

**Changed:**
- 26 call sites: dropped the `useStaticEffectEvent` import, added
`useEffectEvent` to the existing `react` import, renamed call sites
- `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19
- `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale
"Studio uses React 18, skip these patterns" warning

## To test

- `pnpm typecheck --filter=studio` — passes locally
- `pnpm typecheck --filter=www` — passes locally
- `grep -rn "useStaticEffectEvent"` returns nothing outside
`node_modules`
- Smoke-test areas that use the hook: schema visualizer edges
(intersection check), spreadsheet import, sign-in/CLI login flows, side
panels with unsaved-changes prompts

**Out of scope:** pre-existing Tailwind lint warning on
`DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to
this migration

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

* **Refactor**
* Internal event handling migrated to React’s built-in event hooks
across the Studio app; no user-facing changes.

* **Documentation**
* Clarified React 19 compatibility and noted Studio now targets React
19.
  * Removed obsolete documentation for a deprecated internal hook.

<!-- 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/46415?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-05-28 23:30:42 +08:00
Charis
6dabfde296 perf(studio): virtualize rendering, memoize nodes/edges, and O(1) FK lookup in Schema Visualizer (#46235)
Towards [FE-3428](https://linear.app/supabase/issue/FE-3428).

## Summary

Cheap render-cost fixes so the Schema Visualizer stays responsive at
400+ tables. No data-layer or API changes — pure render-side work,
isolated to the Schema Visualizer.

- Enable `onlyRenderVisibleElements` on `<ReactFlow>` so xyflow skips
mounting nodes and edges outside the viewport.
- Memoize `TableNode` (custom comparator) and `DefaultEdge` so they
don't re-render on unrelated state changes (pan/zoom, theme toggle,
parent re-renders).
- Drop `resolvedTheme` from the layout effect deps — theme is purely
visual; toggling it no longer re-runs Dagre and replaces every
node/edge.
- `handleSelectionChange` now (a) skips `setEdges` entirely when no
edge's `animated` flipped, and (b) preserves the object reference for
untouched edges so memoized edges don't re-render.
- Precompute a `Map<tableName, …>` lookup in `getGraphDataFromTables` so
FK handle resolution is O(1) per relationship instead of scanning every
table+column.

A follow-up PR will add a `useInfiniteTablesQuery` and switch both the
Schema Visualizer and Database > Tables list onto it for progressive
loading and infinite scroll.

## Caveats

- `TableNode` reads `selectedEdge` from context, so selecting an edge
still re-renders all visible `TableNode`s via context propagation. The
memo guards against props-driven re-renders (pan/zoom/theme).

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

## Summary by CodeRabbit

* **Refactor**
* Optimized database schema graph rendering with improved component
caching and efficient relationship lookups.
* Enhanced visual element rendering to reduce unnecessary re-renders for
large schemas.

<!-- 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/46235?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-21 15:24:20 -04:00
Charis
d79a276824 studio: ColumnTypeRef cascade + FK type comparison fixes (2/7) (#45903)
## 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?

Refactor + bug fixes (part of the SafeSql migration stack — PR 2 of 7,
stacks on top of #45897).

## What is the current behavior?

- `pgMeta.columns.create` and the table-editor SQL builder take column
type as a string with array suffix and schema baked in (e.g.
`'private.test_enum'`, `'int4[]'`).
- The studio table-editor SQL emits the legacy schema-embedded `format`
string for enums in non-public schemas, while the pg-meta columns SQL
already returns the new shape (bare `format` + separate
`format_schema`). The two queries disagree on how to represent the same
column, surfacing as a false-positive type mismatch in the FK selector
when both ends are an enum from a non-public schema.
- The FK selector compares column types by `format` alone — same-named
enums in different schemas appear equal, and arrays vs. scalars of the
same base type pass the family check.
- `displayColumnType` renders arrays as the raw `_typname` pg-meta emits
(e.g. `_int4` instead of `int4[]`).

## What is the new behavior?

**pg-meta**

- Introduce `ColumnTypeRef` (`{ schema?, name, isArray? }`) for column
type input, replacing the legacy string-with-array-suffix format.
`pgMeta.columns.create` and the table-editor SQL builder consume the new
shape.
- Add `format_schema` to the column zod schema; pg-meta SQL emits the
type's schema for the table editor's ColumnType dropdown.
- `pgMeta.columns.create` returns a `SafeSqlFragment`.
- Studio table-editor SQL now emits bare `format` + `format_schema`,
matching pg-meta's columns SQL.

**Studio**

- `SafePostgresColumn`/`SafePostgresTable` extend the new `PG*` types
(master dropped postgres-meta).
- Pipe `ColumnTypeRef` through `SidePanelEditor` → `ColumnEditor` →
`TableEditor`, along with the column-create mutation, table
retrieve/list queries, and the `TableList`/`ColumnList` surfaces.
- `displayColumnType` helper renders arrays as `type[]` (or
`schema.type[]`) and handles non-implicit schemas.
- FK selector now carries `sourceIsArray`/`targetIsArray` and compares
the full `(format, format_schema, isArray)` triple. Family checks for
numeric/text/uuid skip when either side is an array (FKs across array
boundaries are never compatible).
- Type-mismatch and type-notice alerts pass `isArray` to the display
helper.
- Bundle `Policies.utils` + `Policies.types` + `sql-policy-mutation`,
`PolicyEditorModal`, and `SchemaGraph` here because `SidePanelEditor`
consumes `acceptGeneratedPolicy`/`AcceptedGeneratedPolicy` — splitting
requires temporary overloads with no architectural payoff.

## Additional context

Part of the SafeSql migration stack. Stacks on top of #45897.

### Manual test checklist

Surfaces touched by this PR — please exercise each:

**Table editor**
- [x] Create a new table with a mix of column types (scalar, array,
enum, foreign key)
- [x] Add a column to an existing table; verify the type dropdown lists
scalars + arrays separately and shows schema-qualified names for
non-public enums
- [x] Edit an existing column's type (scalar ↔ array, switch between
enums in different schemas) and save
- [x] Verify enum types from a non-public schema (e.g.
`private.my_enum`) display as `private.my_enum` in the column list

**Foreign key selector**
- [x] Open the FK selector for a column and pick a target column with a
matching type — no mismatch warning
- [x] Pick a target column whose type differs only by schema (two
same-named enums in different schemas) — should show a type-mismatch
alert
- [x] Pick a target column where one side is an array and the other is a
scalar of the same base type — should show a type-mismatch alert (no
auto-cast across array boundary)
- [x] When FK target sets the column type, verify `format_schema` and
`isArray` are preserved on the source column
- [x] Type-mismatch and type-notice alert messages render array types as
`type[]` (not `_type`)

**Column list / table list**
- [x] Schema-qualified type names display correctly for columns whose
type lives in a non-public schema
- [x] Array columns display as `type[]` (or `schema.type[]`)

**Policies (bundled due to import dependency)**
- [x] Open the Policies page; create/edit/delete a row-level policy via
the modal
- [x] Generate a policy via the AI assistant and accept it through
`SidePanelEditor` — verify the accepted policy lands in the editor
correctly

**Schema visualizer**
- [x] Open the Schemas → Schema Visualizer page; verify it renders
without type errors and shows tables/relationships

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

* **Improvements**
* Support for column types in non-public schemas and richer column type
presentation (includes schema and array info).
* Stronger SQL safety around policies and constraints; draft policy SQL
is now promoted explicitly on save.
* Improved foreign-key type validation and compatibility checks using
enhanced type metadata.

* **Tests**
* Updated snapshots and tests to reflect new column metadata and SQL
fragment handling.

<!-- 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/45903)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 15:12:08 -04:00
Charis
d4079083fc chore(studio): drop @supabase/postgres-meta in favor of @supabase/pg-meta (#45844)
## 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?

Refactor / dependency cleanup.

## What is the current behavior?

`apps/studio` lists both `@supabase/pg-meta` (workspace package) as a
runtime dep and `@supabase/postgres-meta` (external npm package,
`^0.64.4`) as a devDependency. The external package is used only for
type imports across 44 files — there is no runtime usage and no codegen
pipeline that needs it.

## What is the new behavior?

Every `Postgres*` type import (`PostgresTable`, `PostgresColumn`,
`PostgresPolicy`, `PostgresTrigger`, `PostgresView`,
`PostgresMaterializedView`, `PostgresForeignTable`, `PostgresSchema`,
`PostgresPublication`, `PostgresRelationship`, `PostgresPrimaryKey`) is
replaced with its `PG*` counterpart from `@supabase/pg-meta`, and the
external dep is removed from \`apps/studio/package.json\`. Top-level
type re-exports were added to \`packages/pg-meta/src/index.ts\` so
consumers can import directly from the package root.

Two latent issues surfaced by the stricter pg-meta types are also fixed:
- \`data/foreign-tables/foreign-tables-query.ts\` was casting
foreign-table results as \`PostgresView[]\`; corrected to
\`PGForeignTable[]\`.
- \`pg-meta\`'s \`PGTrigger\` Zod schema declared
\`orientation\`/\`activation\` as \`z.string()\`, inconsistent with
pg-meta's own \`getDatabaseTriggerUpdateSQL\` helper that requires the
narrow literal unions; tightened to \`z.enum\`.

## Additional context

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

## Summary by CodeRabbit

* **Chores**
* Updated internal TypeScript type definitions across the codebase to
use the latest type system from `@supabase/pg-meta`.
  * Removed `@supabase/postgres-meta` dependency.
* Enhanced type validation for database triggers and schemas to enforce
stricter constraints.

[![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/45844)

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 16:07:10 +00:00
Ali Waseem
e6f779ea30 feat(studio): add keyboard shortcuts to the schema visualizer (#45386)
## Summary

Adds the first batch of keyboard shortcuts for the Database → Schema
Visualizer page, following the registry pattern established for the SQL
editor and table editor.

Fixes [FE-3115](https://linear.app/supabase/issue/FE-3115).

## Shortcuts

| Shortcut | Action |
| --- | --- |
| `Mod+Shift+C` | Copy schema as SQL |
| `Mod+Shift+M` | Copy schema as Markdown |
| `D` then `P` | Download schema as PNG |
| `D` then `S` | Download schema as SVG |
| `O` then `A` | Open the auto-layout confirmation dialog |
| `O` then `S` | Open the schema selector |

All six entries appear in the Cmd+K command menu under "Shortcuts" and
in the global shortcuts sheet (`Mod+/`) under a new "Schema Visualizer"
group while the page is mounted. None are surfaced in Account →
Preferences yet (`showInSettings: false`), matching how the SQL/table
editor batches shipped.

The schema selector and auto-layout button are wrapped in the unified
`Shortcut` component so the keybind is shown on hover (Linear-style).
The dropdown items for copy/download don't get hover hints since
tooltips on dropdown items don't make sense — they're discoverable via
Cmd+K instead.

## Toasts

Each user-visible action now confirms via a sonner toast:

- `Successfully copied as SQL` — fires on Copy as SQL (button or
`Mod+Shift+C`).
- `Successfully copied as Markdown` — fires on Copy as Markdown
(dropdown or `Mod+Shift+M`).
- `Successfully downloaded as PNG` / `Successfully downloaded as SVG` —
already present in `useExportSchemaToImage`; fires on click or `D → P` /
`D → S`.
- `Failed to download current view: …` — error toast on download failure
(also pre-existing).

## Notes

- `Mod+Shift+C` and `Mod+Shift+M` collide with the SQL editor's
`results.copy-csv` / `results.copy-markdown` shortcuts. They coexist
cleanly because `useShortcut` only fires while the hook is mounted, and
the two pages live on different routes. Both labels appear in the global
shortcuts sheet honestly scoped per surface.
- `SchemaSelector` was promoted to a `forwardRef` component that spreads
extra props onto its outer `<div>`. This was needed for `<TooltipTrigger
asChild>` to attach event handlers and the ref properly — previously
they were silently dropped and the hover tooltip didn't render.
- `SchemaSelector` and the auto-layout `AlertDialog` accept controlled
`open` props now so the shortcuts can drive them and the tooltip can be
suppressed while the popover/dialog is open (`Shortcut` gained a
`tooltipOpen` passthrough for this).
- Auto-layout still pops the existing confirmation dialog rather than
running directly — destructive enough to keep the guardrail.

## Test plan

- [x] On the Schema Visualizer page, each of the six shortcuts fires the
corresponding action.
- [x] Hover the schema selector and the Auto layout button — tooltip
shows the action label and keybind badge.
- [x] Open the schema selector popover (click or `O → S`) — hover
tooltip is suppressed while open.
- [x] Open the auto-layout confirm dialog (click or `O → A`) — hover
tooltip is suppressed while open.
- [x] Cmd+K shows all six entries under "Shortcuts" while on the page;
navigating away unregisters them.
- [x] `Mod+/` shortcuts sheet has a "Schema Visualizer" group listing
all six.
- [x] Copy as SQL / Markdown each fire a confirmation toast; PNG / SVG
downloads each fire a confirmation toast.
- [x] On the SQL editor results page, `Mod+Shift+M` / `Mod+Shift+C`
still copy results (no regression from the duplicate keybinds).
- [x] The download dropdown items still work via click; PNG/SVG
downloads succeed.
- [x] All other consumers of `SchemaSelector` (~15 callsites) render
unchanged after the `forwardRef` promotion.

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

* **New Features**
* Keyboard shortcuts for schema visualizer: copy as SQL/Markdown,
download PNG/SVG, auto-layout, and focus selector
  * Success toasts when copying content to clipboard

* **Improvements**
* Schema selector and auto-layout dialog can be opened/closed via
keyboard and programmatically
* Shortcut tooltips can be suppressed when related overlays/dialogs are
open
  * Schema Visualizer added to the shortcuts reference sheet

* **Tests**
  * E2E tests dismiss transient toasts to avoid UI interference
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-01 07:13:37 -06:00
Ivan Vasilov
bc8724c46e fix: Don't include fonts when rendering the svg in Schema visualizer (#45425)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved rendering and visual consistency of exported database schema
images by refining font handling during SVG and PNG export processes.
Schema diagrams now display with better visual fidelity when exported.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-30 10:47:15 -06: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
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
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
19a6fc90ac feat: Add "Export as markdown" action on both the schema and individual tables (#44986)
## Problem

When using LLMs, it's useful to describe your tables in markdown format.

## Solution

- Add an _Copy as SQL_ and _Copy as Markdown_ in the schema visualiser
table menu
<img width="320" height="235" alt="image"
src="https://github.com/user-attachments/assets/b465d6aa-a011-4308-86de-78725328630b"
/>

- Refactor the _Copy as SQL_ and _Download current view_ buttons in a
single button/dropdown combo and add _Copy as markdown_:
<img width="333" height="143" alt="image"
src="https://github.com/user-attachments/assets/a823988b-abff-4840-b5a5-53a5830065b4"
/>



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

* **New Features**
  * "Copy as Markdown" for schemas and individual tables.
  * "Copy as SQL" for individual tables.
  * Per-column descriptions included in schema/table exports.

* **Style**
* Export actions consolidated into a compact, grouped dropdown with
adjacent copy action for streamlined header controls.

* **Tests**
  * Unit tests for markdown export helpers.
* E2E tests updated to use the new export UI and adjusted dialog timing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
2026-04-21 16:09:54 +02:00
Charis
485402640f fix schema visualizer animations (#45065)
The dashed-line animation between relations in the schema visualizer can
get quite CPU-intensive for complicated schemas. Changed so it only runs
on edges that target the selected relation, otherwise it's a solid line.

Resolves FE-3005

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

## Summary by CodeRabbit

* **New Features**
* Relationships connected to selected tables now animate for enhanced
visual feedback.

* **Bug Fixes**
* Improved edge selection behavior in the schema graph—single selections
now register correctly.
  * Optimized default animation settings for schema connections.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-20 13:00:04 -04:00
Gildas Garcia
1a0fc71151 fix: improve performances on large schema image export (#45042)
## Problem

When users export a large schema, the UI becomes unresponsive for a long
time.
This is because the underlying `html-to-image` library calls
`getComputedStyle` for every node.

## Solution

- Upgrade `html-to-image` to its latest version
- Use the new `includeStyleProperties` property to call
`getComputedStyle` only once
- Extract the image export logic into a new hook

## How to test

- Open
https://studio-staging-git-gildasgarcia-fe-2998-suggest-e7fb9e-supabase.vercel.app/dashboard/project/pdmusqfyrsascxykhlge/database/schemas?schema=auth
- Rearrange tables so that they are all visible
- Export the schema as png
- It should takes (~10-15secs)

- Do the same in this PR preview
https://studio-staging-gy13zepyf-supabase.vercel.app/dashboard/project/pdmusqfyrsascxykhlge/database/schemas?schema=auth
- It should takes ~3-5secs



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

* **Improvements**
* Improved schema export: more reliable PNG/SVG exports that better
preserve visual styling, show progress state during downloads, and
surface success/error notifications.
* **Chores**
* Updated image-export library to a newer version for improved
compatibility and performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-20 16:12:37 +02:00
Gildas Garcia
e7860e9163 feat: request confirmation before applying auto-layout to the schema visualiser (#44932)
## Problem

If users accidentally click the _Auto layout_ button in the schema
visualiser, they immediately lose all their changes.

## Solution

- Ask for confirmation before applying auto layout
- Fix auto layout changes aren't persisted

<img width="457" height="232" alt="image"
src="https://github.com/user-attachments/assets/d58e2995-6537-43b4-9b99-b1447fb03e1f"
/>

## How to test

- Go to database/schema
- Make changes to the layout
- Refresh the page and check changes are still applied
- Click the _Auto layout_ button and click _Cancel_
- Check auto layout wasn't applied
- Refresh the page and check users changes are still applied
- Click the _Auto layout_ button and click _Apply_
- Check auto layout was applied
- Refresh the page and check auto layout changes are still applied

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

* **New Features**
* Added a confirmation dialog for the "Auto layout" action so users can
review and confirm before changes are applied.

* **Bug Fixes**
* Ensured layout fitting completes before node positions are saved,
preventing incorrect or premature persistence.

* **Style**
* Simplified schema error rendering to present error messages more
directly and clearly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-16 12:17:05 +02: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
Gildas Garcia
06190d15b9 Gildasgarcia/fe 2426 show relationship line context and highlight on hover (#44023)
## Problem

When you have many tables, it's hard to follow the relations between
them in the Schema Visualiser

## Solution

When selecting an edge (the line between tables), highlight it along
with the related tables and columns to make it easier.
Also, if there is enough space, display a popover showing the relation
details

## Screencasts


https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04
2026-03-23 17:41:50 +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
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
Gildas Garcia
950c26dcb0 chore - make database e2e tests run in parallel and more stable (#43569)
## Problem

- database e2e tests run in serial mode, which is slower
- they also are a bit flaky

## Solution

- Ensure they can run in parallel
- Make them more stable by using UI checks when waiting
- Use assertions that automatically wait/retry in playwright
2026-03-09 16:45:16 +00:00
hallidayo
98c34582b8 feat: add description to schema visualizer (#43406)
## 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 > Database > Schema Visualizer

## What is the current behavior?

If a table has a description value then the value does not show on the
visualizer

## What is the new behavior?

<img width="393" height="243" alt="Screenshot 2026-03-04 at 19 09 47"
src="https://github.com/user-attachments/assets/fcd61ecb-c1b8-4408-b753-62cc1d136c69"
/>


## Additional context

Closes #36072
2026-03-06 06:59:07 -07:00
Joshen Lim
b77de2dfbc Hide actions in schema visualizer if schema has no tables (#42849)
## Context

In database/tables (Schema visualizer), if the schema has no tables,
clicking on "Auto layout" causes a client error as we're trying to run
the `dagre.layout` on a graph with 0 nodes and edges

Opting to hide all actions on the Schema Visualizer if there's no tables
(understandably we've been leaning towards disabled states rather than
hiding, but in this case i was thinking hiding is better since that's an
empty state - unless some actions were applicable in the empty state,
but in this case none of the actions are)

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

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
* Improved reliability of the database schema interface by strengthening
empty state handling
* Ensured database actions are properly hidden when no tables exist in
the schema

* **Refactor**
* Consolidated schema state validation logic for better code
maintainability

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-19 14:32:35 +08:00
Francesco Sansalvadore
bd9e78b209 chore: dashboard header alignments (#42769)
Align borders to match header heights.

<img width="2904" height="1734" alt="shot_2026-02-04_at_08 42 21z_2x"
src="https://github.com/user-attachments/assets/0538f8eb-64a5-4329-94fb-3ea4feed847d"
/>
2026-02-13 11:48:12 +01:00
Saxon Fletcher
0d761b0434 Connect sheet final content (#42374)
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>

This is the third and final PR to complete the new connect sheet. 

First: https://github.com/supabase/supabase/pull/42367

Second: https://github.com/supabase/supabase/pull/42373

This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.

To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct

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

* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs

* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates

* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors

* **Chores**
  * ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 22:14:18 +08:00
Ivan Vasilov
a9cb6cde6c fix: Deduplicate foreign schema nodes in Schema Visualizer (#41436)
Check if there's a node for the foreign table column before adding it to reactflow.
2025-12-18 16:48:41 +01:00
Ivan Vasilov
a36b65e7a3 fix: Refactor all Table Editor links to include sorts and filters (#41075)
* Possible solution with building the URL from local storage.

* Refactor the local storage for tabs to use table ids.

* Fix the saving table state to local storage.

* Minor fixes.

* Open the correct schema when following the link.

* Minor fixes from CodeRabbit.

* Address charis' feedbacks

* Clean

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-18 10:21:09 +01: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
Marouane Souda
0ee0bf6968 Disable 'New table' button in schema visualizer page if schema is pro… (#40983)
* disable 'add table' button in schema visualizer page if schema is protected

* check user permissions before allowing table creation via schema visualizer

* refactor 'New table' button tooltip logic

* hide 'new table' button if creating tables is not allowed in visualizer
2025-12-03 07:15:46 -07:00
Danny White
46ac132051 chore(studio): empty state improvements (#40807)
* migrations

* clearer value prop

* consistent verb

* migration input

* triggers

* extract trigger buttons

* database backups

* schema title

* unrelated nit

* fix

* shared component

* ui-patterns

* rename

* improve docs

* remove redundant overrides

* remove old file

* prettier fix

* fix type error

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-11-27 17:26:20 +08:00
Joshen Lim
72d50d8ac4 Remove barrel files part 1 (#39955) 2025-10-29 18:07:20 +08:00
Joshen Lim
085bddafc5 Chore/consolidate copy icons (#39386)
* Replace all clipboard icons with copy icons

* Fix Menu.Item active styling for light mode

* Update

* Use bg side bar accent
2025-10-10 11:06:42 +08:00
matlin
172f6ba5fc Improve stability and explicitness of table editor tab state syncing between URL params and local storage (#38931)
* Improve stability and explicitness of table editor tab cache <-> url syncing

* fix: maintain filter state when using nav bar to switch back to Table Editor

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-09-23 13:03:56 -05: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
Michael Ong
61dedfa76f Chore/add e2e test for database (#37452)
* chore: add tests for database

* chore: add final tests and some refactoring

* chore: update playwright config
2025-08-05 12:33:32 +02:00
Saxon Fletcher
8b18592f3a fix visualiser size (#37674)
* fix visualiser size

* fix default assistant chat form
2025-08-05 10:14:12 +07:00
Saxon Fletcher
d8f34dcd79 remove duplicate download (#37093) 2025-07-14 15:33:39 +08:00
Saxon Fletcher
216b235877 Review branch diff with AI (#36915) 2025-07-10 09:11:34 +10:00
Jordi Enric
ba29cf187d Add copy schema to schema vizz (#34806)
* copy state

* add tooltip and better sql generation

* fix

* fix tooltip
2025-05-29 16:00:37 +00:00
Francesco Sansalvadore
a4cfcd9b2e global user dropdown in docs and www (#35063)
* docs: user nav dropdown

* www: user dropdown nav

* update menus

* chore: add complete local storage allowlist

* move all local-storage to common

* reload after logOut

* add local storage key changes from #35175

* fix errors

* add more keys

* fix merge bugs

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-05-05 11:48:06 +02:00
Joshen Lim
09959606e8 Add toast messages for success and failure when downloading schema visualizer current view (#34833)
* Add toast messages for success and failure when downloading schema visualizer view

* Support downloading as either PNG or SVG
2025-04-10 10:44:23 +08:00
Joshen Lim
9c0b77500f Chore/support downloading current view as png in schema visualizer (#33527)
* Support downloading current view as png in schema visualizer

* Add loading state

* Smol refactor
2025-02-12 14:43:11 +08:00
Joshen Lim
dc91412538 Use useSchemaQueryState in schema visualizer (#33508)
* Use useSchemaQueryState in schema visualizer

* Fix
2025-02-11 17:02:09 +08:00
Joshen Lim
ceed8bf792 Fix text overlapping in PublicSchemaNotEnabledAlert (#33473)
* Fix text overlapping in PublicSchemaNotEnabledAlert

* Update

* Smol fix
2025-02-10 16:03:35 +08:00
Joshen Lim
0a569b8aa7 Add product empty state to schema visualizer (#33471) 2025-02-10 15:09:27 +08:00
Saxon Fletcher
d633ced97d Feat/new project creation experiment (#31237)
* some early ideas

* better approach

* fix globe stuff

* add initial step

* reset and submit button for chat

* cleanup

* remove www

* more clean up

* mobile and more cleanup

* fixes

* update advanced and security

* fix project checks

* connect form

* fix reset and tidied up other things

* add layout options

* a/b test

* add offset

* add ab test

* remove www packages

* remove www

* package

* update coordinates

* feat: create ProjectCreationInitialStepSubmittedEvent

* feat: add event for capturing intention of prompting

* fix: bring pnpm-lock up to date

* fix ts errors

* fix globe

* fix globe animation

* fix ts

* remove imports and tools

* update module resolution

* global redirect

* delay rendering

* Update apps/studio/pages/new/[slug].tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

* take directly to v2 via project create dropdown

* move redirect to useEffect

* feat: distinguish events between initial and second step

* feat: emit an event when create project is clicked on new/v2

* fix: correct event type defs

* remove unused imports

* Various clean ups

* improvements

* Minor refactors

* clean up

* ts fixes

---------

Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-01-17 09:59:21 +10:00
Joshen Lim
12d92aed99 Assistant V2 (#30523)
* start

* added panels

* remove stuff

* fixes and refinements

* clean up

* remove old assistant panel

* resizable assistant kinda

* use icon

* Add missing package

* remove canvas

* add suggestions

* updated empty state if no tables exist

* fix table condition

* Implement diffing if using assistant in sql editor

* Reinstate old assistant in SQL editor if feature preview is off

* pane size adjustment

* assistant button corners

* Add SQL snippet content to assistant if opening assistant in sql editor

* Add the necessary checks for opt in and hipaa

* revert adding snippet to assistant when opening assistant in sql editor

* Add cmd i shortcut

* Add admonitions for when disablePrompt is toggled on, and if no api key is set. Add footer note RE rate limitation

* Bump ai package in packages

* some fixes for backwards compability depending on feature preview toggled

* Rename feature preview property for new assistant

* Smol fix

* Prevent SQL snippet from running until message is finished

* only loading last message

* fix z-index

* save chat state to global state

* add debug to failed ai queries

* Add basic contextual invalidation

* Add explain code action to SQL editor

* Add link to abort ongoing queries from SqlSnippet

* Update feature preview content

* Fix

* Fix

* Fix

* Te4st

* Fix tests

* ONly show ai button within a project

* Fix PH tracking

* Beef up a bit more event tracking

* Rough fix to padding when assistant is open

* A bit more telemetry stuff

* Update prompts

* fix rls editing via assistant

* Update generate-v3.ts

prompt to get auth schema too

* Add policy satement to assistant when editing

* Address all comments

* fixc

* Fix SqlSnippet not taking full width on larger viewports

* Adjust max width

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2024-11-25 18:50:56 +08:00
Alaister Young
a5a2873302 chore: table editor optimisation 2 (#30295)
* chore: table editor query optimisation 2

* fix editing tables from tables page

* Small style fixes

* Small style fixes

* address feedback

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-11-06 08:31:35 +00:00
Joshen Lim
ceee53a8d1 Support opening tables in table editor via schema visualizer (#30052)
* Support opening tables in table editor via schema visualizer

* Shift wrappers in database menu

* Dont open new tab
2024-10-24 11:18:43 +08:00
Joshen Lim
d0cbb045d9 Add check for saveNodePositions (#29471)
* Add check for saveNodePositions

* Fix https://supabase.sentry.io/issues/5389802889/?project=5459134&query=is%3Aunresolved&referrer=issue-stream&sort=freq&statsPeriod=14d&stream_index=10

* Update whitelist for https://supabase.sentry.io/issues/5856752960/?project=5459134&query=is%3Aunresolved&referrer=issue-stream&sort=freq&statsPeriod=14d&stream_index=5

* Update whitelist for https://supabase.sentry.io/issues/5759316461/?project=5459134&query=is%3Aunresolved&referrer=issue-stream&sort=date&statsPeriod=7d&stream_index=21

* Update whitelist for https://supabase.sentry.io/issues/5588800911/?project=5459134&query=is%3Aunresolved&referrer=issue-stream&sort=date&statsPeriod=7d&stream_index=11
2024-09-24 20:19:04 +08:00
Joshen Lim
adae94506c Minor improvement to schema visualizer layout of nodes without saved positions (#29169) 2024-09-09 20:14:02 +08:00