From 1d87c431f8947386d94ac83852ca77a73b6d6273 Mon Sep 17 00:00:00 2001
From: Marek Libra <marek.libra@gmail.com>
Date: Sat, 9 Nov 2024 18:39:02 +0200
Subject: [PATCH] feat(notifications): show count of unread notifications in
 the left-side MenuItem

Signed-off-by: Marek Libra <marek.libra@gmail.com>
---
 .changeset/two-beds-bow.md                               | 5 +++++
 .../NotificationsSideBarItem.tsx                         | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/two-beds-bow.md

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 && <Chip size="small" label={count > 99 ? '99+' : count} />}
+      </SidebarItem>
     </>
   );
 };