Commit Graph

24 Commits

Author SHA1 Message Date
Alaister Young
b0e31be89a chore(studio): remove dead code found by knip (#49719)
Removes Studio code that nothing imports, as reported by knip. First PR
in a stack of three: this one is pure deletions, #49720 removes the
unused dependencies, #49721 upgrades knip and adds the CI gate so this
doesn't accumulate again.

Every file was verified with a repo-wide grep for its basename, exported
symbols, and string/dynamic imports before deletion — none are reachable
via `next/dynamic`, a barrel file, or a config.

**Removed:**
-
`Billing/Usage/UsageWarningAlerts/{CPU,RAM,DiskIOBandwidth}Warnings.tsx`
(whole directory)
- `DataWarehouse/FormFooterChangeBadge.tsx` (whole directory)
- `Database/Replication/ReplicationDiagram/EmptyReplicationDiagram.tsx`
- `Integrations/Vercel/OrganizationPicker.tsx`
- `QueryInsights/QueryInsightsTable/QueryInsightsTableRow.tsx`
- `hooks/misc/useTrackExperimentExposure.ts`
- `data/ai/{parse-client-code,sql-policy}-mutation.ts`,
`data/misc/parse-query-mutation.ts`,
`data/database/table-check-rls-mutation.ts`
-
`data/notifications/notifications-v2-{archive-all-mutation,summary-query}.ts`
+ their two now-unused keys in `notifications/keys.ts` (`listV2` kept)
-
`data/platform-apps/platform-app-{update,signing-key-delete}-mutation.ts`
- `DateTimeFormats.DATE_ONLY` and the unused
`Notebooks.{MarkdownCell,LogCell,ChartConfig}` types

**Changed:**
- `ReportPadding` no longer has a duplicate default export; its 9
default importers (observability pages) now use the named export

Not removed: `CONSTRAINT_TYPE`'s unused members mirror the closed set of
`pg_constraint.contype` values, so they're documentation rather than
dead code — suppressed narrowly in #49721's knip config instead.

## To test

- `pnpm --filter studio run typecheck` and `lint:ratchet` pass
- Observability pages (`/project/[ref]/observability/*`) still render
with padding — they're the only code touched, via the `ReportPadding`
import change
- Notifications popover still loads and marks-as-read (the removed keys
weren't used for invalidation)


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

## Summary by CodeRabbit

- **Removed Features**
  - Removed CPU, memory, and disk usage warning alerts.
- Removed the Vercel organization picker and empty replication diagram.
  - Removed query insights row actions and several SQL assistance tools.
  - Removed notification summary and archive-all capabilities.
  - Removed platform app update and signing-key deletion actions.
- Removed the form change-count badge and experiment exposure tracking.

- **Refactor**
- Updated observability reports to use the revised report layout export.

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

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-08-31 10:55:23 +08:00
Alaister 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
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
bb086a84b8 feat(studio): remove read replicas from Replication (#49046)
## What kind of change does this PR introduce?

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

## What is the current behavior?

Database / Replication lists, creates, and diagrams read replicas
alongside pipelines.

## What is the new behavior?

Replication is pipelines-only. No replica rows, type, or diagram nodes.
`?destinationType=Read+Replica` redirects to Infrastructure. A short
callout points create-mode users at the new home.

## Additional context

Please review, but do not merge until
[#48921](https://github.com/supabase/supabase/pull/48921) is ready to
follow immediately. The flag is already on, so this PR is the
user-facing cutover off Replication.

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

Open [Database /
Replication](https://studio-staging-git-danny-pipe-1007-04-cut-from-77ef95-supabase.vercel.app/dashboard/project/_/database/replication?destinationType=Read+Replica).
You should land on Infrastructure with the add-replica sheet, not a
replica destination type. The Replication page itself should be
pipelines-only.

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

## Summary by CodeRabbit

* **New Features**
* Added guidance directing users to Infrastructure to create read
replicas.
  * Added automatic redirection for legacy read-replica links.

* **Updates**
* Replication destinations now focus exclusively on external analytics
and pipeline destinations.
* Updated destination selection, empty states, descriptions, and
diagrams to reflect the streamlined experience.
* Removed read replicas from the replication destination list and
related creation flow.

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

---------

Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
2026-08-21 12:44:41 +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 Morgan
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
Danny White
73c9dbfa52 fix(studio): standardise custom icon weight (#48478)
## What kind of change does this PR introduce?

Bug fix and internal tooling update. Resolves FE-3472.

## What is the current behavior?

Custom Studio icons use inconsistent source stroke widths, and some
child-level styling prevents component props from overriding them. Mixed
custom and Lucide icon sets can therefore appear uneven.

## What is the new behavior?

Custom stroke icons use a root-level `stroke-width="1.5"`; fill-only
logos use `stroke="none"`. The build validates that contract and
regenerated components preserve existing exports and props.

Studio applies the same `1.5` weight across Reports categories and uses
one shared destination icon mapping in the replication selector,
destination rows and diagram.

| Before | After |
| --- | --- |
| <img width="418" height="516" alt="56398"
src="https://github.com/user-attachments/assets/6afa7042-e6be-40e7-9911-af2f61238c9d"
/> | <img width="390" height="550" alt="CleanShot 2026-07-30 at 17 12
37@2x"
src="https://github.com/user-attachments/assets/870f49cf-c8fa-40db-8be8-2eb5f264ff4a"
/> |
| <img width="510" height="734" alt="CleanShot 2026-07-30 at 17 19
28@2x"
src="https://github.com/user-attachments/assets/a5b2c088-dcd2-4907-976b-5820794d06e3"
/> | <img width="554" height="742" alt="CleanShot 2026-07-30 at 17 16
06@2x"
src="https://github.com/user-attachments/assets/ed3a77c4-5d94-4ca7-b9e4-1403b725a981"
/> |


## Testing

At 100% zoom, compare custom and Lucide icon weight in:

- Reports: **Add your first chart** and **Add block**
- Database > Replication: the destination selector, destination rows and
replication diagram
- Command menu (`⌘K`): **Search Database Tables**, **Search RLS
Policies**, **Search Edge Functions** and **Search Storage**
- Authentication > Users: right-click a user row and compare the
context-menu icons
- Database > Schema Visualizer: open a table node overflow menu
- A paused project: **Export your data > Download backups**

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

* **New Features**
* Added consistent destination icons across replication panels, rows,
and diagrams.
  * Updated instance health and metric icons for clearer identification.
* Standardized icon stroke weight and reduced default icon stroke
thickness.

* **Documentation**
* Clarified custom icon requirements, default properties, and validation
guidance.

* **Bug Fixes**
* Improved consistency of icon rendering across replication destinations
and reports.

* **Tests**
* Added coverage for icon SVG validation and replication destination
icon rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-03 17:48:50 +10:00
Danny White
205527c716 feat(studio): tune up replication page layout and empty state (#48265)
## What kind of change does this PR introduce?

UI polish for Database → Replication: empty state, page layout, diagram
containment, filter actions, and destination sheet copy.

## What is the current behavior?

- Empty destinations use a custom dashed box with generic copy.
- The diagram is full-bleed with `border-y`.
- Page chrome still uses legacy Scaffold wrappers and a long header
description that duplicates the empty state.
- Filter-row “Add destination” is a default button ahead of secondary
actions; Usage always shows.
- Local ETL warning sits on the page list.
- Destination sheet title/helper/access copy is more verbose; Type
helper sits beside the label.

## What is the new behavior?

- Empty state uses `EmptyStatePresentational` with clearer CTA copy;
toolbar “Add destination” is primary at the end of the filter row;
empty-state CTA stays default.
- Usage only appears when there is at least one Pipelines destination.
- Page uses `PageHeader` / `PageContainer` / `PageSection`, with a short
header: “Read replicas and analytics pipelines”.
- Diagram sits in a rounded bordered frame inside the page container
(same treatment as project overview).
- Local ETL warning shows in the add-destination sheet for Pipelines
types only, without blocking the form; Type + warning scroll with the
sheet body.
- Type helper sits under the dropdown as one flowing paragraph (“Cannot
be changed after creation…” plus shortened stage notice).
- Sheet title is “Add destination”; close only fires on dismiss; Lucide
icons (e.g. Snowflake) use consistent stroke width.

| Before | After |
| --- | --- |
| <img width="1479" height="930" alt="Replication Database Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/a3caf0ba-ed1a-4659-bdef-f66b67e85be4"
/> | <img width="1479" height="930" alt="Replication Database Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/d5a82641-a316-4577-9480-959346994c40"
/> |
| <img width="1479" height="930" alt="Replication Database Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/4f956e26-b8d4-4653-a60e-ceca7ec1e070"
/> | <img width="1479" height="930" alt="Replication Database Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/a72461ab-dea9-48a6-ab88-852a12ac80a5"
/> |

### Test plan

- [x] Open **Database → Replication** with no replicas/destinations:
empty state, primary filter-row Add destination, default empty-state Add
destination, no Usage button.
- [x] Confirm header→diagram and diagram→filter spacing feel even;
filter→empty state/table stays tight (`space-y-4`).
- [x] Confirm diagram is contained (rounded border), not full-bleed.
- [x] Add a Pipelines destination (or use a project that has one): Usage
appears; table still works; search “no results” still works.
- [ ] Open **Add destination**: title “Add destination”; Type helper
under the dropdown; Read Replica has no local warning; Pipelines type
shows local warning without hiding fields (when ETL isn’t set up
locally).
- [ ] Without Pipelines access: request-access panel shows “alpha” copy
and “Request alpha access”.
- [ ] Spot-check dark/light themes.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-31 06:20:38 +10:00
Jordan McQueen
fa1e4c4bbf feat(studio): add ClickHouse replication destination (#46870)
Adds ClickHouse as a replication destination type in Studio.

- New ClickHouse option in the destination type selector, gated behind
the
`etlEnableClickHousePrivateAlpha` organization feature flag (off by
default).
- ClickHouse settings form: URL, user, password (optional), database,
and
  - Client-side URL validation requires HTTPS and rejects URLs targeting
    internal addresses (loopback, RFC 1918, link-local, CGNAT, IPv6
    loopback/link-local/ULA, and IPv4-mapped/NAT64 forms). Server-side
    validation remains authoritative.

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

## New Features
- Added **ClickHouse** as a replication destination option (private
alpha), including support in destination selection/panel, replication
diagram rendering, and destination icons.
- Introduced a ClickHouse destination form with fields for URL, user,
optional password (masked toggle), database, and engine selection.
- Added ClickHouse destination config handling for create/update flows,
with normalization and engine support.

## Tests
- Expanded unit tests to cover ClickHouse validation and destination
config building/normalization, including HTTPS-only and blocking
localhost/internal targets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-20 12:09:13 +08:00
Saxon Fletcher
fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


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

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00
Joshen Lim
ea909e998b Local only: skip loading destinations if ETL API is not set up (#47031)
## Context

> [!IMPORTANT]  
> Changes in this PR only apply to the local environment - there should
not be any changes to staging (nor production)

Given that read replicas currently sit under database replication, the
UI currently waits for replication destinations to load before rendering
the page. However for local development, setting up of the ETL API isn't
necessary nor applicable for everyone so this indirectly adds friction
if we just want to work with read replicas.

## Changes involved
- Opting to skip retrying fetching ETL related requests if the error
returned is "replication API URL is not configured"
  - This is indicative that the local platform isn't set up for ETL yet
- ^ Database replication page will hence not wait for ETL requests to
succeed before finally rendering the UI
  - Node diagram will also then render properly (just read replicas)
- Add a small admonition to visualize this
<img width="1079" height="301" alt="image"
src="https://github.com/user-attachments/assets/32bd5d2f-a76e-417e-bedf-9a04de3bb305"
/>

## To test
- Will only be able to test locally - basically just head over to the
database replication page (unless you somehow already have ETL API set
up locally)
- But can also verify that there's no changes on staging preview


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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved error messaging when ETL is not configured in local
development environments
* Enhanced error handling for replication API failures with better
non-retryable error detection

* **Improvements**
* Refined replication diagram rendering based on destination setup state
  * Updated dropdown menu interactions for read replica management

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-19 17:27:44 +08:00
Ivan Vasilov
e1ccc31fcc chore: Disable some of the Studio features on Multigres projects (#46775)
This PR disables the following features on Multigres projects

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

## Summary by CodeRabbit

* **New Features**
  * Enhanced replication interface with improved visual states.

* **Bug Fixes**
* Added validation to prevent incompatible database configuration
combinations.

* **Changes**
* High Availability projects now display informational notices
indicating unavailable features: Realtime, Replication, and PITR
backups.

* **Removed**
  * Removed redundant UI component from the application.

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

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
2026-06-15 14:09:41 +02:00
Riccardo Busetti
324c724117 ref(replication): Improve replication copy and UI (#46793)
This PR improves the replication UI in the following ways:
- Adds a new selecion picker for destinations which is split by the
destination location and it's clearer and can scale more when we add
more destinations.
- Adds a much improved section on lag, highlighting new metrics that
could help debug issues more easily.
- Improves the copy across the whole code.
- Fixes the 2d topological view of replication with better status
handling.

### Screenshots

<img width="1270" height="777" alt="image"
src="https://github.com/user-attachments/assets/0ffc890e-2f80-47e5-bdb1-75071adda024"
/>

<img width="1665" height="656" alt="image"
src="https://github.com/user-attachments/assets/23a27a02-acb2-4891-af95-5bc1d6ec7bfe"
/>

<img width="1454" height="247" alt="image"
src="https://github.com/user-attachments/assets/c8799983-aa63-42b2-9370-ae4e009c1573"
/>

<img width="1120" height="340" alt="image"
src="https://github.com/user-attachments/assets/20a18ad6-e5a9-40ec-80d4-42d6f783d868"
/>

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

* **New Features**
  * Live slot health indicators, legend, and connection badges.
  * Grouped destination type dropdown with alpha badges.

* **Improvements**
* Clearer UI copy for external destinations, alpha disclaimers, and
onboarding flows.
* Consolidated "n/a" handling for lag displays and richer metric
tooltips.
* Simplified replication diagram visuals and clearer table/row
status/lag presentation.
* Replication status responses now include expanded slot health and lag
metrics.

* **Tests**
* New test suites covering destination selection and destination row
states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-11 10:58:36 +00:00
Victor Farazdagi
61754a0eec feat(studio): add Snowflake replication destination (#46767)
## Details of change

Adds Snowflake to the Studio replication destination flow:
- destination selection and display
- create/edit form fields
- validate/create/update payload serialization
- generated Platform API types

Snowflake remains gated behind `etlEnableSnowflakePrivateAlpha`.

**Note:** I have configured `etlEnableSnowflakePrivateAlpha` in
ConfigCat ("all" in staging and tied to my own org id in prod).

## Details of Verification Process

- Studio focused Vitest coverage for form serialization and diagram
mapping
- Studio typecheck
- ESLint on changed Studio replication files
- Local `mise fullstack:dev` smoke test to confirm the Snowflake form
renders ok.

<img width="937" height="569" alt="image"
src="https://github.com/user-attachments/assets/8d6b3a87-1f9d-4a59-91da-be719714ea49"
/>


Full create/validate E2E depends on the Platform PR and ETL runtime
rollout.


## Review Requests

Please check the Snowflake wire payload matches the Platform/ETL
contract and that gating/edit/display behavior follows the existing ETL
destination patterns.

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

* **New Features**
* Snowflake added as a supported replication destination (private-alpha
gated), including UI for selecting and configuring connection and auth
(account, user, database, schema, role, private key, optional
passphrase).
* **Validation**
* Form validation and submission now handle Snowflake-specific
required/optional fields.
* **Tests**
* Unit tests added for Snowflake form behavior and replication-type
detection.
* **API**
* Destination create/update/validate flows extended to accept Snowflake
payloads.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-11 10:25:57 +03:00
Ivan Vasilov
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
Coenen Benjamin
151a1792d9 feat(studio): add support for new ducklake destination in replication UI (#45370) 2026-04-29 21:42:05 +02:00
Charis
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
Joshen Lim
29f5c4c44a Fix/build issue react flow (#44119)
Not sure how i overlooked this one sorry 🤦 
was importing from the wrong library
2026-03-24 09:22:21 +00:00
Joshen Lim
8838aab49e Fix missing edge when deploying a new RR, and add some small qol tidbits (#44072)
## Context

Edge between replica and primary DB was missing when the replica is
first initialized, so this PR primarily fixes that.

## Other changes
Also just adding in some tiny QoL nudges
- Add replication lag if its a read replica
- Add a loader edge label if the target is coming up
- Add a "X" edge label if the target status failed

<img width="752" height="171" alt="image"
src="https://github.com/user-attachments/assets/c77eae12-1608-4c05-a0bc-66204f3e125e"
/>

<img width="684" height="396" alt="image"
src="https://github.com/user-attachments/assets/f15f0914-0915-4cf3-8c28-8a80b3f97d54"
/>
2026-03-24 16:55:13 +08: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
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
Joshen Lim
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
Saxon Fletcher
0e60c5f341 Chore/connect sheet/button (#42367)
This is the first smaller PR in the broader change of updating our
Connect dialog (see
[here](https://github.com/supabase/supabase/pull/42276)).

This PR focuses on decoupling the ConnectButton our of the Connect
dialog and into its own component . The button includes a flag to render
the new sheet. The new sheet is empty for the time being as the flag is
at 0%.

To test:
- Enable flag and click button, see new Sheet
- Disable and see old dialog
- Create a new project -> in getting started section see "connect to
app" step -> Click connect button and make sure it works


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

* **New Features**
  - Added a Connect button component and an alternative Connect sheet.
  - Added curl syntax highlighting for code blocks.

* **Changes**
- Connection dialog moved to a controlled open-state pattern; Connect
replaced legacy entry points across the UI and can be feature-flagged.
- Connection actions simplified and no longer depend on framework
selection.

* **Removals**
- Removed legacy framework selector, default framework constant, and
related tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-04 11:53:32 +11: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