diff --git a/.changeset/clean-kids-applaud.md b/.changeset/clean-kids-applaud.md new file mode 100644 index 0000000000..907b5978cd --- /dev/null +++ b/.changeset/clean-kids-applaud.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +Fixed issue with notification reloading on page change diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 457893b016..22ce11db69 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/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('notifications'); const { sendWebNotification, requestUserPermission } = useWebNotifications( @@ -126,7 +126,7 @@ export const NotificationsSidebarItem = (props?: { <> { 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?: { /> )} { requestUserPermission(); }} diff --git a/plugins/notifications/src/hooks/useWebNotifications.ts b/plugins/notifications/src/hooks/useWebNotifications.ts index ec120a614d..cc69a0e815 100644 --- a/plugins/notifications/src/hooks/useWebNotifications.ts +++ b/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 };