feat: integrate notifications with signals

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

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Content,
   ErrorPanel,
@@ -27,6 +27,7 @@ import Bookmark from '@material-ui/icons/Bookmark';
 import Check from '@material-ui/icons/Check';
 import Inbox from '@material-ui/icons/Inbox';
 import { NotificationType } from '@backstage/plugin-notifications-common';
+import { useSignal } from '@backstage/plugin-signals-react';
 
 const useStyles = makeStyles(_theme => ({
   filterButton: {
@@ -43,6 +44,13 @@ export const NotificationsPage = () => {
     [type],
   );
 
+  const { lastSignal } = useSignal('notifications');
+  useEffect(() => {
+    if (lastSignal && lastSignal.action === 'refresh') {
+      retry();
+    }
+  }, [lastSignal, retry]);
+
   const onUpdate = () => {
     retry();
   };

plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx

@@ -19,25 +19,30 @@ import { SidebarItem } from '@backstage/core-components';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';
+import { useSignal } from '@backstage/plugin-signals-react';
 
 /** @public */
 export const NotificationsSidebarItem = () => {
-  const {
-    loading,
-    error,
-    value,
-    retry: _retry,
-  } = useNotificationsApi(api => api.getStatus());
+  const { loading, error, value, retry } = useNotificationsApi(api =>
+    api.getStatus(),
+  );
   const [unreadCount, setUnreadCount] = React.useState(0);
   const notificationsRoute = useRouteRef(rootRouteRef);
 
+  const { lastSignal } = useSignal('notifications');
+  useEffect(() => {
+    if (lastSignal && lastSignal.action === 'refresh') {
+      retry();
+    }
+  }, [lastSignal, retry]);
+
   useEffect(() => {
     if (!loading && !error && value) {
       setUnreadCount(value.unread);
     }
   }, [loading, error, value]);
 
-  // TODO: Figure out if there count can be added to hasNotifications
+  // TODO: Figure out if the count can be added to hasNotifications
   return (
     <SidebarItem
       icon={NotificationsIcon}