diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index b525d7e48e..026e5a9b18 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -362,6 +362,8 @@ SIG SIGs siloed Sinon +snackbars +snackbar Snyk Sonarqube sourcemaps diff --git a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx index 9851ff8a66..000eabcae6 100644 --- a/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx +++ b/plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx @@ -15,9 +15,14 @@ */ import React, { useCallback, useEffect } from 'react'; import { useNotificationsApi } from '../../hooks'; -import { SidebarItem } from '@backstage/core-components'; +import { Link, SidebarItem } from '@backstage/core-components'; import NotificationsIcon from '@material-ui/icons/Notifications'; -import { IconComponent, useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { + alertApiRef, + IconComponent, + useApi, + useRouteRef, +} from '@backstage/core-plugin-api'; import { rootRouteRef } from '../../routes'; import { useSignal } from '@backstage/plugin-signals-react'; import { @@ -37,7 +42,6 @@ import { VariantType, } from 'notistack'; import { SeverityIcon } from '../NotificationsTable/SeverityIcon'; -import { useNavigate } from 'react-router-dom'; import OpenInNew from '@material-ui/icons/OpenInNew'; import MarkAsReadIcon from '@material-ui/icons/CheckCircle'; import IconButton from '@material-ui/core/IconButton'; @@ -101,8 +105,8 @@ export const NotificationsSidebarItem = (props?: { const { loading, error, value, retry } = useNotificationsApi(api => api.getStatus(), ); - const navigate = useNavigate(); const notificationsApi = useApi(notificationsApiRef); + const alertApi = useApi(alertApiRef); const [unreadCount, setUnreadCount] = React.useState(0); const notificationsRoute = useRouteRef(rootRouteRef); // TODO: Do we want to add long polling in case signals are not available @@ -116,11 +120,9 @@ export const NotificationsSidebarItem = (props?: { const action = (snackBarId: SnackbarKey) => ( <> { - if (notification.payload.link) { - window.open(notification.payload.link, '_blank'); - } - navigate(notificationsRoute()); closeSnackbar(snackBarId); }} > @@ -128,11 +130,20 @@ export const NotificationsSidebarItem = (props?: { { - notificationsApi.updateNotifications({ - ids: [notification.id], - read: true, - }); - closeSnackbar(snackBarId); + notificationsApi + .updateNotifications({ + ids: [notification.id], + read: true, + }) + .then(() => { + closeSnackbar(snackBarId); + }) + .catch(() => { + alertApi.post({ + message: 'Failed to mark notification as read', + severity: 'error', + }); + }); }} > @@ -142,7 +153,7 @@ export const NotificationsSidebarItem = (props?: { return { action }; }, - [notificationsRoute, navigate, notificationsApi], + [notificationsRoute, notificationsApi, alertApi], ); useEffect(() => { @@ -187,6 +198,12 @@ export const NotificationsSidebarItem = (props?: { action, } as OptionsWithExtraProps); } + }) + .catch(() => { + alertApi.post({ + message: 'Failed to fetch notification', + severity: 'error', + }); }); }; @@ -200,6 +217,7 @@ export const NotificationsSidebarItem = (props?: { webNotificationsEnabled, snackbarEnabled, notificationsApi, + alertApi, getSnackbarProperties, ]);