From bdaf6d47cd745f209cf11bd700df44f66477ecb9 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Tue, 28 May 2024 16:45:01 +0800
Subject: [PATCH] refactor(console): show dynamic region info in tenant
 settings

---
 .../ProfileForm/TenantRegion/index.tsx            | 15 +++++++++++----
 .../TenantSettings/TenantBasicSettings/index.tsx  | 13 +++----------
 .../TenantSettings/TenantBasicSettings/types.ts   |  6 +++++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx
index c546895b7..516614447 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx
@@ -1,25 +1,32 @@
+import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import Region, { RegionName } from '@/components/Region';
+import Region from '@/components/Region';
 import { trustAndSecurityLink } from '@/consts';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import TextLink from '@/ds-components/TextLink';
 
 import * as styles from './index.module.scss';
 
 function TenantRegion() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { currentTenant } = useContext(TenantsContext);
+  const regionName = currentTenant?.regionName;
+
+  if (!regionName) {
+    return null;
+  }
 
   return (
     <div className={styles.container}>
-      {/* TODO: Read the value from the tenant */}
-      <Region className={styles.region} regionName={RegionName.EU} />
+      <Region className={styles.region} regionName={regionName} />
       <div className={styles.regionTip}>
         <Trans
           components={{
             a: <TextLink targetBlank="noopener" href={trustAndSecurityLink} />,
           }}
         >
-          {t('tenants.settings.tenant_region_tip', { region: 'EU' })}
+          {t('tenants.settings.tenant_region_tip', { region: regionName })}
         </Trans>
       </div>
     </div>
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx
index 894cd4e6a..13c3019ef 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx
@@ -1,4 +1,4 @@
-import { ReservedPlanId, TenantTag } from '@logto/schemas';
+import { ReservedPlanId, type TenantTag } from '@logto/schemas';
 import classNames from 'classnames';
 import { useContext, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -6,7 +6,6 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
-import { type TenantResponse } from '@/cloud/types/router';
 import PageMeta from '@/components/PageMeta';
 import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
@@ -22,12 +21,6 @@ import ProfileForm from './ProfileForm';
 import * as styles from './index.module.scss';
 import { type TenantSettingsForm } from './types.js';
 
-const tenantProfileToForm = (tenant?: TenantResponse): TenantSettingsForm => {
-  return {
-    profile: { name: tenant?.name ?? 'My project', tag: tenant?.tag ?? TenantTag.Development },
-  };
-};
-
 function TenantBasicSettings() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
@@ -47,7 +40,7 @@ function TenantBasicSettings() {
   const { show: showModal } = useConfirmModal();
 
   const methods = useForm<TenantSettingsForm>({
-    defaultValues: tenantProfileToForm(currentTenant),
+    defaultValues: { profile: currentTenant },
   });
   const {
     watch,
@@ -57,7 +50,7 @@ function TenantBasicSettings() {
   } = methods;
 
   useEffect(() => {
-    reset(tenantProfileToForm(currentTenant));
+    reset({ profile: currentTenant });
   }, [currentTenant, reset]);
 
   const saveData = async (data: { name?: string; tag?: TenantTag }) => {
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/types.ts b/packages/console/src/pages/TenantSettings/TenantBasicSettings/types.ts
index ac8279df0..9fea27edc 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/types.ts
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/types.ts
@@ -1,5 +1,9 @@
 import { type TenantModel } from '@logto/schemas/models';
 
+import { type RegionName } from '@/components/Region';
+
 export type TenantSettingsForm = {
-  profile: Pick<TenantModel, 'name' | 'tag'>;
+  profile: Pick<TenantModel, 'name' | 'tag'> & {
+    regionName: RegionName;
+  };
 };