Commit Graph
49 Commits
Author SHA1 Message Date
Charis 53b20cad5e feat(studio): project creation status admonition (#51029)
## Summary

- Adds a new project-creation-form incident warning path behind the
`incidentIoStatusPage` ConfigCat flag (default off — no visible behavior
change until the flag is enabled)
- When the flag is on, reads the new `/api/status-page` endpoint (added
earlier in this stack) instead of the legacy `/api/incident-status`
endpoint, and only fetches the legacy endpoint when the flag is off
- Extracts region-matching logic into `RegionSelector.utils.ts`
(`regionMatches`, `getItemsAffectingProjectCreation`) with unit test
coverage

See Linear FE-4057 for full context and design.

## Test plan

- [x] `pnpm --filter studio run typecheck`
- [x] `pnpm --filter studio run lint:ratchet`
- [x] `pnpm knip --workspace apps/studio`
- [x] `pnpm test:prettier`
- [x] `pnpm --filter studio exec vitest run
components/interfaces/ProjectCreation/RegionSelector.utils.test.ts`
(35/35 passing)

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

* **New Features**
* Project creation displays a warning and links to the status page when
an incident or maintenance event may affect the selected region.
* Status notices match exact regions and broader smart-region groupings;
global project-creation notices are also shown.
* The AI assistant can report visible, active incidents and in-progress
maintenance, including affected components and update details. When
there are no active events, it reports that status.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-29 17:37:01 -04:00
Manan GuptaandJoshen Lim 6a0518dd86 fix(studio): forward HA flag to project-creation pre-flight checks (#50902)
## Summary

- Fixes MUL-1678: toggling High Availability on in the project-creation
wizard 400'd for orgs that are HA-entitled but not enrolled in the "V3
rollout ramp" feature flag on the backend, because two pre-flight
endpoints Studio calls before project creation didn't know about HA and
hit the ramp check the real create-project call already bypasses.
- Threads `highAvailability` through
`useOrganizationAvailableRegionsQuery` (`GET
/platform/projects/available-regions`, sent as
`high_availability=true|false` on the query string) and
`useProjectCreationPostgresVersionsQuery` /
`useAvailableOrioleImageVersion` (`POST
/platform/organizations/:slug/available-versions`, sent as
`high_availability` in the body), including their query-key cache keys
so HA and non-HA responses for the same org/provider/size don't collide.
- Wires the (already form-tracked) `highAvailability` value into every
call site: `ProjectCreationForm.tsx`, `RegionSelector.tsx`, and a new
`highAvailability` prop on `PostgresVersionSelector.tsx` passed from
`InternalOnlyConfiguration.tsx`.

## Problem

The project-creation wizard's HA toggle is wired into the actual
project-create request, but two pre-flight calls Studio makes before
that (available regions, available Postgres versions) had no way to
signal HA, so the backend's ramp-flag gate rejected them for HA-entitled
orgs outside the ramp.

## Solution

Add an optional `highAvailability` field end-to-end on the Studio side:
query hook variables, cache keys, request serialization, and the
components that already track the toggle via `useWatch`.


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

* **Bug Fixes**
* Available regions and database versions in project creation now
reflect the selected high-availability setting.
* The Create button remains disabled while available regions are
loading.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Signed-off-by: GuptaManan100 <guptamanan100@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-29 20:39:01 +05:30
Jordi Enric 8f6a6f7032 fix(studio): wait for organization before loading regions (#50572)
## Problem

The new-project page can request available regions with a paid compute
size before the selected organization plan resolves. For free
organizations, this produces a failed request followed by a successful
request without the size.

## Fix

Delay both available-regions query observers until the selected
organization resolves, while preserving size-dependent refetches. Add
request-level coverage for the initial free- and paid-plan behavior.

## How to test

- Run `pnpm --filter studio exec vitest --run
'tests/pages/new/[slug].test.tsx'`.
- Open the new-project page for a free organization and inspect the
available-regions request.
- Expected result: one initial request is sent without
`desired_instance_size`; paid organizations send one initial request
with `desired_instance_size=micro`.

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

## Summary by CodeRabbit

- **Bug Fixes**
- Improved project creation so available regions are loaded only after
an organization is selected.
- Ensured region availability requests use the appropriate instance size
for the organization’s plan: no size parameter for free plans and
`micro` for paid plans.
- Prevented unnecessary region-availability requests when no
organization has been selected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-29 10:25:32 +02:00
Ali Waseem 21df8d02e6 Rename best available region option to Auto (#50873)
The region selector's "Best available region" option now reads "Auto"
and carries the Recommended badge. Also removes the "Select the region
closest to your users for the best performance." description, which was
misleading for the auto selection.

Fixes FE-4468


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

## Summary by CodeRabbit

* **Updates**
* The recommended region is now labeled “Auto” in both the selected
value and the options list; its “Recommended” badge remains.
* Removed general advice to choose a region closest to users.
High-availability and local/staging notices are unchanged.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-24 11:29:31 -06:00
Joshen Lim 0d3b73794b Joshenlim/fe 4465 experiment with best available region selection (#50851)
## Context

Adds a "Best available region" option in the region selector for the
project creation form
- Should only show up for free plan organizations (will be selected as
the default option instead of the recommended option from GET
`/available-regions`)
- "Recommended" badges will also be hidden in this scenario
- Behaviour should be status quo for non free plan organizations
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/de0a183d-37c0-445d-98ca-c5aaf6353e73"
/>

## To test
Important to ensure that project creation still behaves as per usual
- [ ] Free plan: Creating a project with "best available region" select
creates the project if the recommended region from GET
`/available-regions`
- A quick way to check this is to swap to a paid org and see the
"recommended" general region
- [ ] Free plan: Can also create a project with other regions selected
as per usual
- [ ] Non free plan: Can create project as per usual
- [ ] Verify that everything is status quo if configcat feature flag is
off
2026-09-24 17:38:58 +08:00
kemal.earth 24e8333c54 feat(studio): flag for unavailable regions (#50473)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Adds feature flag for controlling region unavailability.


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

* **New Features**
* Region options now display availability badges, tooltips, and
status-specific notices.
* Restricted regions remain selectable so users can review their
availability status.
* Project creation provides a clear field-level message when a selected
region is unavailable and prompts users to choose another region.

* **Bug Fixes**
* Region availability messaging now consistently reflects platform
status and configured restrictions.
  * Availability warnings clear after selecting an eligible region.
  * Region checks now cover both dynamic and static provider regions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-17 14:42:58 +01:00
Danny White 81dfcc9c93 fix(studio): treat region flags as decorative by default (#49574)
## What kind of change does this PR introduce?

Studio accessibility fix.

## What is the current behavior?

`RegionFlag` defaults to `alt=""`, but only some callsites also pass
`aria-hidden` / `role="presentation"`. Decorative flags beside visible
region names can still be announced inconsistently.

## What is the new behavior?

`RegionFlag` defaults to `aria-hidden` when `alt` is empty, matching how
the component is used next to visible region text. Redundant callsite
a11y props from #49517 are removed.

## To test

- Open [Edge Function
observability](https://studio-staging-git-dnywh-region-flag-decorative-a11y-supabase.vercel.app/dashboard/project/_/observability/edge-functions).
Open the **Region** filter and confirm each option still shows a flag
beside the region label. The DOM has `aria-hidden` on the flag `img`.
Open the new project flow region selector. Confirm the selected-region
flag still renders without role="presentation".
- Open [New
project](https://studio-staging-git-dnywh-region-flag-decorative-a11y-supabase.vercel.app/dashboard/new/_).
Open the region selector and confirm the selected value and menu items
still show flags beside the region names. The DOM has `aria-hidden` on
the flag `img`.
2026-08-26 15:05:28 +08:00
Danny White 5f50338a2f fix(studio): keep region flags visible on light surfaces (#49517)
## What kind of change does this PR introduce?

Studio interface fix.

## What is the current behavior?

Region flags with light backgrounds, such as Japan, can disappear
against light Studio surfaces. Flag rendering is also repeated across
region selectors and infrastructure views.

## What is the new behavior?

Region flags use a shared `RegionFlag` component with the existing small
radius and a subtle 1px border. The treatment is applied consistently
across project creation, replication, read replicas, infrastructure, and
Edge Function observability.

| Before | After |
| --- | --- |
| <img width="746" height="246" alt="CleanShot 2026-08-25 at 14 01
07@2x"
src="https://github.com/user-attachments/assets/5ccffccd-f253-47ca-a587-e97d1e8306a8"
/> | <img width="746" height="234" alt="CleanShot 2026-08-25 at 14 09
20@2x"
src="https://github.com/user-attachments/assets/9d59f7f6-4364-4c2c-8b97-a9673616736a"
/> |

## To test

- Open the new project flow and inspect the selected region and region
menu. Confirm light flags remain visible without changing size or aspect
ratio.
- Open Database Replication and inspect region flags in the diagram and
destination form.
- Open `/project/<ref>/settings/infrastructure` and inspect flags in the
topology, map, and read replica details.
- Open Edge Function observability and inspect the region filter
options.


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

* **UI Improvements**
* Standardized region flag displays across project creation,
replication, infrastructure, read replica, and observability views.
* Region flags now use consistent styling, rounded borders, and
rendering throughout the Studio interface.
* Improved visual consistency for selected regions, database nodes,
tooltips, and region options.
* Decorative flags in observability views are handled appropriately for
assistive technologies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 16:25:12 +10:00
Alaister YoungandAlaister Young de4bec77d6 [MUL-1338] fix(studio): lock compute size to large for HA projects (#49249)
When the High availability (Multigres) toggle is enabled in the New
Project form, the Compute size dropdown now offers only **Large** and
the form value is forced to `large`. Previously HA projects showed the
same micro/small/medium options as regular projects.

**Added:**
- `HIGH_AVAILABILITY_INSTANCE_SIZE` constant (`'large'`) alongside the
other `HIGH_AVAILABILITY_*` constants

**Changed:**
- `ComputeSizeSelector` watches `highAvailability` and renders only
Large when it's on (hiding the "Larger instance sizes available after
creation" row); the `cloudProvider` read is now a reactive `useWatch`
instead of a render-time `getValues()`, so the list re-filters when HA
forces the provider to `AWS_K8S`
- `HighAvailabilityInput` forces `instanceSize` to `large` when HA
toggles on and restores the previously selected size when it toggles
off, alongside the existing `dbRegion`/`cloudProvider` handling
- The compute size and region selects ignore Radix's spurious
`onValueChange('')` — Radix emits it when a select's value and option
list change in the same tick, which wiped the forced value (details in
the inline comments)
- HA projects skip the "Confirm compute costs" modal on submit — HA is
free during Alpha, so the forced large size shouldn't trigger the
$110/mo confirmation

## To test

- On a paid org, open the New Project form: with HA off, the Compute
size dropdown shows micro/small/medium plus the disabled "Larger
instance sizes available after creation" row
- Toggle High availability on: the dropdown shows only Large, the
trigger reads "large / 8 GB RAM / 2-core CPU" (not the placeholder), the
region locks as before, and the footer shows $110/m
- Check the network tab: the `available-regions` request goes out with
`desired_instance_size=large` and returns 200 (no request with an empty
`desired_instance_size`)
- Select medium first, toggle HA on then off: medium is restored (same
for other sizes); rapid toggling shouldn't leave the field blank
- With HA on, submitting goes straight through without the "Confirm
compute costs" modal; a non-HA medium project still shows it

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

## Summary by CodeRabbit

* **New Features**
* High-availability projects now automatically use the required
dedicated instance size.
* Disabling high availability restores the previously selected instance
size.
* Compute size options are filtered based on cloud provider and
high-availability settings.

* **Bug Fixes**
* Prevented accidental clearing of compute size or region selections
during option updates.
* Compute-cost confirmation is no longer required for high-availability
projects.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-08-19 13:03:39 +00:00
Alaister YoungandAlaister Young 397965cfae [FE-4186] fix(studio): endless region selector loading for AWS_NIMBUS orgs (#49131)
On the new-project form, the Region select's trigger label and inline
spinner were driven by `isLoadingAvailableRegions` — the `isPending`
state of `useOrganizationAvailableRegionsQuery`. For `AWS_NIMBUS` orgs
that query is permanently disabled (`smartRegionEnabled` is false), and
a disabled query stays `isPending` forever, so the trigger showed
"Loading available regions..." with a spinner indefinitely even though
the default region was actually selected underneath and the form still
worked.

**Changed:**
- The trigger label and spinner now use the provider-aware `isLoading`
(`smartRegionEnabled ? isLoadingAvailableRegions :
isLoadingDefaultRegion`), which the component already used for the
select's `disabled` state and placeholder. For non-Nimbus providers the
two values are identical, so the normal path is unaffected.

## To test

- Emulate a Nimbus deployment locally by setting
`"infra:cloud_providers": ["AWS_NIMBUS"]` in
`apps/studio/hooks/custom-content/custom-content.json`, then open the
new-project form: the Region field should show the default region (name
+ flag) within a moment — not an endless "Loading available regions..."
spinner — and the dropdown should open with the specific-regions list
- Restore the normal provider list and reload: the field should briefly
load, then show smart regions ("General regions") plus specific regions
with Recommended badges, as before
- Toggle High Availability on/off in either config: the selector should
transition between region lists without getting stuck loading

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

## Summary by CodeRabbit

* **Bug Fixes**
  * Improved loading indicators in the region selector.
* The selector now consistently shows the correct loading state while
regions are being loaded.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-08-17 17:20:05 +08:00
9952d6f10f [FE-4067] fix(studio): re-allow all regions in local project creation (#48704)
Local dev stacks can run in any of the three supported regions (e.g.
Bobbie's is in `ap-southeast-1`), but enabling High Availability on the
project creation form pinned local to Frankfurt only. This unrestricts
local so all three regions are selectable again.

**Changed:**
- `getHighAvailabilityRegionCode()` returns `undefined` for `local`
(same as prod), so `filterHighAvailabilityRegions()` no longer collapses
the list — staging stays pinned to `us-east-1`
- The three-region warning in `RegionSelector` now adds a local-only
recommendation: "Use Central EU (Frankfurt) unless you're on a personal
dev stack."
- Updated unit tests, including an `ap-southeast-1` fixture region to
prove pass-through

## To test

- On a local stack, open the new project form and enable High
Availability — the region selector should offer all three regions (East
US, Frankfurt, Southeast Asia) instead of locking to Frankfurt, and the
warning should recommend Frankfurt unless you're on a personal dev stack
- Confirm staging behavior is unchanged (HA still pins to East US)
- `pnpm --filter studio exec vitest run
components/interfaces/ProjectCreation`

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

* **Bug Fixes**
* Local development projects can now use high-availability regions
beyond Central EU.
* Region filtering and availability messaging now correctly reflect the
active environment, including staging restrictions.

* **User Experience**
* Added guidance recommending Central EU for local projects, unless
using a personal development stack.
* Region selection now provides clearer environment-specific information
when options are limited.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-05 14:51:57 +07:00
d2a3162bf1 Add high availability project creation controls (#48375)
## Summary

- Move High Availability into the standard project creation settings
above Compute, gated by the `instances.high_availability` entitlement.
- Mark the option as Alpha and explain that it is free during Alpha for
up to two projects.
- Enforce the supported HA configuration: `AWS_K8S`, Postgres 17 on the
`ga` release channel (no custom version is sent — the API resolves the
image), and the environment-specific local/staging region restrictions.
- Show eligible locations in a dedicated **High Availability Regions**
group.
- Preserve the existing Advanced Configuration availability rules and
additionally hide the section while HA is enabled.
- Restore the previous provider and Postgres settings when HA is
switched off.

## How to test
1. Go to create a new project
2. Ensure you have access to high availability (e.g. on local)
3. Toggle high availability on and note how the project form restricts
settings listed above

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

* **New Features**
* Added High Availability to project creation with Alpha warning
labeling and improved switch accessibility.
* Constrains region selection to compatible High Availability regions
and enforces HA-specific engine/release settings.
* Disables/hides custom PostgreSQL version selection when High
Availability is enabled (and omits HA custom request payloads).

* **Bug Fixes**
* Improved persistence of selected PostgreSQL version and region across
data reloads and configuration panel reopen/toggle.
* Restores region when form state temporarily drops values during
remounts.

* **Tests**
* Expanded end-to-end coverage for HA UI, region grouping, and
submit/payload restoration behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-07-30 16:36:54 +08:00
Alaister YoungandAlaister Young ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-29 00:48:56 +08:00
Gildas Garcia 72aa214b0c fix: new project form accessibility issues (#47785)
## Problem

The new project form has accessibility issues:
- labels are not linked to inputs
- description are not linked to inputs

## How to test

Navigate through the form inputs with voice over and make sure every
input makes sense

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

* **Bug Fixes**
* Improved form field identification consistency across project creation
screens (compute size, database password, project name, PostgreSQL
version, region, and organization).
* Enhanced selector/input accessibility by adding explicit element
identifiers to key controls.
* Updated region and repository UI structure to improve reliable
rendering without changing setup behavior.
* Preserved existing password, version, and routing logic while making
dropdowns and fields easier to locate and interact with.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-09 18:11:57 +02:00
Joshen Lim 7203a97a90 Chore/clean up feature flags 300626 (#47429)
## Context

Cleans up a number of stale feature flags that have been enabled for all
users for more than 3 months
- enableSmartRegion
- SentryLogDrain
- axiomLogDrain
- S3logdrain
- Last9LogDrain
- otlpLogDrain 
- ShowPrettyExplain
- pgdeltaDiff
- CustomOauthProviders
- timezonePicker

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

* **New Features**
  * Timezone selector is now always available in the user menu.
  * Log drain “Type” options are expanded in the creation flow.
* Custom auth providers now appear when the custom providers setting is
enabled.
* **Bug Fixes**
* Smart region selection and related queries now follow the selected
cloud provider.
* PG Delta Diff preview availability and SQL editor “EXPLAIN” routing
now follow the latest enabled settings (including platform-only preview
behavior).
* **Changes**
* Removed the Storage List-V2 migration callout from the Storage
settings page.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-01 14:42:08 +08: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
Joshen Lim 9f7d300354 Check flags loaded before fetching region data (#47289)
## Context

Realised that we were calling both `useDefaultRegionQuery` and
`useOrganizationAvailableRegionsQuery` in the new project page.

`smartRegionEnabled` defaults to `false` at the beginning while the
flags are still being loaded, to this calls `useDefaultRegionQuery`. But
once the flags are loaded and `smartRegionEnabled` becomes `true`, then
the other hook is called

## Changes involved

- Checks that the flags are loaded first before calling either hooks to
prevent unnecessarily triggering both
- Adjust `defaultRegion` to remove hardcode
- Check smart region first, then default back to default specific region
  - Renamed variables to be clearer:
    - `autoDefaultRegion` (check based on location)
    - `fixedDefaultRegion` (hardcoded in repo) 
- Update `useEffect` on `regionError` to only reset the region value if
the default value is not undefined
- Also just a tiny nit to re-arrange to group the `useEffects` together

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

* **Bug Fixes**
* Region selection now waits for feature flags to load before fetching
default and “smart” region options, preventing premature or incorrect
region choices.
* New project setup now updates the database region and smart
recommendations more consistently, with improved fallback behavior when
region lookup fails.
* AWS Nimbus default region is now environment-aware: non-prod uses
Southeast Asia, while prod uses East US.
* Default privilege settings now stay in sync more reliably during
setup, updating only when appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-25 15:08:59 +08: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
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
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>
2026-04-30 10:53:24 +00: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
CharisandJoshen Lim 277441334f feat(studio): Display region-specific incidents in RegionSelector (#43308)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Feature

## What is the current behavior?

Region-specific incidents are only shown in the global StatusPageBanner,
which doesn't clearly indicate that an incident only affects specific
regions during project creation.

## What is the new behavior?

Region-specific incidents are now displayed inline in the RegionSelector
with smart region matching to show which regions are affected. The
StatusPageBanner logic is updated to avoid duplicate incident notices
for region-specific incidents when creating projects.

## Additional context

<img width="1394" height="650" alt="CleanShot 2026-03-02 at 16 32 34@2x"
src="https://github.com/user-attachments/assets/fd3734dc-8049-4c24-82d8-456bfbdbd4fd"
/>

Resolves FE-2652

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-03 15:22:55 +08: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
Danny WhiteandJoshen Lim b3852a391b chore(studio): clarify smart region selector (#39918)
* basics

* draft docs

* copywriting improvements

* remove quote

* remapping on frontend

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-11-04 18:56:27 +11:00
Joshen Lim 6e2a7feee7 Break down new project page into smaller components (#39812)
* Break down new project page into smaller components

* Fix types

* Address comments

* Add min length check for project name in project settings

* Fix tests
2025-10-27 14:04:56 +08:00
CharisandAli Waseem 2cdbc381df cleanup(region selector): remove code from selected region (#39730)
* cleanup(region selector): remove code from selected region

Selector looks a bit busy and you probably know the code if you've
already selected it, so removing it from the dropdown as suggested in a
previous PR.

* refactor(region selector): clean up unnecessary type checks

Co-authored-by: Ali Waseem <waseema393@gmail.com>

* ci: Autofix updates from GitHub workflow

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-10-21 17:32:21 -04:00
CharisandJoshen Lim 91645ade09 feat(region selector): get region status by desired size (#39631)
* feat(region selector): get region status by desired size

The available-regions endpoint now takes a desired_instance_size query
parameter to return more accurate status data.

* Align call of useOrganizationAvailableRegionsQuery in [slug] with RegionSelector, and rearrange some consts

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-21 11:08:57 -04:00
Alaister Young 1174981650 [FE-1938] feat: show region capacity issues (#39611)
feat: show region capacity issues
2025-10-17 16:48:17 +08:00
Joshen Lim c04eec6468 Add region code to region selection in project and replica creation (#39071)
* Add region code to region selection in project and replica creation

* Tiny
2025-09-30 20:14:25 +08:00
Alaister YoungandJoshen Lim e7cac83c4a chore: limit regions for nimbus (#38747)
* chore: limit regions for nimbus

* fix logic

* Autoselect east US if cloud provider is nimbus

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-25 16:09:15 +08:00
65b962e771 design system: text color contrast (#38343)
* Refactor Drawer component and add date-fns dependency

Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component.

* nit: add env for svg path

* fix: instructions

* accent color docs and basic tidy

* copy value feature

* improve color contrast

* increase contrast on text-warning in light mode

* update changelog

* replace outdated text-warning utility classes

* remove redundant warning-600

* minor design-system docs updates

* docs updates

* remove unused brand-button class

* update docs

* fix: restore brand default

* update docs brand text color

* low hanging branded text fruit

* Nit refactor and clean  up

* re-add Kemal’s README instructions for hot reload

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-09 11:45:08 +10:00
Danny White 8bf1fd5d10 chore: minor clarity improvements on new project creation (#38299)
* feat: basic clarity improvements

* feat: all switches

* feat: basic errors

* fix: simplify

* fix: properly separate sections

* fix: remove smart toggle closure

* fix: remember file size unit

* fix: validation

* fix: UpgradeToPro styles

* fix: UpgradeToPro styles for full-width

* feat: create modal match

* fix: tests

* chore: periods and color contrast

* fix: grammar

* fix: revert unrelated changes
2025-09-01 09:07:59 +10:00
Joshen Lim 4124f0ed98 Shift useFlag hook and configcat library to common package, remove from Studio (#38203)
* Shift useFlag hook and configcat library to common package, remove from studio

* Fix test

* Fix test
2025-08-27 13:42:20 +07:00
Alaister YoungandJoshen Lim 29e107af4a [FE-1712] chore: use /available-regions endpoint for project creation (#37371)
* chore: use /available-regions endpoint for project creation

* fix types

* make postgres version selection work

* Small nit refactors

* Feature flag changes + fix icons for flags in various places

* Fix creating projects when selecting a smart region

* Fix sending region selection to create project endpoint

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-19 16:36:59 +08:00
Joshen Lim ac670e230e Configure restricted region pool from configcat (#36105) 2025-06-03 16:33:36 +08:00
jose-ledesmaandJose Ledesma 9c50c0ab97 feat: add new regions for staging/local (#35275)
Co-authored-by: Jose Ledesma <jose@Joses-MacBook-Pro.local>
2025-04-28 10:38:02 +02:00
d633ced97d Feat/new project creation experiment (#31237)
* some early ideas

* better approach

* fix globe stuff

* add initial step

* reset and submit button for chat

* cleanup

* remove www

* more clean up

* mobile and more cleanup

* fixes

* update advanced and security

* fix project checks

* connect form

* fix reset and tidied up other things

* add layout options

* a/b test

* add offset

* add ab test

* remove www packages

* remove www

* package

* update coordinates

* feat: create ProjectCreationInitialStepSubmittedEvent

* feat: add event for capturing intention of prompting

* fix: bring pnpm-lock up to date

* fix ts errors

* fix globe

* fix globe animation

* fix ts

* remove imports and tools

* update module resolution

* global redirect

* delay rendering

* Update apps/studio/pages/new/[slug].tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

* take directly to v2 via project create dropdown

* move redirect to useEffect

* feat: distinguish events between initial and second step

* feat: emit an event when create project is clicked on new/v2

* fix: correct event type defs

* remove unused imports

* Various clean ups

* improvements

* Minor refactors

* clean up

* ts fixes

---------

Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-01-17 09:59:21 +10:00
Joshen Lim fdf4dec344 Chore/cleanup feature flags 041224 (#30885)
* Deprecate enableFreeSupport flag

* Deprecate enableExperimentalTheme flag and ThemeSettingsOld component

* Deprecate httpsAuthHooksEnabled flag

* Deprecate thirdPartyAuth flag

* Deprecate logdrains flag

* Deprecate enableNewRegions flag

* Deprecate cronUi flag

* Deprecate queues flag and old ProjectIntegrationsLayout folder
2024-12-04 17:04:53 +08:00
Div AroraandJoshen Lim fada3c0391 [wip] feat: add support for additional AWS regions (#28806)
* feat: add support for additional AWS regions

* Add flags

* Add comment

* Feature flag new regions

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-08-23 12:20:34 +07:00
Charis 5cd8384bca feat(docs), refactor(docs,studio): add regions list to docs (#28125)
* feat(docs), refactor(docs,studio): add regions list to docs

Adds list of supported AWS regions to docs.

Pulls the region information into `shared-data` package to provide common source of truth for dashboard and docs.

* style: format
2024-07-23 12:45:44 -04:00
Ivan Vasilov cc47815af9 fix: Show the notice only on local/staging (#27089)
Show the notice only on local/staging.
2024-06-07 17:40:18 +07:00
Joshen Lim e89c66fafd Add note for project creation region selection for local/staging (#27082) 2024-06-07 15:01:10 +07:00
Jonathan Summers-MuirandJoshen Lim 330ae6e407 [Dashboard] Chore/refactor new project form (#26997)
* init layouts in project settings

* Update general.tsx

* update gap

* Update Scaffold.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* spacing issues

* now added a enabled switch

* Revert "now added a enabled switch"

This reverts commit f22050302a.

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* revert

* Update project-postgrest-config-update-mutation.ts

* add bottom padding

* init changes

* Update PostgrestConfig.tsx

* Update [slug].tsx

* Update PostgrestConfig.tsx

* fix

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Pull updates, resolve conflicts

* remove staging/local specific logic.

• stopped provider Select from flashing
•

* Update [slug].tsx

* split up region query

* Update [slug].tsx

* Update [slug].tsx

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-06-06 19:32:10 +08:00
Alaister Young 99af0e4483 Revert "[Dashboard] New project form now using react-hook-form" (#26995)
Revert "[Dashboard] New project form now using react-hook-form (#26808)"

This reverts commit 2dc2178dcc.
2024-06-04 13:09:43 +00:00
Jonathan Summers-MuirandJoshen Lim 2dc2178dcc [Dashboard] New project form now using react-hook-form (#26808)
* init layouts in project settings

* Update general.tsx

* update gap

* Update Scaffold.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* spacing issues

* now added a enabled switch

* Revert "now added a enabled switch"

This reverts commit f22050302a.

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* revert

* Update project-postgrest-config-update-mutation.ts

* add bottom padding

* init changes

* Update PostgrestConfig.tsx

* Update [slug].tsx

* Update PostgrestConfig.tsx

* fix

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Update PostgrestConfig.tsx

* Pull updates, resolve conflicts

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-06-04 17:41:38 +07:00
Ivan Vasilov eac073219a fix: Enable APSE (#20909)
* Revert some of the changes in 20982 and 20987.

* The default env for staging should be Singapore.
2024-01-31 23:17:12 +00:00
Joshen Lim e7a9131d56 Allow apse1 on staging and local only (#20897)
* Allow apse1 on staging and local only

* Fix

* Fix

* Fix

* Fix

* Fix
2024-01-31 15:50:16 +07:00
Joshen Lim 8cc6855cb3 Disable apse 1 prod (#20892) 2024-01-31 05:03:30 +00:00
Ivan VasilovandJoshen Lim 5417ba344f fix: Handle Cloudflare errors in the region selector (#20435)
* Simplify the logic when selecting another cloud provider.

* Make the regionSelector handle errors and not block the selec when it's loading.

* Add retry logic in get default region query

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-01-15 23:40:00 +08:00
Joshen LimandAlaister Young 199dd37ac8 Offer select closest region CTA in project creation (#20262)
* Offer select closest region CTA in project creation

* Update region select CTA to use cloudflare and support all regions

* Auto select region, remove CTA

* Update apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2024-01-11 15:23:34 +08:00