## 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 -->
## Summary
- The Connection management "Allocation strategy" select on the Auth >
Performance page called its `onValueChange` handler's conversion logic
with whatever value it was given, with no validation. If that handler
ever fired with a value outside the `'percent' | 'connections'` enum, it
would silently overwrite a correctly loaded config, converting it to the
wrong absolute connection count and leaving the strategy dropdown in a
blank/inconsistent state.
- Extracted the percent/connections conversion into a pure, unit-tested
`convertPoolSize()` helper (`PerformanceSettingsForm.utils.ts`) and
added a guard so `onValueChange` ignores any value that isn't a
recognized allocation unit.
## How to test
1. Under **Connection management**, switch **Allocation strategy** back
and forth between "Absolute number of connections" and "Percent of max
connections" — the value should convert correctly each time and the
dropdown should never render blank.
2. Save, then hard-reload the page — the saved strategy and value should
persist as shown.
## Test plan
- [x] `PerformanceSettingsForm.utils.test.ts` — unit tests covering both
conversion directions, clamping, and the invalid-value guard
- [x] `PerformanceSettingsForm.test.tsx` — MSW-backed component test
verifying persisted percent/absolute configs render correctly on load
- [x] `pnpm test:studio`
- [x] `pnpm typecheck`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Switching database pool allocation strategies now automatically
converts values between percentage and connection-based units.
* Values are rounded and constrained appropriately to remain within
supported limits.
* Allocation settings now handle invalid or zero values more safely.
* **Tests**
* Added coverage verifying persisted allocation strategies and pool-size
conversion behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
## 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
## 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>
## 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 -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
## Summary
- Closes
[FE-3039](https://linear.app/supabase/issue/FE-3039/validate-conn-percentage-input-between-1-and-100).
- Adds a `superRefine`d `DatabaseFormSchema` in
`PerformanceSettingsForm.tsx` that blocks submission when
`DB_MAX_POOL_SIZE_UNIT === 'percent'` and the value falls outside 1-100.
Connections (fixed pool size) path keeps the existing `min(1)` behavior
per the ticket.
- Updates the number input's `min`/`max` attributes to match: percent is
now `1`-`100` (was `3`-`80`); connections unchanged
(`3`-`Math.floor(maxConnectionLimit * 0.8)`).
## Test plan
- [x] Unit tests added in `PerformanceSettingsForm.test.ts` covering
bounds (1, 100), out-of-range (0, 101, -5, 150), mid-range, string
coercion, connections path (no upper zod bound), and enum rejection. All
12 pass.
- [x] Manually verify in Auth → Performance settings that entering 0 or
101 in percent mode shows a validation error and blocks save, and that
switching to absolute connections still uses the existing bounds.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Refined database pool-size validation and input constraints;
percentage unit enforces values between 1–100 and rejects zero,
negative, and out-of-range entries. String inputs that represent numbers
are coerced where appropriate; unknown unit values are rejected.
* **Tests**
* Added comprehensive tests for boundary, invalid, string, and
unknown-unit cases and for validation error messages.
* **Refactor**
* Validation moved to a centralized schema and HTML min/max input
attributes were removed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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>
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>
Adds an entitlement check to the Auth Performance Settings page.
### Testing
- Head to `/project/_/auth/performance` with an org on the Free Plan
- Assert that you can't edit any values in the page
- Assert that the upgrade prompt is shown
<img width="1203" height="148" alt="image"
src="https://github.com/user-attachments/assets/9046eb36-75eb-47d9-824a-07c12431d3e5"
/>
- Head to `/project/_/auth/performance` with an org on the Pro Plan or
above
- Assert that the upgrade prompt is not rendered
- Assert that you're able to modify and save values
* chore(studio): integrate cursor rules with form patterns
* chore(studio): update FormLayout inner styling
* chore(studio): align actions form field to the right
* chore(design-system): wrap each form field in a CardContent
* 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
* 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>
Danny White
