refactor(console): unblock private region prod tenant creation and deletion (#8119)

* refactor(console): unblock private region prod tenant creation and deletion

unblock private region prod tenant creation and deletion

* fix(console): fix region selection

fix region selection

* fix(console): fix typo

fix typo

Co-authored-by: Copilot <[email protected]>

* fix(console): fix typo

fix typo

---------

Co-authored-by: Copilot <[email protected]>

Author: simeng-li

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

@@ -1,7 +1,7 @@
 import { Theme, TenantTag } from '@logto/schemas';
 import { condArray } from '@silverhand/essentials';
 import { useCallback, useMemo, useState } from 'react';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { Controller, type ControllerRenderProps, FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
@@ -12,9 +12,10 @@ import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type TenantResponse, type RegionResponse as RegionType } from '@/cloud/types/router';
 import Region, {
   defaultRegionName,
-  logtoDropdownItem,
+  publicInstancesDropdownItem,
   type InstanceDropdownItemProps,
 } from '@/components/Region';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import Button from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import FormField from '@/ds-components/FormField';
@@ -48,26 +49,28 @@ const getInstanceDropdownItems = (regions: RegionType[]): InstanceDropdownItemPr
     .filter(({ isPrivate }) => isPrivate)
     .map(({ id, name, country, tags, displayName }) => ({ id, name, country, tags, displayName }));
 
-  return condArray(hasPublicRegions && logtoDropdownItem, ...privateInstances);
+  return condArray(hasPublicRegions && publicInstancesDropdownItem, ...privateInstances);
 };
 
+const defaultFormValues = Object.freeze({
+  tag: TenantTag.Development,
+  instanceId: publicInstancesDropdownItem.name,
+  regionName: defaultRegionName,
+});
+
 function CreateTenantModal({ isOpen, onClose }: Props) {
   const [tenantData, setTenantData] = useState<CreateTenantData>();
   const theme = useTheme();
   const cloudApi = useCloudApi();
   const { regions, regionsError, getRegionByName } = useAvailableRegions();
 
-  const defaultValues = Object.freeze({
-    tag: TenantTag.Development,
-    instanceId: logtoDropdownItem.name,
-    regionName: defaultRegionName,
-  });
   const methods = useForm<CreateTenantData>({
-    defaultValues,
+    defaultValues: defaultFormValues,
   });
 
   const {
     reset,
+    setValue,
     control,
     handleSubmit,
     formState: { errors, isSubmitting },
@@ -84,53 +87,73 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
     [reset, watch]
   );
 
-  const instanceOptions = useMemo(() => getInstanceDropdownItems(regions ?? []), [regions]);
+  const instanceDropdownItems = useMemo(() => getInstanceDropdownItems(regions ?? []), [regions]);
   const hasPrivateRegionsAccess = useMemo(() => checkPrivateRegionAccess(regions ?? []), [regions]);
 
   const publicRegions = useMemo(
     () => regions?.filter((region) => !region.isPrivate) ?? [],
     [regions]
   );
 
-  const isLogtoInstance = useMemo(() => instanceId === logtoDropdownItem.name, [instanceId]);
-
-  const currentRegion = useMemo(
-    () => getRegionByName(isLogtoInstance ? regionName : instanceId),
-    [isLogtoInstance, regionName, instanceId, getRegionByName]
+  const isPublicInstanceSelected = useMemo(
+    () => instanceId === publicInstancesDropdownItem.name,
+    [instanceId]
   );
 
-  const getFinalRegionName = useCallback(
-    (instanceId: string, regionName: string) => {
-      return isLogtoInstance ? regionName : instanceId;
-    },
-    [isLogtoInstance]
-  );
+  const currentRegion = useMemo(() => getRegionByName(regionName), [regionName, getRegionByName]);
 
-  const createTenant = async ({ name, tag, instanceId, regionName }: CreateTenantData) => {
-    // For Logto public instance, use the selected region
-    // For private instances, use the instance ID as the region
-    const finalRegionName = getFinalRegionName(instanceId, regionName);
+  const createTenant = async ({ name, tag, regionName }: CreateTenantData) => {
     const newTenant = await cloudApi.post('/api/tenants', {
-      body: { name, tag, regionName: finalRegionName },
+      body: { name, tag, regionName },
     });
     onClose(newTenant);
   };
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const onCreateClick = handleSubmit(
     trySubmitSafe(async (data: CreateTenantData) => {
-      const { tag } = data;
+      const { tag, instanceId } = data;
       if (tag === TenantTag.Development) {
         await createTenant(data);
         toast.success(t('tenants.create_modal.tenant_created'));
         return;
       }
 
+      // TODO: remove the dev feature guard once the enterprise subscription is ready
+      // Private region production tenant creation
+      if (isDevFeaturesEnabled && instanceId !== publicInstancesDropdownItem.name) {
+        // Directly call the create tenant API instead of going through the plan selection modal.
+        // Based on product design, private region can only have one production tenant plan,
+        // and should not go through the subscription checkout flow,
+        // always associated the new tenant with the existing enterprise subscription of the private region.
+        await createTenant(data);
+        toast.success(t('tenants.create_modal.tenant_created'));
+        return;
+      }
+
       // For production tenants, store creation parameters with the correct regionName for later use after plan selection.
-      setTenantData({ ...data, regionName: getFinalRegionName(data.instanceId, data.regionName) });
+      setTenantData(data);
     })
   );
 
+  const handleInstanceIdChange = useCallback(
+    (
+      nextId: string,
+      onChange: ControllerRenderProps<CreateTenantData, 'instanceId'>['onChange']
+    ) => {
+      onChange(nextId);
+
+      if (nextId === publicInstancesDropdownItem.name && publicRegions[0]) {
+        // Otherwise, reset to the first public region when switching to public instance.
+        setValue('regionName', publicRegions[0].name, { shouldValidate: true, shouldDirty: true });
+      } else {
+        // If switching to a private instance, reset regionName using the instanceId.
+        setValue('regionName', nextId, { shouldValidate: true, shouldDirty: true });
+      }
+    },
+    [publicRegions, setValue]
+  );
+
   return (
     <Modal
       shouldCloseOnOverlayClick
@@ -139,7 +162,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
       className={modalStyles.content}
       overlayClassName={modalStyles.overlay}
       onAfterClose={() => {
-        reset(defaultValues);
+        reset(defaultFormValues);
       }}
       onRequestClose={() => {
         onClose();
@@ -191,18 +214,20 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
                   rules={{ required: true }}
                   render={({ field: { onChange, value } }) => (
                     <InstanceSelector
-                      instances={instanceOptions}
+                      instances={instanceDropdownItems}
                       value={value}
                       isDisabled={isSubmitting}
                       setTenantTagInForm={setTenantTagInForm}
-                      onChange={onChange}
+                      onChange={(nextId) => {
+                        handleInstanceIdChange(nextId, onChange);
+                      }}
                     />
                   )}
                 />
               )}
             </FormField>
           )}
-          {isLogtoInstance && (
+          {isPublicInstanceSelected && (
             <FormField
               title="tenants.settings.tenant_region"
               tip={t('tenants.settings.tenant_region_description')}

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

@@ -86,7 +86,16 @@ export type InstanceDropdownItemProps = Pick<
   'name' | 'country' | 'tags' | 'displayName'
 >;
 
-export const logtoDropdownItem: InstanceDropdownItemProps = {
+/**
+ * The default public Logto instance dropdown item.
+ *
+ * @remarks
+ * This item is a placeholder for the public Logto instance and is used in the instance selection dropdown.
+ *
+ * - When selected, it indicates that the user is choosing the public Logto instance, need to show the public region radio options below.
+ * - When not selected, it indicates that the user is choosing a private instance, need to hide the public region radio options below.
+ */
+export const publicInstancesDropdownItem: InstanceDropdownItemProps = {
   name: 'logto',
   displayName: 'Logto Cloud (Public)',
   country: 'LOGTO',

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

@@ -9,6 +9,7 @@ import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import PageMeta from '@/components/PageMeta';
 import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
@@ -77,8 +78,14 @@ function TenantBasicSettings() {
   );
 
   const onClickDeletionButton = async () => {
+    const isSharedEnterpriseSubscription =
+      // TODO: remove the dev feature guard once the enterprise subscription is ready
+      isDevFeaturesEnabled && currentTenant?.subscription.quotaScope === 'shared';
+
     if (
       !isDevTenant &&
+      // Should allow production tenant deletion of shared enterprise subscription
+      !isSharedEnterpriseSubscription &&
       (currentTenant?.subscription.planId !== ReservedPlanId.Free ||
         currentTenant.openInvoices.length > 0)
     ) {