dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,825 Commits 1,797 Branches 62 Tags
3b1867f31417786b8d87c8a30533ec50f35fe138
Commit Graph
133 Commits
Author SHA1 Message Date
Saxon FletcherandDanny White cd77bebafd chore(ui): refresh shared button styles (#50197) 
## What kind of change does this PR introduce?

UI polish / design system: refreshed button styles, related token
tweaks, and a shared floating-button plate.

Resolves DEPR-652.

## What is the current behavior?

Default, primary, and secondary buttons use older fills, borders, and
hover treatments. Primary still leans on brand scale utilities. Default
fills don’t always read as raised chrome across surfaces, and floating
copy / expand / scroll controls can let busy content show through
translucent fills. Call sites hand-roll `rounded-* bg-background`
wrappers for that.

## What is the new behavior?

Refreshes primary, default, and secondary buttons with medium-weight
labels, subtle shadows and inset edges, and smoother transitions.
Light-mode default buttons use a raised fill with an accent hover state,
primary text is brighter, and inline keyboard shortcuts inherit the
button’s colour.

Adds `FloatingPlate`: an opaque `bg-popover` shell for floating default
buttons (and small clusters). Migrates Studio, Docs-related patterns,
www, and `ui-patterns` floaters onto it so busy content no longer shows
through translucent fills. Positioning, z-index, and hover/focus reveal
stay on the plate’s `className`. Use `rounded="full"` for pills.

Also:

- Moves primary onto semantic `--primary` / `--primary-hover` (with a
light-theme override) instead of brand utility fills
- Tokenises button shadows as `--button-shadow-drop` /
`--button-shadow-raised` / `--button-shadow-default` on the Button base
- Aligns hover direction: darken on light mode, lighten on dark mode for
both default and primary
- Default fill stays opaque `bg-card` in light (occlusion) and
translucent `bg-muted` in dark (adapts to the local surface)
- Documents fills and `FloatingPlate` on the design-system Button page
(with a live example)
- Scales shared radius tokens in Studio and www; medium+ Button sizes
use a proportionally softer radius
- Fixes www nav CTA centering (`lg:inline-flex` instead of `lg:block`)
- Query detail Expand/Collapse wires `aria-expanded` / `aria-controls`

| Before | After |
| --- | --- |
| <img width="1074" height="438" alt="CleanShot 2026-09-18 at 15 52
51@2x"
src="https://github.com/user-attachments/assets/ef43da21-b053-4b7e-9ac4-ab8b428228ab"
/> | <img width="1090" height="464" alt="CleanShot 2026-09-18 at 15 50
59@2x"
src="https://github.com/user-attachments/assets/2ddc55fc-4c8d-499c-a280-f3db3d99023c"
/> |
| <img width="1082" height="446" alt="CleanShot 2026-09-18 at 15 52
35@2x"
src="https://github.com/user-attachments/assets/3dd5452d-325a-4e4a-a79d-26c6c6950a31"
/> | <img width="1078" height="446" alt="CleanShot 2026-09-18 at 15 51
13@2x"
src="https://github.com/user-attachments/assets/93666385-3e6e-42e0-9891-9cd6bb935b67"
/> |

## To test

### Design system

- [Button
page](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button):
default / primary in light and dark; hover should darken on light,
lighten on dark
- Same page: [Floating over
content](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-over-content)
/ [Floating
plate](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-plate)
example; Copy over SQL should stay opaque
- Spot-check hover on a code preview Copy control

### Docs

[Docs deploy
preview](https://docs-git-chore-button-styles-supabase.vercel.app/docs):

- [Docs
homepage](https://docs-git-chore-button-styles-supabase.vercel.app/docs):
top-right **Sign up** / **Dashboard** primary; menu icon beside it
(default icon button)
- Shrink below `lg` and open the hamburger drawer: bottom **Sign in**
(default) + **Start your project** (primary) medium block buttons
- Tab once for **Skip to content** (FloatingPlate)
- [MCP
guide](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/ai-tools/mcp):
project picker
- [Apple
login](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/auth/social-login/auth-apple):
**Generate Secret Key** button in the Apple Secret Generator
- Optional opacity check: any guide code block Copy control (e.g. at the
bottom of [Import data into
Supabase](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/database/import-data))

### Studio

[Studio deploy
preview](https://studio-staging-git-chore-button-styles-supabase.vercel.app/):

- **Observability → Query Performance**: open a query detail →
Expand/Collapse pill + SQL Copy chip (dark: no bleed-through)
- **Observability → Query Insights**: select a query → Clear query pill
- **Table Editor → any table → Definition** → floating **Open in SQL
Editor**
- **Connect → Framework → Add files**: Copy on the code tabs
(FloatingPlate; light hover follow-up is DEPR-694)
- Tab once for **Skip to content**

### WWW

- [www deploy
preview](https://zone-www-dot-com-git-chore-button-styles-supabase.vercel.app/):
nav Sign in / Start your project vertical centering; hero medium CTAs
radius

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
 2026-09-23 03:43:00 +00:00
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564) 
## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

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

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 16:19:03 +10:00
claude[bot]ClaudeAli Waseem
 		8bbd1d3048 fix(studio): fall back to unified preset for an unrecognized query-performance preset (#50348) 
## Summary
- `useIndexInvalidation()` resolves the `preset` URL param through
`QUERY_PERFORMANCE_PRESET_MAP` with no fallback.
- A value that isn't one of the four known
`QUERY_PERFORMANCE_REPORT_TYPES` (stale bookmark, hand-edited URL, a
renamed/removed preset) resolves to `undefined`.
- That `undefined` preset flows into `generateQueryPerformanceSql()`,
which indexes `queryPerfQueries.queries[preset]` with it, producing
`undefined` for `baseSQL` — and the very next line reads
`baseSQL.queryType`, crashing the whole page via `globalErrorBoundary`.
- Fix: fall back to the `unified` preset when the URL value doesn't map
to a known preset, mirroring the `parseAsString.withDefault('unified')`
intent already expressed a few lines above for the case where the param
is entirely absent.

## Evidence (Sentry, past week)
- [SUPABASE-APP-K9Z](https://supabase.sentry.io/issues/7721026586/) —
`TypeError: Cannot read properties of undefined (reading 'queryType')`
on `/dashboard/project/[ref]/observability/query-performance`.

## Test plan
- [ ] Existing `useQueryPerformanceQuery.test.ts` suite still passes
- [ ] Manually confirmed
`QUERY_PERFORMANCE_PRESET_MAP[QUERY_PERFORMANCE_REPORT_TYPES.UNIFIED]`
resolves to `'unified'`, a valid key in
`PRESET_CONFIG[Presets.QUERY_PERFORMANCE].queries`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM

---
_Generated by [Claude
Code](https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM)_

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
 2026-09-14 13:28:24 -06:00
Miranda Limonczenko 15a7b0ab18 docs(database): correct the dashboard_user and storage admin role descriptions (#50274) 
Closes DOCS-1387

## Problem

The Postgres roles guide describes `dashboard_user` as "For running
commands via the Supabase UI." That was the original intent, not current
behavior. Dashboard queries run as `postgres` and carry a `-- source:
dashboard` comment, which the [Postgres logs troubleshooting
guide](https://supabase.com/docs/guides/troubleshooting/how-to-interpret-and-explore-the-postgres-logs-OuCIOj)
already documents. The two pages contradict each other.

Two smaller problems in the same list:

- `supabase_storage_admin` is described as an Auth middleware role,
copied from the `supabase_auth_admin` entry above it.
- Studio ships both stale strings in its own role tooltips. The docs
list and `QUERY_PERFORMANCE_ROLE_DESCRIPTION` are near-verbatim copies
of each other.

## Solution

- Replace the `dashboard_user` description with what the Dashboard
connects as instead, and point readers to the `-- source: dashboard`
comment for finding Dashboard queries in the logs.
- Attribute `supabase_storage_admin` to the Storage middleware.
- Apply both corrections to the Query Performance and Query Insights
role tooltips.

## Manual testing

1. Open the [roles guide on the deploy
preview](https://docs-git-docs-dashboard-user-role-supabase.vercel.app/docs/guides/database/postgres/roles).
2. Scroll to `dashboard_user`. It states that the Dashboard doesn't
connect as the role, and that Dashboard queries execute as `postgres`
with a `-- source: dashboard` comment.
3. Select **find them in the Postgres logs**. The Postgres logs
troubleshooting guide loads.
4. Scroll to `supabase_storage_admin`. It reads "Used by the Storage
middleware," not "Auth middleware."
5. In Studio, open **Observability > Query Performance** and hover a
`dashboard_user` or `supabase_storage_admin` value in the **Role**
column. The tooltip shows the same two corrected descriptions.


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

## Summary by CodeRabbit

- **Documentation**
- Corrected the description of the `supabase_storage_admin` role to
reference Storage middleware.
- Clarified that the Dashboard does not connect using the
`dashboard_user` role.
- Documented that Dashboard queries run as `postgres` and can be
identified in Postgres logs with a `source: dashboard` comment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 11:57:25 -07:00
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161) 
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
 2026-09-11 17:05:26 +10:00
Danny White 1131e3e2ce fix(ui): default Button variant to default instead of primary (#50160) 
## What kind of change does this PR introduce?

Bug fix / design-system alignment for the legacy `Button` from `ui`.

## What is the current behavior?

Omitting `variant` on the legacy `Button` falls back to brand-green
`primary`. That makes accidental greens easy, and it is hard to spot the
real main action on busy pages.

## What is the new behavior?

- Legacy `Button` now defaults to neutral `default`
- Intentional primary CTAs (create, save, submit, marketing CTAs, and
matching `ButtonTooltip` usages) now set `variant="primary"` so their
appearance is unchanged
- Neutral actions that previously relied on the old fallback (cancel,
close, back, dashboard nav, and similar) become grey/white
- Design-system docs updated; regression tests cover the new default

`Button_Shadcn_` is unchanged. It already uses its own CVA default.

This is PR 1 of 2 in a stack. PR 2 drops now-redundant
`variant="default"` props.

## To test

Studio (http://localhost:8082):

- `/sign-in`: Sign in stays green
- Open a project → Database → Tables: New table stays green
- Auth → Users → Invite: Invite user stays green; Cancel / dismiss
controls stay neutral
- Project Settings → General: edit a field so Cancel and Save appear.
Cancel is neutral, Save is green

Design system (http://localhost:3003):

- Components → Button: default demo is neutral; primary demo is green;
featured preview is the default variant

Marketing (optional):

- www header: Start your project stays green; logged-in Dashboard is
neutral

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

- **Style**
- Buttons now default to a neutral style, while primary actions across
Studio, documentation, marketing pages, forms, dialogs, and error states
use prominent primary styling.
- Updated button examples and previews clarify the distinction between
default and primary variants.
  - Event registration now includes a directional arrow icon.

- **Tests**
- Added coverage confirming default button styling and explicit primary
styling behave as expected.
- Updated related test fixtures to use primary styling where
appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 11:23:17 +10:00
Saxon FletcherCursor AgentSaxon FletcherNik Richers
 		e0280cb650 docs: restructure observability navigation and overview (#49505) 
<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Stack

Draft stack extracted from `docs/monitoring`. Merge bottom-up. The
troubleshooting *catalog* rewrite (`content/troubleshooting` and the
Diagnosing UI) stays out of scope.

1. #49503 move inspect and advisors
2. #49501 split Studio logs from ClickHouse queries
3. #49500 treat reports as signal dashboards
4. #49502 add Observe the data hub
5. #49506 add agent setup components
6. #49504 add hire-an-agent templates
7. **#49505** restructure observability nav, overview, Detecting, and
flatten Observe the data ← **this PR**

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

YES

## What kind of change does this PR introduce?

Docs update. Top layer in the observability stack.

## What is the current behavior?

The section is still titled Monitoring and Debugging, with a Debugging /
Monitoring split that does not match the new pages. The debugging guide
is still the master layer-isolation + symptom table. Observe the data is
split into “what data” vs “where to observe it,” which duplicates the
source pages.

## What is the new behavior?

- Section title is Observability
- Overview groups Observe the data, Detect and resolve, Hire an agent,
and Export
- **Observe the data is flattened by source.** Logs, Metrics API,
Database, Advisors, and Reports each list where to read that source.
There is no separate MCP/API/CLI/Studio nav group.
- **Observe vs Detecting:** Observe is the catalog (what exists, how to
access it). Detecting is how to *use* those sources to pick up a Health
/ Security / Performance / Usage signal. Named errors skip to
Diagnosing.
- Studio Logs sits under Logs. Reports sits beside the other sources.
- Troubleshooting stays in the global menu and also appears as
Diagnosing under Detect and resolve

## Additional context

This is the last PR in the stack. Together the seven PRs reconstruct the
`docs/monitoring` observability IA and guide content, without shipping
the troubleshooting catalog overhaul.
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
Co-authored-by: Nik Richers <nik@validmind.ai>
 2026-09-04 13:38:39 +10:00
Saxon FletcherCursor AgentSaxon FletcherNik Richers
 		0bbd64743c docs: move inspect and advisors into observability (#49503) 
<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Stack

Draft stack extracted from `docs/monitoring`. Merge bottom-up.
Troubleshooting / debugging-guide rewrite is out of scope.

1. **#49503** move inspect and advisors ← **this PR**
2. #49501 split Studio logs from ClickHouse queries
3. #49500 treat reports as signal dashboards
4. #49502 add Observe the data hub
5. #49506 add agent setup components
6. #49504 add hire-an-agent templates
7. #49505 restructure observability nav and overview

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

YES

## What kind of change does this PR introduce?

Docs update. First layer in the observability stack.

## What is the current behavior?

Inspect and advisors live under Database (`/guides/database/inspect`,
`/guides/database/database-advisors`). Observability readers have to
leave the monitoring section to find them.

## What is the new behavior?

- Moves inspect into `/guides/monitoring-and-debugging/inspect`
- Adds `/guides/monitoring-and-debugging/advisors` (replaces the
Database Advisors page)
- Adds redirects and updates Studio/docs links so old URLs keep working
- Adds both pages to the existing Monitoring nav so they are
discoverable before the later IA PR

## Additional context

Inspect and advisors pages render as standard MDX. Redirects cover
`/docs/guides/database/inspect`,
`/docs/guides/database/database-advisors`, and
`/docs/guides/database/database-linter`. Debugging-guide content is
unchanged except the inspect URL.

## Self-review

- No leftover `/guides/database/inspect` or
`/guides/database/database-advisors` links in docs guides or Studio
linter/AI surfaces (historical blog posts left as-is)
- Smoke test path updated to
`/docs/guides/monitoring-and-debugging/advisors`
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>



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

- **New Features**
- Added a centralized Advisors guide for security and performance
checks.
- Updated database inspection guidance with live Postgres statistics,
cache hit-rate context, and query-analysis resources.

- **Documentation**
- Reorganized Advisors and database inspection content under Monitoring
and Debugging.
- Updated navigation, cross-references, in-product help links, and CLI
documentation links.
- Added permanent redirects from previous documentation URLs to preserve
access.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
Co-authored-by: Nik Richers <nik@validmind.ai>
 2026-09-04 13:38:36 +10:00
Ivan Vasilov 02cf09212e chore: Remove tsconfig paths (#49770) 
This PR removes all `paths` in `tsconfig.json` for all apps and
packages. They were added previosly because some of the components had a
`_Shadcn` suffix because of an ongoing migration. How that the migration
is done, the paths can be removed.

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

* **Refactor**
* Standardized shared UI component, utility, and icon imports across
design-system examples and application screens.
  * Simplified shared component access and project configuration.
  * Added shared access to anchor-link helpers and animation styles.

* **Compatibility**
* Updated component exports and imports without changing existing
behavior.
  * No changes to user-facing workflows, screens, or functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-01 13:13:30 +02:00
Saxon FletcherandAlaister Young ad203ae277 Merge compute and disk into Infrastructure (#48370) 
## Summary

This is the final step in merging compute and disk with infrastructure
to become a single place to manage everything. This moves everything
we've done in compute and disk over to infrastructure along with
redirects.

- Makes Infrastructure canonical for the completed compute and disk
configuration and usage charts.
- Moves Service Versions to General Project Settings.
- Removes the legacy Infrastructure activity implementation and
constants.
- Updates settings navigation, shortcuts, banners, billing links,
warning CTAs, usage pages, support suggestions, and other internal entry
points.
- Adds the permanent `/settings/compute-and-disk` redirect, removes its
Next and TanStack routes, regenerates the route tree, and updates the
migration checklist.
- Preserves query parameters and legacy metric anchors, including
`#cpu`.

## Stack

1. #48368
2. #48369
3. #48370 (this PR)

## How to test

1. Check out `chore/infra-compute-3-cutover`.
2. Test the Next implementation with `pnpm dev:studio`, then stop it and
test TanStack with `STUDIO_FRAMEWORK=tanstack pnpm dev:studio`.
3. In each implementation, open
`/project/<ref>/settings/infrastructure`. Confirm the page contains the
usage charts and the Scaling, Compute, Disk, and Advanced configuration
sections.
4. Open `/project/<ref>/settings/general`. Confirm Service Versions
appears there with its existing name, content, and styling, and no
longer appears on Infrastructure.
5. Open `/project/<ref>/settings/compute-and-disk?upgrade=micro#disk`.
Confirm it permanently redirects to
`/project/<ref>/settings/infrastructure?upgrade=micro#disk`, preserving
the query string and hash.
6. Confirm the settings menu exposes Infrastructure and no longer
exposes Compute and Disk. Repeat with platform and self-hosted settings.
7. Follow representative entry points from billing usage, resource
warning CTAs, upgrade banners, shortcuts, and support suggestions.
Confirm they land on Infrastructure and preserve any query parameters or
metric anchors such as `#cpu`.
8. Smoke-test compute and disk updates from Infrastructure, including
validation, the sticky review footer, and warning/critical chart states.


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

* **New Features**
* Consolidated compute and disk management under the **Infrastructure**
project settings page.
* Added a **Service versions** section to **General** project settings.
* **Bug Fixes**
* Updated links and upgrade CTAs across the product to route to the
correct **Infrastructure** or **Service versions** destinations.
* Added permanent redirects from legacy **Compute and Disk** to
**Infrastructure**, preserving query/hash.
  * Improved resource warning upgrade routing for compute scenarios.
* **Tests**
* Expanded automated coverage for **Infrastructure**, **Service
versions**, redirects, and warning-link routing.
* **Chores**
  * Updated ESLint rule baseline configuration for the studio app.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-07-29 19:26:28 +08:00
Joshen Lim bb9e3d8168 Joshen/fe 3967 support top for postgres in self hosted and local (#48386) 
## Context

Allow self-host / local dashboard to access the "Observability" pages
Currently only Query Performance will be accessible - eventually once
Database Connections is publicly ready, it'll also be accessible here
too

<img width="518" height="312" alt="image"
src="https://github.com/user-attachments/assets/18e5f6c7-ca77-4e90-81ec-c303bd31dc33"
/>


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

* **New Features**
* Navigation, sidebar, and mobile menus now consistently display
**Observability** and **Logs** based on enabled features, including the
unified logs preview.
* **Observability** destinations now adapt to platform and settings so
users land on the correct Query Performance view.
* **Bug Fixes**
* Improved Query Performance loading layout for a smoother loading
experience.
* Database selection is now shown only on supported platform
environments.
* **Tests**
  * Updated navigation/menu tests to match the new routing behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-29 16:07:57 +08:00
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377) 
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-07-29 00:48:56 +08:00
Danny White 3bca21b3f8 chore(a11y): convert leftover focus recipes to focus-ring (#48219) 
## What kind of change does this PR introduce?

Accessibility cleanup (DEPR-628).

## What is the current behavior?

Leftover call sites still use ad-hoc focus recipes
(`ring-foreground-muted`, `outline-brand`, Dialog/Sheet `focus:` rings,
etc.) instead of the shared utilities from #41575.

## What is the new behavior?

Converts those leftovers across `packages/ui`, Studio, www, docs, and
design-system to `focus-ring`, preferring `focus-visible`. Keeps
documented exceptions (`group-focus-visible`, InputGroup `:has()`).

## To test

Tab through controls (keyboard only). Expect a consistent offset ring on
`:focus-visible`, not a green/brand/custom stack, and no ring animation.

### www (marketing)

Preview:
https://zone-www-dot-com-git-danny-depr-628-focus-ring-fbccf9-supabase.vercel.app

- Global nav on `/`: Product, Developers, Solutions dropdowns; logo;
hamburger + mobile menu
- `/features`: view toggles and feature cards
- `/company`: card links
- `/changelog`: timeline / entry links
- `/partners/catalog`: grid/list toggle and partner cards
- `/pricing`: compute section expand control
- Product / Modules / Solutions sticky navs on product pages (e.g.
`/database`, `/storage`)
- `/state-of-startups`: TwoOptionToggle if present

### docs

Preview:
https://docs-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app

- Any guide page: top nav dropdowns and items
- Narrow viewport: hamburger, then mobile menu links + close
- Guide with PromptPanel / tabs: tab to prompt actions and tab list

### studio (dashboard)

Preview:
https://studio-staging-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app

- Project home: Connect section tiles; drag-handle focus on sortable
sections
- Integrations marketplace (`/project/<ref>/integrations`): featured
cards, list/grid toggle, list rows
- Auth (`/project/<ref>/auth/oauth-apps`,
`/project/<ref>/auth/providers`): open create/edit sheet, tab to close
(X)
- Database policies (`/project/<ref>/database/policies`): open policy
editor sheet, tab to close
- Storage policies (`/project/<ref>/storage/files/policies`): bucket
section links; policy modal close
- Query performance (`/project/<ref>/observability/query-performance`):
info icon buttons on metrics
- Replication pipeline detail (if available): slot lag / status info
icons
- Support (`/support/new`): attachment add/remove controls
- Table editor: spreadsheet import preview checkboxes; row text/JSON
editor TwoOptionToggle
- Any Dialog/Sheet/toast close (X): ring on keyboard focus only, not
mouse click

### design-system

Preview:
https://design-system-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app

- Colour palette swatches (keyboard focus)
- Form patterns sidepanel example: avatar / focusable control in the
example

## Additional context

- Linear: [DEPR-628](https://linear.app/supabase/issue/DEPR-628)
- Follow-ups: form-group CSS (DEPR-629), Storage columns selection
(DEPR-630), ESLint rule (DEPR-632)

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

* **Accessibility & Usability**
* Standardized keyboard focus indicators across navigation, dialogs,
forms, buttons, toggles, links, and tooltips using a consolidated focus
style.
* Improved toggle controls to use proper button semantics (instead of
clickable text), including `aria-pressed`/disabled handling and better
keyboard navigation.

* **Visual Updates**
* Harmonized hover/focus ring visuals across the design system, Studio,
documentation, and marketing pages while preserving existing layout and
interaction behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-23 08:52:22 +10:00
Joshen Lim c7803b8b9b Chore/add sessions database connections (#48094) 
## Context

Initial work for Top for Postgres - adds a "Sessions" section under a
new Observability segment "Database Connections"
NOTE: All the copywriting and naming might change - not sure what's an
ideal title for this
We'll also be iteratively building on top of this UI, adding more
actionable signals instead of just information
Changes are featured flagged, off for public

- This would essentially replace the "View ongoing queries" in the SQL
Editor by providing a dedicated UI
  - It checks against `pg_stat_activity` as per the ongoing queries UI
- We'll also subsequently deprecate the "Ongoing queries" UI in the SQL
editor
- Defaults into a "live mode" where the data is refreshed every 3
seconds via long-polling
<img width="983" height="474" alt="image"
src="https://github.com/user-attachments/assets/16402fe4-0b53-4f9e-9342-cdda26e3778a"
/>
- Supports filtering by state  
<img width="374" height="282" alt="image"
src="https://github.com/user-attachments/assets/562f8fbe-2dc6-48e7-8ec0-de7ffb8348d1"
/>
- Users can also terminate queries through here
<img width="247" height="164" alt="image"
src="https://github.com/user-attachments/assets/23a639dc-8f96-473a-a823-605b0bab02ee"
/>





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

# Release Notes

* **New Features**
* Added an Observability **Database Connections** page with a live
**Sessions** activity table (state/roles filtering, blocked-by details,
session duration, and per-session termination with confirmation).
* Included a **Live/Pause** toggle to control automatic refresh (~3
seconds).

* **Enhancements**
* Improved Reports selection filtering: supports optional option
quantities, better popover styling, sorted apply behavior, and shows
quantity inline.
* Query performance duration formatting now supports configurable
decimal precision.
  * Tooltips can now render richer content (string or React node).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-21 16:52:03 +08:00
Danny White e3d7267845 fix(studio): chip away explicit-tabindex ratchet debt (#48040) 
## What kind of change does this PR introduce?

A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).

## What is the current behavior?

Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).

## What is the new behavior?

- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`

Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.

## Additional context

Batches landed together so baseline conflicts stayed simple while
chipping away:

- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder

**Out of scope / intentional deferrals**

- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)

**Reviewer notes**

- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)

### To test

Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.

1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works

2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
   - `/org/<slug>/integrations` or project integrations marketplace
   - “Clear all”, grid/list toggles — Tab + activate

3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
   - Tab to grip / remove (X) / sensitive-data eye if shown

4. **Project Home** — section drag handles
   - Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
   - Mouse dnd still works

5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)

6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible

Disabled controls should be **skipped** by Tab.

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

* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-21 08:22:43 +10:00
ChloeGarciaMillerand f29db88edd add aria label in Query Performance (#47678) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Changes to the structure of the <Switch> and <Dialog> elements, which
previously resulted in two nested buttons in the DOM.
Adding the asChild attribute broke the styling of the <Switch>.
Added aria-label and tooltips to the <Switch> component and the
icon-only buttons.

<img width="1909" height="1254" alt="fix_observabilty"
src="https://github.com/user-attachments/assets/4dc99845-c083-455b-beed-1ac58b66dd6f"
/>

## What is the current behavior?

Icon-only buttond do not have explicit accessible names for screen
readers.
Two nested buttons are invalid in HTML and interfere with the operation
of screen readers.

## What is the new behavior?

Iicon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.
The DOM structure is now correct.

## Additional context

No visual changes were introduced.

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved accessibility in the query performance filter bar by adding
clear `aria-label` values to the Refresh and Reset report buttons.
* Improved accessibility and usability for cron job table actions by
adding a job-specific “actions” tooltip/label for the dropdown trigger.
* Updated the cron job enable/disable toggle with job-specific
`aria-label`s and refined the confirmation dialog flow to prevent
unintended row interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-16 15:36:35 +02:00
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 -->
 2026-07-06 15:29:16 +02:00
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
 2026-06-30 09:23:17 +02:00
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
 2026-06-29 15:46:16 +02:00
Gildas Garcia f34aa108d5 chore: dead code cleanup (#47294) 
## 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 unused interface, onboarding, and helper components
from the studio app.
* Cleaned up outdated branching, integrations, query performance,
support, and table/grid UI elements.
  * Removed a few unused utility hooks and key-mapping logic.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-25 12:34:19 +02:00
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 -->
 2026-06-25 14:48:19 +08:00
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>
 2026-06-16 23:59:58 +02:00
Joshen Lim 1baaded0bb Consolidate execute-sql-query into execute-sql-mutation (#46944) 
## Context

Just some clean up as I was going through stuff
- `useExecuteSqlQuery` is deprecated and not used at all
- As such `execute-sql-query` is technically irrelevant, the more
relevant file is `execute-sql-mutation`
- Hence opting to consolidate `execute-sql-query` into
`execute-sql-mutation`
- Also removing `ExecuteSqlError` since its just re-exporting the
`ResponseError` type

There's a lot of file changes but its essentially just updating the
importing statements across the files
 2026-06-16 00:07:16 +08:00
Etienne Stalmans fa55a9c4bd chore: use ro connstring for observability (#44806) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

function change

## What is the current behavior?

defaults to the read-write connection string when doing observability
report queries

## What is the new behavior?

uses the read-only connection string instead

## Additional context

these should only ever be read-only operations, reporting should not
have side effects and this adds a guardrail to ensure that remains the
case


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

## Summary by CodeRabbit

**Bug Fixes**
- Corrected database replica query handling by using read-only
connection strings for replica database access.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-02 17:03:22 +02:00
Alaister YoungandAlaister Young b0d023bd04 fix(studio): remove default DataGrid borders across studio surfaces (#46448) 
Follow-up to #46413, which fixed an unwanted top border on the Auth
Users grid by upgrading `border-t-0` → `border-t-0!` so the Tailwind
rule actually wins over react-data-grid's `.rdg { border: 1px solid
var(--rdg-border-color); }` shorthand. The same issue exists on every
other DataGrid in Studio — this applies the fix consistently.

**Changed:**
- `border-t-0! border-b-0!` applied to all `<DataGrid>` call sites in
Studio (11 in total)

Fixes this issue everywhere:
<img width="609" height="223" alt="Screenshot 2026-05-28 at 3 40 02 PM"
src="https://github.com/user-attachments/assets/f49d8849-dd58-4675-ade4-a2656aadb8f9"
/>

## To test

Spot-check that the top/bottom borders look right (no doubled border
under the page chrome, no extra line at the bottom of the table) on each
route below. Use any project ref for `[ref]`:

- `/project/[ref]/observability/query-performance` — main grid + the
WithStatements grid inside
- `/project/[ref]/observability/query-insights` — both modes (explorer +
triage)
- `/project/[ref]/advisors/security`
- `/project/[ref]/advisors/performance`
- `/project/[ref]/integrations/cron/jobs` — jobs list
- `/project/[ref]/integrations/cron/jobs/<jobName>` — previous runs tab
- `/project/[ref]/integrations/queues/queues` — queues list
- `/project/[ref]/integrations/queues/queues/<queueName>` — single queue
messages
- `/project/[ref]/integrations/vault/secrets`
- `/project/[ref]/sql/new` — results pane at the bottom
- `/project/[ref]/realtime/inspector`
- `/project/[ref]/logs/explorer` — and the preview pages: `auth-logs`,
`edge-logs`, `postgres-logs`, `cron-logs`, `pg-upgrade-logs`,
`postgrest-logs`, `realtime-logs`, `replication-logs`, `pgcron-logs`,
`storage-logs`, `edge-functions-logs`, `pooler-logs`,
`dedicated-pooler-logs`
- `/project/[ref]/functions/[functionSlug]/logs` and `/invocations`

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

## Summary by CodeRabbit

* **Style**
* Refined border styling on data grids across multiple features
including integrations, query tools, and logs for improved visual
consistency.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46448?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

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

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-05-28 08:01:43 +00:00
Ali Waseem 42c0cb7171 feat(studio): keyboard shortcuts for observability pages (#46277) 
## Summary

Wires Linear-style keyboard shortcuts across all observability pages —
refresh, time picker, filters, and sub-page navigation — with hover
tooltips surfacing each binding.

| Page | Shortcut | Action |
| --- | --- | --- |
| Overview | `Shift+R` | Refresh report |
| Overview | `Shift+P` | Open time picker |
| Query Performance | `Shift+R` | Refresh report |
| Query Performance | `R` then `C` | Reset report
(`pg_stat_statements_reset`) |
| Query Performance | `Shift+F` | Search queries |
| Query Performance | `F` then `C` | Reset filters |
| API Gateway | `Shift+R` | Refresh report |
| API Gateway | `Shift+P` | Open time picker |
| API Gateway | `Shift+F` | Add filter |
| API Gateway | `F` then `C` | Reset filters |
| API Gateway | `Shift+S` | Filter requests by service |
| Database | `Shift+R` | Refresh report |
| Database | `Shift+P` | Open time picker |
| Auth | `Shift+R` | Refresh report |
| Auth | `Shift+P` | Open time picker |
| Data API | `Shift+R` | Refresh report |
| Data API | `Shift+P` | Open time picker |
| Storage | `Shift+R` | Refresh report |
| Storage | `Shift+P` | Open time picker |
| Realtime | `Shift+R` | Refresh report |
| Realtime | `Shift+P` | Open time picker |
| Edge Functions | `Shift+R` | Refresh report |
| Edge Functions | `Shift+P` | Open time picker |
| All observability pages | `U` then `O/Q/G/D/P/A/F/S/L` | Jump to
sub-page |

## Test plan

- [ ] Each shortcut fires on its page; tooltip on hover shows the
binding
- [ ] Picker shortcut toggles the popover open/closed without leaving
the tooltip visible
- [ ] Reset-report on Query Performance opens the confirm modal
- [ ] `Escape` on the query search clears the value, then blurs
- [ ] No "Shift+R already registered" / Tooltip controlled-uncontrolled
warnings in the console

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

* **New Features**
* Keyboard shortcuts to navigate Observability pages and perform common
actions (refresh, toggle date picker/interval, focus search, reset
filters, create reports).
* Shortcut hints shown on relevant buttons and controls; date pickers
and interval dropdowns can be controlled via shortcuts.
* Global shortcut groups/registries added for Observability navigation
and page actions.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46277?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-25 07:37:16 -06:00
Danny WhiteandGildas Garcia 331278bfe4 feat(studio): add async handling to AlertDialog actions (#45960) 
## What kind of change does this PR introduce?

Feature, bug fix, and docs update. Addresses the AlertDialog async
action behaviour discussed in Slack and follow-up PR feedback.

## What is the current behavior?

`AlertDialogAction` delegates directly to Radix, so confirm actions
close the dialog immediately on click. Async mutation flows have to use
`asChild` with `event.preventDefault()` and a custom loading button to
keep the dialog open while work is in flight.

## What is the new behavior?

- `AlertDialogAction` now accepts async handlers and a controlled
`loading` prop. Promise-returning actions keep the dialog open, show the
existing Button loading state, disable cancel/dismissal while pending,
close on success, and stay open on rejection.
- Existing workaround usages in Studio have been migrated to the direct
action API (see 'To test' callsite list below)
- design-system docs now include async action examples and
`AlertDialogBody` guidance for inline feedback


https://github.com/user-attachments/assets/1af66410-e9f9-4231-9c6d-fe650bd717a4


## Additional context

- [ ] Once #45572 is rebased onto this change, `ResetTemplateDialog`
should use `AlertDialogAction loading={isResettingTemplate}` with a
promise-returning reset handler instead of a plain loading `Button` in
`AlertDialogFooter`.

## To test

- [x] On Studio API Keys settings, use a project with no publishable or
secret API keys, click the “Create API keys” banner action, and confirm
the Alert Dialog stays open with loading until the default publishable
and secret keys are created.
- [x] Delete a JIT database access rule and confirm the Alert Dialog
stays open with loading until deletion succeeds, and stays open with
inline feedback if it fails.
- [x] With temporary access disabled and existing rules configured,
enable temporary access and confirm the “This will activate existing
rules” Alert Dialog stays open with loading until the configuration
update succeeds, and stays open with inline feedback if it fails.
- [x] Disable external replication and confirm the Alert Dialog stays
open with loading until the mutation succeeds.
- [x] Enable Index Advisor and confirm the Alert Dialog stays open with
loading until the mutation succeeds, and stays open with inline feedback
if it fails.


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

* **New Features**
* Alert dialogs support async actions with built-in loading, dismissal
blocking while pending, and preserved dialog on error.
* Two interactive examples demonstrating async success and error flows.

* **Improvements**
* Dialogs now surface inline error messages and consistent
loading/confirm behavior across flows (create keys, replication, JIT DB
access, index advisor).
  * Minor UI refinements for action controls.

* **Documentation**
* Docs updated with async-action guidance and inline-error
recommendations.

* **Tests**
  * New test suite validating async dialog behaviors.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45960)

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

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-05-22 11:44:45 +10:00
Gildas Garcia 8577b5fe77 chore: remove <Accordion> _Shadcn_ suffix (#46107) 
## Problem

The `_Shadcn_` suffix isn't needed anymore on Accordion components

## Solution

- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier

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

## Summary by CodeRabbit

* **Refactor**
* Updated accordion component exports and imports to use unified naming
conventions across the codebase, improving consistency for developers
using the UI library.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46107?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-19 17:04:00 +02:00
Pamela Chia 0bed80b340 chore(telemetry): clean up frontend event catalog (#45964) 
## Summary
Resolves 13 findings (2 HIGH, 5 MEDIUM, 6 LOW) from the frontend
telemetry audit: 1 action-string collision, 1 camelCase experiment name,
9 dead events removed, 4 missing org groups attached, 1 ambiguous
property renamed, 1 raw-string property narrowed, plus consolidations
and a structural tightening on TABLE_EVENT_ACTIONS.

## Changes
### HIGH
- Rename `EventPageCtaClickedEvent.action` to
`www_event_page_cta_clicked` so it no longer collides with the pricing
CTA event (which had a different schema sharing the same action string)
- Snake_case the header-upgrade experiment exposure name
(`headerUpgradeCta_experiment_exposed` →
`header_upgrade_cta_experiment_exposed`); PostHog flag key and
`?source=` URL param unchanged

### MEDIUM
- Remove 4 dead `ProjectCreation*Step*` events (referenced a v2 route
that doesn't exist; 0 emissions)
- Remove 4 dead experiment exposure events:
`ProjectCreationRlsOptionExperimentExposed`, `HomeNewExperimentExposed`,
`TableCreateGeneratePoliciesExperimentExposed`,
`TableCreateGeneratePoliciesExperimentConverted` (0 emissions)
- Attach org group to `dpa_request_button_clicked` (0% had `$group_0`
per Hex)
- Delete `RegisterStateOfStartups2025NewsletterClicked` (interface
naming outlier, 0 emissions, page renamed to 2026)
- Rename `AssistantSuggestionRunQueryClickedEvent.category` to
`mutationType` with tightened literal union (`'functions' |
'rls-policies' | 'unknown'`)
- Attach org group to `project_creation_default_privileges_exposed` on
Vercel surface via explicit `groupOverrides` (auto-injection misses
because `useSelectedOrganizationQuery` is undefined on that page)

### LOW
- Consolidate `IndexAdvisorBannerEnableButtonClickedEvent` +
`IndexAdvisorDialogEnableButtonClickedEvent` into one event with
`origin: 'banner' | 'dialog'`
- Rename `ImportDataFileDroppedEvent` → `ImportDataFileAddedEvent` so
the interface name matches the action and the verb is on the approved
list
- Rename `LogDrainConfirmButtonSubmittedEvent` → `LogDrainRemovedEvent`
and action to `log_drain_removed` (fires on delete-confirm modal,
matches `CronJobRemovedEvent` pattern)
- Add `type` property to `CronJobRemovedEvent` (parsed from the job's
command), matching the create/update event shape
- Tighten `TABLE_EVENT_ACTIONS` values with `satisfies` against the
event union so renames in the union fail typecheck here too
- Attach org group to `www_pricing_plan_cta_clicked` at 5 emission sites
when an org is available in the page context
- Narrow `unified_logs_row_clicked.logType` from raw `string` to the
5-literal `LOG_TYPES` union (zod already validates server values)

### Bundled refactor
Migrated 5 emission sites from deprecated `useSendEventMutation` to
`useTrack` while their containing files were being edited: `DPA.tsx`,
`DisplayBlockRenderer.tsx`, `Grid.tsx` (2 events), `DeleteCronJob.tsx`.
Full sweep of the remaining ~79 files is a separate follow-up.

## Testing

Mostly just renaming of events

## Linear
- fixes GROWTH-798


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

## Summary by CodeRabbit

* **Refactor**
* Standardized telemetry to a unified tracking system for more
consistent analytics.
  * Simplified experiment exposure reporting for upgrade prompts.

* **New Features**
* More granular tracking for CSV import, cron job deletions, log drain
removals, DPA downloads/requests, and pricing CTAs.
  * Assistant now classifies mutation queries more precisely.

* **Bug Fixes**
* Improved default-privileges exposure logic on Vercel deployments
(skips when org missing).

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45964)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-18 18:21:58 +08:00
Charis 2d4e87f579 studio: SafeSql for reports, query performance, privileges (4/7) (#45998) 
## Summary

Part 4 of the SafeSql migration stack
([#45897](https://github.com/supabase/supabase/pull/45897),
[#45903](https://github.com/supabase/supabase/pull/45903),
[#45990](https://github.com/supabase/supabase/pull/45990), this PR, …).

Converts the remaining reports, query performance, observability, index
advisor, and privileges call sites of `executeSql` to produce
`SafeSqlFragment` values. The `ReportQuery.sql` field flips from
`string` to `SafeSqlFragment`, which cascades into every consumer —
landed here atomically so each branch typechecks cleanly.

Touched areas:

- `interfaces/Reports/*` — `ReportQuery.sql: SafeSqlFragment`, plus all
report definitions/utilities updated
- `interfaces/QueryPerformance/useQueryPerformanceQuery.ts`
- `interfaces/Database/IndexAdvisor/*` and
`data/database/{table-index-advisor,retrieve-index-advisor-result}-query.ts`
-
`data/privileges/{table-api-access,update-exposed-entities}-mutation.ts`
- `interfaces/Storage/StoragePolicies/StoragePolicies.tsx`
- `hooks/analytics/useDbQuery.tsx`
- `Observability/useSlowQueriesCount.ts` +
`useQueryInsightsIssues.utils.test.ts`

## Test plan

- [x] `pnpm typecheck` passes
- [x] `useQueryInsightsIssues.utils.test.ts` passes
- [x] Dev-server smoke test: reports pages, query performance, index
advisor, storage policies

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

* **Refactor**
* Reworked SQL construction and typings across reporting, query
performance, index advisor, and privilege features to use safer SQL
fragments, improving reliability and preventing query composition
issues.
* **Types**
* Reporting query types were split to distinguish database vs. logs
queries, enabling correct handling and validation.
* **Docs/Utils**
  * Added a helper to consistently generate logs SQL for report hooks.
* **Tests**
  * Updated tests to exercise the new SQL-building API.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45998)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-15 14:50:38 -04:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867) 
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
 2026-05-15 14:55:37 +02:00
kemal.earth 376d85d7b2 fix(studio): query performance query column truncation (#45878) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Previously our Query Performance Query column was scrollable inline.
This means if you have thicc scrollbars turned on via your OS, it would
look a bit clunky. This fix truncates query, full query still viewable
in the click through sheet.

| Before | After |
|--------|--------|
| <img width="1106" height="1164" alt="cleanshot_2026-05-13_at_18 56
16_2x"
src="https://github.com/user-attachments/assets/4718e8d7-d3c5-499b-a125-6192ac547bfe"
/> | <img width="456" height="286" alt="Screenshot 2026-05-13 at 13 34
30"
src="https://github.com/user-attachments/assets/7446afb5-c0d7-4272-905a-42c144334472"
/> |






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

## Summary by CodeRabbit

## Release Notes

* **Style**
* Adjusted query column width in the query performance monitoring table
for optimized layout.

* **Bug Fixes**
* Enhanced query display rendering with improved data type handling to
prevent potential display issues.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45878)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-13 13:48:50 +01:00
kemal.earth dcca71f694 fix(studio): query performance detail panel metadata (#45690) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Tailwind 4 applies `divide` a little bit differently, so a small fix
applied here to get it back to how it looked.

| Header | Header |
|--------|--------|
| <img width="485" height="488" alt="Screenshot 2026-05-07 at 16 41 18"
src="https://github.com/user-attachments/assets/d7f678fb-1179-4153-99fa-bfbe247fe519"
/> | <img width="485" height="487" alt="Screenshot 2026-05-07 at 16 41
24"
src="https://github.com/user-attachments/assets/a2ce53d4-5296-475c-a4d8-38b0820e820c"
/> |




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

## Summary by CodeRabbit

* **Style**
* Adjusted metadata header spacing and list item padding in the Query
Performance interface for improved visual consistency and layout
alignment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-07 16:55:33 +01:00
Joshen LimandGildas Garcia f7ea722b35 Consolidate grid header actions in table editor into a single row (#45504) 
## Consolidate Table Editor grid header actions into a single row


https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b

## Changes involved
- Index advisor, Realtime, and API docs are now behind a dropdown menu
button (Treated as secondary actions)
- Grid header actions shifted into the same row as filter bar (more
space for data grid)
- Header actions will hide while filter bar is in focus (remove
distractions, more space for filter bar)

## Changes to filter bar
- Filter bar will refocus when deleting a filter
- Clicking on the search icon will focus on the free form input of the
filter bar

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

* **New Features**
* Added a “More” dropdown in grid actions to access Realtime, API docs,
and Index Advisor.
* New dialogs for enabling Index Advisor and toggling Realtime are now
consistently managed.

* **Improvements**
* Improved filter focus handling with auto-refocus when conditions
change and responsive header behavior.
* Adjusted popover alignment, separator visuals,
header/footer/pagination layout and sizing.
* Filter bar now supports programmatic focus; Connect button supports
icon-only mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-05-06 10:53:49 +08:00
Charis 0433eeb5f5 feat(studio): mark sql provenance for safety (#45336) 
Mark provenance of SQL via the branded types SafeSqlFragment and
UntrustedSqlFragment. Only SafeSqlFragment should be executed;
UntrustedSqlFragments require some kind of implicit user approval (show
on screen + user has to click something) before they are promoted to
SafeSqlFragment.

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

* **New Features**
* Editor and RLS tester show loading states for inferred/generated SQL
and include a dedicated user SQL editor for safer edits.

* **Refactor**
* Platform-wide SQL handling tightened: snippets and AI-generated SQL
are treated as untrusted/display-only until promoted, improving safety
and consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-04 13:08:06 -04:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318) 
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
 2026-04-30 10:53:24 +00:00
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285) 
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
 2026-04-28 11:33:53 +02:00
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264) 
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
 2026-04-27 17:42:34 +08:00
Ali Waseem a70264c8ad fix(studio): coerce index advisor cost values to numbers (#44397) 
## Summary

- Coerces `before`/`after` cost values to `Number()` in
`QueryPanelScoreSection` and `calculateImprovement` before any
comparison or arithmetic
- Fixes contradictory index advisor display where correct cost numbers
showed 0% improvement and wrong arrow direction

## Root Cause

When `index_advisor_result` is prefetched from the Reports SQL query
(via `json_build_object`), cost values can arrive as strings instead of
numbers. JavaScript string comparison is lexicographic, producing wrong
results:

| Expression | Numbers | Strings |
|---|---|---|
| `after > before` (arrow) | `50 > 100` → `false` ✅ | `"50" > "100"` →
`true` ❌ |
| `costBefore <= costAfter` (improvement calc) | `100 <= 50` → `false` ✅
| `"100" <= "50"` → `true` ❌ |

The direct fetch path (`retrieve-index-advisor-result-query.ts`)
validates through Zod and is unaffected. Only the prefetched path lacks
validation.




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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved numeric value handling in query performance calculations to
ensure more accurate and reliable improvement metrics.

* **Refactor**
* Enhanced type safety and numeric coercion for query performance score
comparisons, resulting in more consistent and robust metric
calculations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-02 13:30:00 +00:00
Etienne Stalmans 78d4de5b65 fix: escaping in performance queries (#44425) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

search is passed in un-escaped

## What is the new behavior?

escapes to ensure correct query format



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

## Summary by CodeRabbit

## Bug Fixes
- Enhanced query safety and reliability in performance monitoring with
improved parameter handling
- Fixed query condition handling for edge cases with non-finite values

## Refactor
- Simplified query generation logic and streamlined internal
implementation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-04-01 14:00:42 +02:00
CharisCopilotIvan Vasilov
 		4a0bb36ca8 style: require sorted imports in studio/components (#44408) 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
 2026-04-01 10:22:37 +02:00
Jordi EnricandClaude Sonnet 4.6 c689e91160 fix(observability): guard pg_stat_statements queries against missing extension FE-2843 (#44357) 
## Problem

On self-hosted Supabase instances where the `pg_stat_statements`
extension is not installed, the Observability Overview page
automatically queries the extension on every page load. This produces
"relation pg_stat_statements does not exist" errors in Postgres logs for
all projects without the extension. Additionally, if a user navigated to
the Query Performance page, they received a generic error with no
actionable guidance. A secondary issue allowed malformed sort URL params
(e.g. `?sort=created_at:asc&order=asc`) to be interpolated directly into
SQL ORDER BY clauses.

## Fix

- Wrapped the `useSlowQueriesCount` SQL in a `CASE WHEN EXISTS (SELECT 1
FROM pg_extension WHERE extname = 'pg_stat_statements')` guard. The
query now returns 0 silently instead of erroring when the extension is
absent.
- Added a `VALID_SORT_COLUMNS` whitelist in
`generateQueryPerformanceSql`. Invalid column names from URL params are
rejected and the query falls back to the preset default ORDER BY.
- When the Query Performance page fails because `pg_stat_statements`
does not exist, a `warning` admonition now appears with "Enable it in
Database -> Extensions" guidance instead of a generic destructive error.
The Sentry capture is skipped for this expected configuration state.
- Extracted `buildSlowQueriesCountSql` as a testable function and added
unit tests for both fixes.

## How to test

**Extension not installed (self-hosted):**
1. Run a self-hosted Supabase instance without the `pg_stat_statements`
extension enabled.
2. Navigate to the Observability Overview page.
3. Check Postgres logs -- no "relation pg_stat_statements does not
exist" errors should appear.
4. Navigate to the Query Performance page.
5. Expected: a yellow warning admonition appears saying the extension is
not enabled, with a link to Database -> Extensions. No red error.

**Extension installed (normal flow):**
1. With `pg_stat_statements` installed, navigate to Observability
Overview.
2. Expected: slow queries count loads as normal.
3. Navigate to Query Performance -- data loads as normal.

**Invalid sort URL param:**
1. Navigate to
`/project/<ref>/observability/query-performance?sort=created_at:asc&order=asc`.
2. Expected: the page loads and falls back to the default sort order
(total time descending). No SQL error in logs.

**Unit tests:**
```
node apps/studio/node_modules/vitest/dist/cli.js run --no-coverage \
  apps/studio/components/interfaces/Observability/useSlowQueriesCount.test.ts \
  apps/studio/components/interfaces/QueryPerformance/useQueryPerformanceQuery.test.ts
```
All 28 tests should pass.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-31 17:23:39 +02:00
Ivan Vasilov ee8eae7309 chore: Clean the ui package from next imports (#44278) 
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.

`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.

The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
 2026-03-30 10:58:37 +02:00
Jordi EnricandClaude Sonnet 4.6 2e1795dfa0 feat(studio): add pagination to query performance page FE-2774 (#43697) 
## Problem

The Query Performance page loaded all results in a single query with a
fixed limit of 20 rows, giving users no way to browse beyond the first
page. There was also no way to control how many rows were shown at once.

## Fix

adds pagination 

## How to test

- Navigate to `/observability/query-performance` in Studio
- scroll to bottom
- should automatically load more results

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-23 15:27:43 +01:00
Joshen Lim cc31ed72c1 Add source filter in query performance page (#43740) 
## Context

Adds a source filter for the query performance advisor so you can filter
out queries from the dashboard, or not from the dashboard

<img width="309" height="217" alt="image"
src="https://github.com/user-attachments/assets/c1fab9af-e57e-482f-afdb-d77a6600edb3"
/>

For transparency how this works:
- Queries fired via the dashboard through the /query endpoint get
enriched with metadata from the API to include a comment like `--
source: dashboard`
- That's mainly how this filter works atm, to check if this comment
exists if the source "Dashboard" is selected, and the inverse if the
source "Non dashboard" is selected
 2026-03-18 20:22:47 +08:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849) 
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-03-17 11:17:42 +01:00
kemal.earthClaude Sonnet 4.6Ali Waseem
 		7ed8ab83a8 feat(studio): query insights improvements (#43109) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

This introduces Query Insights. It's the first edition of possible
future updates. This takes our old prototype and builds upon it for a
more action driven insights view.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
 2026-03-13 15:09:26 +00:00
kemal.earth 3aa22f14c8 fix(studio): index advisor recommendation column name (#43601) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Spotted by @kostasb, index advisor was recommending slightly different
column names. Index advisor was running on mismatched queries thus
recommending for the wrong table.
 2026-03-11 16:16:31 +00:00
Joshen Lim 564f4f66ee Joshen/fe 2660 clean up stale feature flags enabled for 2 months part 1 (#43329) 
## Context 

Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months
- advisorRules
- newJwtSecrets
- isWorkOSTPAEnabled
- EnableOAuth21
- gitlessBranching
- showRefreshToast
- awsPrivateLinkIntegration
- useBedrockAssistant (Already not used)
- enableStripeSyncEngineIntegration
- ShowExplainWithAiInQueryPerformance

Doing it in 2 parts so its easier for review
 2026-03-04 13:08:39 +08:00
Ali Waseem 1890624a1a fix: add missing keys to studio (#42957) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Cleanup from React Doctor! Components missing keys
 2026-02-18 09:05:22 -07:00