Remove mutualized functions

.env.development

@@ -1,3 +1 @@
 REACT_APP_USE_AUTHENTICATION=false
-
-REACT_APP_SRV_STUDY_URI=study-server

README.md

@@ -5,7 +5,7 @@ This template setup the authentication mechanism and provides a configured empty
 
 To customize this repository for an app, search and replace the string `XXX` with the name of the app. For example, GridXXX -> GridFoo, gridXXX-app -> gridfoo-app.
 
-Create a new view in study-server and replace `yyy` with the new token in rest api `src/rest/study.ts`. 
+Create a new view in study-server and replace `yyy` with the new token in rest api `src/services/index.ts`. 
 
 ## Typescript config
 

package.json

@@ -11,7 +11,6 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.63.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "^5.0.0-alpha.169",
@@ -82,6 +81,7 @@
     },
     "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@gridsuite/commons-ui": "file:../_frontend/commons-ui/gridsuite-commons-ui-0.63.2.tgz",
         "@types/core-js": "^2.5.8",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/jest": "^27.5.2",

src/components/app-top-bar.tsx

@@ -11,26 +11,24 @@ import React, {
     useEffect,
     useState,
 } from 'react';
-import {
-    LIGHT_THEME,
-    logout,
-    TopBar,
-    UserManagerState,
-} from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
-import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
+import { APP_NAME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-    fetchAppsAndUrls,
-    fetchVersion,
-    MetadataJson,
-} from '../utils/rest-api';
-import { getServersInfos } from '../rest/study';
+import { appsMetadataSrv, studySrv } from '../services';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg';
 import AppPackage from '../../package.json';
 import { AppState } from '../redux/reducer';
 import { AppDispatch } from '../redux/store';
+import {
+    AppMetadataCommon,
+    LIGHT_THEME,
+    logout,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
+    TopBar,
+    UserManagerState,
+} from '@gridsuite/commons-ui';
 
 export type AppTopBarProps = {
     user?: AppState['user'];
@@ -41,7 +39,7 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
 
     const dispatch = useDispatch<AppDispatch>();
 
-    const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
+    const [appsAndUrls, setAppsAndUrls] = useState<AppMetadataCommon[]>([]);
 
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
 
@@ -53,14 +51,29 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const [showParameters, setShowParameters] = useState(false);
     const displayParameters = useCallback(() => setShowParameters(true), []);
     const hideParameters = useCallback(() => setShowParameters(false), []);
+    const onLogoutClick = useCallback(
+        () => logout(dispatch, props.userManager.instance),
+        [dispatch, props.userManager.instance]
+    );
 
     useEffect(() => {
-        if (props.user !== null) {
-            fetchAppsAndUrls().then((res) => {
+        if (props.user !== undefined) {
+            appsMetadataSrv.fetchAppsMetadata().then((res) => {
                 setAppsAndUrls(res);
             });
         }
     }, [props.user]);
+    const globalVersionFetcher = useCallback(
+        () =>
+            appsMetadataSrv
+                .fetchVersion()
+                .then((res) => res?.deployVersion ?? 'unknown'),
+        []
+    );
+    const additionalModulesFetcher = useCallback(
+        () => studySrv.getServersInfos('yyy'),
+        []
+    );
 
     return (
         <>
@@ -77,18 +90,12 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
                 onParametersClick={displayParameters}
-                onLogoutClick={() =>
-                    logout(dispatch, props.userManager.instance)
-                }
+                onLogoutClick={onLogoutClick}
                 onLogoClick={() => navigate('/', { replace: true })}
-                user={props.user ?? undefined}
+                user={props.user}
                 appsAndUrls={appsAndUrls}
-                globalVersionPromise={() =>
-                    fetchVersion().then(
-                        (res) => res?.deployVersion ?? 'unknown'
-                    )
-                }
-                additionalModulesPromise={getServersInfos}
+                globalVersionPromise={globalVersionFetcher}
+                additionalModulesPromise={additionalModulesFetcher}
                 onThemeClick={handleChangeTheme}
                 theme={themeLocal}
                 onLanguageClick={handleChangeLanguage}

src/components/app-wrapper.tsx

@@ -22,6 +22,7 @@ import {
     LIGHT_THEME,
     login_en,
     login_fr,
+    PARAM_THEME,
     SnackbarProvider,
     top_bar_en,
     top_bar_fr,
@@ -34,7 +35,6 @@ import messages_fr from '../translations/fr.json';
 import messages_plugins_en from '../plugins/translations/en.json';
 import messages_plugins_fr from '../plugins/translations/fr.json';
 import { store } from '../redux/store';
-import { PARAM_THEME } from '../utils/config-params';
 import { IntlConfig } from 'react-intl/src/types';
 import { AppState } from '../redux/reducer';
 

src/components/app.tsx

@@ -25,9 +25,15 @@ import { Box, Typography } from '@mui/material';
 import {
     AuthenticationRouter,
     CardErrorBoundary,
+    COMMON_APP_NAME,
+    ConfigParameters,
+    getComputedLanguage,
+    getErrorMessage,
     getPreLoginPath,
     initializeAuthenticationDev,
     initializeAuthenticationProd,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import {
@@ -37,23 +43,14 @@ import {
 } from '../redux/actions';
 import { AppState } from '../redux/reducer';
 import {
-    ConfigParameters,
-    connectNotificationsWsUpdateConfig,
-    fetchConfigParameter,
-    fetchConfigParameters,
-    fetchIdpSettings,
-    fetchValidateUser,
-} from '../utils/rest-api';
-import {
-    APP_NAME,
-    COMMON_APP_NAME,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-} from '../utils/config-params';
-import { getComputedLanguage } from '../utils/language';
+    appLocalSrv,
+    configNotificationSrv,
+    configSrv,
+    userAdminSrv,
+} from '../services';
+import { APP_NAME } from '../utils/config-params';
 import AppTopBar, { AppTopBarProps } from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
-import { getErrorMessage } from '../utils/error';
 import { AppDispatch } from '../redux/store';
 
 const App: FunctionComponent = () => {
@@ -107,11 +104,15 @@ const App: FunctionComponent = () => {
 
     const connectNotificationsUpdateConfig =
         useCallback((): ReconnectingWebSocket => {
-            const ws = connectNotificationsWsUpdateConfig();
+            const ws =
+                configNotificationSrv.connectNotificationsWsUpdateConfig(
+                    APP_NAME
+                );
             ws.onmessage = function (event) {
                 let eventData = JSON.parse(event.data);
                 if (eventData.headers?.parameterName) {
-                    fetchConfigParameter(eventData.headers.parameterName)
+                    configSrv
+                        .fetchConfigParameter(eventData.headers.parameterName)
                         .then((param) => updateParams([param]))
                         .catch((error) =>
                             snackError({
@@ -152,8 +153,8 @@ const App: FunctionComponent = () => {
                         ? initializeAuthenticationProd(
                               dispatch,
                               initialMatchSilentRenewCallbackUrl != null,
-                              fetchIdpSettings,
-                              fetchValidateUser,
+                              appLocalSrv.fetchIdpSettings,
+                              userAdminSrv.fetchValidateUser,
                               initialMatchSigninCallbackUrl != null
                           )
                         : initializeAuthenticationDev(
@@ -181,8 +182,9 @@ const App: FunctionComponent = () => {
     ]);
 
     useEffect(() => {
-        if (user !== null) {
-            fetchConfigParameters(COMMON_APP_NAME)
+        if (user !== undefined) {
+            configSrv
+                .fetchConfigParameters(COMMON_APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({
@@ -191,7 +193,8 @@ const App: FunctionComponent = () => {
                     })
                 );
 
-            fetchConfigParameters(APP_NAME)
+            configSrv
+                .fetchConfigParameters(APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({
@@ -215,7 +218,7 @@ const App: FunctionComponent = () => {
         <>
             <AppTopBar user={user} userManager={userManager} />
             <CardErrorBoundary>
-                {user !== null ? (
+                {user !== undefined ? (
                     <Routes>
                         <Route
                             path="/"

src/components/parameters.tsx

@@ -29,7 +29,7 @@ import {
     TypographyTypeMap,
 } from '@mui/material';
 import { CSSObject, Theme } from '@emotion/react';
-import { updateConfigParameter } from '../utils/rest-api';
+import { configSrv } from '../services';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { AppState, AppStateKey } from '../redux/reducer';
 
@@ -62,7 +62,8 @@ export function useParameterState<K extends AppStateKey>(
     const handleChangeParamLocalState = useCallback(
         (value: AppState[K]) => {
             setParamLocalState(value);
-            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/react-app-env.d.ts

@@ -1,8 +1,29 @@
-/**
- * Copyright (c) 2024, RTE (http://www.rte-france.com)
+/*
+ * Copyright © 2024, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
 /// <reference types="react-scripts" />
+
+type EnvDev = {
+    REACT_APP_USE_AUTHENTICATION: true;
+    REACT_APP_SRV_STUDY_URI: string;
+};
+
+type EnvProd = {
+    REACT_APP_USE_AUTHENTICATION: false;
+    REACT_APP_API_GATEWAY: string;
+    REACT_APP_WS_GATEWAY: string;
+};
+
+type EnvCompile = EnvProd | EnvDev;
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    namespace NodeJS {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        interface ProcessEnv extends EnvCompile {}
+    }
+}

src/redux/actions.ts

@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { GsTheme } from '@gridsuite/commons-ui';
-import { PARAM_LANGUAGE } from '../utils/config-params';
+import { GsTheme, PARAM_LANGUAGE } from '@gridsuite/commons-ui';
 import { Action } from 'redux';
 import { AppState } from './reducer';