Remove mutualized functions

.env

@@ -1,5 +1,6 @@
 VITE_DEBUG_REQUESTS=false
 VITE_DEBUG_AGGRID=false
+VITE_DEBUG_HOOK_RENDER=false
 
 VITE_API_GATEWAY=/api/gateway
 VITE_WS_GATEWAY=/ws/gateway

package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.63.2",
+        "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.63.2.tgz",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",

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

@@ -9,23 +9,26 @@ import {
     forwardRef,
     FunctionComponent,
     ReactElement,
+    useCallback,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
 import { ManageAccounts, PeopleAlt } from '@mui/icons-material';
-import { logout, TopBar } from '@gridsuite/commons-ui';
-import { useParameterState } from '../parameters';
 import {
-    APP_NAME,
+    AppMetadataCommon,
+    logout,
     PARAM_LANGUAGE,
     PARAM_THEME,
-} from '../../utils/config-params';
+    TopBar,
+} from '@gridsuite/commons-ui';
+import { useParameterState } from '../parameters';
+import { APP_NAME } from '../../utils/config-params';
 import { NavLink, useMatches, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { AppsMetadataSrv, MetadataJson, StudySrv } from '../../services';
+import { appsMetadataSrv, studySrv } from '../../services';
 import GridAdminLogoLight from '../../images/GridAdmin_logo_light.svg?react';
 import GridAdminLogoDark from '../../images/GridAdmin_logo_dark.svg?react';
 import AppPackage from '../../../package.json';
@@ -67,7 +70,7 @@ const tabs = new Map<MainPaths, ReactElement>([
 const AppTopBar: FunctionComponent = () => {
     const theme = useTheme();
     const dispatch = useDispatch<AppDispatch>();
-    const user = useSelector((state: AppState) => state.user);
+    const user = useSelector((state: AppState) => state.user ?? null);
     const userManagerInstance = useSelector(
         (state: AppState) => state.userManager?.instance
     );
@@ -87,14 +90,18 @@ const AppTopBar: FunctionComponent = () => {
     const [languageLocal, handleChangeLanguage] =
         useParameterState(PARAM_LANGUAGE);
 
-    const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
+    const [appsAndUrls, setAppsAndUrls] = useState<AppMetadataCommon[]>([]);
     useEffect(() => {
         if (user !== null) {
-            AppsMetadataSrv.fetchAppsAndUrls().then((res) => {
+            appsMetadataSrv.fetchAppsMetadata().then((res) => {
                 setAppsAndUrls(res);
             });
         }
     }, [user]);
+    const additionalModulesFetcher = useCallback(
+        () => studySrv.getServersInfos(APP_NAME),
+        []
+    );
 
     return (
         <TopBar
@@ -114,11 +121,11 @@ const AppTopBar: FunctionComponent = () => {
             user={user ?? undefined}
             appsAndUrls={appsAndUrls}
             globalVersionPromise={() =>
-                AppsMetadataSrv.fetchVersion().then(
-                    (res) => res?.deployVersion ?? 'unknown'
-                )
+                appsMetadataSrv
+                    .fetchVersion()
+                    .then((res) => res?.deployVersion ?? 'unknown')
             }
-            additionalModulesPromise={StudySrv.getServersInfos}
+            additionalModulesPromise={additionalModulesFetcher}
             onThemeClick={handleChangeTheme}
             theme={themeLocal}
             onLanguageClick={handleChangeLanguage}

src/components/App/app-wrapper.tsx

@@ -26,6 +26,7 @@ import {
     LIGHT_THEME,
     login_en,
     login_fr,
+    PARAM_THEME,
     SnackbarProvider,
     top_bar_en,
     top_bar_fr,
@@ -35,7 +36,6 @@ import { Provider, useSelector } from 'react-redux';
 import messages_en from '../../translations/en.json';
 import messages_fr from '../../translations/fr.json';
 import { store } from '../../redux/store';
-import { PARAM_THEME } from '../../utils/config-params';
 import { AppState } from '../../redux/reducer';
 import { AppWithAuthRouter } from '../../routes';
 

src/components/App/app.tsx

@@ -13,31 +13,32 @@ import {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
-import { CardErrorBoundary, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    CardErrorBoundary,
+    COMMON_APP_NAME,
+    ConfigParameters,
+    getComputedLanguage,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import {
     selectComputedLanguage,
     selectLanguage,
     selectTheme,
 } from '../../redux/actions';
 import { AppState } from '../../redux/reducer';
-import { ConfigNotif, ConfigParameters, ConfigSrv } from '../../services';
-import {
-    APP_NAME,
-    COMMON_APP_NAME,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-} from '../../utils/config-params';
-import { getComputedLanguage } from '../../utils/language';
+import { configNotificationSrv, configSrv } from '../../services';
+import { APP_NAME } from '../../utils/config-params';
 import AppTopBar from './app-top-bar';
-import ReconnectingWebSocket from 'reconnecting-websocket';
 import { useDebugRender } from '../../utils/hooks';
 import { AppDispatch } from '../../redux/store';
 
 const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
     useDebugRender('app');
     const { snackError } = useSnackMessage();
     const dispatch = useDispatch<AppDispatch>();
-    const user = useSelector((state: AppState) => state.user);
+    const user = useSelector((state: AppState) => state.user ?? null);
 
     const updateParams = useCallback(
         (params: ConfigParameters) => {
@@ -65,33 +66,33 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
         [dispatch]
     );
 
-    const connectNotificationsUpdateConfig =
-        useCallback((): ReconnectingWebSocket => {
-            const ws = ConfigNotif.connectNotificationsWsUpdateConfig();
-            ws.onmessage = function (event) {
-                let eventData = JSON.parse(event.data);
-                if (eventData?.headers?.parameterName) {
-                    ConfigSrv.fetchConfigParameter(
-                        eventData.headers.parameterName
-                    )
-                        .then((param) => updateParams([param]))
-                        .catch((error) =>
-                            snackError({
-                                messageTxt: error.message,
-                                headerId: 'paramsRetrievingError',
-                            })
-                        );
-                }
-            };
-            ws.onerror = function (event) {
-                console.error('Unexpected Notification WebSocket error', event);
-            };
-            return ws;
-        }, [updateParams, snackError]);
+    const connectNotificationsUpdateConfig = useCallback(() => {
+        const ws =
+            configNotificationSrv.connectNotificationsWsUpdateConfig(APP_NAME);
+        ws.onmessage = function (event) {
+            let eventData = JSON.parse(event.data);
+            if (eventData?.headers?.parameterName) {
+                configSrv
+                    .fetchConfigParameter(eventData.headers.parameterName)
+                    .then((param) => updateParams([param]))
+                    .catch((error) =>
+                        snackError({
+                            messageTxt: error.message,
+                            headerId: 'paramsRetrievingError',
+                        })
+                    );
+            }
+        };
+        ws.onerror = function (event) {
+            console.error('Unexpected Notification WebSocket error', event);
+        };
+        return ws;
+    }, [updateParams, snackError]);
 
     useEffect(() => {
         if (user !== null) {
-            ConfigSrv.fetchConfigParameters(COMMON_APP_NAME)
+            configSrv
+                .fetchConfigParameters(COMMON_APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({
@@ -100,7 +101,8 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
                     })
                 );
 
-            ConfigSrv.fetchConfigParameters(APP_NAME)
+            configSrv
+                .fetchConfigParameters(APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/components/parameters.tsx

@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ConfigSrv } from '../services';
+import { configSrv } from '../services';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { AppState, AppStateKey } from '../redux/reducer';
 
@@ -25,7 +25,8 @@ export function useParameterState<K extends AppStateKey>(
     const handleChangeParamLocalState = useCallback(
         (value: AppState[K]) => {
             setParamLocalState(value);
-            ConfigSrv.updateConfigParameter(paramName, value as string) //TODO how to check/cast?
+            configSrv
+                .updateConfigParameter(paramName, value as string) //TODO how to check/cast?
                 .catch((error) => {
                     setParamLocalState(paramGlobalState);
                     snackError({

src/pages/profiles/add-profile-dialog.tsx

@@ -19,7 +19,7 @@ import {
 import { FormattedMessage } from 'react-intl';
 import { Controller, useForm } from 'react-hook-form';
 import { ManageAccounts } from '@mui/icons-material';
-import { UserAdminSrv, UserProfile } from '../../services';
+import { userAdminSrv, UserProfile } from '../../services';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { GridTableRef } from '../../components/Grid';
 import PaperForm from '../common/paper-form';
@@ -44,7 +44,8 @@ const AddProfileDialog: FunctionComponent<AddProfileDialogProps> = (props) => {
             const profileData: UserProfile = {
                 name: name,
             };
-            UserAdminSrv.addProfile(profileData)
+            userAdminSrv
+                .addProfile(profileData)
                 .catch((error) =>
                     snackError({
                         messageTxt: error.message,

src/pages/profiles/modification/parameter-selection.tsx

@@ -12,7 +12,7 @@ import { Grid, IconButton, Tooltip } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { DirectoryItemSelector, ElementType } from '@gridsuite/commons-ui';
 import { useController, useWatch } from 'react-hook-form';
-import { DirectorySrv } from '../../../services';
+import { directorySrv } from '../../../services';
 import LinkedPathDisplay from './linked-path-display';
 
 export interface ParameterSelectionProps {
@@ -45,7 +45,8 @@ const ParameterSelection: FunctionComponent<ParameterSelectionProps> = (
             setSelectedElementName(undefined);
             setParameterLinkValid(undefined);
         } else {
-            DirectorySrv.fetchPath(watchParamId)
+            directorySrv
+                .fetchPath(watchParamId)
                 .then((res: any) => {
                     setParameterLinkValid(true);
                     setSelectedElementName(

src/pages/profiles/modification/profile-modification-dialog.tsx

@@ -11,7 +11,6 @@ import ProfileModificationForm, {
     USER_QUOTA_BUILD_NB,
     USER_QUOTA_CASE_NB,
 } from './profile-modification-form';
-import yup from '../../../utils/yup-config';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import {
@@ -21,8 +20,8 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { CustomMuiDialog, useSnackMessage } from '@gridsuite/commons-ui';
-import { UserAdminSrv, UserProfile } from '../../../services';
+import { CustomMuiDialog, useSnackMessage, yup } from '@gridsuite/commons-ui';
+import { userAdminSrv, UserProfile } from '../../../services';
 import { UUID } from 'crypto';
 
 // TODO remove FetchStatus when exported in commons-ui (available soon)
@@ -80,7 +79,8 @@ const ProfileModificationDialog: FunctionComponent<
                     maxAllowedCases: profileFormData[USER_QUOTA_CASE_NB],
                     maxAllowedBuilds: profileFormData[USER_QUOTA_BUILD_NB],
                 };
-                UserAdminSrv.modifyProfile(profileData)
+                userAdminSrv
+                    .modifyProfile(profileData)
                     .catch((error) => {
                         snackError({
                             messageTxt: error.message,
@@ -103,7 +103,8 @@ const ProfileModificationDialog: FunctionComponent<
     useEffect(() => {
         if (profileId && open) {
             setDataFetchStatus(FetchStatus.FETCHING);
-            UserAdminSrv.getProfile(profileId)
+            userAdminSrv
+                .getProfile(profileId)
                 .then((response) => {
                     setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
                     reset({

src/pages/profiles/profiles-table.tsx

@@ -25,7 +25,7 @@ import {
     GridTable,
     GridTableRef,
 } from '../../components/Grid';
-import { UserAdminSrv, UserProfile } from '../../services';
+import { userAdminSrv, UserProfile } from '../../services';
 import {
     ColDef,
     GetRowIdParams,
@@ -74,7 +74,8 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
 
     const deleteProfiles = useCallback(() => {
         let profileNames = rowsSelection.map((userProfile) => userProfile.name);
-        return UserAdminSrv.deleteProfiles(profileNames)
+        return userAdminSrv
+            .deleteProfiles(profileNames)
             .catch((error) => {
                 if (error.status === 422) {
                     snackError({
@@ -149,7 +150,7 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
     return (
         <GridTable<UserProfile, {}>
             ref={props.gridRef}
-            dataLoader={UserAdminSrv.fetchProfiles}
+            dataLoader={userAdminSrv.fetchProfiles}
             columnDefs={columns}
             defaultColDef={defaultColDef}
             gridId="table-profiles"