Files
supabase/packages/pg-meta/test/sql/studio/migrations.test.ts
Alaister Young 9af6e65df4 fix(studio): DOM-nesting hydration errors, ghost deleted-snippet nav, and migrations query 400s (#47667)
App-level fixes that reproduce on BOTH the Next and TanStack builds —
split out of #47657 (which stays TanStack-only) for reviewability. All
were found by a full-site click-through of the dashboard.

## Invalid HTML nesting (React 19 "will cause a hydration error" console
errors)

- **FormLayout description rendered in a `<p>`**
(`packages/ui-patterns`): consumers pass arbitrary JSX (the RowEditor's
`created_at` timezone note passes a `<div>` with `<p>`s) →
`<p>`-in-`<p>` / `<div>`-in-`<p>`. Container is now a `<div>` with
identical classes (Tailwind preflight makes them render the same).
- **Switch toggles nested inside Tooltip trigger buttons**
(button-in-button) in ColumnEditor ("Allow Nullable" + "Is Unique"),
ExtensionRow, and PublicationsTableItem → repo-standard `TooltipTrigger
asChild` + `<div>` wrapper.
- **Saved log queries rendered a `<div>` directly inside `<tbody>`**
(`/logs/explorer/saved`) → rows are now proper `<tr><td colSpan>`
wrappers; the component itself is untouched (it's valid in its sidebar
usage).
- **Nested anchors in observability metric cards**: a card-level
`<Link>` wrapped MetricCard's "More information" `<Link>` (identical
URLs) → the chevron affordance renders as a `<span>` when no `href` is
passed; clicks bubble to the card link, tooltips preserved.
Design-system standalone usage unaffected.
- **`objectFit="cover"` passed to modern `next/image`** on the featured
integration card (unknown-prop warning) — the className already had
`object-cover`; prop dropped.

## Ghost dead-snippet after deletion

Deleting the active SQL snippet left its id in `useDashboardHistory`
(`history.sql`), so the "SQL Editor" nav item navigated to
`/sql/<deleted-id>` — content fetch 404s, no editor pane renders, and a
phantom tab reappears. Fixed both ends: delete flows now purge dashboard
history (and the tabs store clears a stale `previewTabId`), and
`/sql/[id]` treats a snippet 404 as "clean up + `router.replace` to
`/sql/new` + toast" instead of rendering the dead state. Unit tests for
the store/history cleanup.

## `pg-meta` migrations query 400s on every project load

`ActivityStats` on project home runs the migrations list query, whose
SQL was a bare `select * from supabase_migrations.schema_migrations` —
that table only exists once a migration has run, so every other project
logged a failed `?key=migrations` request on every load (visible in
production consoles too). The SQL is now guarded with `to_regclass` +
`query_to_xml` (same pattern as the advisor lints' `storage.buckets`
guard), returning zero rows instead of erroring; legacy version-only
tables still work. Tested against real dockerized Postgres (absent
table, populated ordering, special chars, legacy schema) + MSW hook
tests.

Found and verified via /test-supabase-local (browser click-through +
console audit on both builds).

## To test

Console must stay free of React DOM-nesting errors ("cannot be a
descendant of" / "cannot contain a nested") on each surface:

1. Table editor → Insert row panel (`created_at` field renders its
timezone note) and Edit column panel ("Allow Nullable"/"Is Unique"
tooltips still hover).
2. `/database/extensions` and `/database/publications` → toggle switches
render, tooltips hover.
3. `/logs/explorer/saved` (with ≥1 saved query) → rows render full-width
inside the table, hover shows Actions.
4. `/observability` → no nested-anchor error on load; card body click
and the chevron both navigate; label help-icons still show tooltips.
5. `/integrations` → no `objectFit` unknown-prop warning; featured card
images still cover.
6. **Ghost snippet**: open a SQL snippet → delete it via the sidebar →
click the "SQL Editor" nav item → lands on `/sql/new` (no phantom tab,
no 404 content fetch). Direct-load `/sql/<random-uuid>` → toast +
redirect to `/sql/new`.
7. **Migrations 400**: load project home with a project that has never
run a migration → the `pg-meta/<ref>/query?key=migrations` request
returns **200** with `[]` (previously a 400 on every load). Database →
Migrations still lists real migrations when they exist.


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

## Summary by CodeRabbit

* **Bug Fixes**
* Deleted SQL snippets are fully removed from dashboard history and
stale editor/tab state; users are redirected with a toast.
  * Closing preview tabs no longer leaves stale references.
* Improved toggle/tooltip/dialog interactions to avoid broken UI,
including metric headers showing tooltips even without direct links.
* Migrations display safely when migration tables/relations are missing.

* **UI Improvements**
* Refreshed layout for saved queries, form descriptions, and integration
imagery.

* **Tests**
* Added coverage for snippet history cleanup, tab removal, migrations
SQL behavior, and query edge cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


---

### Review feedback: `query_to_xml` breaks on Multigres (Ivan)

The defensive migrations query (added here to stop the `?key=migrations`
400 when the table doesn't exist yet) originally guarded with
`query_to_xml`, which is forbidden through Multigres's pooler (MUL-736 /
PSQL-1318). Rewritten without `query_to_xml`/`xmltable` using the
splinter#170 pattern: a PL/pgSQL `do` block guarded by `to_regclass`
(PL/pgSQL defers planning, so a missing table never errors) stashes the
rows into a transaction-local GUC via `set_config`, and a trailing
`select` reads them back with `jsonb_array_elements`. Verified that
postgres-meta sends the whole SQL as one simple-query string → single
implicit transaction → the local GUC survives to the `select` and
doesn't leak into the pooled connection. 6/6 dockerized-Postgres tests
(absent table → `[]`, populated/ordered/special-chars, legacy
version-only table, full pg-meta-shaped multi-statement string, GUC
non-leakage).

Note (out of scope, pre-existing):
`packages/pg-meta/src/sql/studio/advisor/lints.ts` still uses
`query_to_xml` — a separate pre-existing Multigres risk that should get
its own splinter-pattern sync.

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2026-07-08 12:32:11 +08:00

156 lines
4.9 KiB
TypeScript

import { afterAll, expect, test } from 'vitest'
import {
getCreateMigrationsTableSQL,
getInsertMigrationSQL,
getMigrationsSql,
} from '../../../src/sql/studio/database/migrations'
import { cleanupRoot, createTestDatabase } from '../../db/utils'
afterAll(async () => {
await cleanupRoot()
})
const withTestDatabase = (
name: string,
fn: (db: Awaited<ReturnType<typeof createTestDatabase>>) => Promise<void>
) => {
test(name, async () => {
const db = await createTestDatabase()
try {
await fn(db)
} finally {
await db.cleanup()
}
})
}
withTestDatabase(
'returns zero rows (not an error) when the migrations table does not exist',
async ({ executeQuery }) => {
// Regression test: this used to throw 42P01 (undefined_table), which surfaced
// as a 400 on every dashboard load for projects without migrations.
const result = await executeQuery(getMigrationsSql())
expect(result).toEqual([])
}
)
withTestDatabase(
'returns migrations ordered by version desc when the table exists',
async ({ executeQuery }) => {
await executeQuery(getCreateMigrationsTableSQL())
await executeQuery(
getInsertMigrationSQL({
version: '20240101000000',
name: 'create_users',
statements: JSON.stringify(['create table public.users (id int primary key)']),
})
)
await executeQuery(
getInsertMigrationSQL({
version: '20240202000000',
name: `special <chars> & "quotes" 'apostrophes'`,
statements: JSON.stringify([`select '<a>&amp;</a>' as x`, 'select 2']),
})
)
const result = await executeQuery(getMigrationsSql())
expect(result).toEqual([
{
version: '20240202000000',
name: `special <chars> & "quotes" 'apostrophes'`,
statements: [`select '<a>&amp;</a>' as x`, 'select 2'],
},
{
version: '20240101000000',
name: 'create_users',
statements: ['create table public.users (id int primary key)'],
},
])
}
)
withTestDatabase('handles null name and statements', async ({ executeQuery }) => {
await executeQuery(getCreateMigrationsTableSQL())
await executeQuery(
`insert into supabase_migrations.schema_migrations (version) values ('20240303000000')`
)
const result = await executeQuery(getMigrationsSql())
expect(result).toEqual([{ version: '20240303000000', name: null, statements: null }])
})
withTestDatabase(
'works as the single multi-statement string pg-meta sends (statement_timeout prefix included)',
async ({ executeQuery }) => {
// postgres-meta concatenates a statement_timeout prefix and sends the whole
// thing as one simple-protocol query (a single implicit transaction), which
// is what lets the transaction-local GUC set in the do-block survive to the
// trailing select:
// https://github.com/supabase/postgres-meta/blob/master/src/lib/db.ts
await executeQuery(getCreateMigrationsTableSQL())
await executeQuery(
getInsertMigrationSQL({
version: '20240101000000',
name: 'create_users',
statements: JSON.stringify(['create table public.users (id int primary key)']),
})
)
const result = await executeQuery(
`SET statement_timeout='10s'; SET idle_session_timeout='10s';${getMigrationsSql()}`
)
expect(result).toEqual([
{
version: '20240101000000',
name: 'create_users',
statements: ['create table public.users (id int primary key)'],
},
])
}
)
withTestDatabase(
'does not leak the migrations GUC into the (pooled) session',
async ({ executeQuery }) => {
await executeQuery(getCreateMigrationsTableSQL())
await executeQuery(
getInsertMigrationSQL({
version: '20240101000000',
name: 'create_users',
statements: JSON.stringify(['create table public.users (id int primary key)']),
})
)
await executeQuery(getMigrationsSql())
// The pool is capped at one connection, so this runs on the same session.
// set_config(..., true) is transaction-local: once the query's implicit
// transaction ends, the migration payload must be gone.
const [{ value }] = await executeQuery(
`select current_setting('supabase.studio_migrations', true) as value`
)
expect([null, '']).toContain(value)
}
)
withTestDatabase(
'tolerates legacy migrations tables with only a version column',
async ({ executeQuery }) => {
// Older CLI versions created schema_migrations with a single `version` column
await executeQuery(`
create schema if not exists supabase_migrations;
create table supabase_migrations.schema_migrations (version text not null primary key);
insert into supabase_migrations.schema_migrations (version) values ('20230101000000');
`)
const result = await executeQuery(getMigrationsSql())
expect(result).toEqual([{ version: '20230101000000', name: null, statements: null }])
}
)