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

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Allow defining `className` and additional properties for `NotificationsSideBarItem`

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)

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}
     />
   );
 };