fix(notificatoins): polling interval can be configured (#1134)

Author: mareklibra

plugins/notifications/README.md

@@ -13,12 +13,19 @@ This Backstage front-end plugin provides:
 
 Have `@janus-idp/plugin-notifications-backend` installed and running.
 
-### Installing as a dynamic plugin?
+## Installing as a dynamic plugin
 
 The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
 
 - follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
 - add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
+- customize configuration configure as needed
+
+### Configuration
+
+There is polling used to check for new notifications. It can be tuned via `pollingIntervalMs` config property (see `app-config.janus-idp.yaml`). When set to 0, the polling is turned off.
+
+## Installing as a static plugin
 
 ### Add NPM dependency
 
@@ -66,6 +73,8 @@ export const AppBase = () => {
 
 ## How to use the NotificationApi
 
+Once installed as either static or dynamic plugin, a 3rd party frontend plugin can access the notifications via its frontend API:
+
 ```
 import { notificationsApiRef, Notification } from '@janus-idp/plugin-notifications';
 

plugins/notifications/app-config.janus-idp.yaml

@@ -12,3 +12,5 @@ dynamicPlugins:
           menuItem:
             icon: notificationsIcon
             text: Notifications
+          config:
+            pollingIntervalMs: 5000

plugins/notifications/src/components/NotificationsActiveIcon/NotificationsActiveIcon.tsx

@@ -18,6 +18,25 @@ const NotificationsErrorIcon = () => (
   </Tooltip>
 );
 
+const usePollingIntervalConfig = (): number => {
+  const configApi = useApi(configApiRef);
+
+  const dynamicRoutes =
+    // @ts-ignore
+    configApi.getOptionalConfig('dynamicPlugins')?.data?.frontend?.[
+      'janus-idp.backstage-plugin-notifications'
+    ]?.dynamicRoutes;
+
+  const config = dynamicRoutes?.find(
+    (r: { importName?: string }) => r.importName === 'NotificationsPage',
+  )?.config;
+  const pollingInterval = config?.pollingIntervalMs;
+
+  return pollingInterval === undefined
+    ? DefaultPollingIntervalMs
+    : pollingInterval;
+};
+
 /**
  * Dynamic plugins recently do not support passing configuration
  * to icons or making the left-side menu item texts active (so far strings only).
@@ -27,14 +46,6 @@ const NotificationsErrorIcon = () => (
  */
 export const NotificationsActiveIcon = () => {
   const notificationsApi = useApi(notificationsApiRef);
-  const configApi = useApi(configApiRef);
-
-  let pollingInterval = configApi.getOptionalNumber(
-    'notifications.pollingIntervalMs',
-  );
-  if (pollingInterval === undefined) {
-    pollingInterval = DefaultPollingIntervalMs;
-  }
 
   const [error, setError] = React.useState<Error | undefined>(undefined);
   const [unreadCount, setUnreadCount] = React.useState(0);
@@ -43,6 +54,7 @@ export const NotificationsActiveIcon = () => {
     React.useState<Notification>();
   const [closedNotificationId, setClosedNotificationId] =
     React.useState<string>();
+  const pollingInterval = usePollingIntervalConfig();
 
   const pollCallback = React.useCallback(async () => {
     try {