diff --git a/.changeset/young-guests-reflect.md b/.changeset/young-guests-reflect.md new file mode 100644 index 0000000000..355c38bc21 --- /dev/null +++ b/.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 diff --git a/plugins/notifications/api-report.md b/plugins/notifications/api-report.md index 8fbd148b6d..3699aa1bb0 100644 --- a/plugins/notifications/api-report.md +++ b/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[]; diff --git a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx index f1dd9aba5f..d1dde185f2 100644 --- a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx +++ b/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) => { & { + 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 = ({ {notification.payload.link ? ( - + { + if (markAsReadOnLinkOpen && !notification.read) { + onSwitchReadStatus([notification.id], true); + } + }} + > {notification.payload.title} ) : ( @@ -267,6 +276,7 @@ export const NotificationsTable = ({ }, ], [ + markAsReadOnLinkOpen, selectedNotifications, notifications, isUnread,