remove tokenId from useNotificationsUrlGenerator

package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.211.0",
+        "@gridsuite/commons-ui": "0.214.0",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^6.5.0",
         "@mui/lab": "6.0.1-beta.36",

src/components/App/App.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
 import {
     AnnouncementNotification,
@@ -43,7 +43,7 @@ export default function App() {
     useDebugRender('app');
     const { snackError } = useSnackMessage();
     const dispatch = useDispatch<AppDispatch>();
-    const user = useSelector((state: AppState) => state.user);
+    const userProfile = useSelector((state: AppState) => state.user?.profile ?? null, shallowEqual);
 
     const updateParams = useCallback(
         (params: ConfigParameters) => {
@@ -82,7 +82,7 @@ export default function App() {
     useNotificationsListener(NotificationsUrlKeys.CONFIG, { listenerCallbackMessage: updateConfig });
 
     useEffect(() => {
-        if (user !== null) {
+        if (userProfile !== null) {
             fetchConfigParameters(COMMON_APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) => snackWithFallback(snackError, error, { headerId: 'paramsRetrievingError' }));
@@ -91,7 +91,7 @@ export default function App() {
                 .then((params) => updateParams(params))
                 .catch((error) => snackWithFallback(snackError, error, { headerId: 'paramsRetrievingError' }));
         }
-    }, [user, dispatch, updateParams, snackError]);
+    }, [userProfile, dispatch, updateParams, snackError]);
 
     const signInCallbackError = useSelector((state: AppState) => state.signInCallbackError);
     const authenticationRouterError = useSelector((state: AppState) => state.authenticationRouterError);
@@ -149,7 +149,7 @@ export default function App() {
                 <AppTopBar userManagerInstance={userManager.instance} />
             </Grid>
             <Grid item xs="auto">
-                <AnnouncementNotification user={user} />
+                <AnnouncementNotification userProfile={userProfile} />
             </Grid>
             <Grid item container xs component="main" height={'100%'}>
                 <CardErrorBoundary>
@@ -159,7 +159,7 @@ export default function App() {
                             flexGrow: 1,
                         }}
                     >
-                        {user !== null ? (
+                        {userProfile !== null ? (
                             <Routes>
                                 <Route path={'/'} element={<HomePage />} />
                                 <Route path={`/${MainPaths.users}`} element={<Users />} />

src/components/App/AppTopBar.tsx

@@ -20,7 +20,7 @@ import {
 import { useParameterState } from '../parameters';
 import { APP_NAME } from '../../utils/config-params';
 import { NavLink, type To, useNavigate } from 'react-router';
-import { useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { AppsMetadataSrv, StudySrv } from '../../services';
 import GridAdminLogoLight from '../../images/GridAdmin_logo_light.svg?react';
@@ -96,7 +96,7 @@ type AppTopBarProps = {
 export default function AppTopBar({ userManagerInstance }: Readonly<AppTopBarProps>) {
     const theme = useTheme();
     const dispatch = useDispatch<AppDispatch>();
-    const user = useSelector((state: AppState) => state.user);
+    const userProfile = useSelector((state: AppState) => state.user?.profile ?? null, shallowEqual);
 
     const navigate = useNavigate();
 
@@ -107,12 +107,12 @@ export default function AppTopBar({ userManagerInstance }: Readonly<AppTopBarPro
     const [tabValue, setTabValue] = useState<TabsProps['value']>(false);
 
     useEffect(() => {
-        if (user !== null) {
+        if (userProfile !== null) {
             fetchAppsMetadata().then((res) => {
                 setAppsAndUrls(res);
             });
         }
-    }, [user]);
+    }, [userProfile]);
 
     const handleChange = (_: SyntheticEvent, newValue: number) => {
         setTabValue(newValue);
@@ -127,7 +127,7 @@ export default function AppTopBar({ userManagerInstance }: Readonly<AppTopBarPro
             appLicense={AppPackage.license}
             onLogoutClick={() => logout(dispatch, userManagerInstance)}
             onLogoClick={() => navigate('/', { replace: true })}
-            user={user ?? undefined}
+            userProfile={userProfile ?? undefined}
             appsAndUrls={appsAndUrls}
             globalVersionPromise={() => AppsMetadataSrv.fetchVersion().then((res) => res?.deployVersion ?? 'unknown')}
             additionalModulesPromise={StudySrv.getServersInfos}
@@ -143,7 +143,7 @@ export default function AppTopBar({ userManagerInstance }: Readonly<AppTopBarPro
                 scrollButtons="auto"
                 aria-label="Main navigation menu"
                 sx={{
-                    visibility: !user ? 'hidden' : undefined,
+                    visibility: !userProfile ? 'hidden' : undefined,
                     flexGrow: 1,
                 }}
                 value={tabValue}

src/utils/api-ws.ts

@@ -5,13 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { getToken } from './api';
-
 export type * from './api';
 
 export const getWsBase = () => document.baseURI.replace(/^http:\/\//, 'ws://').replace(/^https:\/\//, 'wss://');
-
-export function getUrlWithToken(baseUrl: string): string {
-    const querySymbol = baseUrl.includes('?') ? '&' : '?';
-    return `${baseUrl}${querySymbol}access_token=${getToken()}`;
-}

src/utils/notifications-provider.ts

@@ -6,31 +6,22 @@
  */
 
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import type { AppState } from '../redux/reducer';
-import { getUrlWithToken, getWsBase } from './api-ws';
+import { getWsBase } from './api-ws';
 import { APP_NAME } from './config-params';
 import { NotificationsUrlKeys, PREFIX_CONFIG_NOTIFICATION_WS } from '@gridsuite/commons-ui';
 
 export function useNotificationsUrlGenerator() {
     // The websocket API doesn't allow relative urls
     const wsBase = getWsBase();
-    const tokenId = useSelector((state: AppState) => state.user?.id_token);
 
-    // return a mapper with NOTIFICATIONS_URL_KEYS and undefined value if URL is not yet buildable (tokenId)
+    // return a mapper with NOTIFICATIONS_URL_KEYS value
     // it will be used to register listeners as soon as possible.
     return useMemo(
         () =>
             ({
-                [NotificationsUrlKeys.CONFIG]: tokenId
-                    ? getUrlWithToken(
-                          `${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?${new URLSearchParams({ appName: APP_NAME })}`
-                      )
-                    : undefined,
-                [NotificationsUrlKeys.GLOBAL_CONFIG]: tokenId
-                    ? getUrlWithToken(`${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/global`)
-                    : undefined,
-            }) satisfies Partial<Record<NotificationsUrlKeys, string | undefined>>,
-        [wsBase, tokenId]
+                [NotificationsUrlKeys.CONFIG]: `${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?${new URLSearchParams({ appName: APP_NAME })}`,
+                [NotificationsUrlKeys.GLOBAL_CONFIG]: `${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/global`,
+            }) satisfies Partial<Record<NotificationsUrlKeys, string>>,
+        [wsBase]
     );
 }