35 Commits

Author SHA1 Message Date
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
2026-09-11 17:05:26 +10:00
Danny White 4a5db160be feat(studio): extract shared zod number input helpers (#50102)
## What kind of change does this PR introduce?

Refactor. Extracts zod number input preprocessing into a shared Studio
helper and migrates existing call sites.

## What is the current behavior?

Number input clearing logic for controlled `type="number"` fields is
duplicated across Studio forms. The pipeline destination form had local
helpers, while Auth and settings forms inline the same `z.preprocess`
pattern.

## What is the new behavior?

Adds `apps/studio/lib/forms/zod-number-input.ts` with:

- `requiredNumberInputSchema` for required `z.number()` fields (`''` →
`NaN`)
- `optionalNumberInputSchema` for optional number fields (`''`/`null` →
`undefined`)
- `preprocessEmptyNumberInput` for `z.coerce.number()` schemas

Migrates:

- Pipeline destination form
- Connection pooling settings
- Auth provider validation (email and SMS OTP fields)
- SMTP settings
- MFA settings
- Protection settings

## To test

1. Open **Authentication > Providers > Email**, clear **Email OTP
expiration** or **Minimum password length**, and confirm the field stays
empty and shows validation on save.
2. Open **Authentication > Providers > Phone**, select a provider, clear
**SMS OTP Expiry**, and confirm validation still works.
3. Open **Authentication > Emails > SMTP settings**, clear **Port** or
**Rate limit**, and confirm validation on save.
4. Open **Authentication > Multi-factor authentication**, clear **Max
enrolled factors** or **Phone OTP length**, and confirm validation on
save.
5. Open **Database > Replication**, start a new pipeline, select
**BigQuery**, expand **Advanced settings**, clear a required numeric
field, and confirm it stays empty until filled.
6. (Optional, hosted non-HA projects only) Open **Database > Settings**,
scroll to **Connection pooling**, clear **Connection pool size**, and
confirm the value does not snap back before save.

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

* **Bug Fixes**
* Improved handling of empty numeric fields across authentication, SMTP,
database replication, and connection pooling settings.
* Optional numeric settings can now be cleared without triggering
unnecessary validation errors.
* Required numeric fields continue to display appropriate validation
errors when left incomplete.
* Standardized validation behavior for OTP settings, password
requirements, SMTP limits, replication configuration, and pool sizing.
* Refined protection settings to focus on CAPTCHA and leaked-password
options.
* **Tests**
  * Added coverage for empty and optional numeric input behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-08 18:26:41 +08:00
Joshen Lim fcfb0f0222 Refactor all usage of form.watch to either useWatch or subscribe (#48436)
## Context

Replaces all usage of `form.watch()` to use `useWatch` instead + follows
the "name what you watch" convention as specified in the react-hook-form
skills.

There's also a small refactor in `SmtpForm.tsx` which removes the
unnecessary use of a `useState` to track if SMTP is enabled or not

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

* **Improvements**
* Updated many Studio forms to watch specific fields more precisely,
improving live UI updates for previews, warnings, conditional sections,
and validation messages.
* Enhanced responsiveness across settings, authentication, billing,
storage, integrations, and support flows while keeping save/update
behavior the same.
* **Refined Experiences**
* Improved the analytics table creation flow with tighter, enum-based
column type validation and structured, type-specific column options.
* **Preserved Behavior**
* Maintained existing permission checks, submission flows, and
account-management workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-30 11:45:40 +08:00
Gildas Garcia b30db91d71 chore: cleanup UI patterns exports (#47406)
## Problem

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

## Solution

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

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

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
2026-06-29 15:46:16 +02:00
Gildas Garcia 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

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

## Solution

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

## How to test

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

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00
Gildas Garcia 5d97339d41 chore: remove <Select> _Shadcn_ suffix (#45988)
## Problem

The `_Shadcn_` suffix isn't needed anymore on `Select` components

## Solution

Remove it. No other changes

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

## Summary by CodeRabbit

* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 16:39:57 +02:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem

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

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
2026-05-15 14:55:37 +02:00
Ignacio Dobronich 07d75d4e79 feat: add TaxDisclaimer for addons (#45235)
## 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 -->
2026-04-24 16:58:23 -03:00
Gildas Garcia 0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## 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
2026-04-24 12:14:15 +02:00
Gildas Garcia e95f1cc67c chore: migrate MFA settings form to zod (#44751)
## Problem

We currently have 2 libraries for schema validation: `yup` that was used
with `formik` and `zod` which is now the preferred one.

## Solution

Migrate the MFA settings form to use `zod`.
No visual changes.

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

* **Refactor**
* MFA settings forms now use stronger, consistent schema validation with
numeric input coercion and improved typing for more reliable form
behavior.
* Simplified form reset/synchronization for more predictable state
updates.

* **Bug Fixes**
  * MFA update requests now send only intended fields.
* Fixed Enhanced MFA Security “Save changes” button to show the correct
loading state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-10 22:30:00 +02:00
Gildas Garcia d95fdfd566 fix: input-group don't have the proper validation attributes (#44703)
## 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>
2026-04-10 11:45:30 +10: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
Gildas Garcia 18e4ad227e chore: add shadcn input-group components (#44282)
## Screenshots

On a number input with units:
<img width="660" height="162" alt="image"
src="https://github.com/user-attachments/assets/1758a6d9-0836-4d41-80d1-97a03292db91"
/>

focused state:
<img width="651" height="71" alt="image"
src="https://github.com/user-attachments/assets/a92a5c39-2c7e-4c5f-9e4b-eb89810cc45c"
/>

On a textarea:
<img width="989" height="294" alt="image"
src="https://github.com/user-attachments/assets/cc696cb9-3671-4719-bdd8-daa1aea4f041"
/>
2026-03-31 09:14:56 +02:00
Ignacio Dobronich de4fbfb731 chore: mfa enhanced entitlement (#41611)
Depends on https://github.com/supabase/platform/pull/28639

### Changes
- Add entitlement check for auth.mfa_enhanced_security feature in MFA
settings
- Disable the "Limit duration of AAL1 sessions" toggle when user lacks
entitlement
- Show upgrade prompt when Enhanced MFA Security is not available on
user's plan

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

## Summary by CodeRabbit

* **New Features**
  * Enhanced MFA Security option with upgrade availability
  * Cloud Marketplace contract linking eligibility checks
* New entitlements: SOC2 reports, Private Link, realtime concurrency
controls, function limits, project-scoped roles

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-01-30 13:50:04 +09:00
Danny White 69f15cc788 chore(studio): update upgrade to pro admonition button variants (#42056)
* update admonition and button

* other instances

* misc

* misc

* pitr

* buttonVariant naming

* fixes

* rabbit

* rename buttonVariant to variant

* rabbit
2026-01-22 19:04:13 +11:00
Francesco Sansalvadore 3b7a7e4455 chore(studio): auth settings form patterns (#41303)
* chore(studio): oauth server form styling

* chore(studio): auth sessions form pattern

* chore(studio): auth rate-limits form pattern

* chore(studio): auth mfa form styling

* chore(studio): preposttab lowercase

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-15 09:26:23 +01:00
Ivan Vasilov 0d5be306ef chore: Bump React Query to v5 (#40174)
* 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.
2025-12-10 10:10:29 +01:00
Ignacio Dobronich 562d313ecf chore: mfa phone entitlement (#41029)
* chore: mfa phone entitlement
2025-12-04 10:16:50 -03:00
Joshen Lim de50740b04 Chore/request upgrade plan modal (#40889)
* 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
2025-12-04 16:02:01 +08:00
Stojan Dimitrovski 6a45bb35ca feat: auth advanced page renamed to performance, support for percent db connections (#39852)
* feat: auth advanced page renamed to performance, support for percent db connections

* rename page and form

* make it compile

* fix types?

* one more update

* use master types

* restore from source

* fix prettier

* fix compilation

* minor adjustments

* wording

* change pro plan check

* fix prettier

* nit fixes

* Update next config

* update copy + align upgrade to pro language

* Update

* Clean up

* Nit improve loading time

* Update docs

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-04 11:35:14 +08:00
Saxon Fletcher adf760ebf4 Auth interface components new page components (#40670)
* pages first

* auth interface components new page components

* fixes

* update components

* fix
2025-11-28 15:22:02 +10:00
Joshen Lim a2f695547b Fix auth pages error state consistency and missing loading states (#39092) 2025-10-01 17:26:47 +08:00
Joshen Lim d46525eac1 Chore/swap use check permissions with use async check project permissions part 8 (Season Finale) (#38619)
* Update perms checking in audit logs

* Deprecate useCheckPermissions, useIsPermissionsLoaded and useCheckProjectPermissions as they're no longer used

* Rename useAsyncCheckProjectPermissions to useAsyncCheckPermissions

* Fix TS
2025-09-16 17:05:57 +08:00
Joshen Lim e955f69e2d Swap useCheckPermissions with useAsyncCheckProjectPermissions Part 5 (#38552)
Update auth pages
2025-09-09 22:07:55 +08:00
Stojan Dimitrovski ef78a07f01 feat: expose mfa setting for limiting aal1 sessions to 15 mins (#35886)
* feat: expose mfa setting for limiting aal1 sessions to 15 mins

* fix

* fix types
2025-08-27 20:04:16 +02:00
Ignacio Dobronich 61379cbe2a chore: add confirmation modal when enabling SMS MFA (#37879) 2025-08-13 09:06:07 -03:00
Joshen Lim a897cc27f0 Part 1 of swapping useCheckPermissions with useAsyncCheckProjectPermissions (#37751)
* Part 1 of swapping useCheckPermissions with useAsyncCheckProjectPermissions

* Update apps/studio/hooks/misc/useCheckPermissions.ts

Co-authored-by: Drake Costa <drake@saeris.io>

* Address feedback

---------

Co-authored-by: Drake Costa <drake@saeris.io>
2025-08-11 11:53:15 +07:00
Joshen Lim cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* 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
2025-08-06 10:53:10 +07:00
Kevin Grüneberg e1bd23d66f fix: do not translate USD prices (#35466)
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.
2025-05-06 12:03:35 +08:00
Kevin Grüneberg d05bbb669f perf: use subscription plan from org response (#34993) 2025-04-14 20:37:19 +08:00
Kevin Grüneberg 6d809e5ee6 fix: ensure MFA SMS pricing is displayed when toggling (#35000) 2025-04-14 12:00:16 +00:00
Saxon Fletcher 5bd430ca38 Updating authentication mfa and url pages (#33956)
* init PrePostTab component

* init

* support auto fixing rounded of inputs/select/textarea

* remove form item layout prepost

* Update FormLayout.tsx

* Update FormLayout.tsx

* Update FormLayout.tsx

* form layout and advanced

* Update advanced.tsx

* protection and hooks

* mfa and url

* remove onchange

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-03-05 09:42:02 +10:00
Kamil Ogórek 0136e7bf52 fix: mfa_max_enrolled_factors value of 0 is valid (#33713) 2025-02-20 09:46:06 +01:00
Saxon Fletcher d4e9ea0b31 Move authentication settings (#33335)
* all settings moved into the right places

* clean a few things up

* update ui for auth settings

* more updating

* rearrange settings

* Update SmtpForm.tsx

* updated styling

* add old auth page to show links

* add copy

* udpate copy

* smtp links

* auth fixes

* Smol fix

* Another smol fix

* Fix tab page menu selection

* Add missing border

* Gah one last one

* Smol improvement for redirects from settings/auth to use id

* Update apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts

Co-authored-by: Kang Ming <kang.ming1996@gmail.com>

* Update apps/studio/pages/project/[ref]/auth/mfa.tsx

Co-authored-by: Kang Ming <kang.ming1996@gmail.com>

* Update apps/studio/pages/project/[ref]/auth/mfa.tsx

Co-authored-by: Kang Ming <kang.ming1996@gmail.com>

* remove recommendation

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Kang Ming <kang.ming1996@gmail.com>
2025-02-07 14:36:11 +10:00