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,
]);