From 20bf55be300efcb19856d9c4d240fc72b51f54eb Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Mon, 27 May 2024 11:26:25 +0800 Subject: [PATCH] refactor(console): add management api access flag for role options (#5918) --- .../assets/icons/management-api-access.svg | 3 + .../RoleInformation/index.module.scss | 9 +++ .../components/RoleInformation/index.tsx | 41 ++++++++++--- .../RolesTransfer/index.module.scss | 6 ++ .../src/components/RolesTransfer/index.tsx | 57 +++++++++++++++++-- packages/console/src/consts/env.ts | 1 - .../console/src/hooks/use-user-preferences.ts | 1 + .../de/translation/admin-console/roles.ts | 6 ++ .../en/translation/admin-console/roles.ts | 6 ++ .../es/translation/admin-console/roles.ts | 6 ++ .../fr/translation/admin-console/roles.ts | 6 ++ .../it/translation/admin-console/roles.ts | 6 ++ .../ja/translation/admin-console/roles.ts | 5 ++ .../ko/translation/admin-console/roles.ts | 5 ++ .../pl-pl/translation/admin-console/roles.ts | 6 ++ .../pt-br/translation/admin-console/roles.ts | 6 ++ .../pt-pt/translation/admin-console/roles.ts | 6 ++ .../ru/translation/admin-console/roles.ts | 6 ++ .../tr-tr/translation/admin-console/roles.ts | 5 ++ .../zh-cn/translation/admin-console/roles.ts | 4 ++ .../zh-hk/translation/admin-console/roles.ts | 4 ++ .../zh-tw/translation/admin-console/roles.ts | 4 ++ 22 files changed, 184 insertions(+), 15 deletions(-) create mode 100644 packages/console/src/assets/icons/management-api-access.svg diff --git a/packages/console/src/assets/icons/management-api-access.svg b/packages/console/src/assets/icons/management-api-access.svg new file mode 100644 index 000000000..b6543b7e6 --- /dev/null +++ b/packages/console/src/assets/icons/management-api-access.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss index 302476dab..1ddd688fa 100644 --- a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss +++ b/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; + } } diff --git a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx index d06327421..52b18d26f 100644 --- a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx +++ b/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( + // Todo @xiaoyijun remove dev feature flag + isDevFeaturesEnabled && type === RoleType.MachineToMachine && `api/roles/${id}/scopes` + ); - const { name, type, usersCount, applicationsCount } = role; + const withManagementApiFlag = data?.some(({ resource: { indicator } }) => + isManagementApi(indicator) + ); return (
{name}
-
- ( - {type === RoleType.User - ? t('user_details.roles.assigned_user_count', { value: usersCount }) - : t('application_details.roles.assigned_app_count', { value: applicationsCount })} - ) -
+ {!isDevFeaturesEnabled && ( +
+ ( + {type === RoleType.User + ? t('user_details.roles.assigned_user_count', { value: usersCount }) + : t('application_details.roles.assigned_app_count', { value: applicationsCount })} + ) +
+ )} + {withManagementApiFlag && ( + } + > + + + )}
); } diff --git a/packages/console/src/components/RolesTransfer/index.module.scss b/packages/console/src/components/RolesTransfer/index.module.scss index 33692371a..bc4853723 100644 --- a/packages/console/src/components/RolesTransfer/index.module.scss +++ b/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; +} diff --git a/packages/console/src/components/RolesTransfer/index.tsx b/packages/console/src/components/RolesTransfer/index.tsx index 0710af9ea..67773a047 100644 --- a/packages/console/src/components/RolesTransfer/index.tsx +++ b/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 useUserPreferences from '@/hooks/use-user-preferences'; import * as transferLayout from '@/scss/transfer.module.scss'; import SourceRolesBox from './SourceRolesBox'; @@ -15,11 +21,52 @@ type Props = { }; function RolesTransfer({ entityId, type, value, onChange }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const isM2mRole = type === RoleType.MachineToMachine; + const { + data: { roleWithManagementApiAccessNotificationAcknowledged }, + update, + isLoaded, + } = useUserPreferences(); + + // Default to true if configs is not loaded to avoid page flickering + const notificationAcknowledged = isLoaded + ? Boolean(roleWithManagementApiAccessNotificationAcknowledged) + : true; + return ( -
- -
- +
+ {/* Todo @xiaoyijun remove dev feature flag */} + {isDevFeaturesEnabled && isM2mRole && !notificationAcknowledged && ( + { + void update({ + roleWithManagementApiAccessNotificationAcknowledged: true, + }); + }} + > + , + }} + > + {t('roles.management_api_access_notification')} + + + )} + +
+ +
+ +
+
); } diff --git a/packages/console/src/consts/env.ts b/packages/console/src/consts/env.ts index b49e6b6f7..888eb2d73 100644 --- a/packages/console/src/consts/env.ts +++ b/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); diff --git a/packages/console/src/hooks/use-user-preferences.ts b/packages/console/src/hooks/use-user-preferences.ts index 1119d58ae..2107403c5 100644 --- a/packages/console/src/hooks/use-user-preferences.ts +++ b/packages/console/src/hooks/use-user-preferences.ts @@ -17,6 +17,7 @@ const userPreferencesGuard = z.object({ experienceNoticeConfirmed: z.boolean().optional(), connectorSieNoticeConfirmed: z.boolean().optional(), managementApiAcknowledged: z.boolean().optional(), + roleWithManagementApiAccessNotificationAcknowledged: z.boolean().optional(), }); type UserPreferences = z.infer; diff --git a/packages/phrases/src/locales/de/translation/admin-console/roles.ts b/packages/phrases/src/locales/de/translation/admin-console/roles.ts index adca6a6b4..a5bc7ab94 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/roles.ts +++ b/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 aus.', + with_management_api_access_tip: + 'Diese Maschinenrollen umfassen Berechtigungen für die Logto-Verwaltungs-API', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/en/translation/admin-console/roles.ts b/packages/phrases/src/locales/en/translation/admin-console/roles.ts index c9dbc40a0..a421f3784 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/roles.ts +++ b/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 .', + with_management_api_access_tip: + 'This machine-to-machine role includes Logto management API permissions', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/es/translation/admin-console/roles.ts b/packages/phrases/src/locales/es/translation/admin-console/roles.ts index c14bd153f..dfc811506 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/roles.ts +++ b/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 .', + 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); diff --git a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts index 1aafa55d6..d4f588abf 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts +++ b/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 .", + 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); diff --git a/packages/phrases/src/locales/it/translation/admin-console/roles.ts b/packages/phrases/src/locales/it/translation/admin-console/roles.ts index aa04216a6..20a2eda6e 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/roles.ts +++ b/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 .", + 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); diff --git a/packages/phrases/src/locales/ja/translation/admin-console/roles.ts b/packages/phrases/src/locales/ja/translation/admin-console/roles.ts index 9a54eee03..8eeb7ad94 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/roles.ts +++ b/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権限を持つ役割を選択してください。', + with_management_api_access_tip: 'このマシン間役割には、Logto管理APIのアクセス権が含まれています', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts index 4775fd99d..e13efd174 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts +++ b/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 권한이있는 역할을 선택하십시오 .', + with_management_api_access_tip: '이 기계 간 역할에는 Logto 관리 API 권한이 포함되어 있습니다', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/roles.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/roles.ts index ed682115a..2d1444dd1 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/roles.ts +++ b/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 .', + with_management_api_access_tip: + 'Ta rola maszyny do maszyny zawiera uprawnienia do interfejsu API zarządzania Logto', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts index a4c9383ff..a0134f704 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts +++ b/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 .', + 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); diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts index 4ab300ca9..c160745ab 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts +++ b/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 .', + 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); diff --git a/packages/phrases/src/locales/ru/translation/admin-console/roles.ts b/packages/phrases/src/locales/ru/translation/admin-console/roles.ts index e23887560..676922fc7 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/roles.ts +++ b/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 управления .', + with_management_api_access_tip: + 'Эта роль от машины к машине включает разрешения для API управления Logto', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts index 6945092eb..abee3801b 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts +++ b/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 .', + with_management_api_access_tip: 'Bu makine ile makine rolü, Logto yönetim API izinlerini içerir', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts index 8dcefe562..13bce8ece 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts +++ b/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权限的角色。', + with_management_api_access_tip: '此机器到机器角色包括Logto管理API权限', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/roles.ts index 9327f74ee..8aef59f09 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/roles.ts +++ b/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權限的角色。', + with_management_api_access_tip: '此機器對機器角色包含Logto管理API權限', }; export default Object.freeze(roles); diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/roles.ts index ca2e4d1e3..f676832c5 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/roles.ts +++ b/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權限的角色。', + with_management_api_access_tip: '此機器對機器角色包含Logto管理API權限', }; export default Object.freeze(roles);