refactor: update @logto/cloud version and update GET /me/regions API use case (#7912)

Author: darcyYe

packages/connectors/connector-logto-email/package.json

@@ -52,7 +52,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-c450763",
+    "@logto/cloud": "0.2.5-af943a1",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/node": "^22.14.0",

packages/console/package.json

@@ -28,7 +28,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@inkeep/cxkit-react": "^0.5.66",
     "@jest/types": "^29.5.0",
-    "@logto/cloud": "0.2.5-c450763",
+    "@logto/cloud": "0.2.5-af943a1",
     "@logto/connector-kit": "workspace:^",
     "@logto/core-kit": "workspace:^",
     "@logto/language-kit": "workspace:^",

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

@@ -10,8 +10,8 @@ import Dropdown, { DropdownItem } from '@/ds-components/Dropdown';
 import styles from './index.module.scss';
 
 type InstanceOption = {
-  id: string;
   name: string;
+  displayName: string;
   country: string;
   tags: TenantTag[];
 };
@@ -37,7 +37,7 @@ function InstanceSelector({
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const selectedInstance = useMemo(
-    () => instances.find((instance) => instance.id === value),
+    () => instances.find((instance) => instance.name === value),
     [instances, value]
   );
 
@@ -58,7 +58,7 @@ function InstanceSelector({
       >
         <div className={styles.selectedContent}>
           <RegionFlag regionName={selectedInstance.country} width={20} />
-          <span className={styles.instanceName}>{selectedInstance.name}</span>
+          <span className={styles.instanceName}>{selectedInstance.displayName}</span>
         </div>
         <CaretDown className={styles.icon} />
       </button>
@@ -73,9 +73,9 @@ function InstanceSelector({
       >
         {instances.map((instance) => (
           <DropdownItem
-            key={instance.id}
+            key={instance.name}
             onClick={() => {
-              onChange(instance.id);
+              onChange(instance.name);
               setIsOpen(false);
               if (instance.tags[0]) {
                 setTenantTagInForm(instance.tags[0]);
@@ -84,11 +84,11 @@ function InstanceSelector({
           >
             <div className={styles.instanceOption}>
               <Tick
-                className={classNames(styles.checkIcon, instance.id === value && styles.visible)}
+                className={classNames(styles.checkIcon, instance.name === value && styles.visible)}
               />
               <RegionFlag regionName={instance.country} width={20} />
-              <span className={classNames(instance.id === value && styles.selectedName)}>
-                {instance.name}
+              <span className={classNames(instance.name === value && styles.selectedName)}>
+                {instance.displayName}
               </span>
             </div>
           </DropdownItem>

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

@@ -1,4 +1,4 @@
-import { type Region as RegionType } from '@logto/cloud/routes';
+import { type RegionResponse as RegionType } from '@logto/cloud/routes';
 import { Theme, TenantTag } from '@logto/schemas';
 import { condArray } from '@silverhand/essentials';
 import { useCallback, useMemo, useState } from 'react';
@@ -48,7 +48,7 @@ const getInstanceDropdownItems = (regions: RegionType[]): InstanceDropdownItemPr
   const hasPublicRegions = regions.some(({ isPrivate }) => !isPrivate);
   const privateInstances = regions
     .filter(({ isPrivate }) => isPrivate)
-    .map(({ id, name, country, tags }) => ({ id, name, country, tags }));
+    .map(({ id, name, country, tags, displayName }) => ({ id, name, country, tags, displayName }));
 
   return condArray(hasPublicRegions && logtoDropdownItem, ...privateInstances);
 };
@@ -62,7 +62,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
 
   const defaultValues = Object.freeze({
     tag: TenantTag.Development,
-    instanceId: logtoDropdownItem.id,
+    instanceId: logtoDropdownItem.name,
     regionName: defaultRegionName,
   });
   const methods = useForm<CreateTenantData>({
@@ -95,7 +95,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
     [regions]
   );
 
-  const isLogtoInstance = instanceId === logtoDropdownItem.id;
+  const isLogtoInstance = instanceId === logtoDropdownItem.name;
 
   const currentRegion = useMemo(() => {
     if (isDevFeaturesEnabled) {
@@ -106,7 +106,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
       return getRegionById(regionName);
     }
     // For private instances, find the region that matches the instance
-    return regions?.find((region) => region.id === instanceId);
+    return regions?.find((region) => region.name === instanceId);
   }, [isLogtoInstance, regionName, instanceId, getRegionById, regions]);
 
   const getFinalRegionName = useCallback(
@@ -205,13 +205,13 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
                     <RadioGroup type="plain" name={name} value={value} onChange={onChange}>
                       {regions.map((region) => (
                         <Radio
-                          key={region.id}
+                          key={region.name}
                           title={
                             <DangerousRaw>
                               <Region region={region} />
                             </DangerousRaw>
                           }
-                          value={region.id}
+                          value={region.name}
                           isDisabled={isSubmitting}
                         />
                       ))}
@@ -264,13 +264,13 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
                     <RadioGroup type="small" name={name} value={value} onChange={onChange}>
                       {publicRegions.map((region) => (
                         <Radio
-                          key={region.id}
+                          key={region.name}
                           title={
                             <DangerousRaw>
                               <Region region={region} />
                             </DangerousRaw>
                           }
-                          value={region.id}
+                          value={region.name}
                           isDisabled={isSubmitting}
                         />
                       ))}

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

@@ -1,4 +1,4 @@
-import { type PublicRegionName, type Region as RegionType } from '@logto/cloud/routes';
+import { type PublicRegionName, type RegionResponse as RegionType } from '@logto/cloud/routes';
 import { TenantTag } from '@logto/schemas';
 import classNames from 'classnames';
 import { useMemo, type FunctionComponent } from 'react';
@@ -81,11 +81,14 @@ export function StaticRegion({ isComingSoon = false, regionName, className }: St
   );
 }
 
-export type InstanceDropdownItemProps = Pick<RegionType, 'id' | 'name' | 'country' | 'tags'>;
+export type InstanceDropdownItemProps = Pick<
+  RegionType,
+  'name' | 'country' | 'tags' | 'displayName'
+>;
 
 export const logtoDropdownItem: InstanceDropdownItemProps = {
-  id: 'logto',
-  name: 'Logto Cloud (Public)',
+  name: 'logto',
+  displayName: 'Logto Cloud (Public)',
   country: 'LOGTO',
   tags: Object.values(TenantTag),
 };
@@ -98,8 +101,8 @@ type Props = {
 function Region({ region, className }: Props) {
   return (
     <span className={classNames(styles.wrapper, className)}>
-      <RegionFlag regionName={region.id} />
-      <span>{region.name}</span>
+      <RegionFlag regionName={region.name} />
+      <span>{region.displayName}</span>
     </span>
   );
 }

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

@@ -1,4 +1,4 @@
-import { type Region as RegionType } from '@logto/cloud/routes';
+import { type RegionResponse as RegionType } from '@logto/cloud/routes';
 import { useCallback } from 'react';
 import useSWRImmutable from 'swr/immutable';
 
@@ -21,7 +21,7 @@ const useAvailableRegions = () => {
     }
   );
   const getRegionById = useCallback(
-    (id: string) => regions?.find((region) => region.id === id),
+    (id: string) => regions?.find((region) => region.name === id),
     [regions]
   );
 

packages/core/package.json

@@ -101,7 +101,7 @@
     "zod": "3.24.3"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-c450763",
+    "@logto/cloud": "0.2.5-af943a1",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/adm-zip": "^0.5.5",

packages/core/src/__mocks__/cloud-connection.ts

@@ -3,6 +3,22 @@ import { ReservedPlanId } from '@logto/schemas';
 import { type CloudConnectionLibrary } from '#src/libraries/cloud-connection.js';
 import { type Subscription } from '#src/utils/subscription/types.js';
 
+const defaultSystemLimit: Subscription['systemLimit'] = {
+  applicationsLimit: 100,
+  machineToMachineLimit: 20,
+  thirdPartyApplicationsLimit: 20,
+  samlApplicationsLimit: 20,
+  resourcesLimit: 100,
+  scopesPerResourceLimit: 100,
+  socialConnectorsLimit: 20,
+  enterpriseSsoLimit: 100,
+  userRolesLimit: 1000,
+  machineToMachineRolesLimit: 100,
+  organizationsLimit: 100_000,
+  hooksLimit: 10,
+  tenantMembersLimit: 100,
+};
+
 export const mockGetCloudConnectionData: CloudConnectionLibrary['getCloudConnectionData'] =
   async () => ({
     resource: 'https://logto.dev',
@@ -49,4 +65,5 @@ export const mockSubscriptionData: Subscription = {
   isEnterprisePlan: false,
   quota: mockQuota,
   status: 'active',
+  systemLimit: defaultSystemLimit,
 };

packages/core/src/utils/subscription/types.ts

@@ -11,6 +11,10 @@ type RouteResponseType<T extends { search?: unknown; body?: unknown; response?:
 type RouteRequestBodyType<T extends { search?: unknown; body?: ZodType; response?: unknown }> =
   z.infer<NonNullable<T['body']>>;
 
+type OmitBooleanValueKeys<T> = Omit<
+  T,
+  { [K in keyof T]: T[K] extends boolean ? K : never }[keyof T]
+>;
 /**
  * The subscription data is fetched from the Cloud API.
  * All the dates are in ISO 8601 format, we need to manually fix the type to string here.
@@ -110,6 +114,45 @@ const logtoSkuQuotaGuard = z.object({
   securityFeaturesEnabled: z.boolean(),
 }) satisfies ToZodObject<SubscriptionQuota>;
 
+const systemLimitGuard = (
+  logtoSkuQuotaGuard
+    .extend({
+      usersPerOrganizationLimit: z.number().nullable(),
+      organizationUserRolesLimit: z.number().nullable(),
+      organizationMachineToMachineRolesLimit: z.number().nullable(),
+      organizationScopesLimit: z.number().nullable(),
+    })
+    .omit({
+      /**
+       * MAU and token limits are not enforced as system limits.
+       * Usage will be monitored and reported through a separate metering mechanism.
+       */
+      mauLimit: true,
+      tokenLimit: true,
+      auditLogsRetentionDays: true,
+      customJwtEnabled: true,
+      subjectTokenEnabled: true,
+      bringYourUiEnabled: true,
+      collectUserProfileEnabled: true,
+      mfaEnabled: true,
+      organizationsEnabled: true,
+      securityFeaturesEnabled: true,
+      idpInitiatedSsoEnabled: true,
+    }) satisfies ToZodObject<
+    Omit<
+      OmitBooleanValueKeys<z.infer<typeof logtoSkuQuotaGuard>>,
+      'mauLimit' | 'tokenLimit' | 'auditLogsRetentionDays'
+    > & {
+      /* eslint-disable @typescript-eslint/ban-types */
+      usersPerOrganizationLimit: number | null;
+      organizationUserRolesLimit: number | null;
+      organizationMachineToMachineRolesLimit: number | null;
+      organizationScopesLimit: number | null;
+      /* eslint-enable @typescript-eslint/ban-types */
+    }
+  >
+).partial();
+
 /**
  * Redis cache guard for the subscription data returned from the Cloud API `/api/tenants/my/subscription`.
  * Logto core does not have access to the zod guard of the subscription data in Cloud,
@@ -125,4 +168,5 @@ export const subscriptionCacheGuard = z.object({
   status: subscriptionStatusGuard,
   upcomingInvoice: upcomingInvoiceGuard.nullable().optional(),
   quota: logtoSkuQuotaGuard,
+  systemLimit: systemLimitGuard.optional(),
 }) satisfies ToZodObject<Subscription>;