Remove mutualized functions

.env

@@ -4,8 +4,8 @@ REACT_APP_NAME=GridDynaApp
 
 EXTEND_ESLINT=true
 
-REACT_APP_API_PREFIX=api
-REACT_APP_GATEWAY_PREFIX=/gateway
-REACT_APP_URI=/dynamic-mapping-server
 REACT_APP_WS_GATEWAY=ws/gateway
-REACT_APP_STUDY_URI=/study-server
+REACT_APP_API_GATEWAY=api/gateway
+
+REACT_APP_API_PREFIX=api/gateway
+REACT_APP_DYNAMAP_SVC=dynamic-mapping

.env.development

@@ -2,8 +2,8 @@ REACT_APP_USE_AUTHENTICATION=false
 
 REACT_APP_NAME=GridDynaApp
 
-REACT_APP_API_PREFIX=api
-REACT_APP_GATEWAY_PREFIX=/gateway
-REACT_APP_URI=/dynamic-mapping-server
 REACT_APP_WS_GATEWAY=ws/gateway
-REACT_APP_STUDY_URI=/study-server
+REACT_APP_API_GATEWAY=api/gateway
+
+REACT_APP_API_PREFIX=api
+REACT_APP_DYNAMAP_SVC=dynamic-mapping-server

package.json

@@ -7,7 +7,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.63.4",
+        "@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/2-molecules/Header.jsx

@@ -9,9 +9,8 @@ import { Grid, Tooltip, Typography } from '@mui/material';
 import { AddIconButton, AttachButton, SaveButton } from '../1-atoms/buttons/';
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { mergeSx } from '@gridsuite/commons-ui';
 import { styles } from './HeaderStyles';
-import { mergeSx } from 'utils/functions';
 
 const outdatedLabel = 'Generated elements are outdated, re-generate them to delete this warning';
 

src/components/2-molecules/SetGroupSelect.tsx

@@ -6,13 +6,13 @@
  */
 
 import { Checkbox, Grid, Typography } from '@mui/material';
+import { mergeSx } from '@gridsuite/commons-ui';
 import Select from '../1-atoms/Select';
 import { styles } from './SetGroupSelectStyle';
 import React, { useEffect, useState } from 'react';
 import { SetType } from '../../constants/models';
 import { EditButton } from '../1-atoms/buttons';
 import { Group, Model } from '../../redux/types/model.type';
-import { mergeSx } from 'utils/functions';
 
 const setLabel = 'and use parameters group';
 const editGroupLabel = 'Edit the parameters group and/or the parameters sets';
@@ -92,7 +92,11 @@ const SetGroupSelect = (props: SetGroupSelectProps) => {
                 <Grid item xs sx={styles.gridItem}>
                     <Typography variant="subtitle1">{`${setLabel} :`}</Typography>
                 </Grid>
-                <Grid item xs="auto" sx={mergeSx(styles.button, styles.gridItem, errorInParams && styles.errorButton)}>
+                <Grid
+                    item
+                    xs="auto"
+                    sx={mergeSx(styles.button, styles.gridItem, errorInParams ? styles.errorButton : undefined)}
+                >
                     <EditButton
                         onClick={editGroup(isAbsolute)}
                         disabled={model === '' || (setGroup && !controlledParameters)}

src/components/3-organisms/Automaton.jsx

@@ -7,14 +7,14 @@
 
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { mergeSx } from '@gridsuite/commons-ui';
 import { CopyButton, DeleteButton } from '../1-atoms/buttons';
 import { Grid, Paper, Typography } from '@mui/material';
 import { styles } from './AutomatonStyle';
 import ModelSelect from '../2-molecules/ModelSelect';
 import { SetType } from '../../constants/models';
 import AutomatonProperties from './automaton/AutomatonProperties';
 import SetGroupSelect from '../2-molecules/SetGroupSelect';
-import { mergeSx } from 'utils/functions';
 
 const Automaton = (props) => {
     const {

src/components/3-organisms/Filter.jsx

@@ -8,11 +8,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Grid, Tooltip, Typography } from '@mui/material';
-import { CustomReactQueryBuilder, EXPERT_FILTER_FIELDS, EXPERT_FILTER_QUERY } from '@gridsuite/commons-ui';
+import { CustomReactQueryBuilder, EXPERT_FILTER_FIELDS, EXPERT_FILTER_QUERY, mergeSx } from '@gridsuite/commons-ui';
 import { useIntl } from 'react-intl';
 import { AddIconButton, DeleteButton } from '../1-atoms/buttons';
 import { styles } from './FilterStyle';
-import { mergeSx } from '../../utils/functions';
 import InfoIcon from '@mui/icons-material/Info';
 
 const filterLabel = 'Where:';

src/components/3-organisms/Rule.jsx

@@ -7,12 +7,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { mergeSx } from '@gridsuite/commons-ui';
 import { CopyButton, DeleteButton } from '../1-atoms/buttons';
 import { Grid, Paper, Typography } from '@mui/material';
 import { styles } from './RuleStyle';
 import ModelSelect from '../2-molecules/ModelSelect';
 import SetGroupSelect from '../2-molecules/SetGroupSelect';
-import { mergeSx } from 'utils/functions';
 
 const equipmentLabel = 'Each';
 const deleteRuleLabel = 'Delete model';

src/components/3-organisms/SetEditor.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { ParameterOrigin, ParameterType } from '../../constants/models';
 import { Box, Grid, TextField, Tooltip, Typography } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
-import * as _ from 'lodash';
+import { cloneDeep } from 'lodash';
 import { isParameterValueValid } from '../../utils/parameters';
 
 const infoTypeLabel = 'This parameter is of type ';
@@ -38,15 +38,15 @@ const SetEditor = (props) => {
             filteredDefinitions.find((definition) => definition.name === parameterChanged).type === ParameterType.DOUBLE
                 ? newValue.replace(',', '.')
                 : newValue;
-        const updatedSet = _.cloneDeep(set);
+        const updatedSet = cloneDeep(set);
         updatedSet.parameters.find((parameter) => parameter.name === parameterChanged).value = newValueToUse;
         saveSet(updatedSet);
     };
 
     return (
         <Box>
             <Typography variant="h5"> {set.name}</Typography>
-            {_.cloneDeep(filteredDefinitions)
+            {cloneDeep(filteredDefinitions)
                 .sort((a, b) => valueOrigin(a.origin) - valueOrigin(b.origin))
                 .map((definition) => {
                     const correspondingParameter = set.parameters.find((param) => param.name === definition.name);

src/components/3-organisms/automaton/AutomatonProperties.tsx

@@ -10,7 +10,7 @@ import { Divider, Grid, Typography } from '@mui/material';
 import Autocomplete from '../../1-atoms/Autocomplete';
 import { styles } from './AutomatonPropertiesStyle';
 import { getPossibleOptionsForProperty } from '../../../utils/automata';
-import * as _ from 'lodash';
+import { isArray, join, map, split, trim } from 'lodash';
 import { Automaton } from '../../../redux/types/mapping.type';
 import { AutomationDefinition } from '../../../redux/types/model.type';
 import { EquipmentValues } from '../../../redux/types/network.type';
@@ -39,7 +39,7 @@ const AutomatonProperties = ({
                 propertyType
             )(
                 // convert an array to a string content with VALUE_DELIMITER
-                _.isArray(propertyValue) ? _.join(propertyValue, VALUE_DELIMITER) : propertyValue
+                isArray(propertyValue) ? join(propertyValue, VALUE_DELIMITER) : propertyValue
             );
         },
         [onChangeProperty]
@@ -53,7 +53,7 @@ const AutomatonProperties = ({
 
                     // convert a string content with VALUE_DELIMITER to an array
                     const propertyValue = propertyDefinition.multiple
-                        ? _.map(_.split(property?.value, VALUE_DELIMITER), _.trim)
+                        ? map(split(property?.value, VALUE_DELIMITER), trim)
                         : property?.value ?? '';
 
                     const options =

src/components/3-organisms/hooks/useSetSearch.js

@@ -13,7 +13,7 @@ import {
     makeGetSearchSets,
     ModelSlice,
 } from '../../../redux/slices/Model';
-import _ from 'lodash';
+import { cloneDeep, find, forEach, reduce } from 'lodash';
 import { useDispatch } from 'react-redux';
 
 export default function useSetSearch(currentGroup, currentSet) {
@@ -49,13 +49,13 @@ export default function useSetSearch(currentGroup, currentSet) {
             }
 
             const updatedSets = isAll
-                ? _.reduce(currentGroup?.sets, (acc, set) => [...acc, _.cloneDeep(set)], [])
-                : [_.cloneDeep(currentSet)];
+                ? reduce(currentGroup?.sets, (acc, set) => [...acc, cloneDeep(set)], [])
+                : [cloneDeep(currentSet)];
 
             // fill with values in the provided sets
-            _.forEach(updatedSets, (updatedSet) => {
-                _.forEach(updatedSet?.parameters, (parameter) => {
-                    const templateParameter = _.find(set?.parameters, (elem) => elem.name === parameter.name);
+            forEach(updatedSets, (updatedSet) => {
+                forEach(updatedSet?.parameters, (parameter) => {
+                    const templateParameter = find(set?.parameters, (elem) => elem.name === parameter.name);
                     templateParameter && (parameter.value = templateParameter?.value);
                 });
             });

src/components/app.js

@@ -10,23 +10,22 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Navigate, Route, Routes, useLocation, useMatch, useNavigate } from 'react-router-dom';
 import { Box, CssBaseline } from '@mui/material';
 import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import { LIGHT_THEME } from '../redux/slices/Theme';
 import {
     AuthenticationRouter,
     CardErrorBoundary,
     getPreLoginPath,
     initializeAuthenticationDev,
     initializeAuthenticationProd,
+    LIGHT_THEME,
     logout,
     TopBar,
 } from '@gridsuite/commons-ui';
 import { FormattedMessage } from 'react-intl';
 import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
 import AppPackage from '../../package.json';
-import { fetchAppsAndUrls, fetchIdpSettings, fetchValidateUser, fetchVersion } from '../utils/rest-api';
-import { getServersInfos } from '../rest/studyAPI';
 import { UserSlice } from '../redux/slices/User';
 import RootContainer from '../containers/RootContainer';
+import { appLocalSrv, appsMetadataSrv, studySrv, userAdminSrv } from '../services';
 
 const lightTheme = createTheme({
     palette: {
@@ -65,13 +64,20 @@ const App = () => {
 
     const navigate = useNavigate();
 
+    const onLogoClick = useCallback(() => navigate('/', { replace: true }), [navigate]);
+
     const dispatch = useDispatch();
 
     const authenticationDispatch = useCallback(
         (action) => dispatch(UserSlice.actions[action.type](action)),
         [dispatch]
     );
 
+    const onLogoutClick = useCallback(
+        () => logout(authenticationDispatch, userManager.instance),
+        [authenticationDispatch, userManager.instance]
+    );
+
     const location = useLocation();
 
     // Can't use lazy initializer because useMatch is a hook
@@ -97,8 +103,8 @@ const App = () => {
                         ? initializeAuthenticationProd(
                               authenticationDispatch,
                               initialMatchSilentRenewCallbackUrl != null,
-                              fetchIdpSettings,
-                              fetchValidateUser,
+                              appLocalSrv.fetchIdpSettings,
+                              userAdminSrv.fetchValidateUser,
                               initialMatchSigninCallbackUrl != null
                           )
                         : initializeAuthenticationDev(
@@ -120,12 +126,18 @@ const App = () => {
 
     useEffect(() => {
         if (user !== null) {
-            fetchAppsAndUrls().then((res) => {
+            appsMetadataSrv.fetchAppsMetadata().then((res) => {
                 setAppsAndUrls(res);
             });
         }
     }, [user]);
 
+    const additionalModulesFetcher = useCallback(() => studySrv.getServersInfos('dyna'), []);
+    const globalVersionFetcher = useCallback(
+        () => appsMetadataSrv.fetchVersion().then((res) => res?.deployVersion),
+        []
+    );
+
     return (
         <StyledEngineProvider injectFirst>
             <ThemeProvider theme={getMuiTheme(theme)}>
@@ -137,12 +149,12 @@ const App = () => {
                         appLogo={<PowsyblLogo />}
                         appVersion={AppPackage.version}
                         appLicense={AppPackage.license}
-                        onLogoClick={() => navigate('/', { replace: true })}
-                        onLogoutClick={() => logout(authenticationDispatch, userManager.instance)}
+                        onLogoClick={onLogoClick}
+                        onLogoutClick={onLogoutClick}
                         user={user}
                         appsAndUrls={appsAndUrls}
-                        globalVersionPromise={() => fetchVersion().then((res) => res?.deployVersion)}
-                        additionalModulesPromise={getServersInfos}
+                        globalVersionPromise={globalVersionFetcher}
+                        additionalModulesPromise={additionalModulesFetcher}
                     />
                     <CardErrorBoundary>
                         {user !== null ? (

src/hooks/react-hook-form/form/useDataUpdate.ts

@@ -7,7 +7,7 @@
 import { useEffect } from 'react';
 import { FieldErrors, FieldValues, UseFormReturn } from 'react-hook-form';
 import { usePrevious } from '@gridsuite/commons-ui';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 
 const useDataUpdate = (
     formApi: UseFormReturn,
@@ -18,7 +18,7 @@ const useDataUpdate = (
     const prevFormData = usePrevious(formData);
 
     useEffect(() => {
-        if (!_.isEqual(prevFormData, formData)) {
+        if (!isEqual(prevFormData, formData)) {
             formApi.handleSubmit(onValid, onInvalid)();
         }
     }, [formApi, onValid, onInvalid, formData, prevFormData]);

src/react-app-env.d.ts

@@ -6,3 +6,13 @@
  */
 
 /// <reference types="react-scripts" />
+
+namespace NodeJS {
+    interface ProcessEnv {
+        REACT_APP_API_GATEWAY: string;
+        REACT_APP_WS_GATEWAY: string;
+
+        REACT_APP_API_PREFIX: string;
+        REACT_APP_DYNAMAP_SVC: string;
+    }
+}