Add announcement banner (#2793)

Signed-off-by: Abdelsalem <[email protected]>
Co-authored-by: Abdelsalem <[email protected]>
Co-authored-by: Joris Mancini <[email protected]>
Signed-off-by: Tristan Chuine <[email protected]>
Co-authored-by: Tristan Chuine <[email protected]>

Author: 3 people

package-lock.json

@@ -11,7 +11,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.99.0",
+        "@gridsuite/commons-ui": "0.100.0",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",

package.json

@@ -6,13 +6,13 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import { LIGHT_THEME, logout, OverflowableText, TopBar } from '@gridsuite/commons-ui';
+import { fetchAppsMetadata, LIGHT_THEME, logout, OverflowableText, TopBar } from '@gridsuite/commons-ui';
 import GridStudyLogoLight from '../images/GridStudy_logo_light.svg?react';
 import GridStudyLogoDark from '../images/GridStudy_logo_dark.svg?react';
 import { Badge, Box, Button, Tab, Tabs, Tooltip } from '@mui/material';
 import { Search, Settings } from '@mui/icons-material';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { PARAM_LANGUAGE, PARAM_THEME, PARAM_USE_NAME, PARAM_DEVELOPER_MODE } from '../utils/config-params';
+import { PARAM_DEVELOPER_MODE, PARAM_LANGUAGE, PARAM_THEME, PARAM_USE_NAME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import AppPackage from '../../package.json';
@@ -22,9 +22,7 @@ import { EQUIPMENT_TYPES } from './utils/equipment-types';
 import { fetchVersion } from '../services/utils';
 import { RunButtonContainer } from './run-button-container';
 import { useComputationResultsCount } from '../hooks/use-computation-results-count';
-
 import { TopBarEquipmentSearchDialog } from './top-bar-equipment-seach-dialog/top-bar-equipment-search-dialog';
-import { fetchAppsMetadata } from '@gridsuite/commons-ui';
 import { ROOT_NODE_LABEL } from '../constants/node.constant';
 import { useParameterState } from './dialogs/parameters/use-parameters-state';
 import { StudyView } from './utils/utils';

src/components/app-top-bar.jsx

@@ -14,12 +14,14 @@ import {
 } from './utils/optional-services';
 import { Navigate, Route, Routes, useLocation, useMatch, useNavigate } from 'react-router';
 import {
+    AnnouncementNotification,
     AuthenticationRouter,
     CardErrorBoundary,
     getPreLoginPath,
     initializeAuthenticationProd,
-    useSnackMessage,
+    NotificationsUrlKeys,
     useNotificationsListener,
+    useSnackMessage,
 } from '@gridsuite/commons-ui';
 import PageNotFound from './page-not-found';
 import { FormattedMessage } from 'react-intl';
@@ -57,7 +59,6 @@ import {
     setUpdateNetworkVisualizationParameters,
     updateTableColumns,
 } from '../redux/actions';
-import { NOTIFICATIONS_URL_KEYS } from './utils/notificationsProvider-utils';
 import { getNetworkVisualizationParameters, getSpreadsheetConfigCollection } from '../services/study/study-config';
 import { StudyView } from './utils/utils';
 import { NotificationType } from '../redux/reducer';
@@ -149,7 +150,7 @@ const App = () => {
         [snackError, updateParams]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.CONFIG, {
+    useNotificationsListener(NotificationsUrlKeys.CONFIG, {
         listenerCallbackMessage: updateConfig,
     });
 
@@ -220,7 +221,7 @@ const App = () => {
         [studyUuid, updateSpreadsheetCollectionOnNotification, updateSpreadsheetTabOnNotification]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: onSpreadsheetNotification,
     });
 
@@ -379,6 +380,7 @@ const App = () => {
             }}
         >
             <AppTopBar user={user} onChangeTab={onChangeTab} userManager={userManager} />
+            <AnnouncementNotification user={user} />
             <CardErrorBoundary>
                 <div
                     className="singlestretch-parent"

src/components/app.jsx

@@ -7,18 +7,15 @@
 
 import { SetStateAction, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
 import {
     AppState,
     NotificationType,
     RootNetworksDeletionStartedEventData,
     RootNetworksUpdatedEventData,
 } from 'redux/reducer';
-
-import { useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
+import { NotificationsUrlKeys, useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
 import { fetchRootNetworks } from 'services/root-network';
 import { setCurrentRootNetworkUuid, setRootNetworks } from 'redux/actions';
-import { NOTIFICATIONS_URL_KEYS } from 'components/utils/notificationsProvider-utils';
 import { RootNetworkMetadata } from '../network-modifications/network-modification-menu.type';
 
 type UseRootNetworkNotificationsProps = {
@@ -103,13 +100,13 @@ export const useRootNetworkNotifications = ({ setIsRootNetworksProcessing }: Use
         [currentRootNetworkUuid, dispatch, rootNetworks]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: rootNetworkModifiedNotification,
     });
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: rootNetworksUpdateFailedNotification,
     });
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: rootNetworkDeletionStartedNotification,
     });
 };

src/components/graph/menus/root-network/use-root-network-notifications.ts

@@ -31,7 +31,13 @@ import VoltageLevelChoice from '../voltage-level-choice';
 import NominalVoltageFilter, { type NominalVoltageFilterProps } from './nominal-voltage-filter';
 import { useDispatch, useSelector } from 'react-redux';
 import { PARAM_USE_NAME } from '../../utils/config-params';
-import { type Equipment, EquipmentType, useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    type Equipment,
+    EquipmentType,
+    NotificationsUrlKeys,
+    useNotificationsListener,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import { isNodeBuilt, isNodeRenamed, isSameNodeAndBuilt } from '../graph/util/model-functions';
 import { resetMapEquipment, setMapDataLoading, setReloadMapNeeded } from '../../redux/actions';
 import GSMapEquipments from './gs-map-equipments';
@@ -52,7 +58,6 @@ import { ROOT_NODE_LABEL } from '../../constants/node.constant';
 import { UUID } from 'crypto';
 import { AppState, LoadflowResultEventData, NotificationType, RootNetworksUpdatedEventData } from 'redux/reducer';
 import { CurrentTreeNode } from 'components/graph/tree-node.type';
-import { NOTIFICATIONS_URL_KEYS } from 'components/utils/notificationsProvider-utils';
 import { isReactFlowRootNodeData } from 'redux/utils';
 
 const INITIAL_POSITION = [0, 0] as const;
@@ -855,10 +860,10 @@ export const NetworkMapTab = ({
         [currentRootNetworkUuid, dispatch, isInitialized]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: loadflowResultNotification,
     });
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: rootNetworkModifiedNotification,
     });
 

src/components/network/network-map-tab.tsx

@@ -9,11 +9,10 @@ import { AppState, NotificationType } from '../../../redux/reducer';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { getNodeAliases, updateNodeAliases as _updateNodeAlias } from '../../../services/study/node-alias';
-import { useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
+import { NotificationsUrlKeys, useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
 import { NodeAlias } from '../types/node-alias.type';
 import { UUID } from 'crypto';
 import { deletedOrRenamedNodes } from 'redux/actions';
-import { NOTIFICATIONS_URL_KEYS } from '../../utils/notificationsProvider-utils';
 
 // NodeAlias may have invalid id/name, in error cases
 export const validAlias = (alias: NodeAlias) => alias.id != null && alias.name != null;
@@ -86,7 +85,7 @@ export const useNodeAliases = () => {
         [fetchNodeAliases, studyUuid]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: listenerAliasesUpdated,
     });
 

src/components/spreadsheet-view/hooks/use-node-aliases.ts

@@ -5,16 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Identifiable, useNotificationsListener } from '@gridsuite/commons-ui';
-import { UUID } from 'crypto';
+import { type Identifiable, NotificationsUrlKeys, useNotificationsListener } from '@gridsuite/commons-ui';
+import type { UUID } from 'crypto';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteEquipments, EquipmentToDelete, removeNodeData, updateEquipments } from 'redux/actions';
-import { AppState, EquipmentUpdateType, NotificationType } from 'redux/reducer';
-import { SpreadsheetEquipmentType } from '../../../types/spreadsheet.type';
+import { type AppState, EquipmentUpdateType, NotificationType } from 'redux/reducer';
+import type { SpreadsheetEquipmentType } from '../../../types/spreadsheet.type';
 import { fetchAllEquipments } from 'services/study/network-map';
-import { NOTIFICATIONS_URL_KEYS } from '../../../../utils/notificationsProvider-utils';
-import { NodeAlias } from '../../../types/node-alias.type';
+import type { NodeAlias } from '../../../types/node-alias.type';
 import { isStatusBuilt } from '../../../../graph/util/model-functions';
 import { useFetchEquipment } from '../../../hooks/use-fetch-equipment';
 import { NodeType } from '../../../../graph/tree-node.type';
@@ -253,7 +252,7 @@ export const useSpreadsheetEquipments = (
         [currentNode?.id, currentRootNetworkUuid, studyUuid, updateEquipmentsLocal]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
         listenerCallbackMessage: listenerUpdateEquipmentsLocal,
     });
 

src/components/spreadsheet-view/spreadsheet/spreadsheet-content/hooks/use-spreadsheet-equipments.ts

@@ -29,6 +29,7 @@ import { fetchRootNetworks } from 'services/root-network';
 import WaitingLoader from './utils/waiting-loader';
 import {
     fetchDirectoryElementPath,
+    NotificationsUrlKeys,
     useIntlRef,
     useNotificationsListener,
     usePrevious,
@@ -49,7 +50,6 @@ import { HttpStatusCode } from 'utils/http-status-code';
 import { RootNetworkIndexationStatus } from 'redux/reducer';
 import { NodeType } from './graph/tree-node.type';
 import { UPDATE_TYPE_HEADER } from './use-node-data';
-import { NOTIFICATIONS_URL_KEYS } from './utils/notificationsProvider-utils';
 
 function useStudy(studyUuidRequest) {
     const dispatch = useDispatch();
@@ -286,7 +286,7 @@ export function StudyContainer({ view, onChangeTab }) {
         [dispatch, displayErrorNotifications, sendAlert]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.STUDY, { listenerCallbackMessage: handleStudyUpdate });
+    useNotificationsListener(NotificationsUrlKeys.STUDY, { listenerCallbackMessage: handleStudyUpdate });
 
     const fetchStudyPath = useCallback(() => {
         fetchDirectoryElementPath(studyUuid)
@@ -320,7 +320,7 @@ export function StudyContainer({ view, onChangeTab }) {
     }, []);
 
     //Study deletion notification
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.DIRECTORY_DELETE_STUDY, {
+    useNotificationsListener(NotificationsUrlKeys.DIRECTORY_DELETE_STUDY, {
         listenerCallbackMessage: closeWindow,
     });
 
@@ -344,7 +344,7 @@ export function StudyContainer({ view, onChangeTab }) {
         [dispatch, fetchStudyPath]
     );
 
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.DIRECTORY, {
+    useNotificationsListener(NotificationsUrlKeys.DIRECTORY, {
         listenerCallbackMessage: onStudyUpdated,
     });
 

src/components/study-container.jsx

@@ -5,18 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import {
-    NOTIFICATIONS_URL_KEYS,
+    NotificationsUrlKeys,
     PREFIX_CONFIG_NOTIFICATION_WS,
     PREFIX_DIRECTORY_NOTIFICATION_WS,
     PREFIX_STUDY_NOTIFICATION_WS,
-} from 'components/utils/notificationsProvider-utils';
+} from '@gridsuite/commons-ui';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { type AppState } from 'redux/reducer';
 import { getUrlWithToken, getWsBase } from 'services/utils';
 import { APP_NAME } from 'utils/config-params';
 
-const useNotificationsUrlGenerator = (): Record<NOTIFICATIONS_URL_KEYS, string | undefined> => {
+const useNotificationsUrlGenerator = (): Partial<Record<NotificationsUrlKeys, string | undefined>> => {
     // The websocket API doesn't allow relative urls
     const wsBase = getWsBase();
     const tokenId = useSelector((state: AppState) => state.user?.id_token);
@@ -26,28 +26,31 @@ const useNotificationsUrlGenerator = (): Record<NOTIFICATIONS_URL_KEYS, string |
     // it will be used to register listeners as soon as possible.
     return useMemo(
         () => ({
-            [NOTIFICATIONS_URL_KEYS.CONFIG]: tokenId
+            [NotificationsUrlKeys.CONFIG]: tokenId
                 ? getUrlWithToken(
                       `${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?${new URLSearchParams({
                           appName: APP_NAME,
                       })}`
                   )
                 : undefined,
-            [NOTIFICATIONS_URL_KEYS.STUDY]:
+            [NotificationsUrlKeys.GLOBAL_CONFIG]: tokenId
+                ? getUrlWithToken(`${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/global`)
+                : undefined,
+            [NotificationsUrlKeys.STUDY]:
                 tokenId && studyUuid
                     ? getUrlWithToken(
                           `${wsBase}${PREFIX_STUDY_NOTIFICATION_WS}/notify?studyUuid=${encodeURIComponent(studyUuid)}`
                       )
                     : undefined,
-            [NOTIFICATIONS_URL_KEYS.DIRECTORY_DELETE_STUDY]:
+            [NotificationsUrlKeys.DIRECTORY_DELETE_STUDY]:
                 tokenId && studyUuid
                     ? getUrlWithToken(
                           `${wsBase}${PREFIX_DIRECTORY_NOTIFICATION_WS}/notify?updateType=deleteElement&elementUuid=${encodeURIComponent(
                               studyUuid
                           )}`
                       )
                     : undefined,
-            [NOTIFICATIONS_URL_KEYS.DIRECTORY]: tokenId
+            [NotificationsUrlKeys.DIRECTORY]: tokenId
                 ? getUrlWithToken(`${wsBase}${PREFIX_DIRECTORY_NOTIFICATION_WS}/notify?updateType=directories`)
                 : undefined,
         }),