## 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>
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>
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>
## 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 -->
## 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>
## 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
## 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 -->
## 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>
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>
## 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 -->
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>
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>
## 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
## 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
* 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 2a07df64b5.
* Revert the rss.xml file to master.
* Update perms checking in audit logs
* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used
* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions
* Fix TS
* new home top
* misc clean ups
* branching truncate
* revert to button
* fixes
* Add comments + small style nudges
* Add comment
* nit
* Use Timestampinfo
* final final final v4
* I swear last nit i found
* FIX
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* Add restrictions for orioledb technical preview
* Add callouts to pgvector and postgis if orioledb
* Restrict restore to new project for orioledb
* Scaffold client side validation for preventing org upgrade if org has oriole db present
* Hook up proper logic for oriole
* Fix
* Remove console log
* Fix type
* Disable version selector if only one version is available
* chore: oriole badges
* UI updates based on requests
* Update copy
* Fix
* Dont open assistant if opt is selected
* Fix
* Fix
* Update badge
* Add feature flag for orioleDB
* Feature flag oriole check in plan update
---------
Co-authored-by: Paul Cioanca <paul.cioanca@supabase.io>
* Make the resource banner sticky.
* Remove main from all layouts that are using it.
* Update apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Fix the whitespace.
* Fix some of the pages with broken layouts.
* Fix a merge error.
* Fix the layout of the SQL editor.
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* feat(docs), refactor(docs,studio): add regions list to docs
Adds list of supported AWS regions to docs.
Pulls the region information into `shared-data` package to provide common source of truth for dashboard and docs.
* style: format
* fix: update Permission params
* fix: upgrade check permission hook to support project level role
* fix: usePermissionsLoaded
* fix: Permission params can be undefined
* Scaffold new access management UI
* Add validation
* Update roles view
* Add tooltip
* Add button to apply role to all projects
* Update UI to select projects first instead of roles
* Merge master update UI
* Midway trying to implementation project level perms API
* First pass implementating updating project level permissions
* Add client side validation for assigning/removing roles
* Midway implementing new invites
* Integrate most of the project level permissions functionality
* fix: filter out org-level permissions before checking
* Add relevant UI guards in org level pages for project role POV
* Minor refactors
* Small refactors
* More fixes
* Moar refactors
* More fixes
* More fixes
* Refactor update role logic and smack some test cases on it
* Fixes
* Fix type issue
* Fix type
* more fixes, refactors, adding checks...
* MORE fixes
* Add perms checking for replicas
* Add ButtonTooltip component and use them to prevent repetition of pointer events auto for buttons with tooltips
* Convert all buttons with tooltips to use ButtonTooltip
* refactor
* PRettier
* Small fix
* Remove commented out code in organization-invitation-accept-mutation
* fix: switch to use the platform oauth authorizations routes
* Add perms checking for org audit logs and org oauth apps
* PRettier
* Fix incorrect URL for oauth app flow
* Fix incorrect URL for oauth app flow
* Fix
* Add perms checking for warehouse related UI
* Update roles helper icon
* remove unused lib
* Update package lock... again
* Update package lock... again
* Smalllll update
* Update some checks
* Add gate for project level permissions
* Last fix
* update codegen
* Update warehouse endpoint routes
* Fix
---------
Co-authored-by: phamhieu <phamhieu1998@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Hide InfraInfo component on fly projects
* Show loading screen on the read replicas widget until the project details come in.
* Revert "Show loading screen on the read replicas widget until the project details come in."
This reverts commit 79611f4b57.
* Fix the flash on read replicas on Fly deploys.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Add check before generating nodes in settings infrastructure
* Fix conditional in ResourceContent and add some typing
* Wrap checkIfPrivate with try catch
* Add ? in TableEditor.utils generateTableFieldsFromPostgresTable
* More typing
* Add ternary in RPC
* Remove mobx from API docs v1
* Fix renaming folder in storage explorer
* Support more granular updates via events for spinning up replica
* Add duration estimates as tooltips
* Show granular error message if error happens during replica set up
* Add support for hours in duration estimates
* Init replication lag chart in database reports
* Navigate to replication lag chart via query params
* Add view replication lag CTA in map view
* Add replication lag metric to instance node view
* Prettier
* Remove size selection and add info on rr billing
* Add prompt in SQL editor if trying to run mutation query in read replica
* Fix
* Fix dropping replica not optimistically updating, and support new replica statuses
* Invalidate load balancers after read replicas are spun up
* fix
* Staging: only allow apse1 as selection for replica
* Fix modal stuck in loading state if dropping replica fails for some reason
* Add warnings for RR based on cloud provider and pg version, and fix support page not automatically selecting project ref from query param into form
* Add warnings on add ons side panels for compute and pitr RE replicas
* Add notice text RE changing compute size if read replicas are preent
* Add options to change compute size and delete all replicas from settings/infrastructure
* Lint
* Add validation for max replicas check
* Small UI fixes
* Add useMemo for edges
* Fix nodes not shwoing up when switching between map and flow view
* Fix logs explorer copy button
* Add edge changes to useEffect
* Bump wait duration when creating replica
* Sync database selector and use pooler checkbox states across panels on settings database
* Fix InstanceConfiguration not showing any nodes
* Sort databases in DatabaseSelector to have primary first
* Logs explorer border fotter
* Add database selector for edge logs
* Make buttons more concise in logs
* Clean up
* Fix
* Fix home page empty empty state
* Attempt to support pooler logs
* minor qol fix for database selector
* Update shared-data pgbouncer to supavisor
* small fix
* Expose load balancer API endpoint in API settings
* Add load balancer as a node in infrastructure config
* Add load balancer node to infra config
* Fix
