diff --git a/.changeset/ten-penguins-roll.md b/.changeset/ten-penguins-roll.md index 60e0ae773a..152bb1524b 100644 --- a/.changeset/ten-penguins-roll.md +++ b/.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 diff --git a/plugins/notifications/api-report.md b/plugins/notifications/api-report.md index c431664883..5e06ae2616 100644 --- a/plugins/notifications/api-report.md +++ b/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; diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 6e1f7c7d56..457893b016 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/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('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?: { )} { + requestUserPermission(); + }} hasNotifications={!error && !!unreadCount} text={text} icon={icon} diff --git a/plugins/notifications/src/hooks/useWebNotifications.ts b/plugins/notifications/src/hooks/useWebNotifications.ts index 3fbd3c5496..ec120a614d 100644 --- a/plugins/notifications/src/hooks/useWebNotifications.ts +++ b/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 }; }