## Summary
Make pipeline actions and status feedback reliable while requests are
running or fail. Let the backend coordinate table resets and restarts,
keep stopped pipelines stopped after resets or settings changes, and
refresh the UI from confirmed backend state.
## Pipeline actions and recovery
- Reset one table, all errored tables, or all tables through the
rollback endpoint without separate frontend stop/start requests. Explain
which destination data is deleted, which rows are copied again, initial
sync charges, and the skip-initial-sync setting.
- Keep pending feedback until the action and a fresh status read finish,
including across navigation and polling errors. Prevent overlapping
actions and disable start/stop controls when status is unavailable or
transitioning.
- Close the creation form once the pipeline is created. If its initial
start fails, users can retry Start on the existing pipeline without
creating a duplicate.
- Wait for confirmed shutdown before deletion; a shutdown error or
timeout leaves deletion retryable. Keep failed version updates open and
avoid reporting success.
- Clarify recovery guidance and pending labels, suppress duplicate error
toasts, and hide stale table errors during transitions.
## Status updates and shared UI
- Poll pipeline status and table metrics one second after each response,
share in-flight reads, pause dashboard polling in background tabs, and
respect rate-limit backoff. The shutdown waiter continues in the
background.
- Refresh metadata after mutations even when an older read is in flight,
while preserving shared polling requests. Refresh affected data after
failures that may follow a committed reset or settings change.
- Move pending request state into the shared, project-keyed
`DatabaseLayout` so the list, detail page, and diagram stay consistent.
The surrounding database-page changes update named imports in both
Next.js and TanStack routes.
- Simplify action, status, and form rendering; announce status changes
to assistive technology; and sort table statuses without mutating cached
data.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
Studio UI improvement.
## What is the current behavior?
The pipeline Overview uses bespoke loading, metrics, table-state and
empty-state layouts that shift while data resolves and repeat status
information from the detail header.
## What is the new behavior?
Rebuilds the Overview around stable **Pipeline health** and **Replicated
tables** sections. It adds layout-matched loading geometry, prioritised
pipeline notices, initial-sync progress, clearer empty states, and
accessible loading announcements. Complete pipeline configuration
remains deferred to #49631.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="54861"
src="https://github.com/user-attachments/assets/56e5cc5a-5d49-44c8-94d7-e1f1e0c827d5"
/> | <img width="1024" height="759" alt="Replication Database Agua
Basket Supabase"
src="https://github.com/user-attachments/assets/43b6d0f6-6fd5-47f9-b3e5-788a33511304"
/> |
This is the final independent slice in the review series: #50443,
#50444, #50445, #50446, then this PR. Each PR targets `master` and can
merge on its own. Rebase this PR as earlier slices merge.
## To test
1. Open `/project/<ref>/database/replication` and select a pipeline.
2. Throttle the initial requests and confirm **Pipeline health** and
**Replicated tables** keep their final geometry while loading.
3. Check running, initial-sync, stopped, failed, disconnected and
unavailable states.
4. Confirm the Overview contains Pipeline health and Replicated tables
only, without a Configuration section.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Reorganized replication pipeline status into Pipeline health and
Replicated tables sections.
- Added loading skeletons with accessible status announcements.
- Added clearer notices for pipeline health, failed or disconnected
pipelines, paused updates, lag, and synchronization progress.
- Improved empty states when table data is unavailable or the pipeline
is inactive.
- Added options to view logs and reset failed tables.
- **Tests**
- Added coverage for loading behavior, pipeline notices, table counts,
synchronization progress, and empty states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Studio UI and interaction polish. This is the second PR in the Pipelines
review stack and depends on #50251.
## What is the current behaviour?
Pipeline rows require a separate view action, cannot be sorted, and
present lifecycle, lag, and destination terminology inconsistently.
## What is the new behaviour?
Makes rows navigable with link-like mouse and keyboard behaviour, adds
Name and Status sorting, reuses cached status queries, and moves row
actions into the overflow menu. It also clarifies pipeline terminology,
adds Docs and feedback actions, and standardises state, error, lag, and
loading presentation with accessible announcements.
| Before | After |
| --- | --- |
| <img width="1280" height="1323" alt="Replication Database ETL BigTable
ETL Team Supabase"
src="https://github.com/user-attachments/assets/53a62283-0e58-4408-8409-2b87a38af159"
/> | <img width="1280" height="1323" alt="Replication Database Agua
Basket Supabase"
src="https://github.com/user-attachments/assets/ba4de1e0-4a84-43b4-8975-ca05a3056bcf"
/> |
## To test
1. Open `/project/<ref>/database/replication`.
2. Sort by Name and Status, then confirm failed and stopped pipelines
surface first when Status is ascending.
3. Click a row, use Enter or Space, and modifier-click or middle-click
to verify link behaviour.
4. Open the row overflow menu and confirm it does not navigate.
5. Check loading, initial sync, caught up, numeric lag, unavailable lag,
and table-error states where available.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added sortable pipeline lists with clearer loading, empty, and error
states.
- Pipeline rows now support direct navigation, detail viewing, status
indicators, lag progress, and table error summaries.
- Added initial-sync progress indicators and accessible status
announcements.
- Added documentation and feedback links.
- Improved pipeline version update and enable/disable dialogs.
- **Bug Fixes**
- Prevented right-clicks from triggering navigation.
- Improved unavailable lag and initial-sync handling.
- **Style**
- Standardized replication terminology and confirmation messaging around
pipelines.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
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 -->
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## 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 -->
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* add dummy sinks and pipelines pages
* update api types
* show empty sources state
* show empty replication state at /replication
* create source when enable replication button is clicked
* improve replication page when replication is enabled
* replace sources page with publications page
* publications table
* show publications in table
* create publication wip
* show toast error instead of throwing an exception
* user can now delete a publication
* show empty sinks page
* create and list sinks
* add ui to delete a sink
* show pipelines on the pipelines page
* add ui to create and delete pipelines
* get pipeline status wip
* show pipeline status wip
* show correct label on action buttons
* start and stop pipelines
* remove a couple of console.logs
* fix error when deleting a pipeline
* only consider replication enabled when a source with name = ref is present
* add source and sink names
* correct colspan for 'no pipelines' row
* hide 'supabase_realtime' publication on ui
* move filtering to fetch query
* show sink name in ui
* show source/sink names on pipelines page
* fix start/stop status shown on ui
* fix prettier formatting
* update api types
* extract pipeline action button as a separate component
* fix a crashing page
* fixed publications page crash
* update to match with changes in api
* add new replication page under database
* hide replication page behind feature flag
* update types
* update api types
* show destinations empty state
* add destinations table
* factor out components from Destinations table
* show status dot
* move pipeline fetch query to parent component
* add ability to enable/disable a pipeline
* show loader when starting or stopping a pipeline
* fix a bug in which loading & empty states were shown together
* fix a bug in which error & empty states were shown together
* wrap in default layout
* add new destination panel
* add type field
* fix a forwardRef error
* fix layout
* create destination
* delete destination
* add ability to create or delete destinations with pipelines
* create source if missing
* show only a single error
* add an enable switch
* new layout
* add subsections
* comment out unused code
* show enabled switch only in the header
* close panel when destination is created
* disable buttons when api requests in flight
* reduce panel size
* remove commented out code
* treat max size and max fill secs as numbers
* use drop down to show publications
* simpler vertical layout
* add separators
* add form validation
* remove publications drop down padding
* add new publication button
* hide advanced settings behind an accordion
* add some margin between icon and text
* show publications panel on clicking new publication button
* add header to new publication panel
* fix validation not running for publication drop down
* create publication in the new publication panel
* add table selector in new publication panel
* update api types
* remove old code
* update platform.d.ts
* update navigation bar utils
* remove a redirect from replication page to publications page
* ask user for confirmation before deleting destination
* edit destination panel
* edit destination panel values fixed
* bug fixes
* fix prettier formatting
* enable/disable pipeline after editing
* rename snake_case params to camelCase
* loading button when editing
* remove merge markers
* update api types
* add max_staleness parameter in sinks for bigquery
* add read replicas flow diagram to replication page
* remove an unused import
* Revert "add read replicas flow diagram to replication page"
This reverts commit 8852d7847b457885603dba786141a8aaf8e99350.
* add panel to warn users about additional cost before creating a destination
* hide replication page contents behind a feature flag
* fix merge conflicts
* styling changes
* revert static flag
* styling updates
* fixes
* fix switch
* copy
* fix layout
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
