refactor(console): add management api access flag for role options

packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss

@@ -10,9 +10,18 @@
     @include _.text-ellipsis;
   }
 
+  // Todo @xiaoyijun Remove this `count` style together with the dev feature flag
   .count {
     flex-shrink: 0;
     margin-left: _.unit(2);
     color: var(--color-text-secondary);
   }
+
+  .flag {
+    flex-shrink: 0;
+    margin-left: _.unit(2);
+    color: var(--color-text-secondary);
+    display: flex;
+    align-items: center;
+  }
 }

packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx

@@ -1,5 +1,11 @@
-import { RoleType, type RoleResponse } from '@logto/schemas';
+import { RoleType, type ScopeResponse, isManagementApi, type RoleResponse } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import ManagementApiAccessFlag from '@/assets/icons/management-api-access.svg';
+import { isDevFeaturesEnabled } from '@/consts/env';
+import DynamicT from '@/ds-components/DynamicT';
+import { Tooltip } from '@/ds-components/Tip';
 
 import * as styles from './index.module.scss';
 
@@ -9,19 +15,36 @@ type Props = {
 
 function RoleInformation({ role }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { id, name, type, usersCount, applicationsCount } = role;
+  const { data } = useSWR<ScopeResponse[]>(
+    // Todo @xiaoyijun remove dev feature flag
+    isDevFeaturesEnabled && type === RoleType.MachineToMachine && `api/roles/${id}/scopes`
+  );
 
-  const { name, type, usersCount, applicationsCount } = role;
+  const withManagementApiAccess = data?.some(({ resource: { indicator } }) =>
+    isManagementApi(indicator)
+  );
 
   return (
     <div className={styles.container}>
       <div className={styles.name}>{name}</div>
-      <div className={styles.count}>
-        (
-        {type === RoleType.User
-          ? t('user_details.roles.assigned_user_count', { value: usersCount })
-          : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
-        )
-      </div>
+      {!isDevFeaturesEnabled && (
+        <div className={styles.count}>
+          (
+          {type === RoleType.User
+            ? t('user_details.roles.assigned_user_count', { value: usersCount })
+            : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
+          )
+        </div>
+      )}
+      {withManagementApiAccess && (
+        <Tooltip
+          anchorClassName={styles.flag}
+          content={<DynamicT forKey="roles.with_management_api_access_tip" />}
+        >
+          <ManagementApiAccessFlag />
+        </Tooltip>
+      )}
     </div>
   );
 }

packages/console/src/components/RolesTransfer/index.module.scss

@@ -1,3 +1,9 @@
 .rolesTransfer {
   height: 360px;
 }
+
+.flagIcon {
+  color: var(--color-text-secondary);
+  // Align the flag icon with the text bottom to make it look centered visually
+  vertical-align: text-bottom;
+}

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

@@ -1,6 +1,12 @@
-import type { RoleResponse, RoleType } from '@logto/schemas';
+import { type RoleResponse, RoleType } from '@logto/schemas';
 import classNames from 'classnames';
+import { Trans, useTranslation } from 'react-i18next';
 
+import ManagementApiAccessFlag from '@/assets/icons/management-api-access.svg';
+import { isDevFeaturesEnabled } from '@/consts/env';
+import FormField from '@/ds-components/FormField';
+import InlineNotification from '@/ds-components/InlineNotification';
+import useConfigs from '@/hooks/use-configs';
 import * as transferLayout from '@/scss/transfer.module.scss';
 
 import SourceRolesBox from './SourceRolesBox';
@@ -15,11 +21,48 @@ type Props = {
 };
 
 function RolesTransfer({ entityId, type, value, onChange }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const isM2mRole = type === RoleType.MachineToMachine;
+  const { configs, updateConfigs } = useConfigs();
+
+  // Default to true if configs is not loaded to avoid page flickering
+  const notificationAcknowledged = configs
+    ? Boolean(configs.roleWithManagementApiAccessNotificationAcknowledged)
+    : true;
+
   return (
-    <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
-      <SourceRolesBox entityId={entityId} type={type} selectedRoles={value} onChange={onChange} />
-      <div className={transferLayout.verticalBar} />
-      <TargetRolesBox selectedRoles={value} onChange={onChange} />
+    <div>
+      {/* Todo @xiaoyijun remove dev feature flag */}
+      {isDevFeaturesEnabled && isM2mRole && !notificationAcknowledged && (
+        <InlineNotification
+          action="general.got_it"
+          onClick={() => {
+            void updateConfigs({
+              roleWithManagementApiAccessNotificationAcknowledged: true,
+            });
+          }}
+        >
+          <Trans
+            components={{
+              flag: <ManagementApiAccessFlag className={styles.flagIcon} />,
+            }}
+          >
+            {t('roles.management_api_access_notification')}
+          </Trans>
+        </InlineNotification>
+      )}
+      <FormField title={isM2mRole ? 'roles.assign_m2m_roles' : 'roles.assign_user_roles'}>
+        <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
+          <SourceRolesBox
+            entityId={entityId}
+            type={type}
+            selectedRoles={value}
+            onChange={onChange}
+          />
+          <div className={transferLayout.verticalBar} />
+          <TargetRolesBox selectedRoles={value} onChange={onChange} />
+        </div>
+      </FormField>
     </div>
   );
 }

packages/console/src/consts/env.ts

@@ -4,6 +4,5 @@ const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;
 
-// eslint-disable-next-line import/no-unused-modules
 export const isDevFeaturesEnabled =
   !isProduction || yes(process.env.DEV_FEATURES_ENABLED) || yes(process.env.INTEGRATION_TEST);

packages/phrases/src/locales/de/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Rollen',
   placeholder_description:
     'Rollen sind eine Gruppierung von Berechtigungen, die Benutzern zugewiesen werden können. Stellen Sie sicher, dass Sie zuerst Berechtigungen hinzufügen, bevor Sie Rollen erstellen.',
+  assign_user_roles: 'Benutzerrollen zuweisen',
+  assign_m2m_roles: 'Maschinenrollen zuweisen',
+  management_api_access_notification:
+    'Für den Zugriff auf die Logto-Verwaltungs-API wählen Sie Rollen mit Verwaltungs-API-Berechtigungen <flag/> aus.',
+  with_management_api_access_tip:
+    'Diese Maschinenrollen umfassen Berechtigungen für die Logto-Verwaltungs-API',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/en/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Roles',
   placeholder_description:
     'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.',
+  assign_user_roles: 'Assign user roles',
+  assign_m2m_roles: 'Assign machine-to-machine roles',
+  management_api_access_notification:
+    'For Logto Management API access, select roles with management API permissions <flag/>.',
+  with_management_api_access_tip:
+    'This machine-to-machine role includes Logto management API permissions',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/es/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Roles',
   placeholder_description:
     'Los roles son un grupo de permisos que se pueden asignar a los usuarios. Asegúrese de agregar permisos antes de crear roles.',
+  assign_user_roles: 'Asignar roles de usuario',
+  assign_m2m_roles: 'Asignar roles de máquina a máquina',
+  management_api_access_notification:
+    'Para acceder a la API de gestión de Logto, seleccione roles con permisos de API de gestión <flag/>.',
+  with_management_api_access_tip:
+    'Este rol de máquina a máquina incluye permisos para la API de gestión de Logto',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/fr/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Rôles',
   placeholder_description:
     "Les rôles sont un regroupement d'autorisations qui peuvent être assignées aux utilisateurs. Assurez-vous d'ajouter d'abord des autorisations avant de créer des rôles.",
+  assign_user_roles: 'Attribuer des rôles utilisateur',
+  assign_m2m_roles: 'Attribuer des rôles machine à machine',
+  management_api_access_notification:
+    "Pour accéder à l'API de gestion de Logto, sélectionnez des rôles avec les autorisations de l'API de gestion <flag/>.",
+  with_management_api_access_tip:
+    "Ce rôle machine à machine inclut les autorisations de l'API de gestion de Logto",
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/it/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Ruoli',
   placeholder_description:
     'I ruoli sono un raggruppamento di autorizzazioni che possono essere assegnati agli utenti. Assicurati di aggiungere le autorizzazioni prima di creare i ruoli.',
+  assign_user_roles: 'Assegna ruoli utente',
+  assign_m2m_roles: 'Assegna ruoli da macchina a macchina',
+  management_api_access_notification:
+    "Per accedere all'API di gestione di Logto, seleziona ruoli con autorizzazioni API di gestione <flag/>.",
+  with_management_api_access_tip:
+    "Questo ruolo da macchina a macchina include autorizzazioni per l'API di gestione di Logto",
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/ja/translation/admin-console/roles.ts

@@ -31,6 +31,11 @@ const roles = {
   placeholder_title: 'ロール',
   placeholder_description:
     'ロールは、ユーザーに割り当てられる権限のグループです。ロールを作成する前に、まず権限を追加してください。',
+  assign_user_roles: 'ユーザー役割を割り当てる',
+  assign_m2m_roles: 'マシン間役割を割り当てる',
+  management_api_access_notification:
+    'Logto管理APIへのアクセスには、管理API権限を持つ役割を選択してください<flag/>。',
+  with_management_api_access_tip: 'このマシン間役割には、Logto管理APIのアクセス権が含まれています',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/ko/translation/admin-console/roles.ts

@@ -31,6 +31,11 @@ const roles = {
   placeholder_title: '역할',
   placeholder_description:
     '역할은 사용자에게 할당할 수 있는 권한의 모임이에요. 역할을 만들기 전에 먼저 권한을 추가해야 해요.',
+  assign_user_roles: '사용자 역할 할당',
+  assign_m2m_roles: '기계 간 역할 할당',
+  management_api_access_notification:
+    'Logto 관리 API 액세스를 위해 관리 API 권한이있는 역할을 선택하십시오 <flag/>.',
+  with_management_api_access_tip: '이 기계 간 역할에는 Logto 관리 API 권한이 포함되어 있습니다',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/pl-pl/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Role',
   placeholder_description:
     'Role są grupowaniem uprawnień, które mogą być przypisywane użytkownikom. Upewnij się, że najpierw dodasz uprawnienie, zanim utworzysz role.',
+  assign_user_roles: 'Przypisz role użytkownika',
+  assign_m2m_roles: 'Przypisz role od maszyny do maszyny',
+  management_api_access_notification:
+    'Aby uzyskać dostęp do interfejsu API zarządzania Logto, wybierz role z uprawnieniami do interfejsu API zarządzania <flag/>.',
+  with_management_api_access_tip:
+    'Ta rola maszyny do maszyny zawiera uprawnienia do interfejsu API zarządzania Logto',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Funções',
   placeholder_description:
     'As funções são um agrupamento de permissões que podem ser atribuídas a usuários. Certifique-se de adicionar as permissões antes de criar funções.',
+  assign_user_roles: 'Atribuir funções de usuário',
+  assign_m2m_roles: 'Atribuir funções de máquina para máquina',
+  management_api_access_notification:
+    'Para acessar a API de gerenciamento do Logto, selecione funções com permissões de API de gerenciamento <flag/>.',
+  with_management_api_access_tip:
+    'Esta função de máquina para máquina inclui permissões para a API de gerenciamento do Logto',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Papéis',
   placeholder_description:
     'Os papéis são um agrupamento de permissões que podem ser atribuídas a utilizadores. Certifique-se de adicionar permissões antes de criar papéis.',
+  assign_user_roles: 'Atribuir funções de utilizador',
+  assign_m2m_roles: 'Atribuir funções de máquina para máquina',
+  management_api_access_notification:
+    'Para aceder à API de gestão do Logto, selecione funções com permissões de API de gestão <flag/>.',
+  with_management_api_access_tip:
+    'Esta função de máquina para máquina inclui permissões para a API de gestão do Logto',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/ru/translation/admin-console/roles.ts

@@ -31,6 +31,12 @@ const roles = {
   placeholder_title: 'Роли',
   placeholder_description:
     'Роли являются группировкой разрешений, которые могут быть назначены пользователям. Необходимо добавить разрешения, прежде чем создать роли.',
+  assign_user_roles: 'Назначить роли пользователя',
+  assign_m2m_roles: 'Назначить роли от машины к машине',
+  management_api_access_notification:
+    'Для доступа к API управления Logto выберите роли с разрешениями API управления <flag/>.',
+  with_management_api_access_tip:
+    'Эта роль от машины к машине включает разрешения для API управления Logto',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts

@@ -31,6 +31,11 @@ const roles = {
   placeholder_title: 'Roller',
   placeholder_description:
     'Roller, kullanıcılara atanabilecek izinlerin gruplandırmasıdır. Rolleri oluşturmadan önce izin eklediğinizden emin olun.',
+  assign_user_roles: 'Kullanıcı rolleri atayın',
+  assign_m2m_roles: 'Makine ile makine rolleri atayın',
+  management_api_access_notification:
+    'Logto Yönetim API erişimi için yönetim API izinleri olan rolleri seçin <flag/>.',
+  with_management_api_access_tip: 'Bu makine ile makine rolü, Logto yönetim API izinlerini içerir',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts

@@ -29,6 +29,10 @@ const roles = {
   search: '按角色名称、描述或 ID 搜索',
   placeholder_title: '角色',
   placeholder_description: '角色是可以分配给用户的权限分组。在创建角色之前，请确保先添加权限。',
+  assign_user_roles: '分配用户角色',
+  assign_m2m_roles: '分配机器到机器角色',
+  management_api_access_notification: '要访问Logto管理API，请选择具有管理API权限的角色<flag/>。',
+  with_management_api_access_tip: '此机器到机器角色包括Logto管理API权限',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/zh-hk/translation/admin-console/roles.ts

@@ -29,6 +29,10 @@ const roles = {
   search: '按角色名稱、描述或 ID 搜索',
   placeholder_title: '角色',
   placeholder_description: '角色是可以分配給用戶的權限分組。在創建角色之前，請確保先添加權限。',
+  assign_user_roles: '分配使用者角色',
+  assign_m2m_roles: '分配機器對機器角色',
+  management_api_access_notification: '要訪問Logto管理API，請選擇具有管理API權限的角色<flag/>。',
+  with_management_api_access_tip: '此機器對機器角色包含Logto管理API權限',
 };
 
 export default Object.freeze(roles);

packages/phrases/src/locales/zh-tw/translation/admin-console/roles.ts

@@ -29,6 +29,10 @@ const roles = {
   search: '按角色名稱、描述或 ID 搜尋',
   placeholder_title: '角色',
   placeholder_description: '角色是可以分配給使用者的權限分組。在建立角色之前，請確保先新增權限。',
+  assign_user_roles: '分配使用者角色',
+  assign_m2m_roles: '分配機器對機器角色',
+  management_api_access_notification: '要訪問Logto管理API，請選擇具有管理API權限的角色<flag/>。',
+  with_management_api_access_tip: '此機器對機器角色包含Logto管理API權限',
 };
 
 export default Object.freeze(roles);

packages/schemas/src/types/logto-config/index.ts

@@ -108,6 +108,7 @@ export const adminConsoleDataGuard = z.object({
       tenantMember: z.boolean().optional(),
     })
     .optional(),
+  roleWithManagementApiAccessNotificationAcknowledged: z.boolean().optional(),
 });
 
 export type AdminConsoleData = z.infer<typeof adminConsoleDataGuard>;