feat: allow setting notification as read automatically when opening link

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

.changeset/young-guests-reflect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Add option to set the notification as read automatically when the notification link is opened

plugins/notifications/api-report.md

@@ -80,6 +80,7 @@ export const NotificationsPage: (
 
 // @public (undocumented)
 export type NotificationsPageProps = {
+  markAsReadOnLinkOpen?: boolean;
   title?: string;
   themeId?: string;
   subtitle?: string;
@@ -110,6 +111,7 @@ export const NotificationsSidebarItem: (props?: {
 
 // @public (undocumented)
 export const NotificationsTable: ({
+  markAsReadOnLinkOpen,
   isLoading,
   notifications,
   isUnread,
@@ -127,6 +129,7 @@ export type NotificationsTableProps = Pick<
   TableProps,
   'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'
 > & {
+  markAsReadOnLinkOpen?: boolean;
   isLoading?: boolean;
   isUnread: boolean;
   notifications?: Notification_2[];

plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx

@@ -43,6 +43,8 @@ const ThrottleDelayMs = 2000;
 
 /** @public */
 export type NotificationsPageProps = {
+  /** Mark notification as read when opening the link it contains, defaults to false */
+  markAsReadOnLinkOpen?: boolean;
   title?: string;
   themeId?: string;
   subtitle?: string;
@@ -59,6 +61,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
     tooltip,
     type,
     typeLink,
+    markAsReadOnLinkOpen,
   } = props ?? {};
 
   const [refresh, setRefresh] = React.useState(false);
@@ -171,6 +174,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
               <NotificationsTable
                 isLoading={loading}
                 isUnread={isUnread}
+                markAsReadOnLinkOpen={markAsReadOnLinkOpen}
                 notifications={notifications}
                 onUpdate={onUpdate}
                 setContainsText={setContainsText}

plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx

@@ -28,8 +28,8 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import {
   Link,
   Table,
-  TableProps,
   TableColumn,
+  TableProps,
 } from '@backstage/core-components';
 
 import { notificationsApiRef } from '../../api';
@@ -55,6 +55,7 @@ export type NotificationsTableProps = Pick<
   TableProps,
   'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'
 > & {
+  markAsReadOnLinkOpen?: boolean;
   isLoading?: boolean;
   isUnread: boolean;
   notifications?: Notification[];
@@ -65,6 +66,7 @@ export type NotificationsTableProps = Pick<
 
 /** @public */
 export const NotificationsTable = ({
+  markAsReadOnLinkOpen,
   isLoading,
   notifications = [],
   isUnread,
@@ -213,7 +215,14 @@ export const NotificationsTable = ({
                 <Box>
                   <Typography variant="subtitle2">
                     {notification.payload.link ? (
-                      <Link to={notification.payload.link}>
+                      <Link
+                        to={notification.payload.link}
+                        onClick={() => {
+                          if (markAsReadOnLinkOpen && !notification.read) {
+                            onSwitchReadStatus([notification.id], true);
+                          }
+                        }}
+                      >
                         {notification.payload.title}
                       </Link>
                     ) : (
@@ -267,6 +276,7 @@ export const NotificationsTable = ({
       },
     ],
     [
+      markAsReadOnLinkOpen,
       selectedNotifications,
       notifications,
       isUnread,