mirror of
https://github.com/ansible/awx.git
synced 2026-03-05 10:41:05 -03:30
use NotificationBadge instead of Badge on header
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user