diff --git a/packages/console/src/ds-components/Button/index.module.scss b/packages/console/src/ds-components/Button/index.module.scss index 87dc6aef2..5837a35ec 100644 --- a/packages/console/src/ds-components/Button/index.module.scss +++ b/packages/console/src/ds-components/Button/index.module.scss @@ -49,10 +49,6 @@ .trailingIcon { display: flex; align-items: center; - - &:not(:first-child) { - margin-left: _.unit(2); - } } &.small { diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.module.scss index 3f5f8045f..95ca3bed0 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.module.scss +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/index.module.scss @@ -13,3 +13,9 @@ padding-bottom: _.unit(2); } } + +.label { + display: flex; + gap: _.unit(1); + align-items: center; +} diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.tsx similarity index 83% rename from packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts rename to packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.tsx index 985dde581..3c7c63188 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.ts +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/use-scopes-table.tsx @@ -1,10 +1,15 @@ +/* eslint-disable consistent-default-export-name/default-export-match-filename */ +// We need to return a ReactNode property in the parseRowGroup function import { type ApplicationUserConsentScopesResponse, ApplicationUserConsentScopeType, } from '@logto/schemas'; -import { useCallback } from 'react'; +import { useCallback, type ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; +import Tip from '@/assets/icons/tip.svg'; +import IconButton from '@/ds-components/IconButton'; +import { ToggleTip } from '@/ds-components/Tip'; import useApi from '@/hooks/use-api'; import * as styles from './index.module.scss'; @@ -34,7 +39,7 @@ export type ScopesTableRowDataType = type ScopesTableRowGroupType = { key: string; - label: string; + label: string | ReactNode; labelRowClassName?: string; data: ScopesTableRowDataType[]; }; @@ -58,7 +63,18 @@ const useScopesTable = () => { const userScopesGroup: ScopesTableRowGroupType = { key: ApplicationUserConsentScopeType.UserScopes, - label: t('application_details.permissions.user_permissions'), + label: ( +
+ {t('application_details.permissions.user_permissions')} + + + + + +
+ ), labelRowClassName: styles.sectionTitleRow, data: userScopes.map((scope) => ({ type: ApplicationUserConsentScopeType.UserScopes, @@ -145,3 +161,4 @@ const useScopesTable = () => { }; export default useScopesTable; +/* eslint-enable consistent-default-export-name/default-export-match-filename */ diff --git a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts index 6786c2ded..6be5579d3 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts index 490cdf428..0c91f701b 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts @@ -119,6 +119,8 @@ const application_details = { user_permissions_assignment_form_title: 'Add the user profile permissions', organization_permissions_assignment_form_title: 'Add the organization permissions', api_resource_permissions_assignment_form_title: 'Add the API resource permissions', + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts index 77118131b..9fa3f142b 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts index ac75a37d0..3ab495136 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts index 4f4c79811..213554409 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts index 8997ae859..b8473208b 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts index b9a83785b..8ba226ad7 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts index da0f18efd..401d5f214 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts index e5bd89fc1..431a77c5b 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts index db3faebb7..0cd0f5316 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts index 8f3e88ea3..12c0f2219 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts index 0538a04ca..c12366744 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts @@ -170,6 +170,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts index 4b1bf96d0..c826d4433 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts @@ -167,6 +167,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts index 48c844c96..c259dd39c 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts @@ -167,6 +167,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', }, diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts index e195ca43a..9e48efaa5 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts @@ -168,6 +168,9 @@ const application_details = { /** UNTRANSLATED */ api_resource_permissions_assignment_form_title: 'Add the API resource permissions', /** UNTRANSLATED */ + user_data_permission_description_tips: + 'You can modify the description of the personal user data permissions via "Sign-in Experience > Content > Manage Language"', + /** UNTRANSLATED */ permission_description_tips: 'When Logto is used as an Identity Provider (IdP) for authentication in third-party apps, and users are asked for authorization, this description appears on the consent screen.', },