fix: notification reload on navigation

this fixes issue when notifications are always reloaded when navigating
in the portal.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/clean-kids-applaud.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Fixed issue with notification reloading on page change

plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx

@@ -111,7 +111,7 @@ export const NotificationsSidebarItem = (props?: {
   const notificationsApi = useApi(notificationsApiRef);
   const alertApi = useApi(alertApiRef);
   const [unreadCount, setUnreadCount] = React.useState(0);
-  const notificationsRoute = useRouteRef(rootRouteRef);
+  const notificationsRoute = useRouteRef(rootRouteRef)();
   // TODO: Do we want to add long polling in case signals are not available
   const { lastSignal } = useSignal<NotificationSignal>('notifications');
   const { sendWebNotification, requestUserPermission } = useWebNotifications(
@@ -126,7 +126,7 @@ export const NotificationsSidebarItem = (props?: {
         <>
           <IconButton
             component={Link}
-            to={notification.payload.link ?? notificationsRoute()}
+            to={notification.payload.link ?? notificationsRoute}
             onClick={() => {
               if (notification.payload.link) {
                 notificationsApi
@@ -189,7 +189,6 @@ export const NotificationsSidebarItem = (props?: {
       ) {
         return;
       }
-
       notificationsApi
         .getNotification(signal.notification_id)
         .then(notification => {
@@ -211,6 +210,7 @@ export const NotificationsSidebarItem = (props?: {
                 ? `${notification.payload.title.substring(0, 50)}...`
                 : notification.payload.title;
             enqueueSnackbar(snackBarText, {
+              key: notification.id,
               variant: notification.payload.severity,
               anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
               action,
@@ -273,7 +273,7 @@ export const NotificationsSidebarItem = (props?: {
         />
       )}
       <SidebarItem
-        to={notificationsRoute()}
+        to={notificationsRoute}
         onClick={() => {
           requestUserPermission();
         }}

plugins/notifications/src/hooks/useWebNotifications.ts

@@ -14,18 +14,16 @@
  * limitations under the License.
  */
 import { useCallback, useState } from 'react';
-import { rootRouteRef } from '../routes';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
-import { useNavigate } from 'react-router-dom';
 import { notificationsApiRef } from '../api';
+import { rootRouteRef } from '../routes';
 
 /** @internal */
 export function useWebNotifications(enabled: boolean) {
   const [webNotificationPermission, setWebNotificationPermission] =
     useState('default');
-  const notificationsRoute = useRouteRef(rootRouteRef);
+  const notificationsRoute = useRouteRef(rootRouteRef)();
   const notificationsApi = useApi(notificationsApiRef);
-  const navigate = useNavigate();
 
   const requestUserPermission = useCallback(() => {
     if (
@@ -64,14 +62,14 @@ export function useWebNotifications(enabled: boolean) {
             read: true,
           });
         } else {
-          navigate(notificationsRoute());
+          window.open(notificationsRoute);
         }
         notification.close();
       };
 
       return notification;
     },
-    [webNotificationPermission, notificationsApi, navigate, notificationsRoute],
+    [webNotificationPermission, notificationsApi, notificationsRoute],
   );
 
   return { sendWebNotification, requestUserPermission };