From 21df8d02e62a3cc3f0b4eeebeecec3241be2ff48 Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Thu, 24 Sep 2026 11:29:31 -0600
Subject: [PATCH] Rename best available region option to Auto (#50873)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 -->
---
 .../ProjectCreation/RegionSelector.tsx        | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
index 1d2fbda58c0..f7eee08b492 100644
--- a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
@@ -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>