mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
codex/fix-tanstack-e2e
145
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Danny White
|
d067e81a69 |
fix(ui): align primary colours across text, buttons, and controls (#50697)
## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. | Before | After | | --- | --- | | <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> | <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> | | <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> | <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> | | <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> | <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> | ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable. |
||
|
Danny WhiteandJoshen Lim
|
a31ca2bad0 |
fix(ui): make brand text readable across themes (#49871)
## What kind of change does this PR introduce? Bug fix and design-system update. Resolves DEPR-316. Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR (https://github.com/supabase/supabase/pull/50564) stacked on this one. ## What is the current behavior? `text-brand` resolves to the canonical bright brand green in places that need readable text, which fails WCAG AA on light surfaces. A separate `text-brand-display` token adds another green for large type. ## What is the new behavior? - `text-brand` maps to accessible `--primary` (light mode darkened to meet ~4.5:1 AA) - `--hue` / `--primary-hue` aligned to 157.5 - `text-brand-display` removed; former display callsites use `text-brand` - Bright fills/borders stay on `brand-default` - Design-system colour and typography docs updated | Before | After | | --- | --- | | <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13 09@2x" src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7" /> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42 05@2x" src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114" /> | | <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13 53@2x" src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e" /> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41 37@2x" src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc" /> | | <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16 30@2x" src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc" /> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42 52@2x" src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c" /> | | <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18 53@2x" src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427" /> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43 19@2x" src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b" /> | | <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32 04@2x" src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d" /> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44 13@2x" src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8" /> | | <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34 44@2x" src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79" /> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44 56@2x" src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1" /> | ## To test Test each callsite **in light mode** (dark mode is largely unchanged). ### WWW - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): “Scale to millions” uses readable brand text (display token is gone) - [Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers): small “Careers” eyebrow readable; green dividers stay bright `brand-default` - [Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us): email / policy links use readable brand text - [Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions): “Ask about early access to BYOC” readable ### Docs - [Docs homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs): “DOCS” wordmark and resource links readable - [Database overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview): nav / footer brand links readable - [JavaScript reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction): active sidebar treatment readable ### Design system - [Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography): documents `text-brand` only (no display) - [Colour usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage): `text-brand` vs `bg-brand-default` - [Design-system homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): brand text examples across themes ### Studio - [Auth providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright - [Database policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true): template hover text more legible - [Database connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections): “Live” status readable; animated dot stays bright green --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Gildas GarciaandAlaister Young
|
737b8595f2 |
Update API types (#50234)
## Problem platform, v1 and v2 have been already completely migrated and introduced some changes. Some types have been renamed, some outputs and inputs updated. ## Solution - Update the API types - Fix the TS errors ## Update Taking this over to unblock #50134, which needs the new scoped token permission ids from the regenerated types. - Merged `master`. - Regenerated `api-v2.d.ts` from the production spec. The previous files came from a local API that exposed a webhook events endpoint production doesn't have yet. Production has since added standardized 400 error responses on the v2 organization endpoints. `api-v1.d.ts` and `platform.d.ts` already matched production. - Fixed `verify-production-types`. It formatted the regenerated files in a temp directory outside the repository, so Prettier fell back to its defaults and the comparison could never match the committed files. It now passes the repository config explicitly. `pnpm api:verify-types` passes on this branch. - Verified locally: `pnpm typecheck`, `pnpm api:verify-types`, Studio unit tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Preserved descriptions when saving, sharing, moving, or unsharing notebooks, reports, SQL snippets, and saved queries. * Improved handling of empty or null values across notebook descriptions, billing usage, pooler settings, and infrastructure fields. * Improved read-replica connection handling, including read-only connection strings. * Updated storage configuration and capability handling to match current settings. * **API and Compatibility** * Updated organization, project, storage, OAuth, billing, and infrastructure data handling to match current API responses. * OAuth app creation and updates now require scopes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Joshen Lim
|
c37e756983 |
Trigger update snippet when toggling favorite (#50121)
## Context Currently in the SQL Editor, toggling "favourite" for a snippet doesn't persist unless you manually save the snippet (which expects a change in the snippet's content before allowing so) - which is a bit of an odd UX This used to work before we introduced manual saving which is currently the default behaviour for the SQL Editor - `addFavorite` and `removeFavorite` would add to the `needsSaving` queue which the editor's save scheduler will subscribe and trigger the save. However the save scheduler doesn't subscribe to the queue for manual saving mode ([ref](https://github.com/supabase/supabase/blob/master/apps/studio/state/sql-editor/sql-editor-save-scheduler.ts#L90)) - hence toggling favourite on a snippet never triggers a PATCH request. Am opting to immediately trigger a PATCH request when toggling favourites which is a bit more of an expected UX imo One thing to note is that favoriting a snippet essentially does a save on the snippet - which means the contents will be persisted as well, although i think this is alright ## To test - [ ] Verify that toggling favourite for a SQL snippet persists immediately - Can verify by checking the context menu CTA to see if it's changed from "Add to favourites" to "Remove from favourites" or vice versa <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Improvements** - Favoriting or unfavoriting SQL snippets now saves immediately. - Favorite changes are handled consistently across the SQL Editor, including the utility panel and snippet navigation. - Pending content saves are coordinated to prevent favorite changes from being overwritten. - If saving a favorite fails, the previous favorite state is restored and an error notification is shown. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
db0e6b761b |
Joshenlim/fe 4304 bring database connections out of feature preview (#50107)
## Context
As per PR title - we're bringing Database Connections out of feature
preview and it'll live on the dashboard by default 🙂
Also deprecating the existing Ongoing queries panel which Database
Connections now supercedes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Database Connections is now available without feature-preview
activation.
* The SQL editor’s “View running queries” option now links directly to
Database Connections.
* **Bug Fixes**
* Query cancellation and session termination now refresh database
activity data.
* **Removed**
* Removed the in-editor ongoing queries panel and its termination
controls.
* Removed the Database Connections promotional banner, preview
messaging, settings, and related telemetry.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Charis
|
474bf5da4a |
fix(studio): reset rename form between same-named SQL snippets (#49275)
## 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? Bug fix ## What is the current behavior? In the SQL Editor, when two snippets are both named "Untitled query" and one is renamed, the rename modal's state is not reset afterwards. Opening the rename modal for the second snippet prefills the input with the first snippet's new name, and the second snippet can't be renamed at all because the "Rename query" button stays disabled. `RenameQueryModal` fed the snippet to react-hook-form through the `values` option, which only re-runs its reset when the values object deep-changes. Two snippets with the same name (and no description) produce a deep-equal object, so switching between them never resets the form — it keeps the previously renamed name and stays non-dirty. ## What is the new behavior? The form is mounted per snippet (`key={snippet.id}`) with plain `defaultValues`, so no form state can carry over between snippets regardless of name collisions. `SQLEditorNav` derives modal visibility from the selected snippet and clears it on cancel/complete, matching `SearchList`. Covered by a new component test in `RenameQueryModal.test.tsx` that renames one "Untitled query", reopens the modal for a second one, and asserts the field resets and the second rename submits. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed the rename dialog retaining input from a previously renamed snippet. * Ensured the rename form resets correctly after successful submission and when switching between snippets. * **Tests** * Added regression coverage for renaming multiple untitled snippets with the same original name. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
dfb0603a36 |
Joshenlim/fe 4063 set up incremental default opt in for database connections (#49132)
## Context As per PR title - sets up incremental default opt in for the Database Connections feature preview Database Connections preview banner should still only show up if it's never been dismissed before, but the CTA's changed to "Explore" rather than "Enable" if the user's default opted in Related discussion here: https://github.com/orgs/supabase/discussions/48639 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Database Connections preview is now enabled by default. * Added clearer handling for preview state and initialization. * Banner actions open Database Connections when enabled, or the feature preview when disabled. * **Bug Fixes** * Improved banner and menu visibility while preview settings initialize. * Preserved banner dismissal behavior after a previous preference change. * Improved navigation consistency across Database Connections entry points. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
076a205ac4 |
View running queries to link to connections page (#48963)
## Context The old "View running queries" in the SQL Editor was getting incorrectly hidden with the wrong flag Adjusting it to be visible again, and link to the new connections page if the feature flag is on <img width="277" height="88" alt="image" src="https://github.com/user-attachments/assets/41af74ca-bb72-4968-90fd-157465e7ae69" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added feature-preview gating for the running-queries action. * When database connections are enabled, the action links to the project’s observability connections page. * Otherwise, it continues opening the existing ongoing-queries panel. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
8831e15fc3 |
Revert "refactor(studio): static tab kind registry and tab id codec (PR 1/9)" (#48762)
Reverts supabase/supabase#48718 |
||
|
Charis
|
ffd6d6636d |
refactor(studio): static tab kind registry and tab id codec (PR 1/9) (#48718)
## Summary First PR in the tab/snippet decoupling stack. Purely additive: no existing call sites change behavior except the `EntityTypeIcon` rewire, which preserves its API exactly. - **`state/tabs/kinds.ts`** — static `TAB_KINDS` descriptor table (`TabKind`, `TabSurface`, `surfaceOf`, `kindsOnSurface`, `isTabKind`). Leaf-safe: its only reference to the domain `Tab` type is a type-only import, so it stays importable at module scope (needed later for the valtio store and the persistence migration reader) without creating a runtime cycle. - **`state/tabs/kinds.icons.tsx`** — per-kind icon leaf module (`ui` + `lucide-react` + `TabKind` type only), plus the preserved `LogsSnippetIcon`. - **`state/tabs/tab-id.ts`** — `createTabId` / `parseTabId` / `toUrlSegment` / `parseUrlSegment(segment, surface)` codec. `parseUrlSegment` is surface-scoped: a bare segment only resolves to a kind when the surface has exactly one bare kind (true for `sql`). The table surface has five bare kinds (`r`/`v`/`m`/`f`/`p`) with no URL disambiguator between them, matching `/editor/[id]`, which learns kind from the fetched entity rather than the URL — so a bare table segment correctly resolves to nothing. - **`components/ui/EntityTypeIcon.tsx`** — rewired to a thin wrapper delegating to `kinds.icons.tsx`, preserving its exact prop API (`type`, `size`, `strokeWidth`, `isActive`, `sqlSource`) for all existing consumers. - **`state/tabs/tab-id.test.ts`** — codec round-trips per kind, bare-vs-prefixed URL segments, the `templates`/`examples`/`new` sentinels, and surface scoping (including the table-surface ambiguity above). Full plan: `apps/studio/TABS_DECOUPLING_PLAN.md` (not included in this PR). ## Test plan - [x] `pnpm typecheck` - [x] `pnpm lint --filter=studio` (0 errors) - [x] `pnpm --filter studio run lint:ratchet` (warning counts did not increase) - [x] `pnpm test:studio` (full suite green, including 50 new/updated tests in `state/tabs/`) - [x] `pnpm format` (no-op) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent icons and metadata for SQL, notebook, chat, table, view, and related tab types. * Added support for creating, parsing, and converting tab identifiers to URL segments. * Improved handling of tab types across SQL and table surfaces. * **Bug Fixes** * Invalid, empty, or ambiguous tab identifiers and URL segments are now rejected. * **Tests** * Added coverage for tab identifiers, URL conversion, supported tab types, and edge cases. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
0791b04eb8 |
feat(sql-editor): roll out manual saving by default (#48706)
## 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? Feature — progresses the SQL Editor manual saving rollout, and removes a fully rolled out feature flag. ## What is the current behavior? Manual saving (snippets save only on an explicit Save / Cmd+S rather than autosaving every edit) is opt-in. It requires both the `sqlEditorManualSave` ConfigCat flag and the user turning on the "Disable snippet auto-saving" feature preview themselves. That flag is now fully rolled out. ## What is the new behavior? - `sqlEditorManualSave` is removed, so the feature preview is listed for everyone. (Delete the flag in ConfigCat after a few months.) - New `sqlEditorManualSaveForced` flag progresses the rollout. It forces manual saving on regardless of what the user stored previously, including an explicit opt-out, via a new `isForced` field on `FeaturePreview` that `initializeFlags` resolves ahead of the localStorage lookup — so the feature preview modal reflects the forced state too, not just the save behavior. Turning the flag off reverts everyone who never opted in, so it remains a working kill switch. - Users the rollout switches over get a one-time dialog on their first SQL Editor route, explaining that snippets no longer autosave. Dismissal persists in `sql-editor-manual-save-notice-dismissed` (allowlisted, so it survives sign-out). - Users who opted into the preview themselves never see the dialog — it records their dismissal up front instead, since the notice needs to outlive the feature preview and once the preview is retired there's no stored opt-in left to recognize them by. - The preview keeps its switch so users who lose their local storage can opt in early, but once the rollout reaches them the "Disable feature" button is disabled with a tooltip explaining why. ### To test Turn on `sqlEditorManualSaveForced` on via the dev toolbar. - No `supabase-ui-sql-editor-manual-save` and no dismissal key → dialog appears on `/project/<ref>/sql`, toolbar shows the Save button. Dismiss, reload → no dialog. - `supabase-ui-sql-editor-manual-save` set to `false` (previously opted out) → still forced onto manual saving, and still gets the dialog. - `supabase-ui-sql-editor-manual-save` set to `true` → no dialog, and the dismissal key is written automatically. - Flag off, no opt-in → autosave, no dialog, and the "Disable autosave" power-off button still opens the preview modal. - Preview modal while forced → "Disable feature" is disabled with a tooltip; another preview (e.g. Column-level privileges) still disables normally. ## Additional context |
||
|
Charis
|
b3c5c9fc04 |
feat(studio): logs snippets in SQL editor nav, search, and tabs (#48457)
## What PR 7 of the SQL-editor query-source (Database vs Logs) stack. Surfaces `log_sql` snippets as a distinct query source across the SQL editor sidebar. Stacked on **`charislam/toolbar-ui-creation-flow`** (PR 6 — toolbar UI + creation flow); review/merge that first. Nothing is user-visible until the flags roll out — every entry point requires **both** `sqlEditorLogsSource` **and** `otelLegacyLogs`. ## Changes - **Nav** — a flag-gated **Logs** section (`LogsSnippetsSection`) backed by its own single-type `log_sql` query. The active snippet is injected only into the section it belongs to, via a shared `withActiveSnippet(snippets, active, belongsPredicate)` helper (also DRYs the private/favorites/shared injections). - **Search** (`SearchList`) — a **Logs** result group with a shared, extracted `SqlSnippetTree`; the "N results found" count now sums database + logs, with loading/empty states covering both queries. - **Tabs** — an immutable `sqlSource` field on tab/recent-item metadata (set at tab creation, lazily backfilled once the snippet loads via `useEffectEvent`), and a distinct `ScrollText` icon via a shared `LogsSnippetIcon`. Tab cleanup treats `log_sql` tabs as live and only prunes them when logs data is authoritative (`canPruneLogsTabs`), so a disabled/erroring logs query never wrongly deletes logs tabs or blocks database-tab cleanup. - **Data layer** — `useSqlSnippetsQuery` gains an optional `type` param so logs reuse the same `SnippetWithContent` shape as the other sections (no casts). ## Tests - `state/tabs.test.ts` — `sqlSource` backfill + creation-time carry-through. - `components/layouts/Tabs/Tabs.utils.test.tsx` — cleanup prunes stale database/logs snippets, keeps live ones, and preserves logs tabs when logs data isn't authoritative. ## Verification - `pnpm --filter studio typecheck` ✓ - `pnpm --filter studio run lint:ratchet` ✓ - `pnpm test:studio` (affected suites) ✓ <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a collapsible Logs section to the SQL editor sidebar for browsing, sorting, selecting, renaming, and deleting log queries. * Expanded SQL search with separate, paginated results for database and log queries. * Added dedicated log-query icons across navigation, tabs, previews, and recent items. * **Bug Fixes** * Improved tab and recent-item cleanup while preserving active log queries and accurate source metadata. * **Tests** * Added coverage for log tab cleanup and SQL source metadata synchronization. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
CharisandJoshen Lim
|
c16c7e94cc |
feat(studio): SQL editor logs source — toolbar UI + creation flow (#48452)
## What PR 6 of the SQL-editor "query source (Database vs Logs)" stack (builds on the merged PR 5, #48414). Adds the user-facing toolbar surface for the logs query source and consolidates the SQL-editor toolbar into a single **source menu**. Everything stays behind `sqlEditorLogsSource` + `otelLegacyLogs` (dual-flag gated); with the flags off the toolbar is unchanged. ## Changes - **Consolidated source menu** (`QuerySourceMenu`) — one `Database ▾` / `Logs ▾` dropdown that both labels the snippet's source and hosts the source-specific controls as flyout submenus: - Database: database selector (`Primary` / read replicas), `Run as` (role impersonation), and `Row limit`. - Logs: `Time range` — the same relative presets as the Logs Explorer plus a `Custom range…` calendar dialog. - **Source is immutable** — the Database/Logs rows aren't a toggle. An existing (materialized) snippet opens a *fresh* tab of the target source (never reinterpreting a query against the wrong backend); a blank new tab re-flavors in place. Extracted as the pure, unit-tested `resolveSourceSwitch`. - **New-snippet-with-source** threaded through `/sql/new?source=`, the nav "Create a new logs query" entry, and the duplicate flow. Logs snippets hide the (db-dialect) Export action. - **Run-affordance guard** — the Run button is disabled + annotated for a logs snippet on a non-ClickHouse org (sits above PR 5's execution short-circuit). - **Retention entitlement gating** — both preset and custom logs ranges past `log.retention_days` surface the upgrade prompt instead of applying silently. Prettify is disabled for logs (sql-formatter mangles ClickHouse). ## Tests - `querySource.test.ts` — `logDateRangesEqual` (structural relative/absolute matching, incl. the "Last hour" vs "Last 1 hour" label case). - `QuerySourceMenu.utils.test.ts` — `resolveSourceSwitch` push-vs-replace / no-op behavior. `pnpm --filter studio typecheck` · `lint:ratchet` · Prettier · SQL editor suite (307 tests) all green. ## For reviewers To test manually, enable the `sqlEditorLogsSource` feature flag for yourself on local/staging. There is no nav for Log SQL snippets currently (that is by design, this PR is big enough as-is), so to check an existing logs snippet, you can create one using the existing Logs Explorer, copy its UUID, and force navigate to that snippet in the SQL editor via URL. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added support for creating and switching between database and logs queries. * Added log time-range presets and custom date-range selection. * Added database, run-as role, and row-limit controls. * Added read-replica selection, including options to create a new replica when available. * **Improvements** * Added clearer explanations when query execution is unavailable. * Disabled SQL formatting and query export where unsupported for logs queries. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
cf7da58eb3 |
Add overview section for database connections (#48147)
## Context Building on top of "Database Connections" - this adds a top summary section, again from `pg_stat_activity` <img width="948" height="324" alt="image" src="https://github.com/user-attachments/assets/f4968193-0a5f-4754-a630-40685b747999" /> Each block comes with a tooltip in hopes to educate the significance of each metric - Connections: Spread of connections per database role <img width="313" height="164" alt="image" src="https://github.com/user-attachments/assets/8ceeab5d-b960-4be3-9a5b-8600bd5cf303" /> - Active queries: Rough representative of activity <img width="350" height="196" alt="image" src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674" /> - Idle in transaction: Important to identify as this indicates locks (Suggests root cause) <img width="350" height="196" alt="image" src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674" /> - Blocked queries: Also important to identify stuck queries <img width="335" height="183" alt="image" src="https://github.com/user-attachments/assets/57255fb8-24f6-4ddd-aa54-850a77173b5c" /> - Longest running query: Might be useful to identify unusually long queries - Will be `text-warning` if exceeds 30 seconds for active queries, `text-destructive` if exceeds 10 seconds for queries idle in transaction <img width="342" height="119" alt="image" src="https://github.com/user-attachments/assets/f6783b43-058a-4a32-a40c-0bc64f23d2ce" /> "Summarize activity" CTA leverages on the Assistant to give a quick overview - highlights any potential issues for quick reference <img width="1918" height="958" alt="image" src="https://github.com/user-attachments/assets/340121fe-3186-48a5-8023-fbac2a93397a" /> ## Other changes - Hides "View running queries" in SQL Editor if `topForPostgres` feature flag is enabled (since this UI is meant to replace that) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a Database Connections observability overview with metric cards (connections, longest-running, active, blocked, idle-in-transaction) and an interactive “Longest running” PID selector. * Added a “Summarize activity” AI assistant dropdown that starts a timestamped, activity-aware summary chat. * **Improvements** * Enhanced live activity refresh (including window-focus updates) and standardized duration warning thresholds for active and idle-in-transaction sessions. * Improved hover details for query previews and allowed richer tooltip content for metric labels. * **Feature Changes** * Gated the “View running queries” bottom panel behind a feature flag. * **Bug Fixes** * Refined running-too-long badge and warning styling for idle-in-transaction cases. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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> |
||
|
Charisandsupabase-autofix-bot
|
cdc2dc4e26 |
refactor(studio): import SQL editor store from source, delete facade + barrel (#47533)
## What Final PR of the SQL editor state re-layering stack. Removes the compatibility shims left in place during the migration: - Migrates all **23** consumers of the `@/state/sql-editor-v2` facade to import directly from `@/state/sql-editor/sql-editor-state`, where `useSqlEditorV2StateSnapshot`, `getSqlEditorV2StateSnapshot`, `useSnippets`, and `useSnippetFolders` actually live. - Deletes `state/sql-editor-v2.ts` (the facade) and `state/sql-editor/index.ts` (the barrel). Both re-exported the same symbols; nothing imports them after the migration. This collapses the two-layer re-export (`sql-editor-v2` → `index` → source) into direct source imports, matching the repo convention to avoid barrel re-export files. ## Notes - Pure import-path migration — no behavior change. All 23 consumers imported only value symbols that resolve to `sql-editor-state.ts`; none imported the `StateSnippet`/`StateSnippetFolder` types via the facade. - Symbol names keep their `V2` suffix for now — renaming `useSqlEditorV2StateSnapshot` etc. is a separate, larger churn best done on its own. - 25 files: 23 one-line import changes + 2 deletions (23 insertions / 39 deletions). ## Validation - `pnpm --filter studio typecheck` ✅ (confirms no dangling facade/barrel imports anywhere) - `pnpm exec vitest --run state/sql-editor/` ✅ (113 passed) - lint ✅ (0 errors; no ratcheted-rule regressions — a path swap can't add `any`/deps/nested-component violations, and no import-order rule is enforced) - grep confirms zero remaining `sql-editor-v2` references --------- Co-authored-by: supabase-autofix-bot <noreply@supabase.com> |
||
|
Gildas Garcia
|
b30db91d71 |
chore: cleanup UI patterns exports (#47406)
## Problem We now export components under a subpath in ui-patterns to avoid barrel files as they slow down every tools (from IDE to linters, etc.) and may also affect bundles our users have to download. ## Solution - Remove the UI patterns index file - Fix invalid impors |
||
|
Gildas Garcia
|
c6fc456910 |
chore: cleanup duplicate exports studio (#47387)
## Problem Knip reports many duplicate exports (both named and default). Besides, we're moving away from default exports and even have an eslint rule to enforce it on new code. ## Solution - Cleanup those exports - Update imports when necessary No functional changes. If it builds, it's fine |
||
|
ChloeGarciaMillerand
|
b1b29ad011 |
Fix: improve accessibility for icon buttons (#47214)
## 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? Bug fix (accessibility improvement) ## What is the current behavior? Icon-only buttons do not have explicit accessible names for screen readers. ## What is the new behavior? All icon-only buttons now have explicit accessible names using visually hidden text (sr-only), ensuring proper screen reader support. ## Additional context Tooltip text is preserved or added for visual users. No visual changes were introduced. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added hover tooltips across the database editor and SQL editor, including “More options” menus, table filter controls, and the “Create a new query” action. * **Accessibility** * Improved button accessibility by adding/expanding `aria-label`s for Intellisense, favorites (add/remove), and “Prettify SQL.” <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
16526bd6bf |
refactor(studio): extract SQL editor save mechanism + model folder lifecycle (4/9) (#47276)
## What
PR 4 of a stacked refactor of the SQL editor snippet/folder state. It
pulls the persistence logic out of the store into an injectable
mechanism, and replaces the folder `'new-folder'` id sentinel with an
explicit lifecycle — plus a concurrency bug fix that surfaced along the
way.
### Save mechanism (`sql-editor-save.ts`)
`createSaveMechanism({ state, upsertContent, createSQLSnippetFolder,
updateSQLSnippetFolder, invalidate, notify, debounceMs })` → `{
saveSnippet, createFolder, updateFolder }`. The store's subscribe now
dispatches to it; *when* to save still lives in the subscribe (the
scheduler/provider move is PR 5). Per-id debounce cache lives in the
factory closure (no module-global leak).
- **`saveSnippet`** reads the live store snippet, guards
`isLoadedSnippet` so a content-less snippet can **never PUT an empty
body** (directly unit-tested), then builds the payload + drives status
transitions + gated invalidation.
- **`toast` is injected** as a `Notifier` (new generic DI contract in
`lib/notifier.ts`) — the mechanism no longer imports sonner.
- **create vs rename are two named-arg functions**, not an `isNew`
branch; rollback is deterministic per operation instead of matching on
`error.message` text.
- **caught errors are `unknown`**, narrowed via the existing
`getErrorMessage` util with a generic fallback — no `any`.
### Folder lifecycle (replaces the `NEW_FOLDER_ID` sentinel)
- **`FolderStatus`** enum (`new_editing | new_saving | editing | saving
| idle`) collapses the persistence and progress axes into one enum —
same pattern as `SnippetStatus` — with `isNewFolder` / `isFolderEditing`
/ `isFolderSaving` predicates. Tagging a folder as new/persisted is now
an explicit field, not an id convention.
- New placeholders get a **unique local id** (`crypto.randomUUID`);
`NEW_FOLDER_ID` is deleted, which also lifts the accidental
one-unsaved-folder-at-a-time limit.
### Bug fix: folder-rename rollback race
The shared `lastUpdatedFolderName` field let two in-flight renames
clobber each other's rollback target (and a shared `finally` could wipe
it). Replaced by a **per-folder `previousName`** on
`StateSnippetFolder`, so concurrent renames of different folders are
isolated. A new test runs two failing renames concurrently and asserts
each restores its own previous name.
## Tests
`sql-editor-save.test.ts` (mechanism — fakes + fake timers, incl.
content-less no-PUT and concurrent-rename isolation) and
folder-lifecycle predicate tests. `pnpm --filter studio typecheck`
clean; 82 state/sql-editor unit tests pass.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Improved SQL editor folder handling with clearer create, rename, and
save states.
* Added a more consistent notification flow for successful and failed
save actions.
* **Bug Fixes**
* Improved rollback handling when folder renames fail, helping restore
the previous name reliably.
* Updated save behavior to better protect against duplicate or
out-of-order updates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Charis
|
d5653f1f92 |
refactor(studio): unify snippet save + persistence into SnippetStatus (3/9) (#47251)
## What PR 3 of a stacked refactor of the SQL editor snippet state. Replaces the two overlapping pieces of snippet lifecycle state — the `savingStates` map (`IDLE|UPDATING|UPDATING_FAILED`) and the `isNotSavedInDatabaseYet` boolean — with a single `SnippetStatus` enum. ## Status is attached at the data layer (never absent) - `SnippetStatus` + `SnippetWithContent` now live in `data/content`. The snippet queries attach `status: 'saved'` via a typed `withSavedStatus()` helper, and `upsertContent` returns `SnippetWithContent` so move/rename responses carry status too. - A SQL-typed `getSqlSnippetById`/`useSqlSnippetByIdQuery` returns `SnippetWithContent` (the generic `useContentIdQuery` stays for Reports, which use it). `[id].tsx` loads content with **no casting**. - `'new'` is attached on local creation (`createSqlSnippetSkeletonV2`). ## Behavior Behavior-preserving for the existing auto-save flow (faithful mapping of both old fields, including the replication-lag swallow). One incidental fix: the read-only/saving indicator now also covers a brand-new snippet's first save (previously only re-saves of persisted snippets had distinct saving/failed states in some paths). ## Tests New `sql-editor-lifecycle.test.ts` (29 tests) covering every predicate and transition; existing rules tests updated. `pnpm --filter studio typecheck` clean; 52 state/sql-editor unit tests pass. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Restructured SQL snippet persistence tracking, replacing boolean flags with a comprehensive status system for clearer visibility into save progress. * Enhanced saving indicator UI to reflect accurate snippet save states. * **Tests** * Added test coverage for snippet persistence state transitions and lifecycle scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
e1e2498db0 |
refactor(studio): extract SQL editor domain rules into pure module (2/9) (#47204)
## What PR 2 of a stacked refactor of the SQL editor snippet state. **Stacked on #47203 (PR 1)** — review/merge that first. Extracts scattered business rules + the upsert-payload builder into a new **pure** module `apps/studio/state/sql-editor/sql-editor-rules.ts` (no Valtio, React, toast, or runtime data-layer imports): - `canEditSnippet` — read-only rule (shared snippet you don't own), was inline in `MonacoEditor` `disableEdit` - `isSnippetOwner` — owner check, was inline in `ReadOnlyBadge` / `SavingIndicator` - `validateMoveToFolder` — 'shared snippet cannot be within a folder', was a buried `toast.error` - `buildUpsertPayload` — the PUT /content payload, was an inline object literal (all `??` defaults preserved) - `isLoadedSnippet` — type guard (see below) ## Bug fix: no more empty-content saves (and no non-null assertion) The old payload builder used `{ ...content!, content_id: id }`. Tracing that `!` upstream surfaced a real bug: **favoriting a snippet from the sidebar that had never been opened** enqueued a save with no loaded content, producing a PUT with an empty content body (rejected by API). The requirement that a persisted snippet has loaded content is now enforced **at the type level** rather than by a runtime assertion or comment: - `buildUpsertPayload` accepts only a `LoadedSnippet` (content non-nullable) — the `!` is gone. - the save subscriber crosses that boundary via the `isLoadedSnippet` type guard. - the sidebar favorite toggle loads content first (mirroring `onSelectDuplicate` / the share modals), narrowing the fetched union content to the SQL variant via its discriminant — **no type cast**. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved consistency in read-only behavior and ownership checks across the SQL editor by centralizing permission logic. * Fixed favorite toggle to ensure snippet content is fully loaded before persisting changes. * **Refactor** * Centralized SQL snippet permission rules and validation logic into a dedicated helper module. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas GarciaandIvan Vasilov
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Joshen Lim
|
aba4e147eb |
Joshen/fe 3613 database tables query should have schema filter wherever appropriate (#46935)
## Context There's certain areas in the dashboard where we're calling `useTablesQuery` without a schema filter, in which case the dashboard then fires a query against the project's database to fetch _all_ tables across _all_ schemas - this could easily be a heavy query if there's a large number of relations in the project's database. Am hence opting to either add a schema filter if appropriate, or otherwise opt to use the infinite loading behaviour ## Changes involved - Add schema filter to `useTablesQuery` in database triggers and publications - Use infinite loading for tables in Cmd K for "Run query on table" and "Search database tables" ## To test - [x] Verify that database triggers + publications still function as expected - [x] Verify that CMD K "Run query on table" and "Search database tables" still function as expected (including search) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Implemented debounced infinite-scrolling table search in the command menu and SQL editor command flow. * Added a schema selector dropdown to publications management for easier navigation. * **Improvements** * Removed the “Schema” column from the publications tables UI. * Updated search guidance and table-picker status (counts/loading) during infinite browsing. * Trigger table listings now follow the selected schema context. * Refined command menu list height and improved the database-tables placeholder text. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
be56096ea7 |
fix(studio): prevent SQL editor TreeView crash when an expanded folder leaves the tree (#46595)
## Problem Sentry [SUPABASE-APP-J7C](https://supabase.sentry.io/issues/7492405004) — `Error: Node with id=new-folder doesn't exist in the tree.` (328 events / 280 users). Crashes the SQL editor. ## Root cause `react-accessible-treeview` throws when an id is dropped from the controlled `expandedIds` prop in the same render its node leaves the tree data — its collapse effect calls `getTreeNode(data, id)` on a node that's already gone. The prior fix (`8bcb878a01`) reactively filtered `expandedIds` against the live tree, which is exactly what produces that simultaneous drop when a `new-folder` placeholder (or any expanded folder) is removed. ## Fix - Guard additions: only expand folder ids that exist in the tree. - Tolerate stale ids: pass `expandedFolderIds` as-is instead of the reactively filtered list, so we never create a "removed" delta for a node that's already gone. Stale ids are harmless — the library only inspects the add/remove delta. ## Reproduction (to verify the fix) 1. Open the SQL Editor for a project. 2. Create a folder and add a snippet into it. 3. **Expand** the folder. 4. Right-click the folder → **Delete folder** (confirm). 5. Before: the editor crashes with `Node with id=... doesn't exist in the tree.` After: no crash. Fixes SUPABASE-APP-J7C <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved stability of private snippet folder expansion in the SQL editor: auto-expansion now respects the current snippet tree state to avoid unexpected collapses or visual glitches in the folder tree. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
5fdff9707f |
chore(studio): improve download snippet dialog (#46242)
## What kind of change does this PR introduce? Chore: component migration and copy update. ## What is the current behavior? `DownloadSnippetModal` and `RenameQueryModal` use an awkward tabs-based layout. The download action is labelled "Download" throughout, and the NPX toggle was incorrectly labelled "NPM". ## What is the new behavior? - Both modals are migrated to the `Dialog` component. - The download dialog replaces the tab layout with a select (Migration / Seed file / SQL file) and a CLI/NPX toggle. - Action language changed from "Download" to "Export" (context menu item, dialog title, select label) — more accurate since the user runs a CLI command rather than triggering a browser download. - NPM toggle label corrected to NPX; internal `npm` property key renamed to `npx` for consistency. | Before | After | | --- | --- | | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-C6F22F8B-19FF-486E-8C08-915895495875" src="https://github.com/user-attachments/assets/98637802-5e05-4431-87f8-b2e83216082a" /> | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-5B63AD0C-7CD0-4BB2-BEC8-5DBAE94963CE" src="https://github.com/user-attachments/assets/a8f48c2f-a7e2-42fd-b52c-89a133811ad8" /> | | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-1F28FADA-46D1-4C0A-BE96-6CFF2317FDCF" src="https://github.com/user-attachments/assets/afb904d0-689b-4756-b0b4-8177703934e4" /> | <img width="1024" height="759" alt="Add Auth Hook (General) SQL Editor Pickles Pantry Supabase-652E6E8D-1CD2-4465-BC82-46EDB974CD8C" src="https://github.com/user-attachments/assets/f1adfb6b-fba6-495f-b571-1713c3eebb4d" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated the SQL query export modal UI from a tabs-based interface to a dropdown-based selection for choosing export formats. * Revised menu and dialog labels to "Export query" for improved clarity. * Enhanced code block presentation in the export modal. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46242?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: Gildas Garcia <1122076+djhi@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
Gildas Garcia
|
11cc376947 |
chore: migrate SQL editor Modal to Dialog (#46228)
## Problem SQL Editor still uses the deprecated `Modal` for: - renaming queries - downloading snippet ## Solution - use `Dialog` instead <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated modal dialog implementations across the SQL Editor to use modern UI standards, improving code quality and maintainability. * Refined state management for query-related modal operations including downloads and renaming to ensure consistent and reliable user interactions. * Streamlined dialog structure and behavior patterns to reduce code complexity and improve overall consistency in the SQL Editor interface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46228?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 --> |
||
|
|
c721e8fa8f |
chore(studio): rename SQL Editor sidebar items (#46241)
## What kind of change does this PR introduce? Chore. Rename / UX copy update in Studio's SQL Editor. ## What is the current behavior? The SQL Editor sidebar has a **Community** section containing two pages: - **Templates**: reusable SQL snippets for common tasks - **Quickstarts**: end-to-end examples and starter projects The section label "Community" is misleading because these are first-party presets maintained by the Supabase team, not user-contributed content. "Quickstarts" also doesn't clearly convey "end-to-end example". ## What is the new behavior? - **Community** → **Reference** (sidebar section header) - **Quickstarts** → **Examples** (route: `/sql/quickstarts` → `/sql/examples`) - Templates keeps its name and route (`/sql/templates`), description updated to "Reusable SQL snippets for common tasks" Taxonomy: - **Templates** = reusable SQL patterns you adapt - **Examples** = end-to-end walkthroughs you run as-is A permanent redirect is added so `/sql/quickstarts` gracefully forwards to `/sql/examples`. The existing `/sql/templates` route is unchanged. | Before | After | | --- | --- | | <img width="1024" height="759" alt="Quickstarts SQL Editor Pickles Pantry Supabase-644881A5-6396-43AA-9AC4-61FFFFF18831" src="https://github.com/user-attachments/assets/ff876c78-c499-4bac-b1ae-91e31817511d" /> | <img width="1024" height="759" alt="Examples SQL Editor Pickles Pantry Supabase-573775FA-E38F-4F8D-92E3-114237410C36" src="https://github.com/user-attachments/assets/bdb8910f-94e9-4c21-bb3a-f6513008d8bc" /> | ## Additional context - `CommunitySnippetsSection.tsx`: header label + route keys updated; the underlying `community` localStorage key is intentionally unchanged to avoid resetting stored collapsed/expanded state for existing users. - ESLint rule baselines and a docs troubleshooting link updated to reflect the new filenames/routes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated troubleshooting guide to reference the correct SQL examples location. * **New Features** * Renamed "Quickstarts" to "Examples" throughout the SQL editor for improved clarity. * Updated SQL template and examples section descriptions and labels to better reflect their purpose. * Reorganized SQL editor navigation to streamline access to templates and examples. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46241?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: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Gildas Garcia
|
243e079a2c |
chore: remove _Shadcn_ suffix from Command components (#46153)
## Problem The `_Shadcn_` suffix isn't needed anymore on `Command` components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports - Apply prettier <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Simplified command component imports and exports across the UI library by removing internal naming aliases and adopting direct component references. Updated the public UI package barrel export to use wildcard re-exports for cleaner API surface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 --> |
||
|
Gildas Garcia
|
224dbb09bb |
chore: rename CommandMenu internal components to avoid conflicts with base shadcn ones (#45996)
## Problem The `ui-patterns/CommandMenu` exposes internal components that have the same names as the base shadcn components they wrap. This create confusion about which one to use and forces us to expose the base ones with the `_Shadcn_` suffix. ## Solution Rename those internal components to have `CommandMenu` in their names to make it clearer they are meant to be used with `CommandMenu`. We will then rename the shadcn base ones to remove the suffix. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Refactor * Standardized Command Menu component naming across the design system for improved consistency and clarity. Updated component names: `CommandInput` → `CommandMenuInput`, `CommandList` → `CommandMenuList`, `CommandItem` → `CommandMenuItem`, `CommandEmpty` → `CommandMenuEmpty`, and `CommandGroup` → `CommandMenuGroup`. Updated public API exports, internal subpath references, all examples within the registry, and implementations across documentation, studio, and application interfaces. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45996) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4e86c39ea1 |
chore: remove <ContextMenu> _Shadcn_ suffix (#45971)
## Problem The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>` and related components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced legacy context-menu component variants with the unified UI context-menu components across the app for consistent rendering and imports; behavior and menu content remain unchanged. * **Tests** * Updated a test mock to track the unified context-menu component mount count. * **Chores** * Simplified UI package re-exports to expose the canonical context-menu symbols. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
207f812878 |
fix: SQL Editor private queries empty state CSS bug (#45963)
## Screenshots Before: <img width="258" height="312" alt="image" src="https://github.com/user-attachments/assets/998609fa-bf39-4ff9-a9c5-9b7018d6a5a3" /> After: <img width="258" height="381" alt="image" src="https://github.com/user-attachments/assets/23d7d8f7-e3ab-4737-8c3f-25f5995c1880" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved the layout and spacing of the empty private queries sidebar placeholder in the SQL editor. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45963) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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. [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45844) <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
0433eeb5f5 |
feat(studio): mark sql provenance for safety (#45336)
Mark provenance of SQL via the branded types SafeSqlFragment and UntrustedSqlFragment. Only SafeSqlFragment should be executed; UntrustedSqlFragments require some kind of implicit user approval (show on screen + user has to click something) before they are promoted to SafeSqlFragment. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Editor and RLS tester show loading states for inferred/generated SQL and include a dedicated user SQL editor for safer edits. * **Refactor** * Platform-wide SQL handling tightened: snippets and AI-generated SQL are treated as untrusted/display-only until promoted, improving safety and consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan VasilovandJordi Enric
|
56de26fe22 |
chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> |
||
|
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. |
||
|
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 |
||
|
Ali Waseem
|
3cb440e844 |
fix(studio): fix multiple Sentry errors (#44715)
## Summary - [**SUPABASE-APP-E2R**](https://supabase.sentry.io/issues/SUPABASE-APP-E2R): Guard against undefined entries in notifications array in `AdvisorButton` (optional chaining on `.some()` callbacks) - [**SUPABASE-APP-EBA**](https://supabase.sentry.io/issues/SUPABASE-APP-EBA): Remove render-time `handleError()` throw in `useEdgeFunctionsDiff` — the hook already handles missing body data gracefully - [**SUPABASE-APP-BVN**](https://supabase.sentry.io/issues/SUPABASE-APP-BVN) / [**SUPABASE-APP-BTV**](https://supabase.sentry.io/issues/SUPABASE-APP-BTV): Guard `localStorage` access in `FeaturePreviewContext` with try-catch, matching the established pattern in `useLocalStorage.ts` (Safari private browsing) - [**SUPABASE-APP-AV3**](https://supabase.sentry.io/issues/SUPABASE-APP-AV3): Filter stale folder IDs before passing `expandedIds` to `react-accessible-treeview` in the SQL editor nav ## Test plan - [x] Verify AdvisorButton renders without errors when notifications data has sparse pages - [x] Verify branch merge page loads when edge function body fetch fails - [x] Verify feature previews initialize correctly in Safari private browsing - [x] Verify SQL editor folder expand/collapse works after deleting a folder <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Feature preview now falls back safely when browser storage is unavailable * Notifications display updated to tolerate missing entries without errors * Private snippets navigation no longer preserves expansion state for removed nodes * **Refactor** * Streamlined error aggregation in edge functions diff processing <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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> |
||
|
Ivan Vasilov
|
ee8eae7309 |
chore: Clean the ui package from next imports (#44278)
This PR moves several components which rely on `next` out of the `ui` package to the `ui-patterns` package. `ui-patterns` package is intented to be imported with specific imports so it's ok if there are components reliant on `next` in there. The `SonnerToaster` component has removed its dependency by requiring a prop for `theme`. |
||
|
Ivan VasilovandJoshen Lim
|
9fa96977be |
chore: Minor prettier fixes (#43849)
This PR fixes some prettier issues: - Bump and unify all prettier versions to 3.7.3 across teh whole repo - Bump the SQL prettier plugin - When running `test:prettier`, check `mdx` files also - Run the new prettier format on all files --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Ali Waseem
|
1890624a1a |
fix: add missing keys to studio (#42957)
## 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? Cleanup from React Doctor! Components missing keys |
||
|
Danny White
|
e96199081b |
feat(studio): show SQL snippet description (#42090)
* show browser title * show both name and desc * cleanup * linebreak and format |
||
|
Francesco Sansalvadore
|
5213e681b4 | feat(studio): add "create" command menu commands (#41473) | ||
|
Ivan Vasilov
|
f3af2c3d3c |
feat: SQL Snippets (#41112)
* Use the .sql suffix when generating ids. * Fix a bug where a new snippet would not show up in the snippet list until refresh. * Add API routes which serve file snippets. * Refactor the renameSnippet and moveSnippet to work with file snippets. * Change the link to the SQL Editor. * Minor fixes from CodeRabbit. * Check the file/folder name for invalid chars. * More fixes from CodeRabbit review. * Fix minor issues. * Use zod to parse the snippet ids when deleting. * Try to fix snyk issue. * Add validation to the GET content index route. * Minor fixes. * Show create a new folder, it was hidden by mistake. * Add SNIPPETS_MANAGEMENT_FOLDER env var. * Add snippets folder in the docker-compose. * Add error toasts if the env var is not set. * Add snippets management folder to the generateLocalEnv script. * Revert the docker-compose changes, will be done in a followup PR. * Revert also the snippets volume folder. * Remove unneeded line. |
||
|
Ivan Vasilov
|
cc47bcfa6d |
chore: Migrate studio to use ui-patterns/shimmeringLoader (#41405)
* Add shimmering-loader CSS to ui-patterns. * Import the shimmering-loader classes from the ui-patterns component. * Remove ShimmeringLoader from studio. * Migrate studio to use ui-patterns/ShimmeringLoader. * Migrate away from using default import for ShimmeringLoader. * Fix the css imports in docs and studio. |
||
|
Ivan Vasilov
|
539d5a31fb |
fix: Sort the folders in the SQL Editor (#41386)
* Sort the folders according to the selected sort approach. * Minor fixes. * Minor fixes and clarifications. * Remove a useEffect dep. |
||
|
Ivan VasilovandJoshen Lim
|
5fb5acc0b9 |
chore: Refactor the generation of ids for snippets (#41264)
* Add a generateDeterministicUuid function and tests for it. * Use the new function and generate an id automatically when creating a snippet. * Clean up extra code. * Don't pass in id when creating a snippet. * Add generateSnippetTitle function and use it instead of fixed string. * When SQL editor is open, generate an id form a generated snippet title. * Add id override for SQL editor to avoid flash when saving the snippet. * Merge the two generate functions to happen in the same useMemo block. * Save the snippet to the API when adding it. * Minor fixes from CodeRabbit review. * Hide new folder CTA in sql editor for self-hosted * Don't add the snippet for saving, just set the value. * UpsertContentPayload always has an id. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Ivan Vasilov
|
581ae07120 |
fix: Hide favourites and share snippets on self-hosted variant (#41227)
* Hide favorite and share actions for self-hosted version. * Rename the query on save only on platform. * Simplify useCheckOpenAiKeyQuery. * Rename with AI now depends if the OPENAI_API_KEY is set. * Minor fixes. * Fix the tests to use .skip for skipping tests. Remove extra port params. * Make the test for favourites work only on platform variant. |
