dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Rename best available region option to Auto (#50873)

Browse Source 
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 -->
This commit is contained in:
Ali Waseem authored and GitHub committed 2026-09-24 11:29:31 -06:00
1 parent d15634ae58
commit 21df8d02e6
1 file changed
+26 -28
Download Patch File Download Diff File Expand all files Collapse all files
apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
+26 -28
View File
@@ -147,7 +147,7 @@ export const RegionSelector = ({
// Keeps dbRegion following the recommendation while "Best available" is active, so a
// recommendation change (e.g. after a refetch) doesn't leave the form submitting a stale
// region behind a label that still reads "Best available region".
// region behind a label that still reads "Auto".
useEffect(() => {
if (!isBestAvailableSelected || !recommendedSmartRegion) return
if (dbRegion !== recommendedSmartRegion.name) {
@@ -238,7 +238,7 @@ export const RegionSelector = ({
const triggerLabel = isLoading
? 'Loading available regions...'
: isBestAvailableActive
? 'Best available region'
? 'Auto'
: selectedRegionLabel
const affectingIncidents = incidents.filter((incident) => {
@@ -261,31 +261,26 @@ export const RegionSelector = ({
layout={layout}
label="Region"
description={
<>
<p>Select the region closest to your users for the best performance.</p>
{restrictHighAvailabilityRegion ? (
<div className="mt-2 text-warning">
High Availability projects are currently limited to{' '}
{regionOptions[0]?.name ?? highAvailabilityRegionCode}.
</div>
) : (
showNonProdFields && (
<div className="mt-2 text-warning">
<p>Only these regions are supported for local/staging projects:</p>
<ul className="list-disc list-inside mt-1">
<li>East US (North Virginia)</li>
<li>Central EU (Frankfurt)</li>
<li>Southeast Asia (Singapore)</li>
</ul>
{isLocalEnvironment && (
<p className="mt-1">
Use Central EU (Frankfurt) unless you're on a personal dev stack.
</p>
)}
</div>
)
)}
</>
restrictHighAvailabilityRegion ? (
<div className="text-warning">
High Availability projects are currently limited to{' '}
{regionOptions[0]?.name ?? highAvailabilityRegionCode}.
</div>
) : showNonProdFields ? (
<div className="text-warning">
<p>Only these regions are supported for local/staging projects:</p>
<ul className="list-disc list-inside mt-1">
<li>East US (North Virginia)</li>
<li>Central EU (Frankfurt)</li>
<li>Southeast Asia (Singapore)</li>
</ul>
{isLocalEnvironment && (
<p className="mt-1">
Use Central EU (Frankfurt) unless you're on a personal dev stack.
</p>
)}
</div>
) : undefined
}
>
<FormControl>
@@ -344,8 +339,11 @@ export const RegionSelector = ({
<div className="flex flex-row items-center justify-between w-full">
<div className="flex items-center gap-x-3">
<BestAvailableRegionIcon />
<span className="text-foreground">Best available region</span>
<span className="text-foreground">Auto</span>
</div>
<Badge variant="success" className="mr-1">
Recommended
</Badge>
</div>
</SelectItem>
</SelectGroup>