## Summary
Wires the existing `list-page.*` shortcuts up to the Database →
Replication and Database → Migrations pages, so they get the same hotkey
behavior as Roles, Tables, Publications, etc. No new shortcut IDs were
added.
**Migrations page**
- Shift+F → focus the migration search input (label: "Search
migrations")
- F C → clear the search filter
**Replication / Destinations page**
- Shift+F → focus the destinations filter input (label: "Search
destinations")
- F C → clear the filter
- Shift+N → open the Add Destination panel. Wrapped with `<Shortcut>` so
the keybind tooltip shows on hover, and gated on
`!!newDestinationDefaultType` so it stays disabled when no destination
type is available.
Closes
[FE-3141](https://linear.app/supabase/issue/FE-3141/add-shortcuts-for-database-replication-and-migration-page).
## Test plan
- [x] On the Migrations page, press Shift+F → search input focuses &
selects existing text.
- [x] On the Migrations page, type a query then press F C → search
clears.
- [x] On the Replication page, press Shift+F → filter input focuses &
selects.
- [x] On the Replication page, press Shift+N → Add Destination panel
opens (when a destination type is available).
- [x] Hover the "Add destination" button → keybind tooltip shows
Shift+N.
- [x] On the Replication page, type a filter then press F C → filter
clears.
- [x] All four shortcuts appear in Cmd+K under "Shortcuts" while on the
respective page.
- [ ] Disabling list-page shortcuts in Preferences disables them on
these pages too.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added keyboard shortcuts for search field focus and filter reset in
Database Migrations and Destinations pages
* Added keyboard shortcut for "Add destination" action in Destinations
page
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature and design-system cleanup. Resolves DEPR-551.
## What is the current behavior?
Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.
Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.
## What is the new behavior?
Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.
The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.
This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.
Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.
| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |
| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.
* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.
* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.
* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## What kind of change does this PR introduce?
Bug fix
## What is the current behavior?
Creating a schema only branch fails because ETL publication is owned by
`supabase_etl_admin` which users have no access.
## What is the new behavior?
Since ETL supports user managed publications, create them through pgmeta
so it's owned by `postgres` role instead.
## Additional context
mirrors [upstream
etl](https://github.com/supabase/etl/blob/main/etl-api/src/db/publications.rs#L22-L51)
implementation
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Added guards to prevent creating publications when project or
connection info is missing, with clearer error logging.
* Ensure the project connection string is explicitly passed so
publications target the correct database.
* **Refactor**
* Publication creation now executes generated SQL directly against the
database, with correct handling of empty or selected table lists and
proper identifier quoting for reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
## Summary
Adds a reusable `TaxDisclaimer` component ("Prices shown do not include
applicable taxes.") and places it on surfaces where users see a price
before confirming a billable action.
## Where it appears
- **Disk resize review
dialog** — `DiskManagementReviewAndSubmitDialog` (below the before/after
price comparison)
- **Add-on side panels** — PITR, Custom Domain, IPv4 (below the price
options)
- **Log drain destination form** — stacked under "See full pricing
breakdown here" in the footer
- **SMS MFA confirmation modal** — below the $75/$10 billing copy
- **Read replica pricing dialog** — at the end of the cost breakdown
- **Create branch modal** — below the disk/compute cost estimates
## Test plan
- [ ] Open disk/compute resize review dialog — disclaimer appears below
the before/after panel
- [ ] Open each add-on side panel (PITR / Custom Domain / IPv4) —
disclaimer appears below the price options
- [ ] Open log drain destination sheet — disclaimer stacks under the
pricing breakdown link in the footer
- [ ] Trigger SMS MFA confirmation — disclaimer appears below the
billing copy
- [ ] Open read replica pricing dialog ("Learn more" from deploy
replica) — disclaimer at the bottom
- [ ] Open create branch modal — disclaimer appears after the compute
cost block
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added tax disclaimers across multiple billing and pricing interfaces
throughout the platform. Users will now see notices regarding applicable
taxes displayed in various authentication settings, branch creation
workflows, database disk management dialogs, database replica pricing
screens, log drain configuration panels, custom domain settings, IPv4
address configuration, and Point-in-Time Recovery options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#45184.
## Summary
`ErroredTableDetails.tsx` links the `no_retry` branch to the support
form with the Postgres error message (`state.reason`) dropped into the
`error` query parameter raw:
```tsx
href={`/support?projectRef=${projectRef}&category=dashboard_bug&subject=Database%20replication%20error&error=${state.reason}`}
```
Error strings routinely contain `&`, `#`, `=`, or newlines. Any of these
break the URL and leave the support form with a truncated or
misattributed value. Wrap with `encodeURIComponent`, matching the
pattern already used in `PipelineStatus.tsx:39-42` for the
replication-logs URL. Null-coalesce to `''` so the link is still
well-formed if `state.reason` is absent.
## Test plan
- [ ] Trigger a replication error whose message contains `&` / `#` /
newlines, open the support link, verify the full error text reaches the
form.
- [ ] Normal error string. URL is unchanged beyond standard URL
encoding.
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## Problem
The input groups components introduced in #44282 don't have the
validation attributes when invalid. This hurts accessibility and also
break the design:
<img width="1730" height="324" alt="image"
src="https://github.com/user-attachments/assets/a3fb8d86-f3a8-46bb-aa53-d0599c11f056"
/>
## Solution
This is because the wrapper `<FormControl_Shadcn_>` passes the
validation props to its direct child.
The solution is to avoid applying them on the `<InputGroup>` and to
apply them manually on the inputs.
I also fixed a small accessibility issue by moving the addon texts after
the input so that screen readers announce them in the correct order. No
visual change for this
<img width="587" height="158" alt="image"
src="https://github.com/user-attachments/assets/1f8858ea-6659-45f9-964e-8c43a7fe14ba"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Unified numeric input layout by moving unit labels/suffixes (e.g.,
"seconds", "GB", "%", "connections", "digits", "IOPS", "MB/s", "rows")
to appear after their inputs for a consistent, predictable form
appearance.
* **Accessibility**
* Form controls now expose IDs and ARIA attributes from form context
when available, improving screen-reader descriptions and error
association.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
INDATA-193
BACKEND: <https://github.com/supabase/platform/pull/30575>
<img width="1199" height="1005" alt="Screenshot 2026-04-03 at 11 54 29"
src="https://github.com/user-attachments/assets/38e9d676-449f-45c0-9e07-f273312a812f"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated read replica limit configuration to provide more
consistent behavior across different compute tiers.
* **Tests**
* Added comprehensive test coverage for read replica eligibility checks
and replica limit calculations based on compute tier.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## 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
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>
## Context
Small one - while on the database replication page, if you open the
Connect Dialog and change the "type" field, the destination panel opens
up. Happening cause the string for `useQueryState` conflicts here - both
are using `type`
Fix is just to update the string for `useQueryState` for the
DestinationPanel component, changed it to `destinationType`
## Context
Related to dashboard scalability
Previous PR: https://github.com/supabase/supabase/pull/42856
Note: Changes are all feature flagged still and I'm still not entirely
convinced with the current UX
Will iterate as as go along, and only make this publicly available when
we're satisfied with the behaviour
Adds a "Dashboard preference" section to the project settings
<img width="265" height="740" alt="image"
src="https://github.com/user-attachments/assets/6ce1aa19-26c2-47c6-a9c4-595137266631"
/>
In which users can then select which database they'd like to use for
read queries run from the dashboard
Note: Everything is local storage for now, but we'd need middleware
support if we want to make this setting persist for all users on the
project
<img width="791" height="434" alt="image"
src="https://github.com/user-attachments/assets/e651d6d9-fed4-4da4-b552-c9f93f8d46d3"
/>
Added a dialog as well to further explain what this implies
<img width="610" height="312" alt="image"
src="https://github.com/user-attachments/assets/0aa957af-cb51-476f-aa79-8948a7cbe5ae"
/>
## To test
- Choosing a replica in dashboard preferences will only affect the table
editor as thats the only place that's set up so far to use a replica for
read queries (I'll need to follow up for other parts of the dashboard in
subsequent PRs)
## 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
## Context
Follow up from https://github.com/supabase/supabase/pull/43329, but
mutually exclusive
Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months
- edgefunctionreport
- storagereport
- realtimeReport
- postgrestreport
- authreportv2
- newEdgeFunctionOverviewCharts
- apiReportCountries (Already not used)
- SentryLogDrain
- reportGranularityV2
- storageAnalyticsVector
- ShowIndexAdvisorOnTableEditor
This PR adds new feature flags for controlling etl destinations
visibility based on the org slug.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
<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
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>
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>
## 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 -->
* Use new table component for replication page
* Render replicas in destinations page + support restart, drop, create replicas
* Shift enable replication CTA into panel if unified replication is on
* Nit
* Address 🐰
Ali Waseem