mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
master
151
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Chris Opland
|
db2242e223 | fix(o11y): add connections to footer (#50928) | ||
|
Chris Opland
|
509afd0bf0 | fix(o11y): support partial metric loading (#50867) | ||
|
kemal.earth
|
de3524034f |
feat(studio): add ability to drag top section map (#50904)
## Problem Top section map view on project overview wasn't very usable on smaller window sizes. No ability to drag and see any instances on west coast without stretching viewport or it being cut off. ## Solution Adds dragging to map area so you can bring into view locations out of the bounding box. ## Review instructions 1. Switch to map view and **drag the map** — it should pan, and the previously cut-off regions should be reachable. 2. The drag should **track the cursor 1:1**, with no rubber-band lag. (The 300ms transform transition is what caused that; it's now suppressed mid-drag.) 3. Drag hard toward each edge — the map should **stop at the frame bounds** rather than sliding off into empty background. 4. Cursor should read `grab`, and `grabbing` while dragging. ### Regressions to rule out 5. **Wheel/trackpad scroll over the map** must not zoom it, and the page behind it must still scroll normally. Trackpad pinch must not zoom either. 6. **Double-click** on the map must not zoom. 7. **Click a region marker** — still recenters, zooms to 2.0, and opens the region detail panel bottom-right. The recenter should still animate smoothly. 8. **Close** in that panel still resets to the default center and zoom. 9. **Hover a marker** at default zoom — the country/database tooltip still appears; the dashed lines between primary and replicas still render. 10. Toggle back to **flow view** — unchanged. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Map view now supports dragging to pan, with cursor changes to indicate when panning is available or in progress. * **Bug Fixes** * Map zoom input is filtered based on event type, modifier keys, and mouse-button state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
d067e81a69 |
fix(ui): align primary colours across text, buttons, and controls (#50697)
## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. | Before | After | | --- | --- | | <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> | <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> | | <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> | <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> | | <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> | <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> | ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable. |
||
|
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> |
||
|
Danny WhiteandJoshen Lim
|
a31ca2bad0 |
fix(ui): make brand text readable across themes (#49871)
## What kind of change does this PR introduce? Bug fix and design-system update. Resolves DEPR-316. Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR (https://github.com/supabase/supabase/pull/50564) stacked on this one. ## What is the current behavior? `text-brand` resolves to the canonical bright brand green in places that need readable text, which fails WCAG AA on light surfaces. A separate `text-brand-display` token adds another green for large type. ## What is the new behavior? - `text-brand` maps to accessible `--primary` (light mode darkened to meet ~4.5:1 AA) - `--hue` / `--primary-hue` aligned to 157.5 - `text-brand-display` removed; former display callsites use `text-brand` - Bright fills/borders stay on `brand-default` - Design-system colour and typography docs updated | Before | After | | --- | --- | | <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13 09@2x" src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7" /> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42 05@2x" src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114" /> | | <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13 53@2x" src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e" /> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41 37@2x" src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc" /> | | <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16 30@2x" src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc" /> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42 52@2x" src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c" /> | | <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18 53@2x" src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427" /> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43 19@2x" src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b" /> | | <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32 04@2x" src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d" /> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44 13@2x" src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8" /> | | <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34 44@2x" src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79" /> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44 56@2x" src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1" /> | ## To test Test each callsite **in light mode** (dark mode is largely unchanged). ### WWW - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): “Scale to millions” uses readable brand text (display token is gone) - [Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers): small “Careers” eyebrow readable; green dividers stay bright `brand-default` - [Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us): email / policy links use readable brand text - [Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions): “Ask about early access to BYOC” readable ### Docs - [Docs homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs): “DOCS” wordmark and resource links readable - [Database overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview): nav / footer brand links readable - [JavaScript reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction): active sidebar treatment readable ### Design system - [Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography): documents `text-brand` only (no display) - [Colour usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage): `text-brand` vs `bg-brand-default` - [Design-system homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): brand text examples across themes ### Studio - [Auth providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright - [Database policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true): template hover text more legible - [Database connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections): “Live” status readable; animated dot stays bright green --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Gildas GarciaandAlaister Young
|
737b8595f2 |
Update API types (#50234)
## Problem platform, v1 and v2 have been already completely migrated and introduced some changes. Some types have been renamed, some outputs and inputs updated. ## Solution - Update the API types - Fix the TS errors ## Update Taking this over to unblock #50134, which needs the new scoped token permission ids from the regenerated types. - Merged `master`. - Regenerated `api-v2.d.ts` from the production spec. The previous files came from a local API that exposed a webhook events endpoint production doesn't have yet. Production has since added standardized 400 error responses on the v2 organization endpoints. `api-v1.d.ts` and `platform.d.ts` already matched production. - Fixed `verify-production-types`. It formatted the regenerated files in a temp directory outside the repository, so Prettier fell back to its defaults and the comparison could never match the committed files. It now passes the repository config explicitly. `pnpm api:verify-types` passes on this branch. - Verified locally: `pnpm typecheck`, `pnpm api:verify-types`, Studio unit tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Preserved descriptions when saving, sharing, moving, or unsharing notebooks, reports, SQL snippets, and saved queries. * Improved handling of empty or null values across notebook descriptions, billing usage, pooler settings, and infrastructure fields. * Improved read-replica connection handling, including read-only connection strings. * Updated storage configuration and capability handling to match current settings. * **API and Compatibility** * Updated organization, project, storage, OAuth, billing, and infrastructure data handling to match current API responses. * OAuth app creation and updates now require scopes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Alaister YoungandAlaister Young
|
a14fc04937 |
[MUL-1475] fix(studio): show setup state on HA topology diagram during boot (#49786)
While an HA (Multigres) project is provisioning, the `/ha-admin` topology endpoints fail or return an empty topology as a matter of course — the cluster topology diagram rendered that as a hard "Failed to retrieve cluster topology" error (or the "Cluster topology unavailable" contact-support state). The diagram now checks the project status and, while the project is building (`COMING_UP`/`UNKNOWN`, same pair `ProjectLayout` treats as booting), shows a "Setting up project" empty state instead. Both the project-detail query (self-polls while booting) and the ha-admin queries (30s interval) keep refetching, so the diagram appears on its own once boot completes. Once the project is past provisioning, genuine errors and the empty-topology state surface exactly as before. <img width="1491" height="769" alt="mul1475-setting-up-state-wide" src="https://github.com/user-attachments/assets/3f095634-9939-41cd-88c3-0849cbad7374" /> **Added:** - Component tests for the four states: booting + error, booting + empty (→ setup state), running + error (→ error alert), running + empty (→ unavailable state) Addresses [MUL-1475](https://linear.app/supabase/issue/MUL-1475/polish-infra-diagram). ## To test - On an HA project mid-provisioning (or simulate: dev toolbar project-status override → `COMING_UP`, with `/ha-admin` requests failing), open Settings → Infrastructure — the topology panel shows "Setting up project" with a spinner, not the error alert - On a healthy HA project, the topology diagram renders as before; if `/ha-admin` genuinely fails there, the error alert still shows - `pnpm --filter studio exec vitest run components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/HaInstanceConfiguration.test.tsx` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a “Setting up project” state while projects are provisioning or their status is unavailable. * Prevents premature topology errors or unavailable messages during project setup. * Added accessible status announcements for loading and setup-state transitions. * **Bug Fixes** * Active projects now correctly display topology errors when cluster health data cannot be retrieved. * Healthy responses with no topology data display an appropriate unavailable state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
10950d286b |
chore(studio): address review comments on Multigres topology diagram (#49592)
<!-- ccr-slack-attribution --> _Requested by **Alaister Young** · [Slack thread](https://supabase.slack.com/archives/C0161K73J1J/p1787738517181409?thread_ts=1787635785.354489&cid=C0161K73J1J)_ Follow-up to #49298, which was squash-merged before @joshenlim's last review round was addressed. Picking up the review comments here. ## 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? Chore — dead code removal and comment corrections. No behavior change. ## What is the current behavior? Three of @joshenlim's review comments on #49298 are still open on master: - [Dead code in `ha-cluster-cells-query.ts`](https://github.com/supabase/supabase/pull/49298#discussion_r3861029414) — "seems to be dead code? no one's consuming this file" - [Dead code in `ha-cluster-databases-query.ts`](https://github.com/supabase/supabase/pull/49298#discussion_r3861031230) — "likewise - seems to be dead code" - [`STATUS_BADGE_VARIANTS` statuses](https://github.com/supabase/supabase/pull/49298#discussion_r3861095281) — "just to sanity check these are the only statuses? are there any failure states? e.g 'Failed'" Concretely, on master today: - `apps/studio/data/ha-admin/ha-cluster-cells-query.ts` and `apps/studio/data/ha-admin/ha-cluster-databases-query.ts` ship query options that nothing imports. The diagram only reads `/poolers` and `/gateways`. - `multipoolerSchema.lifecycleStatus` is an undocumented `z.string()`, while its neighbours `type` and `servingStatus` both list their expected proto values in a comment. - The comment above `HA_POOLER_STATUS_LABELS` claims the labels "Matches the status vocabulary of the read replica surfaces (getStatusLabel)". They don't — `getStatusLabel` in `ReadReplicas/ReadReplicas.utils.ts` also returns `Failed`, `Restarting`, `Resizing` and `Restoring`, none of which the HA labels have. ## What is the new behavior? - Deleted both dead query modules and pruned the orphaned `cells` and `databases` factories from `haAdminKeys`, keeping `poolers` and `gateways`. Verified by grep that neither file name nor any of their exported symbols (`haClusterCellsQueryOptions`, `HaClusterCellsData`, `haClusterDatabasesQueryOptions`, `HaClusterDatabasesData`, the `*Variables`/`*Error` types) nor `haAdminKeys.cells` / `haAdminKeys.databases` has a single reference left anywhere outside the deleted files. No re-export shims left behind. `get-ha-admin.ts` stays — `poolers` and `gateways` still use it. - Documented `lifecycleStatus` against the actual enum, `PoolerLifecycleStatus` in [multigres `proto/clustermetadata.proto`](https://github.com/multigres/multigres/blob/main/proto/clustermetadata.proto): `LIFECYCLE_UNKNOWN` (zero value, omitted from JSON) | `STARTING` | `ACTIVE` | `STOPPING` | `SHUTDOWN` | `QUARANTINED`. `getPoolerStatus` already maps every member. - Reworded the `HA_POOLER_STATUS_LABELS` comment to say the labels are a subset drawn from the read replica vocabulary rather than a match for it, and noted where the read replica `Failed` lands on the HA side. **On the `Failed` question:** the answer from the proto is that there is no dedicated failure member. The terminal states are `QUARANTINED` — the pooler "has given up trying to become a healthy replica: it cannot automatically recover to a functioning state (e.g. it could not complete a pg_rewind, could not restore from backup to start postgres, or fell irrecoverably behind on replication)", kept alive for forensics — and `SHUTDOWN`, "durably down". Both already map to `unhealthy` / the `Unhealthy` warning badge, so the four statuses on `STATUS_BADGE_VARIANTS` are complete for the enum as it stands. If we'd rather show `QUARANTINED` as its own `Failed` status with a destructive badge (matching the read replica surface), that's a small follow-up — a product/copy call rather than a gap, so not folded in here. **Not included: [the replication page UX comment](https://github.com/supabase/supabase/pull/49298#discussion_r3861055216)** ("is there any other content we plan to add here? it feels empty atm... it's just a repeat of the home page + settings/infrastructure"). @joshenlim flagged that one himself as "UX feedback which can be addressed separately". It's a product and IA question about what that page is for, not something to answer with a code change here — leaving it for @alaister and design. ## Additional context - Verified locally: `tsc --noEmit` (0 errors), ESLint on the touched files (clean), Prettier check (clean), and `HaTopology.utils.test.ts` + `HaInstanceConfiguration.utils.test.ts` (26/26 passing). CI is green as well. - Exhaustive grep across the repo (excluding `node_modules`/`.git`/build output, covering `apps/**` incl. `lite-studio`, `packages/**` and `e2e/**`) confirmed zero remaining references to the deleted files, their exported symbols, and the removed key factories. - No test changes: the diff deletes unreferenced code and edits comments only, so there's no new behavior to cover. `HaTopology.utils.test.ts` already pins every `lifecycleStatus` value listed in the new comment. --- _Generated by [Claude Code](https://claude.ai/code/session_012StGVQSmPzpGTXrduo9Xyi)_ --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Danny White
|
29ad86558c |
fix(studio): make menu links reliable (#49584)
## What kind of change does this PR introduce? Bug fix. Resolves [FE-4192](https://linear.app/supabase/issue/FE-4192/org-and-project-selectors-sometimes-dont-register-selections). ## What is the current behavior? Navigation actions sometimes nest links inside command or dropdown menu items. Closing the menu during selection can prevent the nested link navigation from registering. ## What is the new behavior? - Adds a documented Studio CommandItemLink composition that wraps command items with their navigation link. - Migrates all Studio command-item links, including organisation, project, function, database, branch, and integration actions. - Uses the dropdown menu asChild composition for both infrastructure-diagram Manage replica actions. - Preserves native link behaviour and leaves disabled command items non-navigable. ## To test - [ ] [Organisation and project selectors](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/org): open the organisation selector and try an organisation, All Organizations, and New organization. Open a project, then use the project selector to switch projects and open New project. Confirm every action navigates on the first click. - [ ] [Branch selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_): in a project with branching enabled, open the branch selector. Switch branches and select Manage branches. Confirm both navigate on the first click. - [ ] [Database selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/observability/query-performance): open the Source selector. Switch between the primary database and a read replica if available, then select Create a new read replica. Confirm selections apply and the footer action navigates on the first click. - [ ] [Function selector](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/auth/hooks): select Add a new hook, choose a hook, select Postgres, then open the Postgres function selector and select New function. Confirm it navigates on the first click. - [ ] [Infrastructure diagram](https://studio-staging-git-dnywh-fe-4192-selector-links-supabase.vercel.app/dashboard/project/_/settings/infrastructure): for a project with a read replica, select Manage replica from both diagram variants. Confirm the replica settings open on the first click. - [ ] On any navigational row above, modifier-click and confirm native link behaviour is preserved. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent link navigation across organization, project, branch, function, replica, and integration menus. * Added project-specific destinations to organization and project selectors. * Preserved disabled-item behavior while improving accessible command-menu link semantics. * **Bug Fixes** * Improved navigation and menu-closing behavior for command items and dropdown actions. * **Tests** * Added coverage for link destinations, accessibility roles, disabled states, and route preservation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister YoungandAlaister Young
|
928049ce2c |
[FE-3717] feat(studio): Multigres cluster topology diagram (#49298)
Adds an infrastructure/topology diagram for High Availability (Multigres) projects showing the real cluster topology — gateway tier, shard group, and the primary + read replicas inside it — on both the project homepage and the database/replication page, replacing the primary-only view and the "Replication unavailable" empty state. <img width="790" height="541" alt="Screenshot 2026-08-20 at 8 23 42 PM" src="https://github.com/user-attachments/assets/0bce21e3-2091-4285-84ca-60fdecb10d39" /> Addresses [FE-3717](https://linear.app/supabase/issue/FE-3717/show-replicas-in-replication-diagram). **Added:** - `data/ha-admin/` — read-only queries for the mgmt-api `/ha-admin/v1/{gateways,poolers,cells,databases}` multiadmin passthrough (ported from `bobbie/ha-stub`, re-authored to `queryOptions`). Responses are validated with zod at the fetch boundary (all fields optional per proto3 zero-value omission; enum-shaped fields stay plain strings so new proto values degrade gracefully); malformed payloads surface through the diagram's error fallback. - `HaTopology.utils.ts` — pure topology mapper (+ 26 unit tests): shard grouping, primary identified via `routingState.role` (deprecated `type` as fallback) with **failover-safe election** — when the outgoing and incoming primary briefly both claim `ROUTING_ROLE_PRIMARY`, the highest routing rule (coordinator term, leader subterm) wins, matching the multigateway's own election — plus status mapping onto the existing Healthy / Coming up / Going down / Unhealthy vocabulary, and an AZ formatter for `id.cell` that degrades to the raw cell name. - HA diagram nodes/edges: `Multigateway` card, shard group box with header pill (`Shard 1`, `Automatic failover` + tooltip), `Primary Database` card styled like the standard diagram's — neutral border, green icon chip (with the standard CPU / Disk / RAM footer — connections omitted until their meaning through the multigateway is confirmed), `Read Replica` cards, and the standard animated replication edges (status lives on the card badges). Poolers and gateways poll every 30s without re-running layout (topology projection + structural sharing). Drag-to-pan works through the shard group box, and the metrics footer's skeleton matches the loaded row height so the card doesn't shift. - Accessibility: the failover tooltip trigger is a keyboard-focusable button, status badges sit in stable `role="status"` live regions, the region flag is decorative (`alt=""`), and the edge dash/spinner animations respect `prefers-reduced-motion` (applied to the pipelines diagram's edges too). - Fallbacks: `AlertError` ("Failed to retrieve cluster topology") when either ha-admin query errors, and a "Cluster topology unavailable" empty state when the topology comes back empty — never a half-rendered diagram. **Changed:** - `InstanceConfiguration` is now topology-source-aware: it branches internally on `useHighAvailability()`, so both surfaces (homepage `TopSection` and the replication page) get the right diagram with no new wiring. The two-pass measured dagre layout moved into a shared `DiagramFlow`; `nodeTypes`/`edgeTypes` are module-level consts. - `getEdgeVisual` + the mid-edge icon chip lifted out of `ReplicationDiagram/Edges.tsx` into `components/ui/ReactFlow/EdgeVisual.tsx` so both diagrams derive edge icon + line style from one state object (no behavior change for the pipelines diagram). The primary card's CPU/Disk/RAM footer is likewise extracted into a shared `ComputeMetricsFooter`. - Fixes a latent relayout loop inherited from the region-box pattern: handing React Flow a freshly created (unmeasured) group node on every layout pass reset `nodesInitialized`, re-triggering the measured pass and `fitView` forever — which made the diagram snap back to center and effectively unpannable. The shared `DiagramFlow` now re-attaches known measurements to group nodes, which also covers the standard diagram's region boxes. - Standard diagram: the API Load Balancer → primary edge is now static — no data flows over it, the line only indicates a relation. - `database/replication` page: the HA early-return empty state is replaced by the diagram under a "High Availability cluster topology" header. Non-HA projects are untouched. **Intentional deviations from the mock** (for design review): 1. **No per-replica regions** — alpha replicas are one-per-cell inside a single region, so the mock's `eu-west-1` / `ap-southeast-1` on sibling replicas would be false. Availability zone per node, region shown once on the primary. 2. **"Primary Database", not "Main Database"** — matches the string both existing diagrams already ship, and the same component now renders both project types. 3. **No collapse chevron on the shard header** — alpha has exactly one shard; collapsing it would hide the whole diagram. The group box still ships; add collapse when `shards.length > 1`. 4. **Failover shown on the shard group, not replica cards** — failover is a cohort property; per-card badging would assert readiness we can't verify without a per-pooler `/status` fanout. 5. **Standard node/edge styling reused** (per review) — neutral primary border + green chip and the default animated edges instead of the mock's green ring and dashed green arrowed edges, keeping the HA and non-HA diagrams visually consistent. **Confirmed against a real local Multigres cluster:** cells are named `cell-1`/`cell-2`/… (not AZ-shaped — the AZ formatter falls back to the raw cell name as designed); `GET /platform/projects/{ref}/databases` returns only the primary row for HA projects; and the `/ha-admin` passthrough returns **each gateway/pooler record once per cell it fans out to** — the topology mapper dedupes by id, but worth confirming with @sbc-bobbie whether the backend should dedupe. **Known alpha limitation:** node health and the "replicating" edge state derive from the pooler's *topology record* (`lifecycleStatus`/`servingStatus`), not a live probe — a pooler that crashes without publishing a terminal state can read as healthy until the topology evicts its record, and a serving replica with paused replay still shows a green edge. This matches the existing replication diagram's semantics (`ACTIVE_HEALTHY` ⇒ animated edge). Live per-pooler signals (WAL receiver state, replay position) exist on `GET /poolers/{cell}/{name}/status` but need a per-pooler fanout — deliberately deferred, noted on `getPoolerStatus`. **Still to confirm** (doesn't block review): whether the `/ha-admin` passthrough is deployed to production or staging-only (if staging-only, this should get a flag before GA). ## To test Tested end-to-end locally against a real Multigres project (standard-project regression pass, HA creation flow, error fallback against real 500s, and full topology + polling + console checks against live multiadmin data): - **HA project homepage**: diagram card shows Multigateway → shard box (`Shard 1`, count badge, `Automatic failover` tooltip) → green-bordered Primary Database (region, AZ, size) + Read Replica cards (AZ), dashed green animated edges to healthy replicas. No flow/map toggle for HA. - **HA project → Database → Replication**: same diagram under a "High Availability cluster topology" header; no Destinations section; the old "Replication unavailable…" state is gone. - **Error path**: if `/ha-admin/v1/*` fails, both surfaces show "Failed to retrieve cluster topology" with Contact support — no partial diagram. - **Standard project regression**: homepage diagram (primary card, flow ⇄ map toggle round-trips), replication page (pipelines diagram + Destinations) all unchanged; zero requests to `/ha-admin/*`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added High Availability topology diagrams to the Replication page. - Display gateways, primary databases, replicas, shards, statuses, regions, infrastructure details, and compute metrics. - Added observability links and live topology updates with loading, error, and unavailable states. - **Bug Fixes** - Improved handling of incomplete infrastructure identities and unexpected data. - Corrected topology layout, node spacing, and visual edge behavior. - **Accessibility** - Reduced-motion preferences now disable diagram animations and loading effects. - Improved status announcements for assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Danny White
|
5f50338a2f |
fix(studio): keep region flags visible on light surfaces (#49517)
## What kind of change does this PR introduce? Studio interface fix. ## What is the current behavior? Region flags with light backgrounds, such as Japan, can disappear against light Studio surfaces. Flag rendering is also repeated across region selectors and infrastructure views. ## What is the new behavior? Region flags use a shared `RegionFlag` component with the existing small radius and a subtle 1px border. The treatment is applied consistently across project creation, replication, read replicas, infrastructure, and Edge Function observability. | Before | After | | --- | --- | | <img width="746" height="246" alt="CleanShot 2026-08-25 at 14 01 07@2x" src="https://github.com/user-attachments/assets/5ccffccd-f253-47ca-a587-e97d1e8306a8" /> | <img width="746" height="234" alt="CleanShot 2026-08-25 at 14 09 20@2x" src="https://github.com/user-attachments/assets/9d59f7f6-4364-4c2c-8b97-a9673616736a" /> | ## To test - Open the new project flow and inspect the selected region and region menu. Confirm light flags remain visible without changing size or aspect ratio. - Open Database Replication and inspect region flags in the diagram and destination form. - Open `/project/<ref>/settings/infrastructure` and inspect flags in the topology, map, and read replica details. - Open Edge Function observability and inspect the region filter options. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Standardized region flag displays across project creation, replication, infrastructure, read replica, and observability views. * Region flags now use consistent styling, rounded borders, and rendering throughout the Studio interface. * Improved visual consistency for selected regions, database nodes, tooltips, and region options. * Decorative flags in observability views are handled appropriately for assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
7fd7ace118 |
feat(studio): add Infrastructure replica detail route and redirects (#49045)
## What kind of change does this PR introduce? Feature. Stack 3 of 5 for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Replica detail lives at `/database/replication/replica/:id`. ## What is the new behavior? Detail moves to `/settings/infrastructure/replica/:id`. Old URLs redirect. List and diagram View/Manage replica links follow. ## Additional context Stacked on [#49044](https://github.com/supabase/supabase/pull/49044). Please review, but do not merge. Merge 2→5 in succession once they are all reviewed, so users never sit on a split create/list vs detail path. Replication still lists and creates replicas until [#49046](https://github.com/supabase/supabase/pull/49046). ## To test `infrastructure:read_replicas` is an enabled-feature, on by default. There is no Feature Preview or ConfigCat switch. You should already see the Infrastructure Read replicas section. If you do not, your profile lists `infrastructure:read_replicas` in `disabled_features`. From [Infrastructure](https://studio-staging-git-danny-pipe-1007-03-detail-redirects-supabase.vercel.app/dashboard/project/_/settings/infrastructure), open View replica on a row. Confirm you land on `/settings/infrastructure/replica/:id`. If you have an old bookmark, `/database/replication/replica/:id` should redirect there. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added read replica management to Infrastructure settings, including replica creation, status monitoring, details, restart, and removal actions. * Added eligibility guidance and estimated pricing details during replica setup. * Added support for topology and replica information within infrastructure configuration. * **Improvements** * Legacy database replication links now permanently redirect to the corresponding Infrastructure pages. * Added clearer empty, loading, error, and transition states for read replica management. * **Tests** * Expanded coverage for replica navigation, redirects, eligibility warnings, and empty states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
2c8cc7ec8a |
feat(studio): relocate read replica modules under Infrastructure (#49043)
## What kind of change does this PR introduce? Feature. Stack 1 of 5 for [PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure). ## What is the current behavior? Read replica UI lives under Database / Replication. ## What is the new behavior? Moves replica form, row, and modals into Settings/Infrastructure and extracts `REPLICA_STATUS` plus path helpers. URLs and user-facing behaviour are unchanged. ## Additional context Keep `infrastructure:read_replicas` off in prod until the full stack lands. Stack: this PR → [#49044](https://github.com/supabase/supabase/pull/49044) → [#49045](https://github.com/supabase/supabase/pull/49045) → [#49046](https://github.com/supabase/supabase/pull/49046) → [#48921](https://github.com/supabase/supabase/pull/48921) ## To test Open [Database / Replication](https://studio-staging-git-danny-pipe-1007-01-relocate-701014-supabase.vercel.app/dashboard/project/_/database/replication?destinationType=Read+Replica). Confirm add replica still works as today. No new Infrastructure section yet. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added navigation for viewing a specific read replica and starting the add-replica setup flow. - Improved read-replica setup validation, including unsupported regions and invalid PostgreSQL versions. - **Bug Fixes** - Corrected default region and success messaging behavior. - Prevented incomplete pricing labels and clarified eligibility warnings. - Improved display handling for localized pricing values. - **Tests** - Added coverage for read-replica navigation paths and fallback behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Stephen MorganandJoshen Lim
|
9dc5c0faf3 |
feat: privatelink read replica (#48642)
Frontend changes for new privatelink functionality. The updates to the API are already live, but will be putting the UI changes behind a feature flag while we do some full end to end testing. Changes to Integration page: <img width="744" height="456" alt="image" src="https://github.com/user-attachments/assets/02026083-4b61-4f36-927b-1bac42cb73e2" /> Changes to create associations page: <img width="859" height="411" alt="image" src="https://github.com/user-attachments/assets/303b4ec5-3b5a-4eaf-8d22-45e1e63a0705" /> Fixes SEC-919 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - AWS PrivateLink connections can target the primary database or a read replica. - Connection lists and confirmation dialogs now identify the selected database clearly. - Replica details include improved status information and a “Manage replica” link. - **Bug Fixes** - Replica removal errors now provide clearer guidance and link to integration settings when PrivateLink issues occur. - **Updates** - Infrastructure diagrams focus on visualization, with replica management actions moved to dedicated management views. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Joshen Lim
|
a0cec24f49 |
Remove references to fly (#48648)
## Context As per PR title - should not have any visual nor functional change <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Changes** - Standardized infrastructure, region, and database configuration around AWS-based environments. - Removed Fly.io-specific region and provider options from project creation, instance sizing, and infrastructure settings. - Enabled disk validation, spend-cap eligibility, backup restoration, and extension setup consistently across supported projects. - Updated billing and region displays to use the applicable AWS configuration. - **Bug Fixes** - Corrected project-specific restrictions that could incorrectly hide configuration and billing controls. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
50e1eb7436 |
chore(eslint): bump eslint-config-next to v16 for useEffectEvent (#48458)
## 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? Chore / build (ESLint config upgrade + lint cleanup). ## What is the current behavior? `eslint-plugin-react-hooks` v5 (pulled in transitively by `eslint-config-next` v15) doesn't recognize stable `useEffectEvent`, so every effect that calls an effect-event handler needs an `eslint-disable react-hooks/exhaustive-deps` to silence a false positive. There are 30 such dead disables across Studio. ## What is the new behavior? Bumps `eslint-config-next` to v16, which pulls in `eslint-plugin-react-hooks` v7 whose `exhaustive-deps` understands `useEffectEvent`, and removes the 30 now-dead disable directives (and their orphaned explanatory comments). Supporting changes: - **Flat-config migration**: v16 is a native flat-config array (v15 was eslintrc), so `eslint-config-supabase` now spreads it directly instead of bridging through `FlatCompat`. - **React Compiler rules off**: v16 enables react-hooks v7's `recommended`, which layers the React Compiler lint rules on top of the two classic rules. These are switched off (derived dynamically from what next enables) to keep this change scoped to the `exhaustive-deps` improvement. - **Plugin-registration fallout** (v16 scopes plugin registration to a file glob rather than registering globally like FlatCompat did): stop re-registering `@typescript-eslint` (shared) and `jsx-a11y` (studio); scope our react / react-hooks / jsx-a11y rule overrides (studio, www) to v16's plugin glob so they don't error on files outside it (e.g. `.cjs`). - **Lint surface preserved**: v16's glob newly includes `.mts`/`.cts` (v15 didn't lint them), which surfaced pre-existing errors in tooling scripts. The shared config keeps the prior surface by leaving `.mts`/`.cts` unlinted; linting them is left as a separate change. - **Ratchet**: rebaselines `@tanstack/query/exhaustive-deps` 9 → 89. v15 forced next's `@babel/eslint-parser` onto `.ts` files, hiding these deps; v16 parses `.ts` with `@typescript-eslint/parser` and correctly surfaces the intentional `connectionString`-excluded-from-`queryKey` pattern. Worth a follow-up to review whether any are real cache-correctness bugs. - Drops three now-dead devDeps from `eslint-config-supabase`: `@eslint/eslintrc`, `@eslint/js`, `@typescript-eslint/eslint-plugin`. Verified locally: `turbo run lint` → 7/7 packages pass with 0 errors; Studio `lint:ratchet` passes; Prettier clean on changed files; typecheck unaffected. ## Additional context <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Refined linting configuration and removed outdated lint suppressions across Studio. * Updated Next.js linting support and refreshed related development configuration. * Expanded lint baseline coverage for query-related code. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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> |
||
|
Gildas Garcia
|
b30db91d71 |
chore: cleanup UI patterns exports (#47406)
## Problem We now export components under a subpath in ui-patterns to avoid barrel files as they slow down every tools (from IDE to linters, etc.) and may also affect bundles our users have to download. ## Solution - Remove the UI patterns index file - Fix invalid impors |
||
|
Gildas Garcia
|
c6fc456910 |
chore: cleanup duplicate exports studio (#47387)
## Problem Knip reports many duplicate exports (both named and default). Besides, we're moving away from default exports and even have an eslint rule to enforce it on new code. ## Solution - Cleanup those exports - Update imports when necessary No functional changes. If it builds, it's fine |
||
|
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 --> |
||
|
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> |
||
|
Jordi Enric
|
2c915ca9fb | fix(observability): align overview Connections count with details view DEBUG-75 (#46271) | ||
|
Alaister YoungandAlaister Young
|
7e9badc6b8 |
chore(studio): migrate useStaticEffectEvent to React 19 useEffectEvent (#46415)
Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in React 19.2 with the same signature as the userland polyfill. This drops the local hook in `apps/studio` and `apps/www` in favor of the built-in. **Removed:** - `apps/studio/hooks/useStaticEffectEvent.ts` - `apps/www/hooks/useStaticEffectEvent.ts` - `.claude/skills/use-static-effect-event/` — skill is obsolete **Changed:** - 26 call sites: dropped the `useStaticEffectEvent` import, added `useEffectEvent` to the existing `react` import, renamed call sites - `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19 - `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale "Studio uses React 18, skip these patterns" warning ## To test - `pnpm typecheck --filter=studio` — passes locally - `pnpm typecheck --filter=www` — passes locally - `grep -rn "useStaticEffectEvent"` returns nothing outside `node_modules` - Smoke-test areas that use the hook: schema visualizer edges (intersection check), spreadsheet import, sign-in/CLI login flows, side panels with unsaved-changes prompts **Out of scope:** pre-existing Tailwind lint warning on `DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to this migration <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Internal event handling migrated to React’s built-in event hooks across the Studio app; no user-facing changes. * **Documentation** * Clarified React 19 compatibility and noted Studio now targets React 19. * Removed obsolete documentation for a deprecated internal hook. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46415?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Charis
|
3aec96f9c6 |
fix(studio): use measured node heights for instance diagram layout (#46075)
## Summary The homepage instance diagram looks visually off when a project has read replicas — see [FE-3390](https://linear.app/supabase/issue/FE-3390/adjust-homepage-diagram-spacing-for-read-replicas). Root cause: the dagre layout in `InstanceConfiguration.utils.ts` was passing a fake `height: 25` (and a `-70` hack for the load balancer) for every node, regardless of how tall the rendered node actually is. When the Primary card grew taller after #45274 added the compute-metrics row, the gap between the Primary node and the Read Replica node became visually tight while the gap between the Load Balancer and Primary stayed loose — the diagram looked lopsided. ## Fix - Pass the **real measured height** of each node to dagre, sourced from React Flow's internal measurement (`node.measured.height`). - Run the layout in two passes: 1. First pass uses small per-type fallback heights so React Flow has something to render and measure against. 2. Once `useNodesInitialized()` flips true, re-run dagre with the measured heights and fitView. - Keep the diagram at `opacity-0` until the measured pass completes, so the fallback positions are never visible to the user. Subsequent data refetches don't re-hide the diagram — once measured, it stays visible. - Drop `NODE_ROW_HEIGHT` and the load-balancer `-70` hack. Replaced with a small `NODE_HEIGHT_FALLBACKS` table used only on first paint. - `ranksep` reduced from 160 → 60 since dagre now knows real heights. Closes FE-3390. ## Test plan - [x] Open the project homepage for a project with no read replicas — diagram renders centered, single Primary node. - [x] Open the project homepage for a project **with** a read replica — Load Balancer → Primary → Replica spacing is visually balanced; no flash of fallback positions on initial render; the diagram fades in once. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * More accurate infrastructure diagram layout with better node sizing and spacing for initial and measured renders. * Introduced fallback heights so diagrams render correctly on first paint before measurements are available. * Region containers now use a consistent fixed height for stable layout. * Smoother, visually consistent diagram initialization with improved opacity transition during layout setup. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46075?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 --> |
||
|
Joshen Lim
|
51b45ec715 |
Add project region info in settings and vector buckets + make region clickable in home page instance config (#45665)
## Context Resolves FE-2985 As per PR title - Add project region info in project settings page for convenience <img width="722" height="375" alt="image" src="https://github.com/user-attachments/assets/b32e80ed-42bd-4b12-b9b4-a3e696646335" /> - Add project region info in vector buckets empty state <img width="1110" height="215" alt="image" src="https://github.com/user-attachments/assets/60bfde97-c3e3-4c10-8b86-98ecd0437ad5" /> - Make DB region copyable by clicking in instance config chart on home page <img width="419" height="298" alt="image" src="https://github.com/user-attachments/assets/269b9517-d0eb-42b9-9648-386c59d53842" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Project region is now shown as a read-only field with a descriptive region label in Settings. * Region identifiers are clickable to copy to clipboard, with a “Click to copy” tooltip and success toast. * Storage/empty-state messaging updated to show clearer, region-specific text and tooltip details. * Replica creation time now uses an enhanced timestamp display. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan VasilovandJordi Enric
|
56de26fe22 |
chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> |
||
|
Jordi EnricandClaude Sonnet 4.6
|
dfd3eec8e9 |
feat(studio): compute metrics on project diagram Primary Database card (#45274)
## Problem The Primary Database card in the project homepage diagram showed region and instance size, but no live health data. Users had no quick way to spot a high-disk or high-CPU situation without navigating to the database report. ## Fix Added a clickable metrics row at the bottom of the Primary Database card showing CPU, Disk, and RAM as percentages, plus active/max connections when available. Each metric is color-coded (warning at 80%, destructive at 90%). Clicking the row navigates to the database observability report. The metrics are powered by a new \`useComputeMetrics\` hook that wraps the existing \`useInfraMonitoringAttributesQuery\` and \`useMaxConnectionsQuery\`, reusing the parse utilities already used by the database infrastructure section. The \`metricColor\` threshold logic is extracted into a separate util with unit tests. ## How to test - Open the project homepage for a running project - The Primary Database card should show a new bottom row: "CPU X% · Disk X% · RAM X% · Y/Z conns" - Values above 80% should appear in amber, above 90% in red - Click the metrics row and confirm it navigates to \`/project/<ref>/observability/database\` - While metrics are loading, a spinner should appear in the row - If the infra monitoring API is unavailable, the row should show "Metrics unavailable" instead of zeroes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Infrastructure configuration page now displays real-time compute metrics (CPU, disk, memory usage) with color-coded usage indicators based on thresholds. * Connection information is displayed when available. * Includes loading states and error handling for metric retrieval. * **Tests** * Added test coverage for metric color-coding logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
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 |
||
|
|
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> |
||
|
|
7cf5df7b3e |
chore(studio): remove Fly.io integration code (#44336)
The Fly login/auth endpoints were removed from the management API (supabase/platform#30987). This cleans up the associated studio code and regenerates the API types. Note: existing Fly projects are still running, so all `cloud_provider` guards and Fly-specific UI (disk management, billing, pg_cron warnings, etc.) are intentionally kept in place. **Removed:** - `sign-in-fly-tos.tsx` page - `organization-by-fly-organization-id-mutation.ts` - `project-by-fly-extension-id-mutation.ts` **Other:** - Regenerated API types to reflect removed endpoints - Removed stale Fly-related comments in `InstanceConfiguration`, `ObservabilityMenu`, `ReportsMenu` - Fixed unrelated optional chaining bug in `SSOConfig.tsx` ## To test - Check project creation flow still works - Verify `/sign-in-fly-tos` no longer resolves --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> |
||
|
Gildas Garcia
|
06190d15b9 |
Gildasgarcia/fe 2426 show relationship line context and highlight on hover (#44023)
## Problem When you have many tables, it's hard to follow the relations between them in the Schema Visualiser ## Solution When selecting an edge (the line between tables), highlight it along with the related tables and columns to make it easier. Also, if there is enough space, display a popover showing the relation details ## Screencasts https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04 |
||
|
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> |
||
|
Danny White
|
fc7667462d |
chore(studio): nits (#43683)
## What kind of change does this PR introduce? UI nit changes ## What is the current behavior? - We use big dots `•` to separate semantically different sets of text that are in the same row - This looks a bit odd given how large the dot is to text - We put _Project Settings_ in its own sidebar section but without a separator like all other sidebar sections ## What is the new behavior? - Use the smaller dots `·` to separate text - Place a separator above _Project Settings_ in sidebar | Before | After | | --- | --- | | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase-70BD1825-8077-4D1B-84C1-831A4ADAFC0B" src="https://github.com/user-attachments/assets/70246009-a3c7-4b5c-8d75-122140a637d1" /> | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase" src="https://github.com/user-attachments/assets/e3fc13e4-923d-472e-aaf9-d689e890697b" /> | |
||
|
Joshen Lim
|
a2b40468d0 |
Joshen/fe 2453 post rollout dashboard clean up (#43325)
## Context Just cleaning up the `unifiedReplication` feature flag now that this is fully rolled out Also addresses some bugs that I came across while cleaning up, specifically for the new home page - Add enabled features flag check for read replicas in database replication - Infra diagram, read replicas - View connection string CTA to open connect UI with the right database selected - Replaced all other actions with a "Manage replica" CTA which links to the replica details page |
||
|
Charis
|
f7bf7d7ce4 |
feat(studio): move data api docs to integrations section (#42749)
Feature / Refactor ## What is the current behavior? Data API docs live at the `/api` route as a standalone page. Old links point to the previous location. ## What is the new behavior? Data API docs are moved to the integrations section with a dedicated docs tab and settings tab. Old links are cleaned up, a mobile menu is added for data API docs navigation, and minor code review fixes are applied. ## Additional context Resolves FE-2517 ## Summary by CodeRabbit * **New Features** * Revamped API docs UI with reusable section layout, language toggle (JS/Bash), API key selection, and improved code snippets * Added Data API docs tab, mobile navigation, and dedicated loading/error/disabled states * **Navigation Updates** * Moved API docs and related links into the Integrations/Data API area and added redirects to new routes * Updated various internal links to the new Data API settings and overview locations * **Tests** * Added comprehensive unit tests for Data API utilities |
||
|
Joshen LimandAlaister Young
|
45f96a197f |
Chore/adjust instance node for replicas (#42550)
## Context Replaces the provider name with the region code in the infrastructure settings overview node diagram - The latter is more important, and we don't really specify the cloud provider anywhere in the dashboard <img width="315" height="137" alt="Screenshot 2026-02-05 at 18 43 11" src="https://github.com/user-attachments/assets/bc6f4dab-e9be-4663-ae1e-50e76b517c86" /> Also made the same changes in the upcoming database replication page too in the form of tooltips And swapped the title + description to be more consistent (Top: type of data, bottom: description), same for the table below Before: <img width="737" height="335" alt="image" src="https://github.com/user-attachments/assets/6674564b-e871-4cd9-83a3-e0bfde7a9f83" /> <img width="287" height="354" alt="image" src="https://github.com/user-attachments/assets/f234de68-107b-470d-804a-bd3b1d9ae9dc" /> After: <img width="637" height="350" alt="image" src="https://github.com/user-attachments/assets/03e08d55-43a1-4a16-8be1-11dd7d14fef3" /> <img width="364" height="357" alt="image" src="https://github.com/user-attachments/assets/0e49df5b-68e5-4652-8dca-4d44ebb8c3ab" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added region metadata with interactive tooltips across replication and database views. * Actions that modify replicas now refresh the list automatically. * Replication diagram layout updated with increased node spacing and a wider zoom-out range. * **Style** * Destination and replica name/ID display reorganized for clearer, two-line presentation. * BigQuery icon now inherits color from CSS for better visual consistency. * Provider/region labels refined for clearer wording. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <a@alaisteryoung.com> |
||
|
Joshen Lim
|
6ffc3fc94c |
chore(studio): Replication UI updates for new replica CTA + URL query state handling (#42378)
## Context Related to unifying read replicas into database replication page which is currently in internal testing ## Changes involved - Updates the "New replica" CTA in `DatabaseSelector` (e.g within the SQL Editor) to link to the replication page instead of settings infrastructure - Refactor replication UI to use URL query states for new destination + edit destination ## To test - [ ] Verify that the "New replica" CTA links correctly to replication page if flag is on - [ ] Verify that new + edit destination UI works as expected - Note that there's some server side validation for ETL replication now so might be tricky to test creating an actual ETL replication - Minimally can test creating a read replica and ensure that the UI behaviour is all as expected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added unified replication experience with URL-based state management for destination creation and editing * **Refactor** * Simplified replication panel component interfaces and consolidated destination data fetching logic * Enhanced edit flows to leverage URL parameters for seamless navigation * **Chores** * Marked legacy read replica creation panel as deprecated <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
1536ee1064 |
Joshen/fe 2287 summary nodegraph in replication page (#42042)
* init
* Init 2
* Finalize
* bit more details in the summary graph
* Moreeee details
* Clean
* 🧹
* FIIIXX
* Fix rabbit
* Simplify long polling logic to only depend on database for destinations UI
* ADdress rabbit
* Address feedback
|
||
|
Kanishk Dudeja
|
4281be70ed | feat(billing): use entitlements for read replica access (#41940) | ||
|
Joshen LimandAlaister Young
|
3b7bba9a9a |
Add read replicas details page from database replication (#41784)
* Add read replicas details page from database replication * Clean * Address 🐰 --------- Co-authored-by: Alaister Young <a@alaisteryoung.com> |
||
|
Joshen Lim
|
1195c8e1f2 |
feat(studio): Replication UI to also show rows for read replicas (#41763)
* Use new table component for replication page
* Render replicas in destinations page + support restart, drop, create replicas
* Fix
* Address 🐰
|
||
|
Ivan Vasilov
|
0d5be306ef |
chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit
|
||
|
Kevin Grüneberg
|
915a08812d |
feat: support new platform plan (#40890) (#41046)
Forward compatible changes to support new platform plan (similar handling to Enterprise) |
||
|
Joshen Lim
|
888b1794c6 |
Revert "feat: support new platform plan" (#40980)
Revert "feat: support new platform plan (#40890)"
This reverts commit
|
||
|
Kevin Grüneberg
|
ae4fe1b740 |
feat: support new platform plan (#40890)
Forward compatible changes to support new platform plan (similar handling to Enterprise) |
||
|
Danny WhiteandJoshen Lim
|
031b227165 |
studio(chore): badge component defrag (#40118)
* component clean up * optically center * docs and type size * code badge variant * sensible defaults * fix product menu flex * badge sweep * new project badges * logs * compute badge * studio badge sweep * www sweep * docs sweep * clean up * fixes * cleanup * fixes * better docs * fixes * misc fixes * consistency * Minor fixes for issues i found * simplify mt-0 * mt simplification * remaining optical alignment --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Ali Waseem
|
866db0bf67 |
Fix: redirect for load balancer source (#40757)
fix redirect for load balancer source |
||
|
Ivan Vasilov
|
43cc61818c |
chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes. * Migrate all use of isLoading to isPending in mutations. * Fix type errors. |
