From f793112df9c0ebbef910d63692e033c467a42551 Mon Sep 17 00:00:00 2001
From: Heikki Hellgren <heikki.hellgren@op.fi>
Date: Thu, 18 Apr 2024 10:43:29 +0300
Subject: [PATCH] feat: allow defining custom class name + other props for
 notifications sidebar item

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>
---
 .changeset/thick-llamas-itch.md               |  5 ++++
 plugins/notifications/api-report.md           |  6 +++++
 .../NotificationsSideBarItem.tsx              | 25 +++++++++++++++----
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/thick-llamas-itch.md

diff --git a/.changeset/thick-llamas-itch.md b/.changeset/thick-llamas-itch.md
new file mode 100644
index 0000000000..17d4fb23b6
--- /dev/null
+++ b/.changeset/thick-llamas-itch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Allow defining `className` and additional properties for `NotificationsSideBarItem`
diff --git a/plugins/notifications/api-report.md b/plugins/notifications/api-report.md
index 11c671112a..dc0db705ba 100644
--- a/plugins/notifications/api-report.md
+++ b/plugins/notifications/api-report.md
@@ -9,6 +9,7 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
+import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { Notification as Notification_2 } from '@backstage/plugin-notifications-common';
 import { NotificationSeverity } from '@backstage/plugin-notifications-common';
@@ -87,6 +88,11 @@ export const notificationsPlugin: BackstagePlugin<
 export const NotificationsSidebarItem: (props?: {
   webNotificationsEnabled?: boolean;
   titleCounterEnabled?: boolean;
+  className?: string;
+  icon?: IconComponent;
+  text?: string;
+  disableHighlight?: boolean;
+  noTrack?: boolean;
 }) => React_2.JSX.Element;
 
 // @public (undocumented)
diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx
index 2163c6660f..4842a41c0c 100644
--- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx
+++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx
@@ -17,7 +17,7 @@ import React, { useEffect } from 'react';
 import { useNotificationsApi } from '../../hooks';
 import { SidebarItem } from '@backstage/core-components';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { IconComponent, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';
 import { useSignal } from '@backstage/plugin-signals-react';
 import { NotificationSignal } from '@backstage/plugin-notifications-common';
@@ -29,9 +29,21 @@ import { notificationsApiRef } from '../../api';
 export const NotificationsSidebarItem = (props?: {
   webNotificationsEnabled?: boolean;
   titleCounterEnabled?: boolean;
+  className?: string;
+  icon?: IconComponent;
+  text?: string;
+  disableHighlight?: boolean;
+  noTrack?: boolean;
 }) => {
-  const { webNotificationsEnabled = false, titleCounterEnabled = true } =
-    props ?? { webNotificationsEnabled: false, titleCounterEnabled: true };
+  const {
+    webNotificationsEnabled = false,
+    titleCounterEnabled = true,
+    className,
+    icon = NotificationsIcon,
+    text = 'Notifications',
+    disableHighlight,
+    noTrack,
+  } = props ?? { webNotificationsEnabled: false, titleCounterEnabled: true };
 
   const { loading, error, value, retry } = useNotificationsApi(api =>
     api.getStatus(),
@@ -95,10 +107,13 @@ export const NotificationsSidebarItem = (props?: {
   // TODO: Figure out if the count can be added to hasNotifications
   return (
     <SidebarItem
-      icon={NotificationsIcon}
+      icon={icon}
       to={notificationsRoute()}
-      text="Notifications"
+      text={text}
+      disableHighlight={disableHighlight}
       hasNotifications={!error && !!unreadCount}
+      className={className}
+      noTrack={noTrack}
     />
   );
 };