diff --git a/.changeset/two-beds-bow.md b/.changeset/two-beds-bow.md new file mode 100644 index 0000000000..1b1c22fc12 --- /dev/null +++ b/.changeset/two-beds-bow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +Show count of unread notifications in the left-side MenuItem. This replaces the simple true/false bullet. diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 22ce11db69..105318564e 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx @@ -45,6 +45,7 @@ import { SeverityIcon } from '../NotificationsTable/SeverityIcon'; import OpenInNew from '@material-ui/icons/OpenInNew'; import MarkAsReadIcon from '@material-ui/icons/CheckCircle'; import IconButton from '@material-ui/core/IconButton'; +import Chip from '@material-ui/core/Chip'; import { styled } from '@material-ui/core/styles'; const StyledMaterialDesignContent = styled(MaterialDesignContent)( @@ -253,7 +254,8 @@ export const NotificationsSidebarItem = (props?: { } }, [titleCounterEnabled, unreadCount, setNotificationCount]); - // TODO: Figure out if the count can be added to hasNotifications + const count = !error && !!unreadCount ? unreadCount : undefined; + return ( <> {snackbarEnabled && ( @@ -277,11 +279,12 @@ export const NotificationsSidebarItem = (props?: { onClick={() => { requestUserPermission(); }} - hasNotifications={!error && !!unreadCount} text={text} icon={icon} {...restProps} - /> + > + {count && 99 ? '99+' : count} />} + ); };