use NotificationBadge instead of Badge on header

This commit is contained in:
akira6592
2022-08-27 10:33:39 +09:00
parent 78973f845b
commit 9041dc9dcd
2 changed files with 12 additions and 17 deletions

View File

@@ -5,7 +5,6 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { import {
Badge,
Dropdown, Dropdown,
DropdownItem, DropdownItem,
DropdownToggle, DropdownToggle,
@@ -14,12 +13,10 @@ import {
PageHeaderToolsGroup, PageHeaderToolsGroup,
PageHeaderToolsItem, PageHeaderToolsItem,
Tooltip, Tooltip,
NotificationBadge,
NotificationBadgeVariant,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
BellIcon,
QuestionCircleIcon,
UserIcon,
} from '@patternfly/react-icons';
import { WorkflowApprovalsAPI } from 'api'; import { WorkflowApprovalsAPI } from 'api';
import useRequest from 'hooks/useRequest'; import useRequest from 'hooks/useRequest';
import getDocsBaseUrl from 'util/getDocsBaseUrl'; import getDocsBaseUrl from 'util/getDocsBaseUrl';
@@ -33,10 +30,6 @@ const PendingWorkflowApprovals = styled.div`
margin-right: 10px; margin-right: 10px;
`; `;
const PendingWorkflowApprovalBadge = styled(Badge)`
margin-left: 10px;
`;
function PageHeaderToolbar({ function PageHeaderToolbar({
isAboutDisabled, isAboutDisabled,
onAboutClick, onAboutClick,
@@ -84,13 +77,15 @@ function PageHeaderToolbar({
<PageHeaderToolsItem> <PageHeaderToolsItem>
<Link to="/workflow_approvals?workflow_approvals.status=pending"> <Link to="/workflow_approvals?workflow_approvals.status=pending">
<PendingWorkflowApprovals> <PendingWorkflowApprovals>
<BellIcon color="white" /> <NotificationBadge
<PendingWorkflowApprovalBadge
id="toolbar-workflow-approval-badge" id="toolbar-workflow-approval-badge"
isRead={pendingApprovalsCount === 0} count={pendingApprovalsCount}
> variant={
{pendingApprovalsCount} pendingApprovalsCount === 0
</PendingWorkflowApprovalBadge> ? NotificationBadgeVariant.read
: NotificationBadgeVariant.unread
}
/>
</PendingWorkflowApprovals> </PendingWorkflowApprovals>
</Link> </Link>
</PageHeaderToolsItem> </PageHeaderToolsItem>

View File

@@ -80,7 +80,7 @@ describe('PageHeaderToolbar', () => {
}); });
expect( expect(
wrapper.find('Badge#toolbar-workflow-approval-badge').text() wrapper.find('NotificationBadge#toolbar-workflow-approval-badge').text()
).toEqual('20'); ).toEqual('20');
}); });
}); });