refactor(console): hide tenant convert buttons for dev-only regions (#7750)

refactor(console): hide tenant convert button for dev-only regions

Author: gao-sun

packages/console/src/components/CreateTenantModal/index.tsx

@@ -1,11 +1,9 @@
-import { type Region as RegionType } from '@logto/cloud/routes';
 import { Theme, TenantTag } from '@logto/schemas';
 import { useMemo, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
-import useSWRImmutable from 'swr/immutable';
 
 import CreateTenantHeaderIconDark from '@/assets/icons/create-tenant-header-dark.svg?react';
 import CreateTenantHeaderIcon from '@/assets/icons/create-tenant-header.svg?react';
@@ -19,6 +17,7 @@ import ModalLayout from '@/ds-components/ModalLayout';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import { Ring } from '@/ds-components/Spinner';
 import TextInput from '@/ds-components/TextInput';
+import useAvailableRegions from '@/hooks/use-available-regions';
 import useTheme from '@/hooks/use-theme';
 import modalStyles from '@/scss/modal.module.scss';
 import { trySubmitSafe } from '@/utils/form';
@@ -33,19 +32,11 @@ type Props = {
   readonly onClose: (tenant?: TenantResponse) => void;
 };
 
-const allTags = Object.freeze([TenantTag.Development, TenantTag.Production]);
-
 function CreateTenantModal({ isOpen, onClose }: Props) {
   const [tenantData, setTenantData] = useState<CreateTenantData>();
   const theme = useTheme();
   const cloudApi = useCloudApi();
-  const { data: regions, error: regionsError } = useSWRImmutable<RegionType[], Error>(
-    'api/me/regions',
-    async () => {
-      const { regions } = await cloudApi.get('/api/me/regions');
-      return regions;
-    }
-  );
+  const { regions, regionsError, getRegionById } = useAvailableRegions();
 
   const defaultValues = Object.freeze({
     tag: TenantTag.Development,
@@ -65,10 +56,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
   } = methods;
 
   const regionName = watch('regionName');
-  const currentRegion = useMemo(
-    () => regions?.find((region) => region.id === regionName),
-    [regions, regionName]
-  );
+  const currentRegion = useMemo(() => getRegionById(regionName), [getRegionById, regionName]);
   const createTenant = async ({ name, tag, regionName }: CreateTenantData) => {
     const newTenant = await cloudApi.post('/api/tenants', { body: { name, tag, regionName } });
     onClose(newTenant);

packages/console/src/consts/tenants.ts

@@ -166,4 +166,4 @@ export const availableRegions = Object.freeze([
 ] as const satisfies PublicRegionName[]);
 
 // The threshold days to show the convert to production card in the get started page
-export const convertToProductionThresholdDays = 14;
+export const convertToProductionThresholdDays = 7;

packages/console/src/contexts/TenantsProvider.tsx

@@ -66,6 +66,7 @@ type Tenants = {
   /** The current tenant ID parsed from the URL. */
   currentTenantId: string;
   currentTenant?: TenantResponse;
+  /** Indicates if the current tenant is a development tenant. */
   isDevTenant: boolean;
   /** Navigate to the given tenant ID. */
   navigateTenant: (tenantId: string) => void;

packages/console/src/hooks/use-available-regions.ts

@@ -0,0 +1,38 @@
+import { type Region as RegionType } from '@logto/cloud/routes';
+import { useCallback } from 'react';
+import useSWRImmutable from 'swr/immutable';
+
+import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
+
+/** Checks if a region is a development-only region based on its name. */
+export const isDevOnlyRegion = (regionName?: string): boolean =>
+  regionName?.includes('_DEV_') ?? false;
+
+/**
+ * Hook to fetch available regions for the current user. Cloud API is required to use this hook.
+ */
+const useAvailableRegions = () => {
+  const cloudApi = useCloudApi();
+  const { data: regions, error: regionsError } = useSWRImmutable<RegionType[], Error>(
+    'api/me/regions',
+    async () => {
+      const { regions } = await cloudApi.get('/api/me/regions');
+      return regions;
+    }
+  );
+  const getRegionById = useCallback(
+    (id: string) => regions?.find((region) => region.id === id),
+    [regions]
+  );
+
+  return {
+    /** Available regions for the current user. */
+    regions,
+    /** Error encountered while fetching regions. */
+    regionsError,
+    /** Function to get a region by its ID. If the region is not found, returns undefined. */
+    getRegionById,
+  };
+};
+
+export default useAvailableRegions;

packages/console/src/pages/GetStarted/index.tsx

@@ -23,6 +23,7 @@ import { LinkButton } from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 import Spacer from '@/ds-components/Spacer';
 import TextLink from '@/ds-components/TextLink';
+import { isDevOnlyRegion } from '@/hooks/use-available-regions';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import useTheme from '@/hooks/use-theme';
 import useWindowResize from '@/hooks/use-window-resize';
@@ -105,7 +106,7 @@ function GetStarted() {
   );
 
   const shouldShowConvertToProductionCard = useMemo(() => {
-    if (!isCloud || !isDevTenant || !currentTenant) {
+    if (!isCloud || !isDevTenant || !currentTenant || isDevOnlyRegion(currentTenant.regionName)) {
       return false;
     }
 

packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantEnvironment/index.tsx

@@ -1,13 +1,15 @@
-import { TenantTag } from '@logto/schemas';
-import { useState } from 'react';
+import { type TenantTag } from '@logto/schemas';
+import { useContext, useState } from 'react';
 
 import RocketIcon from '@/assets/icons/rocket.svg?react';
 import ConvertToProductionModal from '@/components/ConvertToProductionModal';
 import LearnMore from '@/components/LearnMore';
 import TenantEnvTag from '@/components/TenantEnvTag';
 import { logtoCloudTenantSettings } from '@/consts';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
+import { isDevOnlyRegion } from '@/hooks/use-available-regions';
 
 import styles from './index.module.scss';
 
@@ -17,6 +19,7 @@ type Props = {
 
 function TenantEnvironment({ tag }: Props) {
   const [isConvertModalOpen, setIsConvertModalOpen] = useState(false);
+  const { currentTenant, isDevTenant } = useContext(TenantsContext);
 
   return (
     <div className={styles.container}>
@@ -25,15 +28,15 @@ function TenantEnvironment({ tag }: Props) {
         <div className={styles.description}>
           <DynamicT
             forKey={
-              tag === TenantTag.Development
+              isDevTenant
                 ? 'tenants.settings.development_description'
                 : 'tenants.settings.production_description'
             }
           />
-          {tag === TenantTag.Development && <LearnMore href={logtoCloudTenantSettings} />}
+          {isDevTenant && <LearnMore href={logtoCloudTenantSettings} />}
         </div>
       </div>
-      {tag === TenantTag.Development && (
+      {isDevTenant && !isDevOnlyRegion(currentTenant?.regionName) && (
         <>
           <Button
             className={styles.button}