diff --git a/packages/console/src/components/Region/index.tsx b/packages/console/src/components/Region/index.tsx index 50f2dd8cb..c79c93e50 100644 --- a/packages/console/src/components/Region/index.tsx +++ b/packages/console/src/components/Region/index.tsx @@ -14,13 +14,13 @@ export enum RegionName { AU = 'AU', } -const regionDisplayNameMap = Object.freeze({ +export const regionDisplayNameMap = Object.freeze({ [RegionName.EU]: 'Europe', [RegionName.US]: 'West US', [RegionName.AU]: 'Australia', } satisfies Record); -const regionFlagMap = Object.freeze({ +export const regionFlagMap = Object.freeze({ [RegionName.EU]: euFlag, [RegionName.US]: usFlag, [RegionName.AU]: auFlag, diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss index 13e38b54b..0104b859d 100644 --- a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss +++ b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss @@ -40,12 +40,37 @@ } } - .planName { + .metadata { margin-top: _.unit(0.5); font: var(--font-body-3); color: var(--color-text-secondary); // Keep the height of the item consistent when the plan name is loading min-height: 16px; + display: flex; + align-items: center; + justify-content: start; + flex-wrap: nowrap; + gap: _.unit(3); + + .region { + display: flex; + gap: _.unit(1); + align-items: center; + } + + > * { + position: relative; + } + + > *:not(:last-child)::after { + content: ''; + height: 10px; + border-right: 1px solid var(--color-divider); + position: absolute; + inset-inline-end: _.unit(-1.5); + top: 50%; + transform: translateY(-50%); + } } } diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx index 717439731..e9286634c 100644 --- a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx +++ b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx @@ -1,14 +1,14 @@ import { TenantTag } from '@logto/schemas'; import classNames from 'classnames'; import { useContext, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import Tick from '@/assets/icons/tick.svg?react'; import { type TenantResponse } from '@/cloud/types/router'; +import { regionFlagMap } from '@/components/Region'; import SkuName from '@/components/SkuName'; -import TenantEnvTag from '@/components/TenantEnvTag'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import { DropdownItem } from '@/ds-components/Dropdown'; -import DynamicT from '@/ds-components/DynamicT'; import TenantStatusTag from './TenantStatusTag'; import styles from './index.module.scss'; @@ -23,8 +23,10 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { const { name, tag, + regionName, subscription: { planId, isEnterprisePlan }, } = tenantData; + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { logtoSkus } = useContext(SubscriptionDataContext); const tenantSubscriptionSku = useMemo( @@ -36,18 +38,22 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { return null; } + const RegionFlag = regionFlagMap[regionName]; + return (
{name}
-
-
- {tag === TenantTag.Development ? ( - - ) : ( +
+
+ + {regionName} +
+ {t(`tenants.full_env_tag.${tag}`)} + {tag !== TenantTag.Development && ( )}
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.module.scss b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.module.scss index 4b10f0e42..315a25503 100644 --- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.module.scss +++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.module.scss @@ -7,6 +7,7 @@ } .region { + justify-content: start; font: var(--font-label-1); } 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 6e9455c43..5ff03e918 100644 --- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import Region from '@/components/Region'; +import Region, { regionDisplayNameMap } from '@/components/Region'; import { trustAndSecurityLink } from '@/consts'; import { TenantsContext } from '@/contexts/TenantsProvider'; import TextLink from '@/ds-components/TextLink'; @@ -26,7 +26,7 @@ function TenantRegion() { a: , }} > - {t('tenants.settings.tenant_region_tip', { region: regionName })} + {t('tenants.settings.tenant_region_tip', { region: regionDisplayNameMap[regionName] })}