listen for announcement

Signed-off-by: Abdelsalem <[email protected]>

Author: AbdelHedhili

src/components/App/app-top-bar.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
 import { Groups, ManageAccounts, PeopleAlt, NotificationImportant } from '@mui/icons-material';
-import { fetchAppsMetadata, logout, Metadata, TopBar } from '@gridsuite/commons-ui';
+import { fetchAppsMetadata, logout, Metadata, TopBar, useNotificationsListener } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../../utils/config-params';
 import { NavLink, type To, useMatches, useNavigate } from 'react-router';
@@ -29,6 +29,7 @@ import AppPackage from '../../../package.json';
 import { AppState } from '../../redux/reducer';
 import { AppDispatch } from '../../redux/store';
 import { MainPaths } from '../../routes/utils';
+import { NOTIFICATIONS_URL_KEYS } from '../../utils/notifications-provider';
 
 const tabs = new Map<MainPaths, ReactElement>([
     [
@@ -110,6 +111,33 @@ const AppTopBar: FunctionComponent = () => {
     const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE);
 
     const [appsAndUrls, setAppsAndUrls] = useState<Metadata[]>([]);
+
+    const [announcementInfos, setAnnouncementInfos] = useState<AnnouncementProps | null>(null);
+
+    useNotificationsListener(NOTIFICATIONS_URL_KEYS.GLOBAL_CONFIG, {
+        listenerCallbackMessage: (event) => {
+            const eventData = JSON.parse(event.data);
+            if (eventData.headers.messageType === 'announcement') {
+                if (
+                    announcementInfos != null &&
+                    announcementInfos.announcementId === eventData.headers.announcementId
+                ) {
+                    // If we receive a notification for an announcement that we already received we ignore it
+                    return;
+                }
+                const announcement = {
+                    announcementId: eventData.headers.announcementId,
+                    message: eventData.payload,
+                    severity: eventData.headers.severity,
+                    duration: eventData.headers.duration,
+                } as AnnouncementProps;
+                setAnnouncementInfos(announcement);
+            } else if (eventData.headers.messageType === 'cancelAnnouncement') {
+                setAnnouncementInfos(null);
+            }
+        },
+    });
+
     useEffect(() => {
         if (user !== null) {
             fetchAppsMetadata().then((res) => {
@@ -136,6 +164,7 @@ const AppTopBar: FunctionComponent = () => {
             onLanguageClick={handleChangeLanguage}
             language={languageLocal}
             developerMode={false} // TODO: set as optional in commons-ui
+            announcementInfos={announcementInfos}
         >
             <Tabs
                 component="nav"

src/utils/notifications-provider.ts

@@ -13,6 +13,7 @@ import { APP_NAME } from './config-params';
 
 export enum NOTIFICATIONS_URL_KEYS {
     CONFIG = 'CONFIG',
+    GLOBAL_CONFIG = 'GLOBAL_CONFIG',
 }
 
 export const PREFIX_CONFIG_NOTIFICATION_WS = '/config-notification';
@@ -34,6 +35,9 @@ export function useNotificationsUrlGenerator() {
                           })}`
                       )
                     : undefined,
+                [NOTIFICATIONS_URL_KEYS.GLOBAL_CONFIG]: tokenId
+                    ? getUrlWithToken(`${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/global`)
+                    : undefined,
             }) satisfies Record<NOTIFICATIONS_URL_KEYS, string | undefined>,
         [wsBase, tokenId]
     );