## Context
Just happened to pass by this - refactor to use Admonition instead of
Alert + fix spacing + use InlineLink
e.g General settings while on a preview branch
### Before
<img width="795" height="364" alt="image"
src="https://github.com/user-attachments/assets/28ab66ab-bd10-408e-afb5-24e287efc705"
/>
### After
<img width="759" height="349" alt="image"
src="https://github.com/user-attachments/assets/db62925d-f2e2-4c10-9cab-ce8204f2077c"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Preview-branch notices across Settings now use a unified admonition
design with adjusted spacing for improved visual consistency.
* **Refactor**
* Standardized branch-notice layout and inline navigation links across
Addons, General, and Integrations; each notice now links directly to its
respective settings page for clearer navigation.
<!-- 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>
## Problem
With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore
## Solution
- [x] Remove the `_Shadcn_` suffix
- [x] Update exports and imports
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.
<!-- end of auto-generated comment: release notes by 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 -->
## Problem
#45218 removed the PITR duration input label: _Choose the duration of
recovery_
## Solution
Restore it
## Screenshots
Before:
<img width="1534" height="1130" alt="image"
src="https://github.com/user-attachments/assets/f1f7fc5b-0fba-4356-b6d6-9bffcaa211bd"
/>
After:
<img width="760" height="734" alt="image"
src="https://github.com/user-attachments/assets/5df7a986-9c3b-48a3-84d7-4de151dd7f5f"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved accessibility of the PITR (Point-In-Time Recovery) settings
control by adding proper label association for the recovery-duration
selection option.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
UI clarification.
## What is the current behavior?
Our messaging around the compatibility of:
- Dedicated pooler
- Shared pooler
...in conjunction with the following connection types:
- IPv4
- IPv6
- Direct connection
...is hard to parse.
## What is the new behavior?
Copywriting clarifications to all of the above. Plus:
- Broader copywriting clarifications to `IPV4SidePanel`
- Replace deprecated `Radio` component with `RadioGroupItem_Shadcn_` as
the former has little-to-no visual difference between unselected and
selected states
- Fixed `SidePanel` header gap and button labelling
## Additional context
| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="AWS Healthy Toolshed
Supabase-4587771A-83A2-40E8-845B-256CE7E1A7DB"
src="https://github.com/user-attachments/assets/09591fa1-48b8-4f3c-aaef-733af8dbdc9a"
/> | <img width="1024" height="563" alt="AWS Healthy Toolshed
Supabase-D56A2209-7421-43C2-A7C1-6C6965B3F008"
src="https://github.com/user-attachments/assets/13a05e51-02a5-486a-9549-4c5fe049c65a"
/> |
| <img width="1024" height="563" alt="Add ons
Supabase-10CC55BC-C3D8-4E40-9F73-31FFE8D7F42A"
src="https://github.com/user-attachments/assets/73e206dc-58a3-4356-8e31-cf2ad74383f8"
/> | <img width="1024" height="563" alt="Add ons
Supabase-6311B7FE-4291-4982-968E-5EDBA76DE519"
src="https://github.com/user-attachments/assets/503667ef-9b36-4d62-9872-53ac6b32f56f"
/> |
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Main fix is to adjust the new home page + connect dialog (and connect
sheet) to render the project's custom domain if available
<img width="471" height="255" alt="image"
src="https://github.com/user-attachments/assets/3a208b2e-bdeb-43f5-a2e7-3495881dbaaa"
/>
<img width="1065" height="233" alt="image"
src="https://github.com/user-attachments/assets/2a7b8f81-8c0b-4803-bf0a-fc16a2f1e0e1"
/>
## Changes involved
- Created a `useProjectApiUrl` hook that will return the API URL
depending if custom domains is available, otherwise default to default
project API URL
- Refactored all the other places that were manually deriving the
project's endpoint
- Storage Explorer -> copy URL
- Edge Functions
- Integrations -> Data API + API Docs
- Auth Providers -> Callback URL
- Also updated the copy CTA for the addons page
- Instead of just "Change xxx", make it a bit more actionable
- For add ons with binary states (Custom domains, IPv4)
- If not enabled yet, "Enable xxx", otherwise "Toggle xxx"
- For PITR
- If not enabled yet, "Enable PITR", otherwise "Change recovery
duration"
- Also added "Edit custom domain" CTA if enabled
<img width="1144" height="518" alt="image"
src="https://github.com/user-attachments/assets/4f152ea5-0cc7-412c-95e8-ad5bb37c19c3"
/>
## To test
- [ ] Verify that for a project with custom domain set up, all the
affected UI mentioned in the above section look correct
## Context
Related prior work was making edge functions page accessible while
project is restoring - however the status of the project gets flipped to
COMING_UP while it's restoring hence why the functions page was still
inaccessible.
## Changes involved
- Update `NavigationBar.utils` to have edge functions link to
`/functions` irregardless of project status
- (Unrelated) Disable (with tooltip) deploy new function CTA on edge
functions page if project is not active
<img width="403" height="108" alt="image"
src="https://github.com/user-attachments/assets/88479247-999b-4d41-a444-6705f8c3993e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Deploy Edge Function button now disables and shows a tooltip when the
project is inactive to make deployment status clear.
* **Bug Fixes**
* Edge Functions link now points consistently to the functions view
regardless of project build state.
* **Refactor**
* Consolidated project-active check and reorganized related UI wiring to
standardize inactive-state handling across settings and controls.
<!-- 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.
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
* refactor: infra queries to use `attributes`
This PR refactors the infrastructure monitoring query code reducing duplication and unifying the API request to always be `attributes`:
• Removed the separate useInfraMonitoringQuery hook and getInfraMonitoring function that handled a single monitoring query
• Consolidated all infrastructure monitoring queries into a unified useInfraMonitoringAttributesQuery hook that handles multi-attribute requests
• Moved interval selection logic from the query layer to the consumer (InfrastructureActivity.tsx), where it can be computed dynamically based on user-selected date ranges
• Simplified query types by removing intermediate InfraMonitoringData and InfraMonitoringVariables types
• Interval is now computed in the component (defaults to 1d, switches to 1h for date ranges ≤48 hours) rather than hardcoded in the query layer
• All queries now use the unified multi-attribute endpoint with explicit parameter passing
* fix: handle single-attribute response format
* init request upgrade plan modal
* Consolidate UpgradeToPro components across UI + use UpgradePlanButton, UpgradePlanButton determines whether to show request upgrade CTA
* Allow to pass icon to Admonition
* Tiny fix on upgrade plan button CTA to consider addons
* Hook up upgrade request endpoint
* Update API types
* remove hardcode
* Add request upgrade CTA in plan side panel
* Fix disk compute
* Show request upgrade button for change to large compute
* Nit
* o11y: mirror and sanitize breadcrumbs
Mirror Sentry breadcrumbs as the basis for our own support logging. Also
adds more sanitization to breadcrumbs.
* feat(support form): toggle for attaching dashboard logs
Add a toggle to the support form when the category is "Dashboard bug",
to attach recent dashboard logs. Users can preview the attached logs and
opt out.
* feat(support links): dedicated support link component
Add a new component for support links, which:
- Uses the serializer for support link params to ensure
serialization/deserialization pairs correctly
- Snapshots breadcrumbs so the attached log on the support form will be
cut off at the support link click (otherwise we will get support form
actions cluttering up the log)
* tests(support form): extend timeout on flaky test
* Minor clean up
* fix(support form): allow url to specifically indicate no specified project
* minor nits
* Fix tests
* Fix tests
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Midway
* Add projects-infinite-query and remove use projects query in account audit logs
* Remove useProjectsQuery from RouteValidationWrapper
* Remove useProjectsQuery from OrganizationCard
* Remove useProjectsQuery in new project page
* Deprecate useProjectByRefQuery, replace all usage with just useProjectDetailQuery
* Remove useProjectsQuery from Organization Audit logs
* Fix check
* Add UpgradePlanButton which handles redirecting either to subscription page or support page
* Update upgrade CTAs to go to support if billing:all flag is disabled
* Nit
* Nit
* Smol fix
* Temp show plan upgrade support category
* revert as instructed
* asChild
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Update Supabase docs URLs to use env variable
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for documentation links
This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* Refactor: Use DOCS_URL constant for all documentation links
This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.
Co-authored-by: a <a@alaisteryoung.com>
* replace more instances
* ci: Autofix updates from GitHub workflow
* remaining instances
* fix duplicate useRouter
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
* Update perms checking in audit logs
* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used
* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions
* Fix TS
* Add flags for policies, third party auth, and manual linking + providers in sign in page
* Add flag for rate limitm page
* Add UnknownInterface components
* Update comment
* Flip flags to true
* Add flags for realtime policies and reports page
* Temp
* Add flag for sign in providers page
* Add flag for stripe wrapper
* Add flag for custom domains
* Add flag for dedicated ipv4 address addon
* Add empty state for realtime policies
* Add empty state for reports page
* Add flag for disable legacy JWT keys section
* Add flag for legacy jwt keys
* nit
* Remove ConnectionStringMoved call out
* Add flag for project settings log drains
* Add flag for subscription link in project settings
* Deprecate settings/auth page and redirect directly to auth page
* Flip back flags
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* feat: move storage settings
* feat: redirect
* feat: database settings in service area
* feat: move data api settings
* fix: revert data API placement
* feat: minor UX touches
* fix: simplify configuration group
* feat: references to database settings
* feat: references to storage settings
* fix: redirects and formatting
* fix: Import StorageMenu dynamically to avoid SSR issues with useLocalStorage
* fix: move Data API closer to semantic siblings
* fix: revert smart comma
* Shift bucket sort logic into storage explorer store
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* chore: transition from AWS_NEW to AWS_K8S
* chore: transition from useIsAwsNew to useIsAwsK8s
* chore: new useIsAws method
* chore: disk management protections
* chore: IPV4 addon protections
* chore: AWS_K8S restart protection
* chore: AWS_K8S read replica protections
* chore: restore to new project protections
* Update apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx
Co-authored-by: Tom Gallacher <tgallacher@users.noreply.github.com>
* chore: changes based on feedback
* fix: prettier
* minor fixes
* Use disabled state for ipv4 address in ipv4sidepanel isntead of hiding the UI entirely
* Revert hardcode in useSelectedProject
---------
Co-authored-by: Tom Gallacher <tgallacher@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
When translation tools go over prices, they wrongfully convert USD into other currencies without changing the price. $25 becomes Rp25 (Rupiah).
By using `translate='no'` we avoid the translation of pricing info. There are some tooltips left that are not covered yet, but this should be the majority already.
Kept the docs Pricing component as simple as possible, just wrapping in a span to avoid translation, not modifying any formatting.
* Prevent disabling PITR when hipaa is enabled
* Tweaks
* Sm word change
* Fix addon change
* Only allow changes if the changes are on 28 days. Use is_sensitive flag. When turning on PITR, set the default to 28 days.
* Simplify the illegal states.
* Fix the bad state for HIPAA.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* chore: only load data in modals when they're visible
* SidePanelGitHubRepoLinker
* scrolling is not my strong suit
* simple loading state for add new secret
* fix button width
* update to use shadcn
* fix ts
* Fix connection pooling feature flag
* Fix type issues with lint-query after updating API typs
* Apply same fix for connection_string to ConnectTabContent
* Update useMemo dependency arrays in ConnectionPooling
* Remove allowPgBouncerSelection enabled check on react queries - feels unnecessary and adds some complexity to the loading state of the forms
* Remove conosle log
* Init
* Initial set up for hooking up supavisor and pgbouncer
* Hook up pgbouncer status check after swapping pooler type
* Add check for nano compute for switching to pg bouncer
* Add check for ipv4 addon
* Remove expect error tag
* Update copy in IPv4SidePanel
* Add badge to select options for pooler types
* Hook up pgbouncer config for connect UI
* Refactor pooling-configuration react queries to supavisor-configuration
* Update Ipv4 compatability UI indicators in Connect UI when on pgbouncer
* Remove statement mode
* Resolve undefined problem with react hook form
* Fix
* Update UI texts from PgBouncer to Dedicated Pooler
* Feature flag changes
* Add pooler settings link in Connect UI
* Smol update
* Update session pooler description for pgbouncer
Jeremias Menichelli