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.',
},