0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00

feat(experience): auto expand the scopes list (#5291)

feat(experience): auto expend the scopes list

auto expend the scopes list if there is only user scopes or only one resource scopes are being requested
This commit is contained in:
simeng-li 2024-01-25 11:09:54 +08:00 committed by GitHub
parent 6e001f582c
commit 6a9ce098d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -14,6 +14,7 @@ import * as styles from './index.module.scss';
type ScopeGroupProps = {
groupName: string;
isAutoExpand?: boolean;
scopes: Array<{
id: string;
name: string;
@ -21,8 +22,8 @@ type ScopeGroupProps = {
}>;
};
const ScopeGroup = ({ groupName, scopes }: ScopeGroupProps) => {
const [expanded, setExpanded] = useState(false);
const ScopeGroup = ({ groupName, scopes, isAutoExpand = false }: ScopeGroupProps) => {
const [expanded, setExpanded] = useState(isAutoExpand);
const toggle = useCallback(() => {
setExpanded((previous) => !previous);
@ -110,7 +111,12 @@ const ScopesListCard = ({
<div className={styles.title}>{t('description.request_permission', { name: appName })}</div>
<div className={styles.cardWrapper}>
{userScopesData && userScopesData.length > 0 && (
<ScopeGroup groupName="User Scopes" scopes={userScopesData} />
<ScopeGroup
groupName="User Scopes"
scopes={userScopesData}
// If there is no resource scopes, we should auto expand the user scopes
isAutoExpand={!resourceScopes?.length}
/>
)}
{resourceScopes?.map(({ resource, scopes }) => (
<ScopeGroup
@ -121,6 +127,8 @@ const ScopesListCard = ({
: resource.name
}
scopes={scopes}
// If there is no user scopes, we should auto expand the resource scopes
isAutoExpand={!userScopesData?.length && resourceScopes.length === 1}
/>
))}
{showTerms && (