fix(console): hide add-on usage keys from downgrade modal (#7728)

hide add-on and deprecated keys from the downgrade modal

Author: simeng-li

packages/console/src/consts/plan-quotas.ts

@@ -40,3 +40,17 @@ export const skuQuotaItemOrder: Array<keyof LogtoSkuQuota> = [
 ];
 
 export const comingSoonSkuQuotaKeys: Array<keyof LogtoSkuQuota> = [];
+
+/**
+ * Quota keys that are hidden in the subscription downgrade notification modal.
+ *
+ * @remarks We hide the following quota keys from the downgrade notification modal
+ * because they are either add-on features or their quotas vary based on the current plan.
+ */
+export const hiddenQuotaDiffUsageKeys: Array<keyof LogtoSkuQuota> = [
+  'tokenLimit',
+  'scopesPerResourceLimit',
+  'userRolesLimit',
+  'machineToMachineRolesLimit',
+  'scopesPerRoleLimit',
+];

packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/index.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import { type LogtoSkuResponse } from '@/cloud/types/router';
 import SkuName from '@/components/SkuName';
-import { comingSoonSkuQuotaKeys } from '@/consts/plan-quotas';
+import { comingSoonSkuQuotaKeys, hiddenQuotaDiffUsageKeys } from '@/consts/plan-quotas';
 import { type LogtoSkuQuota, type LogtoSkuQuotaEntries } from '@/types/skus';
 
 import PlanQuotaDiffCard from './PlanQuotaDiffCard';
@@ -15,24 +15,31 @@ type Props = {
   readonly targetSku: LogtoSkuResponse;
 };
 
-const excludeSkuComingSoonFeatures = (
-  quotaDiff: Partial<LogtoSkuQuota>
-): Partial<LogtoSkuQuota> => {
+/**
+ * Exclude the quota items that are hidden in the downgrade plan notification modal.
+ * - Coming soon features
+ * - Add-on/legacy features whose quotas vary based on the current plan
+ */
+const excludeHiddenUsages = (quotaDiff: Partial<LogtoSkuQuota>): Partial<LogtoSkuQuota> => {
   // eslint-disable-next-line no-restricted-syntax
   const entries = Object.entries(quotaDiff) as LogtoSkuQuotaEntries;
-  return Object.fromEntries(entries.filter(([key]) => !comingSoonSkuQuotaKeys.includes(key)));
+  return Object.fromEntries(
+    entries.filter(
+      ([key]) => !comingSoonSkuQuotaKeys.includes(key) && !hiddenQuotaDiffUsageKeys.includes(key)
+    )
+  );
 };
 
 function DowngradeConfirmModalContent({ currentSku, targetSku }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const currentSkuQuotaDiff = useMemo(
-    () => excludeSkuComingSoonFeatures(diff(targetSku.quota, currentSku.quota)),
+    () => excludeHiddenUsages(diff(targetSku.quota, currentSku.quota)),
     [targetSku.quota, currentSku.quota]
   );
 
   const targetSkuQuotaDiff = useMemo(
-    () => excludeSkuComingSoonFeatures(diff(currentSku.quota, targetSku.quota)),
+    () => excludeHiddenUsages(diff(currentSku.quota, targetSku.quota)),
     [targetSku.quota, currentSku.quota]
   );