feat: make default functionality to mark notification read when opening link

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

.changeset/ten-penguins-roll.md

@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-notifications': patch
+'@backstage/plugin-notifications': minor
 ---
 
-Allow setting notification as read when opening snackbar or web notification link
+By default, set notification as read when opening snackbar or web notification link

plugins/notifications/api-report.md

@@ -103,7 +103,6 @@ export const NotificationsSidebarItem: (props?: {
   titleCounterEnabled?: boolean;
   snackbarEnabled?: boolean;
   snackbarAutoHideDuration?: number | null;
-  markAsReadOnLinkOpen?: boolean;
   className?: string;
   icon?: IconComponent;
   text?: string;

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

@@ -84,7 +84,6 @@ export const NotificationsSidebarItem = (props?: {
   titleCounterEnabled?: boolean;
   snackbarEnabled?: boolean;
   snackbarAutoHideDuration?: number | null;
-  markAsReadOnLinkOpen?: boolean;
   className?: string;
   icon?: IconComponent;
   text?: string;
@@ -96,7 +95,6 @@ export const NotificationsSidebarItem = (props?: {
     titleCounterEnabled = true,
     snackbarEnabled = true,
     snackbarAutoHideDuration = 10000,
-    markAsReadOnLinkOpen = false,
     icon = NotificationsIcon,
     text = 'Notifications',
     ...restProps
@@ -105,7 +103,6 @@ export const NotificationsSidebarItem = (props?: {
     titleCounterEnabled: true,
     snackbarEnabled: true,
     snackbarAutoHideDuration: 10000,
-    markAsReadOnLinkOpen: false,
   };
 
   const { loading, error, value, retry } = useNotificationsApi(api =>
@@ -117,9 +114,8 @@ export const NotificationsSidebarItem = (props?: {
   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 } = useWebNotifications(
+  const { sendWebNotification, requestUserPermission } = useWebNotifications(
     webNotificationsEnabled,
-    markAsReadOnLinkOpen,
   );
   const [refresh, setRefresh] = React.useState(false);
   const { setNotificationCount } = useTitleCounter();
@@ -132,7 +128,7 @@ export const NotificationsSidebarItem = (props?: {
             component={Link}
             to={notification.payload.link ?? notificationsRoute()}
             onClick={() => {
-              if (markAsReadOnLinkOpen) {
+              if (notification.payload.link) {
                 notificationsApi
                   .updateNotifications({
                     ids: [notification.id],
@@ -175,7 +171,7 @@ export const NotificationsSidebarItem = (props?: {
 
       return { action };
     },
-    [notificationsRoute, markAsReadOnLinkOpen, notificationsApi, alertApi],
+    [notificationsRoute, notificationsApi, alertApi],
   );
 
   useEffect(() => {
@@ -278,6 +274,9 @@ export const NotificationsSidebarItem = (props?: {
       )}
       <SidebarItem
         to={notificationsRoute()}
+        onClick={() => {
+          requestUserPermission();
+        }}
         hasNotifications={!error && !!unreadCount}
         text={text}
         icon={icon}

plugins/notifications/src/hooks/useWebNotifications.ts

@@ -13,24 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useCallback, useEffect, useState } from 'react';
+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';
 
 /** @internal */
-export function useWebNotifications(
-  enabled: boolean,
-  markAsReadOnLinkOpen: boolean,
-) {
+export function useWebNotifications(enabled: boolean) {
   const [webNotificationPermission, setWebNotificationPermission] =
     useState('default');
   const notificationsRoute = useRouteRef(rootRouteRef);
   const notificationsApi = useApi(notificationsApiRef);
   const navigate = useNavigate();
 
-  useEffect(() => {
+  const requestUserPermission = useCallback(() => {
     if (
       enabled &&
       'Notification' in window &&
@@ -62,12 +59,10 @@ export function useWebNotifications(
         event.preventDefault();
         if (options.link) {
           window.open(options.link, '_blank');
-          if (markAsReadOnLinkOpen) {
-            notificationsApi.updateNotifications({
-              ids: [options.id],
-              read: true,
-            });
-          }
+          notificationsApi.updateNotifications({
+            ids: [options.id],
+            read: true,
+          });
         } else {
           navigate(notificationsRoute());
         }
@@ -76,14 +71,8 @@ export function useWebNotifications(
 
       return notification;
     },
-    [
-      webNotificationPermission,
-      markAsReadOnLinkOpen,
-      notificationsApi,
-      navigate,
-      notificationsRoute,
-    ],
+    [webNotificationPermission, notificationsApi, navigate, notificationsRoute],
   );
 
-  return { sendWebNotification };
+  return { sendWebNotification, requestUserPermission };
 }