0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

feat(console): add the user permission tooltips (#5305)

add the user permission tooltips
This commit is contained in:
simeng-li 2024-01-25 15:54:56 +08:00 committed by GitHub
parent 820158706b
commit e8e57a410f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 70 additions and 7 deletions

View file

@ -49,10 +49,6 @@
.trailingIcon {
display: flex;
align-items: center;
&:not(:first-child) {
margin-left: _.unit(2);
}
}
&.small {

View file

@ -13,3 +13,9 @@
padding-bottom: _.unit(2);
}
}
.label {
display: flex;
gap: _.unit(1);
align-items: center;
}

View file

@ -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: (
<div className={styles.label}>
{t('application_details.permissions.user_permissions')}
<ToggleTip
content={t('application_details.permissions.user_data_permission_description_tips')}
>
<IconButton size="small">
<Tip />
</IconButton>
</ToggleTip>
</div>
),
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 */

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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