dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-07 10:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,162 Commits 1,784 Branches 62 Tags
cli/ref-doc
Commit Graph
206 Commits
Author SHA1 Message Date
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 -->
 2026-08-26 16:59:44 +08:00
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>
 2026-08-26 16:51:36 +08:00
Danny White 34d6c2fbc5 feat(studio): move read replica creation to a dialog (#49516) 
## What kind of change does this PR introduce?

Studio interface improvement.

## What is the current behavior?

Read replica creation uses an oversized sheet, with region selection,
eligibility guidance, and pricing all awkwardly competing for space. The
cost estimate can briefly show a compute-only subtotal while disk
pricing is still loading.

## What is the new behavior?

Read replica creation uses a focused, centred dialog with a vertical
region field, contextual eligibility guidance, and a separate cost
breakdown. Disabled forms omit redundant deployment-location text. The
additional monthly cost appears only after both compute and disk pricing
inputs are available.

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Infrastructure Settings Chives
Pantry Supabase"
src="https://github.com/user-attachments/assets/afb0a9a6-3575-4d65-98a3-f21b23a032ac"
/> | <img width="1024" height="759" alt="Infrastructure Settings Chives
Pantry Supabase"
src="https://github.com/user-attachments/assets/89fd96f8-8f95-4b88-b1fd-505a261ff9a0"
/> |
| <img width="1024" height="759" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/dd110b3a-6aca-4074-9a69-2dc711f4d1c7"
/> | <img width="1024" height="759" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/894bbd81-01d5-411e-8279-1bd2e5839cff"
/> |
| <img width="1024" height="759" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/09cbd315-c13d-4987-b274-daf4f91ea10d"
/> | <img width="1024" height="759" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/a1effb33-1bf2-450a-8cd8-0de8675231c9"
/> |

## To test

- Open `/project/<ref>/settings/infrastructure` and select **Add read
replica** from the section header or empty state. Confirm the dialog
opens and closes using Close, Escape, backdrop, and Cancel.
- On an eligible project, confirm the pricing note initially reads
**Estimated additional cost**, then adds **of $X/month** once pricing
loads. **View breakdown** should remain disabled until then.
- Change the region and open **View breakdown**. Confirm the monthly
cost table has standard row borders and an estimated total.
- On a project below Small compute, confirm the region field is
disabled, its deployment-location description is hidden, and **Change
compute** returns to the compute controls.


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

* **New Features**
* Replaced the add read replica sheet with a dialog-based setup
experience.
* Added region details, eligibility guidance, compute recommendations,
and estimated pricing.
  * Added retry options when pricing information fails to load.

* **UI Improvements**
  * Updated warning messages, documentation links, and action labels.
  * Improved dialog behavior and deferred data loading until opened.

* **Tests**
* Expanded coverage for dialog behavior, eligibility warnings, pricing
errors, retries, and recommendations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-26 15:17:37 +08:00
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 -->
 2026-08-25 16:25:12 +10:00
Danny White 6ac5bf6b86 feat(studio): point replica deep links at Infrastructure and recommend compute (#48921) 
## What kind of change does this PR introduce?

Feature. Stack 5 of 5 (tip) for
[PIPE-1007](https://linear.app/supabase/issue/PIPE-1007/move-read-replicas-out-of-replication-into-infrastructure).

## What is the current behavior?

Selectors still open Replication with `destinationType=Read+Replica`.
Compute eligibility actions leave the add-replica flow without carrying
a recommended size into the Infrastructure form.

## What is the new behavior?

DatabaseSelector and the SQL submenu open Infrastructure
`?addReplica=true`. Change to Small/XL compute waits for the sheet to
close, pre-selects that size, then focuses and scrolls the
Infrastructure form to Compute without shifting the page footer.

## Additional context

Last stack PR. [#49043](https://github.com/supabase/supabase/pull/49043)
has merged. Please review, but do not merge until 2→4 are also approved.
Then merge [#49044](https://github.com/supabase/supabase/pull/49044) →
[#49045](https://github.com/supabase/supabase/pull/49045) →
[#49046](https://github.com/supabase/supabase/pull/49046) → this PR in
succession, and drop the `do-not-merge` labels.

Update the read replicas getting-started doc in the same sitting so it
points only at Infrastructure (it currently also links Database →
Replication).

Remaining stack:
[#49044](https://github.com/supabase/supabase/pull/49044) →
[#49045](https://github.com/supabase/supabase/pull/49045) →
[#49046](https://github.com/supabase/supabase/pull/49046) → this PR

## 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`.

1.
[Infrastructure](https://studio-staging-git-dnywh-choreread-replicas-in-829a4b-supabase.vercel.app/dashboard/project/_/settings/infrastructure):
topology, Read replicas, Scaling.
2. Add read replica. If blocked on compute, Change to Small compute:
sheet closes, Small is selected and focused, the price footer is dirty,
and no blank page gap appears.
3. From the SQL editor database selector, Add replica should open
Infrastructure, not Replication.
 2026-08-21 12:44:41 +10:00
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 -->
 2026-08-21 12:44:41 +10:00
Danny White e9abda6c79 feat(studio): add read replicas section on Infrastructure (#49044) 
## What kind of change does this PR introduce?

Feature. Stack 2 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?

Settings / Infrastructure only covers compute and disk.

## What is the new behavior?

Adds topology, a Read replicas list, and the add-replica sheet on
Infrastructure. Still gated on `infrastructure:read_replicas`.

| Before | After |
| --- | --- |
| <img width="1279" height="1323" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/34e7b414-a326-415b-984c-00ae0000f46e"
/> | <img width="1279" height="1323" alt="Infrastructure Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/547cd7ac-435e-45d1-80ad-2f35476f579f"
/> |

## Additional context

[#49043](https://github.com/supabase/supabase/pull/49043) is merged.
This PR targets `master`.

Please review, but do not merge. `infrastructure:read_replicas` is
already on, so merging this alone would show replicas on both
Infrastructure and Replication. Merge 2→5
([#49045](https://github.com/supabase/supabase/pull/49045),
[#49046](https://github.com/supabase/supabase/pull/49046),
[#48921](https://github.com/supabase/supabase/pull/48921)) in succession
once they are all reviewed.

Replica detail still uses the old Replication URL until #49045.

## To test

`infrastructure:read_replicas` is an enabled-feature, on by default in
`enabled-features.json`. There is no Feature Preview or ConfigCat
switch. On this preview you should already see it: Settings →
Infrastructure shows topology and a Read replicas section. If those are
missing, your profile lists `infrastructure:read_replicas` in
`disabled_features` (from `/platform/profile`), and you cannot flip it
in the UI.

Open [Settings /
Infrastructure](https://studio-staging-git-danny-pipe-1007-02-infra-section-supabase.vercel.app/dashboard/project/_/settings/infrastructure).
Confirm the topology, Read replicas section, and Add read replica sheet.
Replication should still list replicas too.

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

* **New Features**
* Added infrastructure topology visibility to project infrastructure
settings.
* Added read replica management, including status monitoring, empty
states, creation flow, documentation access, and discard-change
confirmation.
* Infrastructure settings now include read replicas alongside compute
and disk configuration.
* Added flexible placement for supplemental disk overview and scaling
content.

* **Bug Fixes**
* Simplified project configuration rendering for more reliable display.

* **Tests**
  * Added coverage for enabled and disabled read replica states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-21 12:44:40 +10:00
Stephen Morgan 3d966e3709 feat(studio): show PrivateLink resource IDs and use connection copy (#48967) 
## What kind of change does this PR introduce?

Feature and docs

## What is the current behavior?

PrivateLink is labelled as an AWS account, and there is no way to tell
which resource configuration belongs to the primary vs a read replica.

Put simply: you’re not adding an AWS account. You’re adding a
connection. One AWS account can have multiple PrivateLink connections,
just to different databases, with more fields also coming soon.

Part of PRODSEC-238 and fixes SEC-939.

## What is the new behavior?

Each connection shows resource configuration IDs so primary and replica
are distinguishable. Customer-facing copy says **connection**. API paths
and AWS console labels still say association.

| Before | After |
| --- | --- |
| <img width="1452" height="496" alt="CleanShot 2026-08-14 at 12 33
49@2x"
src="https://github.com/user-attachments/assets/3b295136-0325-4587-9291-b5f01fc07806"
/> | <img width="1440" height="434" alt="CleanShot 2026-08-14 at 12 34
30@2x"
src="https://github.com/user-attachments/assets/dd6ba064-18e4-4969-9c76-e3b79ac9d288"
/> |
| <img width="846" height="912" alt="CleanShot 2026-08-14 at 12 33
28@2x"
src="https://github.com/user-attachments/assets/c4c6caca-a2f6-4516-99c7-ad7cf865f8ac"
/> | <img width="844" height="880" alt="CleanShot 2026-08-14 at 12 34
39@2x"
src="https://github.com/user-attachments/assets/f3874c6b-abdc-4ef8-84fa-141cd9150871"
/> |
| <img width="1448" height="560" alt="CleanShot 2026-08-14 at 12 33
10@2x"
src="https://github.com/user-attachments/assets/8ae734cb-ec1f-4e4e-acf7-f4de459296d1"
/> | <img width="1460" height="496" alt="CleanShot 2026-08-14 at 12 32
15@2x"
src="https://github.com/user-attachments/assets/883050d5-a6f1-44bd-8ebd-1513a2c41e9f"
/> |

## Additional context

First PR in a stacked PrivateLink series (#49084 onwards). See
https://github.com/supabase/supabase/pull/49030 for the end state, as it
may already include fixes you might propose.

## To test

- **Project Settings → Integrations → AWS PrivateLink.** Open **Add
connection**, or **View** an existing one. Confirm the UI says
connection, and that resource config IDs are copyable.
- **Docs preview → Platform → PrivateLink.** Procedure steps should say
Add connection / View connection.

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
 2026-08-17 11:06:26 +10:00
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 -->
 2026-08-14 15:21:24 +10:00
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>
 2026-08-04 20:47:48 +12:00
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 -->
 2026-08-03 21:14:50 +07:00
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 -->
 2026-07-31 09:01:05 -04:00
Saxon FletcherandAlaister Young ad203ae277 Merge compute and disk into Infrastructure (#48370) 
## Summary

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

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

## Stack

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

## How to test

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


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

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-07-29 19:26:28 +08:00
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377) 
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

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

**Changed:**

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

**Removed:**

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

## To test

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

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

## Summary by CodeRabbit

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

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

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-07-29 00:48:56 +08:00
Alaister YoungAlaister YoungJoshen Lim
 		18431efb25 fix(studio): TanStack post-merge fixes — Monaco loader, fonts, CSP (from #46424) (#47657) 
Post-merge fixes for the TanStack Start migration (#46424) — things that
broke on the TanStack build as master evolved under the migration
branches. Kept on their own branch off master rather than piling onto
the E2E-matrix PR (#47119); all land on master and cascade up to S6 +
the big PR.

Common theme: a master PR changed something the Next pipeline handles
via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the
hand-rolled TanStack equivalent (`routes/__root.tsx`,
`styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on
the Next deploy, broken only on TanStack.

---

## 1. Monaco loader path (#47182)

#47182 re-nested the served Monaco assets from a flat
`public/monaco-editor/` layout into `public/monaco-editor/vs/` and
updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed
`loader.config` at the old path, so `loader.js` 404'd and **no Monaco
editor mounted anywhere in the TanStack build**. Now mirrors the Next
config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for
SSR). Was failing the whole `tanstack` E2E shard on #47119.

## 2. Inter + Manrope fonts (#47306)

#47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and
added `--font-heading` (Manrope), set via `next/font` on Next.
`fonts.css` still only set the now-ignored `--font-custom`, so the body
fell back to the theme's system chain (`Circular, custom-font,
Helvetica…`) at weight 450 — that's the "Inter weights look wrong".
Manrope was missing entirely.

- Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match
`next/font`.
- **Vendor all three families** (Inter, Manrope, Source Code Pro) via
`@font-face` so nothing depends on the Google Fonts CDN — matches
`next/font` self-hosting, and (see below) `font-src` doesn't allow
`fonts.gstatic.com` anyway.

Verified in-browser: computed `body` → `Inter`, headings → `Manrope`,
all loading from local `/assets/*.woff2`.

## 3. Security headers / CSP (next.config.ts `headers()`)

The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS /
**Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The
TanStack build never carried these over — `vercel.ts` only set
cache-control, so **the deployed TanStack dashboard shipped with no CSP
at all**.

The TanStack deploy serves a static shell (no server to attach headers),
so they go in the Vercel config:
- `security-headers.ts` — shared source of truth, reuses `getCSP()`,
env-gated exactly like next.config.
- `vercel.ts` — apply to every response (all base-path prefixes): full
`getCSP()` + HSTS on platform.
- `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`)
for the self-hosted server.

**Tested the policy in a real browser** (temporarily enforced it on the
TanStack build via /test-supabase-local): everything passed except one
real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco
codicon font and Stripe's payment-element fonts (both data: URIs) were
blocked (37 violations on a cold load). Added `data:` to `font-src` in
`csp.ts` → violations drop to zero, SQL editor Monaco renders clean.
That gap affects the Next build too.

---

## 4. `node:path` import crashing `/project/[ref]/merge`

Found by a full-site click-through of the TanStack build (all product
areas, ongoing — see below). `useEdgeFunctionsDiff.ts` +
`EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in
client code. Webpack (Next) polyfills `path` in the browser; Vite
externalizes it, so the whole `/merge` route crashed with "Module
\"path\" has been externalized for browser compatibility". Replaced the
two `basename` call sites with a string helper. Verified in-browser:
`/merge` renders.

## 5. URL shape — Next-style search-param semantics + shim fixes

The dashboard produced malformed URLs vs the Next build (strange query
params, trailing slashes, `##` hashes). Root cause + audit verified
empirically against `@tanstack/react-router@1.170.10`; all fixed with
unit tests and browser-verified:

- **`createRouter` used TanStack's default JSON search codec** —
`?flag=true` became `?flag=%22true%22` via links, repeated
`?filter=…&filter=…` collapsed into a JSON array (breaking
multi-filter/sort table-editor URLs and the account-page round-trip,
which double-encoded), and search values arrived as numbers/booleans
where the app expects strings. New `lib/router-search-params.ts`
(Next-style: strings in, strings out, repeated keys → string[]) wired
into the router.
- **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the
leading `#` while TanStack's `hash` prop adds its own → every
`href="…#section"` navigated to `##section` (hash-scroll broke);
`Object.fromEntries(searchParams)` dropped repeated query params. Both
fixed.
- **Trailing slash injected before the query** on every `?`-only
relative navigation (`/auth/providers/?provider=…`): fixed in the compat
router (prefix current pathname) and via a custom nuqs adapter
(`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router
adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack
behavior (123 files use nuqs).
- **Pathname-less `router.push({ query })` leaked path params** — Next
re-consumes `ref`/`id` from `query` into the path pattern; the shim
didn't, yielding
`/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from
table-editor filter/sort, linter panels, and advisor shortcuts. The shim
now defaults the pathname to the current route pattern and backfills
omitted params.
- **Redirects dropped query + hash** (Next's `redirects()` preserves
them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry
incoming params/hash through (consumed rule params excluded,
destination's own params win). `/?next=new-project&projectName=zzz` →
`/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` →
`/sql/examples?template=x#frag`.

Browser-verified post-fix: advisors `?preset=WARN`, providers
`?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks);
repeated `filter` params survive hydration; `=true` unquoted; single
`#`.

## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL
newline loss)

TanStack router-core treats a query string embedded in `navigate({ to
})` as part of the *path*: `decodePath` percent-decodes it and
`sanitizePathSegment` strips control characters, silently deleting every
`%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload —
`order by timestamp desc` / `limit 5` glued into `desclimit 5`, which
then failed the LIMIT lint. Pre-existing on the TanStack build (the
stock nuqs adapter had the same shape); Next unaffected.

Fixed by never embedding query strings in `to`: the nuqs adapter and the
compat `router.push`/`replace`/`prefetch` (plus the `next/navigation`
shim) now pass search as an object through the app codec
(`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives
a real `createRouter` with multi-line SQL through both producers.
Browser-verified: newlines survive the full Run → reload → re-Run cycle.

## 7. Integration overview markdown never loaded (all integrations)

`MarkdownContent` used a template-literal dynamic import
(``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack
builds a context module for that, Vite can't analyze it, so every
integration detail page threw `Failed to resolve module specifier` and
rendered no overview text. Fixed with an explicit lazy registry of
literal imports (`static-data/integrations/overviews.ts`, drift-guarded
by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's
turbopack raw-loader rule. Both runtimes keep working; md stays out of
the main bundle.

## 8. GraphiQL editor never mounted (`exports is not defined`)

Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global
AMD loader for deps like papaparse) rewrote `typeof define ===
'function' && define.amd` to `false` inside `monaco-editor`'s bundled
copy of marked — whose UMD relies on its own *local* `define` shim — so
the whole optimized monaco chunk failed to evaluate and GraphiQL's
editor pane stayed blank. The check now only short-circuits when
`define` is the global AMD loader. Browser-verified: all four GraphiQL
Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco
workers fall back to the main thread under Vite — functional, worker
wiring is Next-specific `setup-workers/webpack`.)

## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle
crashed (caught by E2E)

The E2E suite against the **built** TanStack bundle (not the dev server)
found lazy chunks like `table-editor-*.js` dead on arrival:
`@sentry/nextjs` (imported by ~25 client files) drags in
`next/dist/shared/lib/constants`, whose module scope evaluates
`process?.features?.typescript` — optional chaining doesn't guard an
undeclared `process` in the browser, so the whole chunk failed at load
with `ReferenceError: process is not defined`. Dev shims `process`,
which is why weeks of dev-server testing never saw it.

Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts`
(re-exports `@sentry/react`, same deduped 10.59.0, plus explicit
stand-ins for the three Next-only APIs) in the Vite build only.
Verified: fresh build has zero Next-internals markers in any chunk;
table editor loads clean; full E2E suite run against the built bundle.

Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch
already carried a different fix for the same crash (a `next/constants`
shim) that never made it to master — the cherry-pick onto those branches
keeps **both** (the shim covers any other transitive importer; the alias
keeps Next internals out of the client bundle entirely).

**Follow-up found while fixing:** Sentry is never *initialized* in the
TanStack runtime — `instrumentation-client.ts` /
`sentry.server.config.ts` are Next-convention files nothing imports
under TanStack, so `captureException` calls are silent no-ops. Needs an
`@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired
into the TanStack client entry as its own PR.

## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only
gaps)

- **GraphiQL's Monaco workers ran on the main thread** under Vite
("Could not create web worker(s)…" — `setup-workers/webpack`'s `new
URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()`
plugin resolves the import to graphiql's own `setup-workers/vite`
variant for client builds (SSR untouched, Next untouched); the
setup-workers chain is `optimizeDeps.exclude`d because the Rolldown
optimizer can't load `?worker` ids.
- **Edge-function editors silently lost their Deno typings** —
`AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports
that always failed at runtime under Vite. The `.md` raw loader is
generalized into `rawTextLoader` (exact-path allowlist for the two
typings files, served as virtual string modules so the dep scanner never
parses `.d.ts` syntax), and the imports are now static-analyzable
literals that both bundlers handle (turbopack's raw-loader rules match
them on the Next side).

## Split out for reviewability

App-level fixes that reproduce on the Next build too (DOM-nesting
hydration errors, the ghost deleted-snippet nav, the recurring pg-meta
`migrations` 400) moved to their own PR: #47667. Sentry initialization
for the TanStack runtime (captures were silent no-ops) is #47666,
stacked on this PR.

## Full-site test campaign

Drove every dashboard product area on the local TanStack build
(Playwright, human-style) hunting migration regressions:
redirects/404/catch-alls, org, account, project home/branches/merge,
table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all
database pages, all auth pages, storage CRUD, edge functions + realtime,
logs/observability, advisors, settings, integrations hub incl. nested
routes, global UI (palette/connect/switchers/theme/fonts), and a
cross-cutting sweep (document titles, back/forward chain, hard-refresh
hydration on deep URLs, trailing-slash active state). Every failure
found is fixed above and re-verified in-browser; remaining console
quirks were cross-checked against the deployed Next build and are
pre-existing (tracked separately).

## To test

Most fixes are already browser-verified + covered by unit tests and the
self-hosted E2E suite; the last two landed after the final browser pass
and still need an in-browser check:

1. **GraphiQL Monaco workers** — restart the dev server (clear
`apps/studio/node_modules/.vite` once first — the optimizer cache may
hold a stale prebundle of the worker chain). Open
`/project/<ref>/integrations/graphiql/graphiql` with the console open:
the `Could not create web worker(s). Falling back to loading web worker
code in main thread` warning must be gone, and DevTools → Sources →
Threads shows the three workers (json, editor, graphql). Autocomplete in
the query editor stays responsive.
2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no
"Failed to load … typings" console error, and typing `Deno.` in the
editor offers typed completions (e.g. `Deno.env`).

Spot-checks for the rest (all previously verified):
- `/project/<ref>/merge` renders (no "Module path" crash).
- Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit`
gluing, no LIMIT-lint false failure); `s` param keeps `%0A`.
- `/auth/providers` → open a provider → `?provider=…` with no trailing
slash before `?`; table-editor filter/sort URLs carry no leaked
`ref`/`id` params; `/?next=new-project&projectName=x` lands on
`/new/new-project?projectName=x`.
- Integration detail pages (cron/queues/vault/data_api) show their
overview prose; GraphiQL query editor mounts.
- Built bundle (`MODE=test vite build` + `start:tanstack`): table editor
loads with no `process is not defined`.
- `curl -sI` any page on a platform deploy: `X-Content-Type-Options:
nosniff` (was the invalid `no-sniff`).


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

* **New Features**
* Centralized integration overview markdown loading with registry-based
lookup.
* Improved Monaco loading/asset path handling for smoother editor
startup.
* **Bug Fixes**
* Next-style navigation/search handling now preserves pathname, hash,
repeated query keys, and special characters (including newlines).
* Redirects now reliably carry over query and hash with correct
precedence.
* **Security/Configuration**
* Updated CSP font sourcing and unified security headers delivery across
environments; conditional HSTS behavior.
* Refreshed font CSS variables and font-face definitions to match the
theme.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


---

### Review feedback: non-prod favicon (Joshen)

The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted
staging now use the white staging favicon (`/favicon/staging`), matching
what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod.
Rather than pull the pages-router component into the TanStack head, it
reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file
already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option
isn't a React component, so it can't run `_app`'s async CLI check — but
the env signal covers the reported local/staging case).

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-07-08 14:52:59 +08:00
Gildas Garcia b30db91d71 chore: cleanup UI patterns exports (#47406) 
## Problem

We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.

## Solution

- Remove the UI patterns index file
- Fix invalid impors
 2026-06-30 09:23:17 +02:00
Gildas Garcia c6fc456910 chore: cleanup duplicate exports studio (#47387) 
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
 2026-06-29 15:46:16 +02:00
Utkarash Kumar Singh a5b820d51b feat(upgrade): surface ltree reindex + operator estimator upgrade warnings (#47003) 
## What

Studio + docs support for two **non-blocking** upgrade-eligibility
warnings for the PG 15.18 / 17.10 release:

- **`ltree_reindex_required`** — ltree indexes on a multibyte / non-libc
database must be `REINDEX`ed after upgrade.
- **`operator_estimator_gate`** — operators referencing a non-built-in
selectivity estimator (CVE-2026-2004) can't be recreated by a
non-superuser.

## Changes
- `UpgradeWarnings.tsx` — title/description/link for both types;
unrecognized warning types are skipped rather than rendering an empty
admonition.
- `apps/docs/.../platform/upgrading.mdx` — two upgrade-guide sections
(with detection + remediation SQL) that the warnings link to.
- `api-types` — the two types added to
`ProjectUpgradeEligibilityResponse.warnings`.

## Server side
Detection/emission lives in the platform repo:
**supabase/platform#34161**. Both warnings are version-gated there (only
fire when upgrading to ≥ 15.16 / 17.8).

Refs: PSQL-1247

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

* **New Features**
* Upgrade warnings now support additional warning types, with
type-specific titles, descriptions, and optional “Read upgrade notes”
links.
* The project upgrade eligibility response now returns these additional
warning types.
* **Bug Fixes**
* Upgrade warnings are rendered consistently for all warning entries (no
special-casing).
* **Documentation**
* Added Postgres `ltree` upgrade warnings, including detection queries
and `REINDEX INDEX CONCURRENTLY` remediation guidance.
* Added operator selectivity estimator warnings, including superuser
requirements and how to detect affected operators.
* **Chores**
  * Updated spelling lint exceptions for common terms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-06-22 14:18:32 +05:30
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 -->
 2026-06-18 11:18:45 +08:00
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880) 
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
 2026-06-16 23:59:58 +02:00
Jordi Enric 2c915ca9fb fix(observability): align overview Connections count with details view DEBUG-75 (#46271) 2026-06-09 16:23:26 +02:00
Paul CioancaandKevin Grüneberg bc6a459fd2 feat(upgrades): prevent upgrades for hibernated projects (#46109) 
## 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?

* Prevents hibernated projects from undergoing database version upgrades


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

* **New Features**
* Added support for hibernating projects in upgrade warnings. Users will
now see a clear message indicating their project is hibernating and will
resume on the next supported request.

* **Chores**
* Extended log drain configuration to support additional destination
types.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46109?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: Kevin Grüneberg <k.grueneberg1994@gmail.com>
 2026-06-01 18:53:57 +03:00
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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/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>
 2026-05-28 23:30:42 +08:00
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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/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 -->
 2026-05-19 16:13:26 -04:00
Ali Waseem a0b4eeb770 chore: fix undefined check for type warnings (#46111) 
## 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?

Minor type check to resolve sentry issue

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

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed an issue where validation warnings could display even when no
warnings were present, improving clarity in infrastructure settings
display.

<!-- review_stack_entry_start -->

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

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-19 17:28:39 +02:00
Utkarash Kumar SinghandJoshen Lim 08c0fc247b feat(studio): warn about pg_graphql introspection change on upgrade (#46096) 
<img width="1512" height="818" alt="introspection"
src="https://github.com/user-attachments/assets/5c0e4c6a-c0e9-496d-8768-4a55a2433268"
/>
## Summary

Adds an in-product admonition on the Infrastructure Settings page when a
project has pg_graphql < 1.6.0 installed, warning users that GraphQL
introspection will be disabled by default after upgrading. Links to
upgrade notes docs with the opt-in SQL.

The admonition is purely informational — it renders alongside the
upgrade button, does not block the upgrade.

## Context

pg_graphql 1.6.0 disables GraphQL introspection by default. The change
is upgrade-triggered (not backported), so users on 1.5.x will only
encounter it when their AMI bundles 1.6.0+. To prevent surprise breakage
of tools that rely on `__schema`/`__type` (GraphiQL, codegen, Relay
compiler, etc.), Studio surfaces this admonition before they upgrade.

Design discussion in
[PSQL-1199](https://linear.app/supabase/issue/PSQL-1199/prepare-dashboard-notification-for-pg-graphql-breaking-change).

## Companion PR

This depends on the schema change in
[supabase/platform#32954](https://github.com/supabase/platform/pull/32954)
which adds the new `warnings` field to
`ProjectUpgradeEligibilityResponse`.

## Admonition copy

- **Title:** \"GraphQL introspection will be disabled by default after
upgrade\"
- **Body:** \"After upgrading, queries to \`__schema\` and \`__type\`
will return an error unless introspection is explicitly re-enabled on
the schema. Regular data queries are not affected.\"
- **CTA:** \"Read upgrade notes\" → links to the new docs section


## Related

- Linear:
[PSQL-1199](https://linear.app/supabase/issue/PSQL-1199/prepare-dashboard-notification-for-pg-graphql-breaking-change)
- Parent rollout:
[PSQL-1163](https://linear.app/supabase/issue/PSQL-1163/breaking-change-pg-graphql-introspection-rollout)
- Companion platform PR: https://github.com/supabase/platform/pull/32954


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

* **Documentation**
* Added “Upgrading to pg_graphql 1.6.0” and updated pg_graphql docs:
introspection is disabled by default, how to re-enable per schema,
verification steps, and affected tools.

* **New Features**
* Upgrade settings UI now shows validation warnings about introspection
with links to upgrade notes.

* **Chores**
* Added "GraphiQL" to MDX spelling allow list and added upgrade-warning
types to API surface.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46096?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: Joshen Lim <joshenlimek@gmail.com>
 2026-05-19 15:42:44 +01:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867) 
## Problem

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

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
 2026-05-15 14:55:37 +02:00
Jordi EnricandClaude Opus 4.7 90d383f182 feat(studio): cross-link disk IO usage to observability charts (#45376) 
## Problem

Users on the Infrastructure activity tab see a Disk IO Bandwidth chart
that plots burst budget percentage rather than real disk activity. The
more granular IOPS and throughput charts live in Observability, but
there is no path between the two pages — users either dismiss real
warnings or file support tickets.

Reported in [Linear
DEBUG-64](https://linear.app/supabase/issue/DEBUG-64).

## Fix

Two cross-links into Observability/Database:

1. **Below the Disk IO Bandwidth chart**
([InfrastructureActivity.tsx](apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx))
an Admonition with a "View detailed IOPS and throughput" button. Only
shown for the disk IO section, not CPU/RAM.
2. **In the disk IO exhaustion banner's Troubleshoot dropdown**
([ResourceExhaustionWarningBanner.tsx](apps/studio/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.tsx))
a "View metrics" item alongside Documentation and Ask AI Assistant.

The banner part is wired via a new optional `metricsHref` on
`ResourceWarningMessage`, so CPU/RAM warnings can opt in later by adding
their own observability path.

## Test plan

- [ ] Visit `/project/{ref}/settings/infrastructure` on a project that
does not have dedicated I/O resources. Confirm the new Admonition
appears under the Disk IO chart and the button navigates to
`/project/{ref}/observability/database`.
- [ ] On a project with dedicated I/O resources, confirm only the
existing "dedicated I/O" Admonition shows (no double-Admonition).
- [ ] Trigger (or mock) a `disk_io` resource warning; confirm the
banner's Troubleshoot dropdown shows "View metrics" first and links to
Observability.
- [ ] Trigger a `cpu` or `ram` warning; confirm the dropdown does NOT
show the new item.

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

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

* **New Features**
* Clarifies that the disk IO consumption chart shows remaining burst
budget, not real throughput.
* Adds a quick-access button to jump to the Database Observability page
for detailed read/write IOPS and throughput.
* Adds a "View metrics" link in resource exhaustion warnings for disk IO
issues (shown when a single warning is active).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-12 16:08:14 +00:00
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 -->
 2026-05-08 18:33:45 +08:00
Gildas Garcia 4f28e5ccb4 chore: migrate Input usages to Shadcn component in settings (#45596) 
screens/components

## Screeshots

### Delete project modal textarea
Before:
<img width="792" height="928" alt="image"
src="https://github.com/user-attachments/assets/f8276696-7bc0-415e-958c-b8794762013b"
/>

After:
<img width="788" height="928" alt="image"
src="https://github.com/user-attachments/assets/4b0991c1-7926-4b0a-b1cb-942f809f4a02"
/>

### Edge functions logs search input
Before:
<img width="667" height="219" alt="image"
src="https://github.com/user-attachments/assets/991b09ce-8d4f-4ccc-b787-3da611c78893"
/>

After:
<img width="695" height="231" alt="image"
src="https://github.com/user-attachments/assets/2623faeb-d636-4dec-8244-8e9bdad3acfb"
/>

### Infrastructure
Before:
<img width="1144" height="419" alt="image"
src="https://github.com/user-attachments/assets/25b27819-a3f6-4d67-9edc-f8225d07d592"
/>

After:
<img width="1153" height="440" alt="image"
src="https://github.com/user-attachments/assets/10eea888-09b0-463b-a307-6c58b4feb948"
/>

### DNS Record

Haven't been able to test this one

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

* **Refactor**
* Streamlined form and input layouts across Settings: DNS, Project
Deletion, Infrastructure Info, and Log Preview panels for a more
consistent, accessible editing experience.
* Replaced various single-line inputs with grouped controls,
read-only/display variants, and input-with-addon patterns, improving
readability, copy/readonly behavior, and control affordances (buttons,
badges, tooltips) in settings and log search.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-05 18:24:21 +02:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318) 
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
 2026-04-30 10:53:24 +00:00
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>
 2026-04-27 14:15:11 +02:00
Joshen Lim 7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264) 
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
 2026-04-27 17:42:34 +08:00
CharisCopilotIvan Vasilov
 		4a0bb36ca8 style: require sorted imports in studio/components (#44408) 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
 2026-04-01 10:22:37 +02:00
Alaister YoungAlaister YoungClaude Sonnet 4.6Copilot
 		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>
 2026-04-01 16:13:38 +08:00
Ali Waseem 636dcaa264 fix(studio): fix and filter Sentry issues (#44401) 
## Summary

Fixes and filters several noisy Sentry issues affecting Studio.

### Code fixes
- **SUPABASE-APP-BG0** — `TypeError: Cannot read properties of undefined
(reading 'toString')` in JsonEditor. Guarded against `undefined`
`jsonStr` when `prettifyJSON` receives an undefined value.
- **SUPABASE-APP-BKM** — `TypeError: Cannot read properties of undefined
(reading 'join')` in UpgradeWarnings. Added fallback for
`error.dependents` being undefined from the API.
- **SUPABASE-APP-BVE** — `RangeError: Invalid time value` in filter date
picker. Validated date before passing to `Calendar` component.

### Sentry `ignoreErrors` filters
- **SUPABASE-APP-B1N / SUPABASE-APP-BMF / SUPABASE-APP-E4Q** — `cmdk`
`useSyncExternalStore` subscribe race condition (Chrome variant).
- **SUPABASE-APP-E5M** — Same `cmdk` subscribe error (Safari variant).
- **SUPABASE-APP-ASG** — Firefox `Node.removeChild` DOM manipulation
error (Chrome variant was already filtered).
- **SUPABASE-APP-AWE** — Non-Error object exceptions (`Object captured
as exception with keys:`).

### Ignored in Sentry (no code change)
- **SUPABASE-APP-ASG** — Resolved (now filtered in code).
- **SUPABASE-APP-FK9** — `SyntaxError: Invalid or unexpected token` from
`react-markdown` parser. Single user, one-off.
- **SUPABASE-APP-EV3** — React fiber error from DOM manipulation. Single
user, already archived.

## Test plan
- [ ] Verify JsonEditor opens correctly with valid and missing JSON
values
- [ ] Verify UpgradeWarnings renders when `dependents` is undefined
- [ ] Verify filter date picker handles invalid date strings gracefully
 2026-03-31 12:21:09 -06:00
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
 2026-03-23 17:41:50 +01:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849) 
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-03-17 11:17:42 +01:00
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"
/> |
 2026-03-12 16:37:07 +11:00
Alaister Young 56d97ed7fd [FE-2553] chore(studio): only show replication moved CTA if replication is enabled (#43479) 
The "Management of read replicas has moved" banner in Settings >
Infrastructure linked to /database/replication, which returns a 404-like
page for users who don't have the database:replication feature enabled.
The notice is now only shown when the feature is enabled.
 2026-03-06 07:11:53 +00:00
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
 2026-03-04 15:28:01 +08:00
Ignacio Dobronich 0d7e14a79c chore: entitlement checks for infra warnings (#43295) 
### Changes
- Replace `isFreePlan` with entitlement-based check in infrastructure
warnings: `CPUWarnings`, `RAMWarnings`, and `DiskIOBandwidthWarnings`
previously derived their button label ("Upgrade project" vs "Change
compute add-on") from checking the org's plan. This is now driven by the
`instances.compute_update_available_sizes` entitlement.
 2026-03-03 14:07:43 -03:00
Ali Waseem 1890624a1a fix: add missing keys to studio (#42957) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Cleanup from React Doctor! Components missing keys
 2026-02-18 09:05:22 -07:00
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
 2026-02-12 15:57:44 -05:00
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>
 2026-02-06 16:37:32 +08:00
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 -->
 2026-02-03 15:54:21 +08:00
Joshen Lim 99434629e0 Update copywriting for database replication if flag is on (#42380) 
## Context

Related to unifying read replicas into the database replication page

Updates some copywriting on the database replication page if the feature
flag is on

## Before
<img width="768" height="104" alt="image"
src="https://github.com/user-attachments/assets/2f49d5b7-5141-4606-b50c-886a6b62f80e"
/>

<img width="1109" height="209" alt="image"
src="https://github.com/user-attachments/assets/d1c37f8f-2105-49ad-a029-e5d00a81050a"
/>


## After 
<img width="899" height="89" alt="image"
src="https://github.com/user-attachments/assets/ffcbd1de-56ea-4181-937c-29b96c25d7d0"
/>

<img width="1094" height="206" alt="image"
src="https://github.com/user-attachments/assets/9942134c-8bf1-4978-a343-93df4397d044"
/>


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

## Summary by CodeRabbit

* **New Features**
* Replication interface now displays contextual guidance and
descriptions based on your configuration.
* Enhanced messaging for data synchronization and destination
management.

* **UI Improvements**
* Refined layout spacing in the destinations empty state for improved
visual clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-02-03 12:20:56 +08:00
Danny Whitecoderabbitai[bot]Joshen Lim
 		abc37edaa7 chore(studio): link directly to Postgres upgrade blockers (#41527) 
* validation errors

* improvements

* deprecate notice bar

* consolidate upgrade warnings

* type fixes

* rabbit

* 📝 Add docstrings to `dnywh/chore/link-to-dropped-objects` (#41528)

* 📝 Add docstrings to `dnywh/chore/link-to-dropped-objects`

Docstrings generation was requested by @dnywh.

* https://github.com/supabase/supabase/pull/41527#issuecomment-3680610884

The following files were modified:

* `apps/studio/data/config/project-upgrade-eligibility-query.ts`

* New line

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

* Use API types instead

* Update API types

* Add manage replicas CTA to upgrade warning if unified replication and project has replicas

* Nit

* use actionable language

* gap

* simplify

* prettier

* Add URL

* better links

* add tables and encode links

* remove replication link

* nit ordering

* rabbit

* Small simplify

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-01-26 12:50:18 +08:00
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
 2026-01-23 17:59:52 +08:00
Kanishk Dudeja 4281be70ed feat(billing): use entitlements for read replica access (#41940) 2026-01-20 13:19:43 +05:30