Merge pull request backstage#27567 from mareklibra/FLPATH-1843.menuIt…

…em.show.unreadCount feat(notifications): show count of unread notifications in the left-side MenuItem
miqdigital · Nov 19, 2024 · bc33ee6 · bc33ee6
2 parents 3cc013d + 1d87c43
commit bc33ee6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/two-beds-bow.md 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
@@ -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 && <Chip size="small" label={count > 99 ? '99+' : count} />}
+      </SidebarItem>
     </>
   );
 };