mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
docs/debugging-guide
917
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Joshen Lim
|
944c5862f3 |
Chore/small refactors (#47740)
## Context Just extracting the fixes which I think are applicable from this [PR](https://github.com/supabase/supabase/pull/47695) Main files are - `apps/studio/hooks/analytics/useLogsQuery.tsx` - `packages/common/auth.tsx` - `packages/common/feature-flags.tsx` ## Changes involved - Adjust `useLogsQuery` to accept an object as prop, rather than 4 individual params - This one doesn't address any Sentry issues, but is just a improvement to the function's API imo, more readable - Adjust how user email is retrieved in `feature-flags` - Related Sentry issue [here](https://supabase.sentry.io/issues/7592718607/?project=5459134) - The error is a bit vague, but Claude's attempt to fix looks alright in general IMO - Minimally verified that feature flags are loading as expected still <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved log-related screens and queries for more reliable loading and filtering across the app. * Fixed profile and account data handling so identity details are retrieved more consistently. * Improved authentication handling to better recognize missing user data and keep the app stable. * Updated feature flag personalization to use more accurate account information. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen LimandAli Waseem
|
0421b1001d |
Flip show tooltip to true for supavisor connections chart (#47730)
## Context Realised that tooltips were not showing up for supavisor charts in database reports - just needed to flip a boolean Although - i don't have any projects with supavisor connections data (even on prod) so I can't visually verify this atm Also fixes a small issue in which docs url for the chart wasn't showing if the chart had no data, e.g: <img width="996" height="311" alt="image" src="https://github.com/user-attachments/assets/926febe4-9e3d-4975-9278-e7582d6ae12d" /> Should have docs button like this <img width="949" height="351" alt="image" src="https://github.com/user-attachments/assets/7561c1c5-94ae-405b-bd54-6bc94be0dd0a" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Enabled tooltips for the “Shared Pooler (Supavisor) client connections” chart so the metric can be inspected directly. * **UI Improvements** * Adjusted the tooltip positioning in the chart header for clearer readability. * When charts have no data, the “Learn more”/documentation link now follows the provided docs URL. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Carel de WaalandAlaister Young
|
0acc0eb8b3 |
feat: Support Form - Sync AI assistant conversation to Front (#46778)
# Sync AI assistant conversation to Front ## What & why When a user submits a support ticket, an AI assistant chat opens so they get help immediately while waiting for a human agent. This PR mirrors every turn of that chat into the Front conversation the support form already created, so the support team sees the full context and Front automations (routing, emails, CSAT) can act on it. Studio holds no Front credentials — it calls the platform endpoints (see the platform PR) to do the syncing. The assistant card is gated behind the `supportAssistantFollowUp` ConfigCat flag. ## How it works 1. **Submit** — `SupportFormV3` generates a stable `threadRef` (via the `uuid` package — `crypto.randomUUID()` is `undefined` in insecure contexts like non-localhost HTTP and would throw, silently aborting the submit) and sends it on `/platform/feedback/send`. The response returns the Front `conversationId`. Both are stored on `SubmittedSupportRequest`. 2. **Open chat** — `SupportAssistantSuccessCardContent` opens a chat seeded with `supportMetadata` (`threadRef`, `frontConversationId`, subject, category, severity, …). The first message is a `<support>…</support>` XML block. 3. **First user message** — the chat is tagged `isSupportChat = true`; the `onFinish` hook fires `syncSupportChatToFront`. 4. **Subsequent turns** — each `onFinish` slices the unsynced delta, strips the XML metadata block from the seed message, and posts to the platform messages endpoint. 5. **Escalation / resolve** — the `escalate_to_human` / `resolve_support_conversation` tools (and manual **Escalate**/**Resolve** buttons in the assistant input) flip lifecycle status via `setSupportLifecycleStatus` → `syncSupportLifecycleToFront`, which calls the escalation/resolve endpoints. Front rules act on `ai_support_status`. The assistant only resolves after the user explicitly confirms the issue is fixed. ## Key design decisions - **`threadRef` as the shared key** — one UUID travels as `threadRef` on submit and as `chatId` on every sync, so all messages thread into a single Front conversation. - **`conversationId` from the form response** — passed to all sync/lifecycle calls so the platform skips lazy derivation and PATCHes custom fields directly. - **Delta-only sync** — `lastSyncedMessageCount` tracks what's been sent; the boundary is snapshotted before the async call to avoid skipping messages that arrive mid-flight. - **Server-side de-dup** — stable `external_id` (`chatId:msg.id`) means retries don't duplicate in Front. - **Fire-and-forget** — sync failures log to Sentry, never break the chat; `isSyncing` resets on rehydration so the next `onFinish` retries the same delta. Message and lifecycle syncs use separate guards (`isSyncing` / `isLifecycleSyncing`) so an in-flight message sync can't drop an escalate/resolve. - **Lifecycle queued until the conversation exists** — if a lifecycle transition is requested before the initial message sync has returned a `frontConversationId`, it's stored as `pendingLifecycleStatus` and flushed once the id is assigned, rather than dropped. - **Tools return immediately** — the lifecycle tools return a stub to the AI SDK; the real Front call happens in `onFinish`, keeping async I/O out of the tool execute path. - **XML seed stripped before sync** — only the user's actual `<message>` is sent to Front (or dropped entirely if the form already created the conversation). ## Changes | Area | File(s) | | --- | --- | | Support form state | `SupportForm.state.ts` — `threadRef` / `frontConversationId` on `SubmittedSupportRequest` | | Support form submit | `support-ticket-send.ts` — sends `threadRef`, reads `conversationId` | | Support form UI | `SupportFormV3.tsx` — generates `threadRef`, stores `conversationId` | | AI assistant state | `ai-assistant-state.tsx` — `SupportChatMetadata`, `setSupportLifecycleStatus`, `onFinish` wiring, tool handling | | Message sync | `state/ai-chat-front-sync.ts` — delta tracking, message filtering, initial vs. incremental | | API data layer | `data/feedback/ai-chat-front-sync.ts` — typed platform-client wrappers for the three conversation endpoints | | Support tools | `lib/ai/tools/support-tools.ts` — `escalate_to_human`, `resolve_support_conversation` | | Tool integration | `lib/ai/tool-filter.ts`, `tools/index.ts`, `generate-assistant-response.ts` | | Success card | `SupportAssistantSuccessCardContent.tsx` — tags chat on first engagement | | Assistant panel UI | `AIAssistant.tsx` — Escalate/Resolve buttons, disabled input on closed chats, support placeholders | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Support chats now include “Escalate to human” and “Resolve” actions. - Support submissions can be associated with a stable Front thread via a generated `threadRef`, preserving linkage across follow-ups. - AI assistant responses and input hints adapt when support mode is active. - **Bug Fixes** - Improved support chat state management and lifecycle handling to keep conversation metadata and message history synchronized more reliably with Front. - **Chores** - Added/updated coverage to reflect the new support-chat state and syncing behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Gildas Garcia
|
0eeeb758d8 |
fix: homepage accessibility fixes (#47729)
## Problem On the organization home page: - you can't tab to a project card and navigate to the project - the status filter popover cannot be open with keyboard - the feedback popover cannot be open with keyboard ## Solution - make the project card (which is a link) accessible with Tab - fix the popover trigger buttons <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved keyboard accessibility so project cards can be focused with Tab navigation. * Updated dropdown and filter popover trigger wiring for more consistent click behavior. * Reset the feedback flow to its starting step whenever the trigger is clicked. * **Bug Fixes** * Made the home icon link explicitly focusable via keyboard navigation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
18431efb25 |
fix(studio): TanStack post-merge fixes — Monaco loader, fonts, CSP (from #46424) (#47657)
Post-merge fixes for the TanStack Start migration (#46424) — things that broke on the TanStack build as master evolved under the migration branches. Kept on their own branch off master rather than piling onto the E2E-matrix PR (#47119); all land on master and cascade up to S6 + the big PR. Common theme: a master PR changed something the Next pipeline handles via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the hand-rolled TanStack equivalent (`routes/__root.tsx`, `styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on the Next deploy, broken only on TanStack. --- ## 1. Monaco loader path (#47182) #47182 re-nested the served Monaco assets from a flat `public/monaco-editor/` layout into `public/monaco-editor/vs/` and updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed `loader.config` at the old path, so `loader.js` 404'd and **no Monaco editor mounted anywhere in the TanStack build**. Now mirrors the Next config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for SSR). Was failing the whole `tanstack` E2E shard on #47119. ## 2. Inter + Manrope fonts (#47306) #47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and added `--font-heading` (Manrope), set via `next/font` on Next. `fonts.css` still only set the now-ignored `--font-custom`, so the body fell back to the theme's system chain (`Circular, custom-font, Helvetica…`) at weight 450 — that's the "Inter weights look wrong". Manrope was missing entirely. - Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match `next/font`. - **Vendor all three families** (Inter, Manrope, Source Code Pro) via `@font-face` so nothing depends on the Google Fonts CDN — matches `next/font` self-hosting, and (see below) `font-src` doesn't allow `fonts.gstatic.com` anyway. Verified in-browser: computed `body` → `Inter`, headings → `Manrope`, all loading from local `/assets/*.woff2`. ## 3. Security headers / CSP (next.config.ts `headers()`) The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS / **Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The TanStack build never carried these over — `vercel.ts` only set cache-control, so **the deployed TanStack dashboard shipped with no CSP at all**. The TanStack deploy serves a static shell (no server to attach headers), so they go in the Vercel config: - `security-headers.ts` — shared source of truth, reuses `getCSP()`, env-gated exactly like next.config. - `vercel.ts` — apply to every response (all base-path prefixes): full `getCSP()` + HSTS on platform. - `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`) for the self-hosted server. **Tested the policy in a real browser** (temporarily enforced it on the TanStack build via /test-supabase-local): everything passed except one real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco codicon font and Stripe's payment-element fonts (both data: URIs) were blocked (37 violations on a cold load). Added `data:` to `font-src` in `csp.ts` → violations drop to zero, SQL editor Monaco renders clean. That gap affects the Next build too. --- ## 4. `node:path` import crashing `/project/[ref]/merge` Found by a full-site click-through of the TanStack build (all product areas, ongoing — see below). `useEdgeFunctionsDiff.ts` + `EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in client code. Webpack (Next) polyfills `path` in the browser; Vite externalizes it, so the whole `/merge` route crashed with "Module \"path\" has been externalized for browser compatibility". Replaced the two `basename` call sites with a string helper. Verified in-browser: `/merge` renders. ## 5. URL shape — Next-style search-param semantics + shim fixes The dashboard produced malformed URLs vs the Next build (strange query params, trailing slashes, `##` hashes). Root cause + audit verified empirically against `@tanstack/react-router@1.170.10`; all fixed with unit tests and browser-verified: - **`createRouter` used TanStack's default JSON search codec** — `?flag=true` became `?flag=%22true%22` via links, repeated `?filter=…&filter=…` collapsed into a JSON array (breaking multi-filter/sort table-editor URLs and the account-page round-trip, which double-encoded), and search values arrived as numbers/booleans where the app expects strings. New `lib/router-search-params.ts` (Next-style: strings in, strings out, repeated keys → string[]) wired into the router. - **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the leading `#` while TanStack's `hash` prop adds its own → every `href="…#section"` navigated to `##section` (hash-scroll broke); `Object.fromEntries(searchParams)` dropped repeated query params. Both fixed. - **Trailing slash injected before the query** on every `?`-only relative navigation (`/auth/providers/?provider=…`): fixed in the compat router (prefix current pathname) and via a custom nuqs adapter (`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack behavior (123 files use nuqs). - **Pathname-less `router.push({ query })` leaked path params** — Next re-consumes `ref`/`id` from `query` into the path pattern; the shim didn't, yielding `/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from table-editor filter/sort, linter panels, and advisor shortcuts. The shim now defaults the pathname to the current route pattern and backfills omitted params. - **Redirects dropped query + hash** (Next's `redirects()` preserves them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry incoming params/hash through (consumed rule params excluded, destination's own params win). `/?next=new-project&projectName=zzz` → `/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` → `/sql/examples?template=x#frag`. Browser-verified post-fix: advisors `?preset=WARN`, providers `?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks); repeated `filter` params survive hydration; `=true` unquoted; single `#`. ## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL newline loss) TanStack router-core treats a query string embedded in `navigate({ to })` as part of the *path*: `decodePath` percent-decodes it and `sanitizePathSegment` strips control characters, silently deleting every `%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload — `order by timestamp desc` / `limit 5` glued into `desclimit 5`, which then failed the LIMIT lint. Pre-existing on the TanStack build (the stock nuqs adapter had the same shape); Next unaffected. Fixed by never embedding query strings in `to`: the nuqs adapter and the compat `router.push`/`replace`/`prefetch` (plus the `next/navigation` shim) now pass search as an object through the app codec (`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives a real `createRouter` with multi-line SQL through both producers. Browser-verified: newlines survive the full Run → reload → re-Run cycle. ## 7. Integration overview markdown never loaded (all integrations) `MarkdownContent` used a template-literal dynamic import (``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack builds a context module for that, Vite can't analyze it, so every integration detail page threw `Failed to resolve module specifier` and rendered no overview text. Fixed with an explicit lazy registry of literal imports (`static-data/integrations/overviews.ts`, drift-guarded by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's turbopack raw-loader rule. Both runtimes keep working; md stays out of the main bundle. ## 8. GraphiQL editor never mounted (`exports is not defined`) Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global AMD loader for deps like papaparse) rewrote `typeof define === 'function' && define.amd` to `false` inside `monaco-editor`'s bundled copy of marked — whose UMD relies on its own *local* `define` shim — so the whole optimized monaco chunk failed to evaluate and GraphiQL's editor pane stayed blank. The check now only short-circuits when `define` is the global AMD loader. Browser-verified: all four GraphiQL Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco workers fall back to the main thread under Vite — functional, worker wiring is Next-specific `setup-workers/webpack`.) ## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle crashed (caught by E2E) The E2E suite against the **built** TanStack bundle (not the dev server) found lazy chunks like `table-editor-*.js` dead on arrival: `@sentry/nextjs` (imported by ~25 client files) drags in `next/dist/shared/lib/constants`, whose module scope evaluates `process?.features?.typescript` — optional chaining doesn't guard an undeclared `process` in the browser, so the whole chunk failed at load with `ReferenceError: process is not defined`. Dev shims `process`, which is why weeks of dev-server testing never saw it. Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts` (re-exports `@sentry/react`, same deduped 10.59.0, plus explicit stand-ins for the three Next-only APIs) in the Vite build only. Verified: fresh build has zero Next-internals markers in any chunk; table editor loads clean; full E2E suite run against the built bundle. Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch already carried a different fix for the same crash (a `next/constants` shim) that never made it to master — the cherry-pick onto those branches keeps **both** (the shim covers any other transitive importer; the alias keeps Next internals out of the client bundle entirely). **Follow-up found while fixing:** Sentry is never *initialized* in the TanStack runtime — `instrumentation-client.ts` / `sentry.server.config.ts` are Next-convention files nothing imports under TanStack, so `captureException` calls are silent no-ops. Needs an `@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired into the TanStack client entry as its own PR. ## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only gaps) - **GraphiQL's Monaco workers ran on the main thread** under Vite ("Could not create web worker(s)…" — `setup-workers/webpack`'s `new URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()` plugin resolves the import to graphiql's own `setup-workers/vite` variant for client builds (SSR untouched, Next untouched); the setup-workers chain is `optimizeDeps.exclude`d because the Rolldown optimizer can't load `?worker` ids. - **Edge-function editors silently lost their Deno typings** — `AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports that always failed at runtime under Vite. The `.md` raw loader is generalized into `rawTextLoader` (exact-path allowlist for the two typings files, served as virtual string modules so the dep scanner never parses `.d.ts` syntax), and the imports are now static-analyzable literals that both bundlers handle (turbopack's raw-loader rules match them on the Next side). ## Split out for reviewability App-level fixes that reproduce on the Next build too (DOM-nesting hydration errors, the ghost deleted-snippet nav, the recurring pg-meta `migrations` 400) moved to their own PR: #47667. Sentry initialization for the TanStack runtime (captures were silent no-ops) is #47666, stacked on this PR. ## Full-site test campaign Drove every dashboard product area on the local TanStack build (Playwright, human-style) hunting migration regressions: redirects/404/catch-alls, org, account, project home/branches/merge, table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all database pages, all auth pages, storage CRUD, edge functions + realtime, logs/observability, advisors, settings, integrations hub incl. nested routes, global UI (palette/connect/switchers/theme/fonts), and a cross-cutting sweep (document titles, back/forward chain, hard-refresh hydration on deep URLs, trailing-slash active state). Every failure found is fixed above and re-verified in-browser; remaining console quirks were cross-checked against the deployed Next build and are pre-existing (tracked separately). ## To test Most fixes are already browser-verified + covered by unit tests and the self-hosted E2E suite; the last two landed after the final browser pass and still need an in-browser check: 1. **GraphiQL Monaco workers** — restart the dev server (clear `apps/studio/node_modules/.vite` once first — the optimizer cache may hold a stale prebundle of the worker chain). Open `/project/<ref>/integrations/graphiql/graphiql` with the console open: the `Could not create web worker(s). Falling back to loading web worker code in main thread` warning must be gone, and DevTools → Sources → Threads shows the three workers (json, editor, graphql). Autocomplete in the query editor stays responsive. 2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no "Failed to load … typings" console error, and typing `Deno.` in the editor offers typed completions (e.g. `Deno.env`). Spot-checks for the rest (all previously verified): - `/project/<ref>/merge` renders (no "Module path" crash). - Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit` gluing, no LIMIT-lint false failure); `s` param keeps `%0A`. - `/auth/providers` → open a provider → `?provider=…` with no trailing slash before `?`; table-editor filter/sort URLs carry no leaked `ref`/`id` params; `/?next=new-project&projectName=x` lands on `/new/new-project?projectName=x`. - Integration detail pages (cron/queues/vault/data_api) show their overview prose; GraphiQL query editor mounts. - Built bundle (`MODE=test vite build` + `start:tanstack`): table editor loads with no `process is not defined`. - `curl -sI` any page on a platform deploy: `X-Content-Type-Options: nosniff` (was the invalid `no-sniff`). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Centralized integration overview markdown loading with registry-based lookup. * Improved Monaco loading/asset path handling for smoother editor startup. * **Bug Fixes** * Next-style navigation/search handling now preserves pathname, hash, repeated query keys, and special characters (including newlines). * Redirects now reliably carry over query and hash with correct precedence. * **Security/Configuration** * Updated CSP font sourcing and unified security headers delivery across environments; conditional HSTS behavior. * Refreshed font CSS variables and font-face definitions to match the theme. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --- ### Review feedback: non-prod favicon (Joshen) The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted staging now use the white staging favicon (`/favicon/staging`), matching what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod. Rather than pull the pages-router component into the TanStack head, it reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option isn't a React component, so it can't run `_app`'s async CLI check — but the env signal covers the reported local/staging case). --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
511a7806de |
Joshen/fe 3789 unified logs filters click area is too small (#47675)
## Context Increases the click area of unified logs filter ### Before <img width="1070" height="828" alt="image" src="https://github.com/user-attachments/assets/7e2a45de-7844-4feb-accb-fdaecfa1066c" /> ### After <img width="623" height="130" alt="image" src="https://github.com/user-attachments/assets/c8310975-1f2f-42dc-aaff-fdcd112b1bee" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved spacing and alignment in filter checkbox rows. * Adjusted the expand/collapse control and “only” button positioning for a cleaner layout. * Refined nested option connector placement and sizing for better visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jordi Enric
|
bac4814123 |
fix(logs): color regressions from design system update (#47676)
## Summary - Fix unreadable "Large ranges may result in memory errors" warning text in the Logs date picker — a stray `text-warning-foreground` class (dark ink) was winning over `text-warning` on the dark `bg-warning-300` fill. - Fix "Search collections..." sidebar wrapper background mismatch — `bg-background-200` now resolves to the elevated `--card` surface instead of `--background`, so it no longer matches the sidebar's `bg-dash-sidebar`. - Fix the Unified Logs "Live" toggle button rendering blue text instead of white when active — a leftover `border-info text-info` override was fighting the `primary` variant's own text color, now that `--info` resolves to a more distinct blue. All three are contrast/color regressions surfaced by the recent design-system color token changes. ## Test plan - [ ] Open a project's Logs Explorer, pick a large date range, confirm the warning text is readable - [ ] Check the Logs sidebar "Search collections..." box background matches the rest of the sidebar in both light and dark mode - [ ] Toggle "Live" mode in Unified Logs and confirm the button text is white/legible on the green background <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the large-range warning banner appearance in Logs settings. * Refined the Logs sidebar header background styling for a more consistent look. * Simplified the DataTable live button styling behavior by removing conditional class composition while preserving the existing live-mode visuals. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
484726a45c |
fix(studio): warning colours broken in light mode after colour migration (#47660)
## What kind of change does this PR introduce? UI bug fix ## What is the current behavior? After the colour system migration (#47288), `--warning-default` was removed in light mode in favour of the semantic `--warning` token. Several studio call sites still referenced `hsl(var(--warning-default))`, which resolves to an invalid colour in light mode. This caused warning segments in stacked bar charts (e.g. Realtime on project overview v2) to render black instead of amber, with missing tooltip swatches. The colour appeared to "fix itself" on hover because the dimmed state used `--warning-500`, which is still defined. ## What is the new behaviour? Studio consumers that referenced the removed token now point at tokens that still resolve in light mode. Chart warnings use new app-level `--chart-warning` / `--chart-warning-muted` variables (stepped scale, theme-aware) rather than the removed `--warning-default`. We only update **Studio app consumers** that were still calling the old token: - `LogsBarChart` → `--chart-warning` tokens - `apps/studio/styles/globals.css` → defines those chart tokens + fixes `--sidebar-primary-foreground` - A handful of chart/tooltip call sites in Studio (`EdgeFunctionOverview`, `UnifiedLogs`, etc.) - Table editor dirty cell text → `--warning-600` (still on the stepped scale) ## To test Use a hosted project that already has warnings on project home (e.g. Realtime with a non-zero warnings count). Switch Studio to **light mode**. 1. Open **Project home** (`newHomepageUsageDeltas` flag enabled). 2. Find a service card with warnings in **Project usage**. 3. Confirm warning bar segments are amber/orange (not black), tooltip swatches show amber, and hover does not flip them black. 4. Quick dark mode sanity check. Should look unchanged. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Standardized warning-series and highlight colors across charts, logs, countdown timers, and interface indicators using the shared theme tokens (`--chart-warning` / `--chart-warning-muted`). * Refreshed warning-related theme wiring for both light and dark modes, including sidebar foreground color. * **Bug Fixes** * Updated “dirty” table cell text color to align with the revised warning palette. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
cabe14e5ca |
chore: remove _Shadcn_ suffix from ui tabs components (#47628)
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister YoungandAlaister Young
|
46b31eb53a |
[FE-3379] feat(studio): warn when db passwords need percent-encoding (#47564)
Users who set a database password with special characters (\`@\`, \`#\`, \`%\`, \`+\`, etc.) get no warning that it must be percent-encoded when used in a connection URL, which leads to confusing connection failures ([FE-3379](https://linear.app/supabase/issue/FE-3379)). <img width="700" height="200" alt="Screenshot 2026-07-03 at 6 26 43 PM" src="https://github.com/user-attachments/assets/48608d65-8057-4abe-96fc-c0ede3550951" /> <img width="1002" height="395" alt="Screenshot 2026-07-03 at 6 27 14 PM" src="https://github.com/user-attachments/assets/1366b985-7d80-4e7d-97f0-c79d5c84cefd" /> <img width="548" height="303" alt="Screenshot 2026-07-03 at 6 27 26 PM" src="https://github.com/user-attachments/assets/b042101a-0e88-4730-adb8-1b490018f208" /> **Changed:** - `PasswordStrengthBar` now shows a warning-colored callout (with a docs link) whenever the entered password contains characters that need percent-encoding — this covers project creation, reset database password, restore-to-new-project, and the Vercel deploy-button flow - Replaced `DATABASE_PASSWORD_REGEX` (only caught `@`, `:`, `/`) with a `passwordNeedsPercentEncoding()` helper based on `encodeURIComponent`, so `#`, `%`, `+`, `?`, `&`, spaces etc. are caught too - Moved `SpecialSymbolsCallout` from `ProjectCreation/` to `components/ui/` since it's now shared **Added:** - Info admonition in the Connect sheet next to connection strings that still contain `[YOUR-PASSWORD]` (direct connection + `.env`-based file setups; hidden for psql and .NET where percent-encoding doesn't apply, and after a password reset since the substituted password is already encoded) ## To test - Project creation → type a password containing \`#\` or \`@\` → warning callout appears above the strength bar; disappears for alphanumeric passwords - Database Settings → Reset database password → same behaviour - Connect sheet → Direct connection → note shows under the connection string for URI/JDBC types, not for psql; after resetting the password from the sheet, the note disappears (password is substituted already encoded) - Connect sheet → Node.js/Python/Go/SQLAlchemy file setups show the note; .NET does not - \`pnpm vitest run lib/password-strength.test.ts\` passes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Added a dedicated password encoding note (with documentation link) on direct connection screens when the password is embedded in a URL. * Added an encoding hint to the password strength area when percent-encoding is required. * **Bug Fixes** * Removed regex-based “invalid password” callout and replaced it with safer percent-encoding detection logic. * **Tests** * Added test coverage for `passwordNeedsPercentEncoding`. * Removed obsolete Project Creation password regex tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Saxon FletcherandClaude Opus 4.8
|
fb02182e86 |
Color system (#47288)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.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> |
||
|
Ali WaseemandIvan Vasilov
|
3fcf980b0a |
fix(studio): batch of production Sentry crash fixes (array/null guards) (#47460)
Fixes a batch of production Studio crashes from Sentry (all caught by the global error boundary). Most are missing array/null guards where an endpoint typed as an array — or with a nested array field — returned a non-array body in production; a few are one-off render crashes. Resolves FE-3748. ## Issues fixed | Sentry | Error | Fix | | --- | --- | --- | | [J7R](https://supabase.sentry.io/issues/7492997940/) | Maximum update depth exceeded | Disable RadialBar animation in disk-cooldown countdown | | [JR5](https://supabase.sentry.io/issues/7548484681/) | resourceWarnings.find is not a function | Guard in ResourceExhaustionWarningBanner | | [JCJ](https://supabase.sentry.io/issues/7506024989/) | resourceWarnings.find is not a function | Guard in ProjectLayout + normalize query | | [K1Y](https://supabase.sentry.io/issues/7584792331/) | snippet.name on undefined | Optional-chain SQL editor download filename | | [B3K](https://supabase.sentry.io/issues/7141649636/) | pagination.count on undefined | Guard pagination in projects infinite query | | [JVP](https://supabase.sentry.io/issues/7560437621/) | schemas.some / extensions.find | Coerce pg-meta lists to arrays in useInstalledIntegrations | | [JR2](https://supabase.sentry.io/issues/7548339272/) | extensions.find is not a function | (same fix as JVP) | | [JQR](https://supabase.sentry.io/issues/7547163939/) | lints.filter is not a function | Normalize project lints query | | [JR3](https://supabase.sentry.io/issues/7548433501/) | entitlements.find is not a function | Guard call sites + normalize entitlements query | | [JQS](https://supabase.sentry.io/issues/7547557098/) | selected_addons.find is not a function | Normalize addons query arrays | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved stability across several Studio screens by handling missing or unexpected data more safely. * Downloads now use a fallback name when a snippet name isn’t available. * Project, entitlement, schema, addon, warning, and extension views are less likely to break when data is missing or not in the expected format. * Pagination and countdown visuals now behave more consistently, with reduced chance of runtime errors or animation-related glitches. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Joshen Lim
|
9f1ce56322 |
Add edge log type with service filters (#47493)
## Context Couple of changes to the Unified Logs logic, mainly to align unified logs filters with legacy logs behaviour ## Changes involved - Postgrest + Storage logs will no longer overlap with edge logs source - They will specifically just pull logs from their own sources only - This will match legacy logs behaviour + also the observability overview behaviour as well - Re-introduce "API Gateway" as a log type (was there in the old UI) - Added service filters for convenience <img width="271" height="233" alt="image" src="https://github.com/user-attachments/assets/6264b7c5-e3e8-4db8-a378-4d8c46af3d62" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added **API Gateway** (“Edge”) logs to Unified Logs, including new sub-filters for auth, storage, and postgrest activity. * Updated the default log selection to include API Gateway logs. * **Bug Fixes** * Improved how log types are bucketed and filtered, ensuring edge, postgrest, and storage sources display under the correct views and toggles. * Refined “connection logs” filtering so results and counts remain consistent with the selected options. * **Style** * Refined the Unified Logs filter checkbox layout and nested expand/collapse controls. * **Tests** * Updated and expanded query tests to cover the new edge filter behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
61a333a41d |
Refactor ReportSettings to use popover instead of dropdown menu (#47488)
## Context Tiny styling issue with the report settings component here (padding) <img width="301" alt="image" src="https://github.com/user-attachments/assets/381a89c4-b1d5-419e-94a1-74149881068c" /> But also realised that `Popover` is a more suitable component than `DropdownMenu` here - so refactored the component + adjust the padding issue. Opting to use `text-xs` as well since that's the font size we usually use in a popover / dropdown <img width="301" height="218" alt="image" src="https://github.com/user-attachments/assets/7ce0452e-eb7a-4bc9-93b4-b30164e74c31" /> Furthermore, am opting to hide the sync tooltip option if sync header is false Am thinking in this case it makes sense to hide the UI since sync tooltip is dependent on sync header (would add confusion if we show this setting disabled + users would need to read the description "requires sync hover" to understand why) <img width="304" height="137" alt="image" src="https://github.com/user-attachments/assets/fb084b6f-8bbd-4861-982c-c43d7df58831" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Updated the report settings menu to use a popover layout for a cleaner, more structured presentation. * Improved spacing and typography within the settings content, including clearer helper text formatting. * Refined the “Sync tooltips” controls to display more contextually based on the relevant sync setting, while keeping the same entry point and overall toggle behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
c569a29c26 |
chore(studio): use admonition for auto-enable RLS notice (#47354)
## What kind of change does this PR introduce? Chore. UI polish for the auto-enable RLS notice. ## What is the current behavior? Auto-enable RLS is shown in a card with a shield icon and a primary "Learn more" button. The setup dialog uses longer copy and labels like "Close" / "Create ensure_rls trigger". ## What is the new behavior? - Banner uses a responsive note `Admonition` instead of a card. - Clearer copy: title, description, and dialog body tightened around protecting future tables. - Actions: "Set up trigger" (default), "Cancel", "Create trigger"; dismiss tooltip updated. - Code block border tweak in the dialog; SQL template gets a short identifying comment. | Before | After | | --- | --- | | <img width="1106" height="747" alt="Tables Database temp-stripe wksp_6UXXrF9W8SK9CCKdlRh8Uts Supabase-17201C2A-C57A-4AFE-BA79-591920BBEB8D" src="https://github.com/user-attachments/assets/f7977ef1-b9c2-4064-b779-b32bdbcc4214" /> | <img width="1106" height="747" alt="Tables Database temp-stripe wksp_6UXXrF9W8SK9CCKdlRh8Uts Supabase-48D740A2-0814-41FE-AE92-F86F1C6C4397" src="https://github.com/user-attachments/assets/7168cd82-5563-4718-94e3-1ffb4fa690c1" /> | | <img width="1106" height="747" alt="Tables Database temp-stripe wksp_6UXXrF9W8SK9CCKdlRh8Uts Supabase-7FC76297-7640-440E-B4BF-34ECA51F652B" src="https://github.com/user-attachments/assets/0b38711e-c6af-4d15-a4d5-d98db28bce20" /> | <img width="1106" height="747" alt="Tables Database temp-stripe wksp_6UXXrF9W8SK9CCKdlRh8Uts Supabase-E98B2F86-E19C-4F5B-988F-DAC40E1B845D" src="https://github.com/user-attachments/assets/01fa3b62-af2b-447d-bd17-b92e86064285" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Refreshed the RLS notice banner with updated wording and a cleaner alert-style presentation. * Improved the trigger setup dialog copy, including title/description text and updated button labels. * Updated the trigger creation tooltip/action wording for clearer guidance. * **Documentation** * Added a small inline label comment to the generated auto-enable RLS event trigger SQL for easier readability. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
CharisandJoshen Lim
|
d153bab849 |
refactor(studio): extract SQL editor session store from god store (#47349)
## What PR 6 of the SQL editor state re-layering stack. Moves ephemeral, never-persisted SQL editor state out of the snippet/folder "god store". **Session store** — `state/sql-editor/sql-editor-session-state.ts` holds per-snippet, read-by-many session state: - query `results` - `explainResults` - the row `limit` …with their mutators (`addResult`/`addResultError`/`resetResult`, `addExplainResult`/`addExplainResultError`/`resetExplainResult`, `resetResults`, `setLimit`). `removeSnippet` drops a snippet's session entries via `clearForSnippet(id)`. **Diff-request slice** — `state/sql-editor/sql-editor-diff-request.ts`. The Assistant's "Insert code" / "Replace code" diff is *not* per-snippet session state: it's a transient, fire-and-forget command produced outside the editor (e.g. query blocks / assistant) and consumed exactly once by whichever editor is active. It's modeled as a consume-once request (`requestDiff` / `consumeDiffRequest`) rather than durable state — the editor drains it on apply, so a stale diff can't leak into a later editor or session. (Previously this was `diffContent` in the god store: never cleared and triggered by object-reference identity.) Consumers read session state from `useSqlEditorSessionSnapshot` and the diff channel from `useSqlEditorDiffRequestSnapshot`, keeping `useSqlEditorV2StateSnapshot` only for snippets/folders. ### Why not the TanStack Query cache for results/explain? Editor execution is a **mutation**, not a keyed query — `mutation.data` is per-hook-instance and not keyed by snippet id, and there's no caching value to capture (re-running SQL must return *fresh* data, never a cached result). `EXPLAIN ANALYZE` actually executes the statement, so a declarative/auto-refetching `useQuery` is semantically wrong. Results/explain are imperative mutation outputs, scoped to the session, read by several decoupled consumers keyed by snippet id — exactly what a small in-memory keyed store models honestly. ## Consumers migrated - `SQLEditor.tsx` — results/explain/limit reads + `addResult`/`addResultError`/`addExplainResult`/`addExplainResultError`/`setLimit`; diff-apply effect now drains a consume-once request - `UtilityPanel.tsx`, `UtilityTabResults.tsx`, `UtilityTabExplain.tsx`, `UtilityActions.tsx` - `QueryBlock/EditQueryButton.tsx` — produces via `requestDiff` ## Notes - Result/explain types are kept verbatim from the god store (pre-existing `any` row/error types come along unchanged; tightening them is out of scope for this move). - `ref()` on result rows is preserved to avoid Valtio proxying large row sets. ## Tests - `sql-editor-session-state.test.ts` — result/explain mutators, `resetResults`, `clearForSnippet`, `limit` - `sql-editor-diff-request.test.ts` — `requestDiff`, `consumeDiffRequest` (drain + queue-of-one) Validation: - `pnpm --filter studio typecheck` ✅ - `pnpm exec vitest --run state/sql-editor/` ✅ (110 passed) - lint ✅ (no new errors) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * SQL editor query results, EXPLAIN output, and the “Limit results to” setting now persist more reliably across a session. * AI-assisted SQL insert/replace actions now use a pending diff workflow to apply updates more consistently. * **Bug Fixes** * Results/EXPLAIN rendering and downloads stay in sync with the latest executed data. * Switching databases/snippets now clears the correct temporary results. * Diff application is more resilient when an editor is still loading, including empty-vs-non-empty editor cases. * **Tests** * Added coverage for the session and diff-request state logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
1de298ff31 |
Reinstate https://github.com/supabase/supabase/pull/45143 into latest master (#47433)
## Context Previous PR was [here](https://github.com/supabase/supabase/pull/45143) but it got stale with lots of conflicts so figured it'll be easier redo it off the latest master Moves policies page from Auth to Database under an Access Control section along with Roles. This moves all existing files, applies redirects, and updates urls to point to the new route <img width="274" height="412" alt="image" src="https://github.com/user-attachments/assets/7952c185-64ae-4355-ba36-45397efe1787" /> <img width="453" height="471" alt="image" src="https://github.com/user-attachments/assets/04b3dcb3-48a5-4049-9893-d01109fb46a9" /> ## To test - [ ] Verify that policies now live under Database correctly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a quick navigation shortcut to open **Database > Policies (RLS)**. * **Bug Fixes** * Updated Policies and RLS-related links across the product to open the **Database policies** area (menus, command palette, context actions, alerts, and link-outs). * Added a permanent redirect from the old **auth policies** URL to the new **database policies** URL. * **Documentation** * Updated RLS Dashboard and security checklist instructions to reference **Database > Policies**. * **Tests** * Adjusted automated tests to validate the new Policies route. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 |
||
|
Seid Muhammed
|
affdcb35ff |
fix(studio): sum numeric-string columns in cumulative SQL charts (#47378)
Fixes: #47377 ## What is the current behavior? Enabling **Cumulative** on a results chart concatenates Y-axis values instead of summing them whenever the column is a `bigint`, `numeric`, `money`, or `count(*)` aggregate — which Postgres returns as JSON strings. For per-row values `10, 20, 30` the chart plots `10, 1020, 102030`. `getCumulativeResults` ran `(prev[yKey] || 0) + row[yKey]` on raw result rows. The Y-axis selector explicitly allows numeric-string columns, so this is a common, fully-supported path (e.g. any `count(*) ... group by`). ## What is the new behavior? Both operands are coerced with `Number()` before the addition, keeping the existing `|| 0` fallback for null/undefined/non-numeric values. The series now sums correctly: `10, 30, 60`. The cumulative logic was previously duplicated in `ChartConfig.tsx` and `QueryBlock.utils.ts` (which is how this bug slipped in twice). It is now a single shared, tested helper: `getCumulativeResults` lives in `QueryBlock.utils.ts`, and `ChartConfig.tsx` imports it instead of re-declaring its own copy. The shared helper's `ChartConfig` type import is `import type` to avoid a runtime circular dependency, and its signature accepts `readonly` rows so both call sites type-check. ## Additional context - Added regression tests for numeric-string inputs and for null/undefined/non-numeric fallback to `0`. The existing tests only covered literal `number` inputs, never the string form Postgres actually returns. - Verified the new tests fail against the old code (`y: '010'`, `'05undefined'`) and pass with the fix. Full `QueryBlock.utils.test.ts` suite: 18 passing. No migrations, no API changes, no infra changes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed cumulative chart calculations so numeric values are always added correctly, even when results arrive as strings. * Improved handling of empty or non-numeric values in cumulative totals so they are treated as zero instead of breaking the sum. * **Tests** * Added coverage for cumulative result calculations with numeric strings and missing values. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 |
||
|
|
2aa1b52234 |
feat(studio): add feature to rewrite queries DEBUG-145 (#47266)
## Problem Moving the Logs Explorer to ClickHouse means users' saved BigQuery queries no longer run. <img width="2430" height="1010" alt="CleanShot 2026-06-29 at 11 36 04@2x" src="https://github.com/user-attachments/assets/ae0ab155-7d3d-4ae9-81c3-22bf3a88cf8c" /> ## Fix Rewrite the query with AI instead of a SQL transpiler. AI handles the long tail of nested fields and dialect differences far better than a rule-based rewriter, and it needs no extra runtime dependency. - `rewriteLogsSqlWithAI` posts the current query to `/api/ai/code/complete` with `dialect: 'clickhouse'`. The endpoint skips the Postgres schema and best-practices for that dialect and uses logs-specific instructions and model so the output is ClickHouse logs SQL (FROM `logs` + `source` filter, no `unnest` joins, nested fields read from `log_attributes['...']`). - The query's `source` is detected and its real `log_attributes` keys are fetched and passed to the model, so it maps to exact paths instead of guessing. - The rewrite runs in the background and is proposed as a side-by-side accept/discard diff in the editor. The AI Assistant panel is not opened. - Entry points: a banner shown only for legacy-looking queries (dismissal persisted), and a "Fix Query" button next to Field Reference. - The Field Reference drawers discover `log_attributes` keys from real data so the listed fields match what the source actually emits. ## Dependencies Built on top of #47265 (Logs Explorer -> OTEL endpoint) — that is the base branch of this PR. Merge #47265 first. Behind `otelLegacyLogs` (off by default). Part of DEBUG-145 (split from #47087). ## How to test - Open the Logs Explorer with a BigQuery logs query (the templates have some), click "Fix Query", and confirm the diff shows valid ClickHouse SQL. Accept it and confirm the applied query runs. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added an OTEL legacy logs workflow (behind a feature flag) with an interactive banner and a “Fix Query” ClickHouse rewrite action, including an accept/discard diff review overlay. * Introduced OTEL-aware field reference rendering with dynamic discovery of `log_attributes` keys and updated OTEL source insertion behavior. * Enabled dialect-aware SQL completion for ClickHouse logs, using logs-specific instructions and output constraints. * **Bug Fixes** * Improved rewrite flow validation and handling, including log source detection and cleanup of AI-generated SQL formatting. * **Tests** * Added Vitest coverage for rewrite prompt generation, detection/classification utilities, SQL fence stripping, OTEL field mapping, and OTEL log attribute key discovery. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
|
4fa106e53c |
fix(studio): stop GraphiQL from corrupting other Monaco editors (#47363)
GraphiQL (`@graphiql/react`) runs a second Monaco instance that injects
two global, page-wide styles which corrupt Studio's other editors once a
GraphiQL chunk has loaded (it persists across client-side navigation, so
a full reload hides it). After visiting GraphiQL and returning to e.g.
the SQL editor, the editor collapses to a ~5px sliver and its syntax
colors swap to GraphiQL's theme.
**Changed:**
- `monaco.css` — a higher-specificity counter-rule
(`.monaco-editor.monaco-editor { position: relative !important }`) beats
GraphiQL's runtime-injected `.monaco-editor { position: absolute
!important }`, which otherwise pulls Studio's `@monaco-editor/react`
wrapper out of flow and collapses it to ~5px.
- GraphiQL now uses the primary `supabase` Monaco theme instead of a
separate `supabase-graphql-*` theme, so the global `.mtk*` token palette
stays identical and syntax colors no longer bleed into other editors.
**Added:**
- E2E test (`monaco-graphiql-coexistence.spec.ts`) reproducing both bugs
via client-side SQL editor → GraphiQL → SQL editor navigation (a full
reload unloads the chunk and hides the bug).
- Component test (`CodeEditor.test.tsx`) guarding the height-class
precedence regression from #47339/#47350 — a caller height (e.g. the
email template editor's `h-96`) must win over the default `h-full`.
Covered as a component test since the email source editor isn't
reachable on self-hosted.
## To test
- Open the SQL editor → **Integrations → GraphiQL** → back to the SQL
editor (in-app navigation, not a reload). It should stay full height and
keep its own syntax colors.
- Confirm autocomplete still works in the SQL editor.
- `pnpm --prefix e2e/studio run e2e --
features/monaco-graphiql-coexistence.spec.ts`
- `pnpm --prefix apps/studio test -- CodeEditor.test`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved Monaco editor styling so GraphiQL no longer affects the SQL
editor’s theme or layout when navigating between them.
* Fixed editor sizing so a custom height now takes precedence over the
default full-height setting.
* Polished GraphiQL panel styling for more consistent spacing and
appearance across themes.
* **New Features**
* GraphiQL now uses the shared editor theme for better visual
consistency with Studio.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
|
||
|
Miranda Limonczenko
|
5fc0c86007 |
feat(studio) Link observability pages to relevant docs (#47351)
Closes DOCS-488 <img width="1266" height="353" alt="Screenshot 2026-06-26 at 11 02 57 AM" src="https://github.com/user-attachments/assets/67b5d47b-249e-4e53-9230-2bbcb7f037b7" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem We have helpful documentation that delves into each observability metric, but it is not easily findable in the moment it is needed while viewing the dashboards. ## Solution Solution includes: - Add a docs link in Studio in every relevant place with the `DocsButton` component - Add aria-hidden on the `DocsButton` icon - An added `constants.ts` to see all of the docs links in one place - A contextual aria-label for the docs so that screenreader users know where they're going | Page | Docs link | |------|-----------| | Overview | `/guides/telemetry/reports` | | Query Performance / Query Insights | `/guides/platform/performance#examining-query-performance` | | API Gateway | `/guides/telemetry/reports#api-gateway` | | Database | `/guides/telemetry/reports#database` | | Data API | `/guides/telemetry/reports#postgrest` | | Auth | `/guides/telemetry/reports#auth` | | Edge Functions | `/guides/telemetry/reports#edge-functions` | | Storage | `/guides/telemetry/reports#storage` | | Realtime | `/guides/realtime/reports` | | Custom reports | `/guides/telemetry/reports#using-reports` | Query Performance and Query Insights already had the button in their custom headers. They now use the shared constants. ## Tophatting 1. Go to a project `/observability`. 2. Click into each of the panels and see a **Docs** link in the top right. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added direct documentation links across observability report pages, making it easier to open relevant help content from each view. * Added clearer, page-specific labels for observability headers and docs links. * **Bug Fixes** * Improved accessibility for icon buttons so icons are hidden from assistive technologies while button labels remain clear. * Adjusted report navigation layouts to keep controls aligned with the new docs buttons. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
f1f80dd0bf |
fix(studio): restore email template source editor height (#47350)
## What Restores the email template **source editor** height, which had collapsed to a single line. ## Root cause Earlier today, #47339 ("prevent Monaco editor collapse after visiting GraphiQL") appended `h-full` to the shared `CodeEditor`: ```ts className={cn(className, 'monaco-editor', 'h-full')} ``` `cn` is `twMerge(clsx(...))`. tailwind-merge resolves conflicting height utilities by keeping the **last** one, so the trailing `h-full` clobbered any caller-supplied height. The email template editor (`TemplateEditor.tsx`) passes `h-96`, and its wrapper has no explicit height — so `h-full` resolved to 0 and the editor collapsed to a single line. ## Fix Reorder so `h-full` is a default that a caller's height wins over: ```ts className={cn('monaco-editor', 'h-full', className)} ``` - Email editor passes `h-96` → comes last → wins → 384px height restored. - Callers that set no height (GraphiQL, etc.) → `h-full` still applies → #47339 fix preserved. ## Testing - [ ] Email template source editor renders at full height again - [ ] GraphiQL → editor navigation still does not collapse Fixes FE-3728 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved editor sizing so custom height classes are respected instead of being overridden by the default full-height styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
4f80bb70cd |
fix(studio): prevent Monaco editor collapse after visiting GraphiQL (#47339)
Fixes a pre-existing bug where visiting **GraphiQL** leaves the **SQL editor** (and other Monaco editors) collapsed to a ~5px slit with the background spilling over it, until a full navigation away. ## Root cause GraphiQL (`@graphiql/react`) and the rest of Studio's editors (`@monaco-editor/react`) share one global Monaco instance. Visiting GraphiQL does `import 'graphiql/style.css'`, which injects a **second copy of Monaco's CSS** globally and persists for the session. `CodeEditor` hard-codes a `monaco-editor` class onto the `@monaco-editor/react` **wrapper** div (it's not a real Monaco editor — Monaco creates its own `.monaco-editor` inside it). That makes the wrapper subject to global `.monaco-editor` rules. After GraphiQL's CSS loads, the wrapper flips from `position: relative` to `position: absolute`, drops out of the flex flow, and collapses to `height: 0`. Monaco then lays out against a 0-height container → ~5px editor, and the full-size gutter/background layers spill over the area. Confirmed by inspecting the same wrapper before vs after a GraphiQL visit — identical inline styles, but `position` flips `relative` → `absolute` and height `266px` → `0`. ## Fix Add `h-full` to the wrapper so it fills its (full-height) section even when it's `position: absolute`, instead of collapsing to 0. Monaco then measures the correct height. In the normal `relative` state this is identical to the existing flex-stretch behavior. This is the contained fix. The deeper fix is isolating GraphiQL's Monaco from the shared instance (so it can't inject CSS / mutate global state affecting other editors) — larger, worth a follow-up. ## To test - Open the SQL editor (renders fine). - Go to Integrations → GraphiQL, then back to the SQL editor. - Editor should be full height and fully visible (previously a ~5px slit covered by the background). - Sanity-check other editors that use `CodeEditor` (e.g. RLS policy editor, function editor) still render at the right height. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved the code editor’s sizing so it keeps its full height during navigation and no longer collapses to a near-zero display in some cases. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Gildas Garcia
|
77bf0a4ec9 |
chore: more dead code cleanup (#47312)
## Problem There's still more unused code in the repository which slows down everything: - checkouts - tooling - probably builds (not sure how good turbopack is at handling this) ## Solution - remove old unused code - remove more recent code after checking git history to ensure it's not unfinished/ongoing work <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Removed several outdated UI components and helper utilities to streamline the app. * Cleaned up unused analytics, database, and observability hooks and queries. * **Refactor** * Simplified data table, unified logs, and assistant panel internals by removing legacy display and navigation pieces. * **Bug Fixes** * Reduced the chance of showing stale or inconsistent status, chart, and metric views by eliminating obsolete display paths. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon FletcherandClaude Opus 4.8
|
143769afac |
feat(studio): shared High Availability disabled hook and UI primitives (#47322)
Add generic building blocks for blocking features on High Availability projects: - useHighAvailability hook: HA state only (isHighAvailability, isPending) - HighAvailabilityDisabledEmptyState (full-page empty state) - HighAvailabilityDisabledSectionNotice (in-section admonition) The components carry a generic default title/description; consuming pages pass their own copy via props. HA state is read from the project's high_availability flag (same source as the High Availability badge on the project home page). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added clearer messaging for features that aren’t available in High Availability projects. * Introduced a standard High Availability status check to help the app adapt what it shows. * **Bug Fixes** * Hid non-applicable schema options when High Availability is enabled, reducing confusion in selection lists. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> |
||
|
Joshen Lim
|
f6afd8b2e4 |
Use CodeEditor in AIEditor (#47297)
## Context More clean up / housekeeping - to use `CodeEditor` in `AIEditor` and remove duplicated logic <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Expanded supported editor file types, including CSS, CSV, and JavaScript (with improved syntax highlighting). * The updated editor experience now provides a readily available “run query” action. * **UI Improvements** * Tightened editor panel spacing and adjusted padding for a cleaner layout. * **Bug Fixes** * Improved file-to-language detection so files open with the correct syntax highlighting more consistently. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen LimandAlaister Young
|
2bac064adf |
Joshen/fe 3697 progressively default opt in to unified logs (#47296)
## Context We're progressively opting in users to use the new Unified Logs UI 🙂🙏 ## Changes involved - [ ] Removed flag for controlling visibility of unified logs feature preview - [ ] Added flag for controlling default opt in behaviour of unified logs - [ ] Small tweak to Unified Logs banner is default opted in (Just show "New" and more info CTA) - Disabling, then enabling again will thereafter show the existing "Go back to old logs CTA" <img width="290" height="166" alt="image" src="https://github.com/user-attachments/assets/a2c46ce1-63c3-490c-bc7d-fc1254982dbe" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Unified Logs preview now derives default opt-in state from a new default-opt-in flag and exposes `isDefaultOptIn`. * **Bug Fixes** * Removed eligibility-based gating so the “Beta” badge and Unified Logs banner render consistently across logs screens. * Unified Logs banner was refactored to handle enable/disable and navigation internally, while remaining shown unconditionally. * **Tests** * Updated mocks and assertions to reflect the revised preview/banner enablement and dismissal logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Joshen Lim
|
772b3bb36e |
Adjust connection logs toggle for unified logs, flip it to true by default (#47258)
## Context For unified logs, postgres connection logs are being filtered out by default previously from this [PR](https://github.com/supabase/supabase/pull/46371) due to its noise. We're opting to show the connection logs by default instead so this PR changes that behaviour + adjusts the connection logs filter UI In particular this is timely as we're adjusting how the DB will log connections based on this [changelog](https://github.com/orgs/supabase/discussions/47197), and we'd want to make sure that users can find their connection logs easily ## Changes involved - [ ] Search parameter renamed to `show_connection_logs` so that we don't need to flip its boolean value for the checkbox - [ ] `show_connection_logs` is subsequently `true` by default - [ ] Shift connection logs filter to a nested option under Postgres log type - Makes it more visual that connection logs are related to the Postgres service - Currently its hidden all the way in the bottom under "Misc" which can be easily missed - <img width="302" height="151" alt="image" src="https://github.com/user-attachments/assets/e3e61ac7-aa16-4769-a89e-e911daacea27" /> - <img width="289" height="156" alt="image" src="https://github.com/user-attachments/assets/c70ac7c4-d2f7-4961-a6d6-6653c59d8548" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Unified Logs now supports expandable, nested “Log Type” filter options for drilling into connection-related entries. * **UI Improvements** * Connection logs are visible by default; the visibility control has been integrated into the main filter experience. * Filter panels are now streamlined, and key filters (such as “Level”, “Status”, and “Method”) have been reordered and adjusted for a cleaner default state. * **Bug Fixes** * Updated Unified Logs query/test behavior to match the new connection-log visibility logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
3db42a805f |
Joshen/fe 3652 replace direct renders of editor component from monaco to (#47268)
## Context Part of consolidating all our code editors - removes all direct renders of the `Editor` component and use `CodeEditor` instead ## UIs affected - [ ] Query performance advisor -> query block - [ ] Table Editor -> Table definition - [ ] Table Editor -> Text + JSON editor (From RowEditorSidePanel, expand input field) - [ ] Auth -> RLS -> Create/edit policy code sections - [ ] Storage policies -> Anywhere that has a code section <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Rolled out a consistent PostgreSQL code editor experience across policy, storage policy, trigger function, table definitions, and query performance screens. * Updated policy/template previews to use the shared editor for cleaner read-only viewing. * **Bug Fixes** * Removed extra left padding in the query performance editor wrapper. * Improved the JSON editor action control with clearer icon behavior. * **Refactor** * Standardized editor usage by replacing legacy SQL/Monaco-based editors with the shared CodeEditor and simplifying related editor components. * Updated CodeEditor capabilities (read-only handling, wrapper styling, markdown support) and tightened editor prop contracts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
74ddbc7453 |
Joshen/fe 3685 show a timestamp for failed restart messages in the (#47274)
## Context For notifications which affect a specific project, there's currently no indication of when the notification was created at all, so this PR addresses that ## Changes involved - For notifications, show created at timestamp in header description - Was previously showing project ref if present in notification metadata, but it's repeated information as the affected project is mentioned in the context section - It'll still show the project ref in the list view, change is only in the detail view (after clicking on a notification) ### Before <img width="400" alt="image" src="https://github.com/user-attachments/assets/e8ce247c-afa4-46df-832f-856d34ce82fd" /> <img width="400" alt="image" src="https://github.com/user-attachments/assets/2e0a6c8a-3bb4-4c05-ae13-36b8a92e7ff0" /> ### After No change for notifications list view <img width="400" alt="image" src="https://github.com/user-attachments/assets/e741b607-c5ef-4cd0-9985-5957f2b52bfc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved how advisor panel details are displayed, ensuring timestamps and secondary text appear in the right situations. * Hidden metadata when no relevant information is available, reducing clutter in the panel. * **Style** * Updated a link layout in notification details for cleaner, more consistent formatting. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
9eab4f8fbf |
build(studio): Vite/TanStack-Start build pipeline behind flag (stack 1/6, from #46424) (#47107)
**Stack 1/6** of the TanStack Start migration (#46424), split into reviewable, independently-mergeable PRs. > [!IMPORTANT] > **Next stays the default and only active framework after this PR.** This wires up the Vite/TanStack-Start build pipeline behind the `STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the TanStack build isn't functional or tested until later PRs in the stack. Nothing about the Next build, dev, or deploy changes behaviourally here. ## What's in this PR - **Dispatch:** `dev`/`build`/`start` now go through `scripts/dispatch.js`, which runs the Next variant unless `STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as `dev:next`/`build:next`/`start:next`. - **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`, vite/tanstack deps, `turbo.jsonc`. - **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`, `target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks the whole app, so the companion adaptations below land with it. - **Shared adaptations (companions to the tsconfig change):** `BufferSource` casts, `packages/ui` unused-`React` import removals, etc. - **Routing/middleware plumbing:** `next.config.ts` + `redirects.shared.ts` (redirect rules now shared with `vercel.ts`), `proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`. ## Verification Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules improved"), prettier ✓. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a hosted API endpoint allowlist to return 404 for non-supported `/api/*` routes. * Introduced a TanStack route-migration checklist and expanded TanStack Start routing support. * **Improvements** * Enhanced deployment refresh/detection by tightening cookie handling for “latest deployment” updates. * Centralized redirect/maintenance-mode rules for consistent platform vs self-hosted behavior. * Improved production serving with a dedicated static + proxy server and a post-build smoke test. * **Dependencies** * Updated TanStack-related packages and React Table/query tooling versions. * **Documentation / Chores** * Updated formatting and tooling config; added shared build environment parsing utilities. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Joshen Lim
|
086232b207 |
Include postgrest_logs as source for Postgrest logs (#47225)
## Context For unified logs, we're currently pulling data from `edge_logs` and filtering on path like `/rest` to fill the `Postgrest logs` However, `edge_logs` are logs from the API Gateway and Postgrest logs has its own source `postgrest_logs` ## Changes involved - Update source for postgrest logs to include `postgrest_logs` - Improve labelling of log types - Improve overflow scroll container max height of `DataTableFilterCheckbox` - Previously its max height of 200px was nicely fitting the height of 6 options, so there's no visual indication that there's more to scroll. Hence adjusting to 215px to "peek" the next option as below: <img width="283" height="315" alt="image" src="https://github.com/user-attachments/assets/eb962d66-d575-4ee9-9f80-eaa2af0278ef" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Enhanced log type filter labels in the Unified Logs interface for improved readability. * Expanded PostgREST log detection and categorization. * Increased vertical space in checkbox filter dropdowns for better content visibility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
f2e20eac34 |
Joshen/fe 3651 deprecate monacoeditor from grid folder to use codeeditor (#47179)
## Context Part of efforts to consolidate all the code editors that we have in the repository `CodeEditor` will serve as the base monaco editor file that all UIs should consume from It's aimed to be generic and just stores the common logic that will be generally used where-ever we need a code editor (editor options, base editor set up on mount, etc) The idea is that `CodeEditor` holds just 3 default actions (run queyr, format document and placeholder fill) If any editor needs specific behaviours (e.g SQL Editor), they can declare them in the `onMount` prop of `CodeEditor` which gives some flexibility ## Changes involved - Use `CodeEditor` component for SQL Editor's `MonacoEditor` - Shifted Cmd K behaviour into `CodeEditor` since that's probably needed everywhere that we render that UI - Deprecate `MonacoEditor` from the table editor's `grid` folder - All files that were using that component to use `CodeEditor` component instead <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Migrated the studio’s code editing UI (including JSON, text, and payload viewers) to a unified CodeEditor experience. * **New Features** * Added plaintext language support for read-only/truncated views. * **Behavior Changes** * Improved editor startup by setting cursor position consistently and deferring autofocus. * Streamlined editor context-menu actions to the core set (run query, format, placeholder fill). * Updated SQL editor wiring for more consistent command/menu and selection handling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
7f1298e35e |
chore: dead code cleanup (#47129)
## Problem We have many unused files, left overs from features refactoring ## Solution - Remove unused files - Move some files closer to their usage <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Removed multiple legacy Studio UI components and placeholders to streamline the interface (including onboarding panels, navigation elements, docs layout helpers, and various UI building blocks). * **UI Updates** * Updated the layout’s API keys section to use the Project-specific presentation. * **Maintenance** * Adjusted internal sourcing for documentation tab menu logic without changing visible behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
e9a976aa74 |
Fire load more slightly before reaching the bottom of the page (#47115)
## Context JFYI the originally problem from the ticket was that unified logs wasn't loading more automatically when scrolling to the bottom However, I can't reproduce that issue as it seems to be working as intended. But opting to triggering the load more when scrolling slightly before hitting the bottom of the page for a smoother UX <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Optimized infinite-scroll behavior in data tables by refining when the loading trigger activates. Content now begins loading earlier as users scroll, rather than waiting until reaching the absolute bottom of the table. This responsive adjustment improves overall performance and user experience when navigating through tables with large datasets, reducing perceived delays. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen LimandJordi Enric
|
dc5633aee2 |
Joshen/debug 147 add horizontal scroll to unified logs UI (#47111)
## Context Support horizontal scrolling for unified logs ## Changes involved Also chucked in some refactors and clean up - `DataTableInfinite` to directly import components from the `ui` package rather than a separate `Table` component that just applies class names to the table components from `ui` - Adjust footer of unified logs such that it'll remain in place despite horizontally scrolling unified logs <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Style** * Improved infinite data table layout with consistent row/cell styling across loading, empty, and error states. * Sticky header behavior is now more reliably applied. * “Load more” footer button uses a smaller sizing for a cleaner footer layout. * **Refactor** * Updated table rendering to use shared UI primitives and improved scroll/container handling for the infinite table experience. * **Chores** * Simplified the underlying table component structure for consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com> |
||
|
|
e491182054 |
Auth flow improvements (#46967)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added “Continue with {provider}” sign-in and sign-up flows using enabled external identity providers. * Enabled inbound branding to focus a specific provider for customized sign-in/sign-up experiences. * **Improvements** * Refined the sign-in options layout and “last used” tracking for clearer authentication choices. * Updated account identity/provider connection experiences (link/unlink and management UI). * **Bug Fixes** * Fixed hydration mismatches in sign-in and password-related layouts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
eea3a79836 |
Joshen/fe 3595 read replica migration warning is prominent on (#47025)
## Context Opting to remove the "Read replicas has moved" notice in Project Settings -> Infrastructure Also fixes URLs to new replica in `InstanceConfiguration` and `DatabaseSelector` - query parameter was changed from `type` to `destinationType`, so fix ensures that the create replica panel opens after getting navigated to database/replication <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Updated read replica deployment navigation parameters for consistency across the infrastructure configuration interface. * Removed outdated notice message regarding read replica functionality relocation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
587607d335 |
feat(unified-logs): restore card-style sidebar banners (#47028)
## Problem When [#46812](https://github.com/supabase/supabase/pull/46812) was scoped down to "sidebar visual changes only", Kemal's UI redesign of the Unified Logs sidebar banners was unintentionally reverted back to the older full-bleed strip layout. The shared `UnifiedLogsBanner` component survived, but his actual visual design did not. This PR brings back just Kemal's banner UI changes, with nothing else from that branch. ## Changes - **promo variant** (`LogsSidebarMenuV2`): bordered card with a "New" badge, an "Introducing unified logs" heading, and an "Enable preview" button + "More information" tooltip button - **utility variant** (`FilterSideBar`): bordered card for the "Go back to old logs" action with a "Switch back" tooltip button - Restore the `mx-4 mt-4` placement in both consumers Adapted to the current `Button` `variant` API (the original used the now-removed `type` prop). ## Testing - `pnpm lint --filter=studio` - Visual check of the Logs sidebar for an account eligible for Unified Logs (promo card) and one already on Unified Logs (utility card) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a "New" badge indicator to the logs interface. * **Style** * Redesigned the unified logs banner with a new card-based layout. * Updated the "Go back to old logs" option with improved visual presentation and tooltip guidance. * Adjusted spacing and alignment of the banner component for better visual hierarchy. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: kemal <hello@kemal.earth> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> |
||
|
Joshen Lim
|
42ec3c4960 |
Joshen/fe 3624 queryblock causes client side crash if rendering many rows (#47021)
## Context Having a custom report block on the project home page with a SQL that returns a large set of results (e.g > 100k rows) causes a client side crash with "Maximum call stack size exceeded" <img width="400" alt="image" src="https://github.com/user-attachments/assets/e4bb5b73-e114-4687-9d0b-a7bff328167c" /> This is happening due to an array spread in `computeYAxisWidth` in `Math.max` - which am hence opting to use a `reduce` instead to mitigate the problem. Am also opting to apply the same autolimit logic in the SQL editor into the `QueryBlock` here, so that we don't unnecessarily fetch a large dataset in this UI. Added a UI indicator as well if auto limit has been applied (So this also overlaps into dashboard scalability too) <img width="1383" height="465" alt="image" src="https://github.com/user-attachments/assets/08b66398-f3b8-49ce-b4a4-23c91510bd54" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Report query blocks now feature automatic SQL limiting functionality, which restricts query results to a maximum of 100 rows when enabled * When active, query result blocks display an informational notice to users, clearly indicating the row restriction that has been applied <!-- 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> |
||
|
Matt Rossman
|
c54168842b |
fix(assistant): prevent parallel approval-required tool calls (#47008)
Addresses the issue of parallel tool approvals freezing Assistant and causing UX ambiguity around what happens if only part of multiple dependent invocations is approved. Two layers at which this is addressed: 1. Tightens prompt to clarify approval tools must be issued one per step, not in parallel. 2. In case something slips past the prompt, this also auto-denies all but the first `approval-required` tool call when the model issues multiple in the same step, so the model is forced to reissue them sequentially. **Demo** The following chats demo me explicitly asking Assistant to run those approval-gated tools in parallel, and the Assistant correctly invokes them sequentially instead. | Parallel `execute_sql` request | Parallel `deploy_edge_function` request | |--------|--------| | <img width="1820" height="4240" alt="CleanShot 2026-06-16 at 16 20 23@2x" src="https://github.com/user-attachments/assets/3ddad61d-24d6-4e5b-8572-c261755f3a03" /> | <img width="1738" height="2726" alt="CleanShot 2026-06-16 at 16 22 59@2x" src="https://github.com/user-attachments/assets/77a0aa20-e3cb-4061-b270-ab2a96d1e64a" /> | As shown in [this trace](https://www.braintrust.dev/app/supabase.io/p/Assistant/trace?object_type=project_logs&object_id=5a8d02e5-b3b6-40cc-ba76-ecee286478f4&r=a3a37857-95df-4a95-a5a8-818ea305b2a5&s=a3a37857-95df-4a95-a5a8-818ea305b2a5), parallel tool calls are still allowed for context gathering tools that don't require approval: <img width="1051" height="517" alt="CleanShot 2026-06-16 at 16 25 42@2x" src="https://github.com/user-attachments/assets/00d208b1-6131-4b8e-910e-e92fd2a79a5b" /> Closes AI-803 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Approval-required operations are now processed sequentially rather than in parallel within the AI Assistant. * **Tests** * Added comprehensive test coverage for the parallel approval prevention logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
a10bc9a88a |
feat(unified-logs): compact toggle banner and ArrowDown selects first log (#46812)
Visual cleanup of the Logs sidebar (unified logs): - Restyle the "Go back to old logs" and "Try Unified Logs" banners as full-bleed bordered strips (no card), with an icon-only switch-back button and a tooltip - Add a "Beta" badge next to the "Logs" sidebar title - Rename the product from "Logs & Analytics" to "Logs" <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Unified Logs banner with “Try Unified Logs” and “More information” actions, plus a “Go back to old logs” utility layout. * Show a **“Beta”** badge for Unified Logs eligibility. * **UX Updates** * Updated the Logs experience to consistently display under the **“Logs”** product layout. * **Tests / Documentation** * Updated end-to-end checks and examples to expect the **“Logs”** heading text exactly. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: kemal <hello@kemal.earth> |
||
|
Gildas Garcia
|
5b46264cdb |
fix: avoid showing navigation item as disabled while loading (#46942)
## Problem On pages that needs to check conditions for which data is loaded asynchronously, the navigation links in the sidebar appear disabled for a split second: <img width="1394" height="1636" alt="image" src="https://github.com/user-attachments/assets/0681966d-676d-4c8c-8bd4-852dcf93ddb7" /> ## Solution Check whether the required data is loading and override the styles so that the links are still disabled to avoid errors but appear as normal. ## How to test - Open the project setting page - Check the styles of the sidebar items carefully while it load (might require to refresh a few times to be sure) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Navigation buttons, menu items, and settings menus now display loading states while project data is being fetched, providing visual feedback and preventing interaction during data loading operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Ivan Vasilov
|
f9b4ee871a |
fix: Disable generate snippet title feature when the org has disabled AI features (#46959)
This PR disabled generating snippet titles when running and disables the "generate titles" buttons in Rename Snippet and Save Snippet dialogs (which is accessed through the side SQL Editor). How to test: 1. Disable AI for an org. 2. Try to run a new snippet, it shouldn't be renamed automatically. 3. Right click it, click Rename. The "generate title" in the dialog should be disabled with a reason in a tooltip. 4. Open the side SQL Editor, write "select 1", click Save snippet. The "generate title" in the dialog should be disabled. Testing the same flows for HIPAA projects should say `This feature is not available for HIPAA projects.` <img width="715" height="833" alt="Screenshot 2026-06-15 at 23 02 15" src="https://github.com/user-attachments/assets/f9b68f2f-5a5a-4a66-bd0d-9245f4e2f78e" /> <img width="948" height="845" alt="Screenshot 2026-06-15 at 23 02 01" src="https://github.com/user-attachments/assets/b0c9a90e-6cc1-4262-a246-88617cec41dc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * AI feature availability is now gated by organization-level AI opt-in settings instead of subscription-based HIPAA add-ons. * **Bug Fixes** * Updated "Generate with AI" buttons to display disabled state with contextual messaging (missing API key, organization AI opt-out, HIPAA project restriction, or generation in progress). <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Pamela Chia
|
91982e6a2d |
feat(studio): track unified logs cta variant and auto-dismiss on explore (#46940)
## Summary The Unified Logs promo banner (shipped in #46847) had two telemetry/UX gaps I found while auditing the weekly PostHog event review. Its CTA fired one event for two different user paths with no way to tell them apart, and clicking "Explore" left the banner in place. This adds an `is_enabled` property to the CTA event and auto-dismisses the banner on the Explore path. ## Changes - Add `is_enabled: boolean` to `unified_logs_banner_cta_button_clicked`. It is `true` when the user is already enabled and the button navigates to the logs page ("Explore"), and `false` when not enabled and the button opens the feature-preview modal ("Enable"). The two cohorts are now queryable independently, which is what makes the CTA data usable for measuring adoption. - Auto-dismiss the banner when an already-enabled user clicks "Explore". Previously only the X button dismissed it, so an Explore click left the banner showing on the next project page load. Scoped to the Explore path on purpose: the not-enabled path only opens a preview modal (it does not enable), so dismissing there would hide the banner from users who never enabled. ## Testing Behavior to verify on the Vercel preview: - [x] Enabled user clicks "Explore Unified Logs": navigates to the logs page, banner does not reappear on the next project page load, CTA event fires with `is_enabled` true. - [x] Non-enabled user clicks "Enable Unified Logs": preview modal opens, banner is still present after closing the modal, CTA event fires with `is_enabled` false. - [x] X button: banner dismissed as before, dismiss event fires. Out of scope on purpose: no impression event (it would fire on every banner render, low-millions of events per month for one banner), so true click-through rate stays unmeasurable for now. ## Linear - fixes GROWTH-925 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Unified Logs banner now intelligently updates behavior based on feature state. * When enabled, exploring the feature automatically dismisses the banner. * When disabled, the enable action opens the feature preview flow. * Enhanced tracking for banner interactions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |