Remove mutualized api 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.4.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

@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { forwardRef, FunctionComponent, ReactElement, useEffect, useMemo, useState } from 'react';
+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 { AppMetadataCommon, logout, PARAM_LANGUAGE, PARAM_THEME, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
-import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../../utils/config-params';
+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';
@@ -56,7 +56,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);
 
     const navigate = useNavigate();
@@ -73,14 +73,15 @@ const AppTopBar: FunctionComponent = () => {
     const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
     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
@@ -93,8 +94,8 @@ const AppTopBar: FunctionComponent = () => {
             onLogoClick={() => navigate('/', { replace: true })}
             user={user ?? undefined}
             appsAndUrls={appsAndUrls}
-            globalVersionPromise={() => AppsMetadataSrv.fetchVersion().then((res) => res?.deployVersion ?? 'unknown')}
-            additionalModulesPromise={StudySrv.getServersInfos}
+            globalVersionPromise={() => appsMetadataSrv.fetchVersion().then((res) => res?.deployVersion ?? 'unknown')}
+            additionalModulesPromise={additionalModulesFetcher}
             onThemeClick={handleChangeTheme}
             theme={themeLocal}
             onLanguageClick={handleChangeLanguage}

src/components/App/app-wrapper.tsx

@@ -21,6 +21,7 @@ import {
     LIGHT_THEME,
     login_en,
     login_fr,
+    PARAM_THEME,
     SnackbarProvider,
     top_bar_en,
     top_bar_fr,
@@ -30,7 +31,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

@@ -8,22 +8,28 @@
 import { FunctionComponent, PropsWithChildren, useCallback, useEffect } 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,
+    useDebugLog,
+    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');
+    useDebugLog('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) => {
@@ -47,12 +53,13 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
         [dispatch]
     );
 
-    const connectNotificationsUpdateConfig = useCallback((): ReconnectingWebSocket => {
-        const ws = ConfigNotif.connectNotificationsWsUpdateConfig();
+    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)
+                configSrv
+                    .fetchConfigParameter(eventData.headers.parameterName)
                     .then((param) => updateParams([param]))
                     .catch((error) =>
                         snackError({
@@ -70,7 +77,8 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
 
     useEffect(() => {
         if (user !== null) {
-            ConfigSrv.fetchConfigParameters(COMMON_APP_NAME)
+            configSrv
+                .fetchConfigParameters(COMMON_APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({
@@ -79,7 +87,8 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
                     })
                 );
 
-            ConfigSrv.fetchConfigParameters(APP_NAME)
+            configSrv
+                .fetchConfigParameters(APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/components/Grid/AgGrid.tsx

@@ -22,10 +22,9 @@ import {
 import { Box, useTheme } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
-import { LANG_FRENCH } from '@gridsuite/commons-ui';
+import { LANG_FRENCH, useDebugLog } from '@gridsuite/commons-ui';
 import { AG_GRID_LOCALE_FR } from '../../translations/ag-grid/locales';
 import { GridOptions } from 'ag-grid-community';
-import { useDebugRender } from '../../utils/hooks';
 
 const messages: Record<string, Record<string, string>> = {
     [LANG_FRENCH]: AG_GRID_LOCALE_FR,
@@ -70,7 +69,7 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<TData, TContext
     const theme = useTheme();
 
     const id = useId();
-    useDebugRender(`ag-grid(${id}) ${props.gridId}`);
+    useDebugLog(`ag-grid(${id}) ${props.gridId}`);
 
     const agGridRef = useRef<AgGridReact<TData>>(null);
     const agGridRefContent = agGridRef.current;

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';
 
@@ -23,7 +23,8 @@ export function useParameterState<K extends AppStateKey>(paramName: K): [AppStat
     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 {
@@ -42,7 +42,8 @@ const ParameterSelection: FunctionComponent<ParameterSelectionProps> = (props) =
             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,12 +11,11 @@ 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 { FunctionComponent, useCallback, useEffect, 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)
@@ -69,7 +68,8 @@ const ProfileModificationDialog: FunctionComponent<ProfileModificationDialogProp
                     maxAllowedCases: profileFormData[USER_QUOTA_CASE_NB],
                     maxAllowedBuilds: profileFormData[USER_QUOTA_BUILD_NB],
                 };
-                UserAdminSrv.modifyProfile(profileData)
+                userAdminSrv
+                    .modifyProfile(profileData)
                     .catch((error) => {
                         snackError({
                             messageTxt: error.message,
@@ -92,7 +92,8 @@ const ProfileModificationDialog: FunctionComponent<ProfileModificationDialogProp
     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

@@ -9,7 +9,7 @@ import { FunctionComponent, RefObject, useCallback, useMemo, useState } from 're
 import { useIntl } from 'react-intl';
 import { Cancel, CheckCircle, ManageAccounts, RadioButtonUnchecked } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
-import { UserAdminSrv, UserProfile } from '../../services';
+import { userAdminSrv, UserProfile } from '../../services';
 import {
     ColDef,
     GetRowIdParams,
@@ -54,7 +54,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({
@@ -126,7 +127,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"