Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): hide the selected count on tab (#5284)

Browse source 
hide the selected scopes cound on tab if it is 0
This commit is contained in:
simeng-li 2024-01-24 10:43:10 +08:00 committed by GitHub
parent 8ec4efe1b9
commit e86aab2a5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/ApplicationScopesAssignmentModal/index.tsx
View file

@ -1,6 +1,6 @@
import { type AdminConsoleKey } from '@logto/phrases';
import { ApplicationUserConsentScopeType } from '@logto/schemas';
import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import ConfirmModal from '@/ds-components/ConfirmModal';
@ -45,6 +45,26 @@ function ApplicationScopesAssignmentModal({ isOpen, onClose, applicationId }: Pr
({ selectedData }) => selectedData.length > 0
);
const tabs = useMemo(
() =>
Object.values(permissionTabs).map(({ title, key }) => {
const selectedDataCount = scopesAssignment[key].selectedData.length;
return (
<TabNavItem
key={key}
isActive={key === activeTab}
onClick={() => {
setActiveTab(key);
}}
>
{`${t(title)}${selectedDataCount ? ` (${selectedDataCount})` : ''}`}
</TabNavItem>
);
}),
[activeTab, scopesAssignment, setActiveTab, t]
);
return (
<ConfirmModal
isOpen={isOpen}
@ -59,19 +79,7 @@ function ApplicationScopesAssignmentModal({ isOpen, onClose, applicationId }: Pr
onCancel={onCloseHandler}
onConfirm={onSubmitHandler}
>
<TabNav>
{Object.values(permissionTabs).map(({ title, key }) => (
<TabNavItem
key={key}
isActive={key === activeTab}
onClick={() => {
setActiveTab(key);
}}
>
{`${t(title)}(${scopesAssignment[key].selectedData.length})`}
</TabNavItem>
))}
</TabNav>
<TabNav>{tabs}</TabNav>
<TabWrapper
key={ApplicationUserConsentScopeType.UserScopes}
isActive={ApplicationUserConsentScopeType.UserScopes === activeTab}