Fix base

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

@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2021, 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/.
+ */
+
+import { FunctionComponent, useEffect, useState } from 'react';
+import { capitalize, useTheme } from '@mui/material';
+import { logout, TopBar } from '@gridsuite/commons-ui';
+import { useParameterState } from '../parameters';
+import {
+    APP_NAME,
+    PARAM_LANGUAGE,
+    PARAM_THEME,
+} from '../../utils/config-params';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { AppsMetadataSrv, MetadataJson, StudySrv } from '../../services';
+import { ReactComponent as GridAdminLogoLight } from '../../images/GridAdmin_logo_light.svg';
+import { ReactComponent as GridAdminLogoDark } from '../../images/GridAdmin_logo_dark.svg';
+import AppPackage from '../../../package.json';
+import { AppState } from '../../redux/reducer';
+
+export type AppTopBarProps = {
+    user?: AppState['user'];
+    userManager: {
+        instance: unknown | null;
+        error: string | null;
+    };
+};
+
+const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
+    const navigate = useNavigate();
+    const theme = useTheme();
+    const dispatch = useDispatch();
+
+    const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
+
+    const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
+    const [languageLocal, handleChangeLanguage] =
+        useParameterState(PARAM_LANGUAGE);
+
+    useEffect(() => {
+        if (props.user !== null) {
+            AppsMetadataSrv.fetchAppsAndUrls().then((res) => {
+                setAppsAndUrls(res);
+            });
+        }
+    }, [props.user]);
+
+    return (
+        <TopBar
+            appName={capitalize(APP_NAME)}
+            appColor="#FD3745"
+            appLogo={
+                theme.palette.mode === 'light' ? (
+                    <GridAdminLogoLight />
+                ) : (
+                    <GridAdminLogoDark />
+                )
+            }
+            appVersion={AppPackage.version}
+            appLicense={AppPackage.license}
+            onLogoutClick={() => logout(dispatch, props.userManager.instance)}
+            onLogoClick={() => navigate('/', { replace: true })}
+            user={props.user}
+            appsAndUrls={appsAndUrls}
+            globalVersionPromise={() =>
+                AppsMetadataSrv.fetchVersion().then((res) => res?.deployVersion)
+            }
+            additionalModulesPromise={StudySrv.getServersInfos}
+            onThemeClick={handleChangeTheme}
+            theme={themeLocal}
+            onLanguageClick={handleChangeLanguage}
+            language={languageLocal}
+        />
+    );
+};
+export default AppTopBar;

src/components/app-wrapper.tsx → src/components/App/app-wrapper.tsx

@@ -6,18 +6,21 @@
  */
 
 import App from './app';
-import { FunctionComponent } from 'react';
-import { CssBaseline } from '@mui/material';
+import { FunctionComponent, useMemo } from 'react';
+import { CssBaseline, responsiveFontSizes, ThemeOptions } from '@mui/material';
 import {
     createTheme,
     StyledEngineProvider,
     Theme,
     ThemeProvider,
 } from '@mui/material/styles';
+import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale';
 import {
     card_error_boundary_en,
     card_error_boundary_fr,
     CardErrorBoundary,
+    LANG_ENGLISH,
+    LANG_FRENCH,
     LIGHT_THEME,
     login_en,
     login_fr,
@@ -28,17 +31,15 @@ import {
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
-import { SupportedLanguages } from '../utils/language';
-import messages_en from '../translations/en.json';
-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 { SupportedLanguages } from '../../utils/language';
+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 { IntlConfig } from 'react-intl/src/types';
-import { AppState } from '../redux/reducer';
+import { AppState } from '../../redux/reducer';
 
-const lightTheme: Theme = createTheme({
+const lightTheme: ThemeOptions = {
     palette: {
         mode: 'light',
     },
@@ -62,9 +63,9 @@ const lightTheme: Theme = createTheme({
         color: 'blue',
     },
     mapboxStyle: 'mapbox://styles/mapbox/light-v9',
-});
+};
 
-const darkTheme: Theme = createTheme({
+const darkTheme: ThemeOptions = {
     palette: {
         mode: 'dark',
     },
@@ -88,14 +89,15 @@ const darkTheme: Theme = createTheme({
         color: 'green',
     },
     mapboxStyle: 'mapbox://styles/mapbox/dark-v9',
-});
+};
 
-const getMuiTheme = (theme: string): Theme => {
-    if (theme === LIGHT_THEME) {
-        return lightTheme;
-    } else {
-        return darkTheme;
-    }
+const getMuiTheme = (theme: unknown, locale: SupportedLanguages): Theme => {
+    return responsiveFontSizes(
+        createTheme(
+            theme === LIGHT_THEME ? lightTheme : darkTheme,
+            locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS // MUI core translations
+        )
+    );
 };
 
 const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
@@ -104,14 +106,12 @@ const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
         ...login_en,
         ...top_bar_en,
         ...card_error_boundary_en,
-        ...messages_plugins_en, // keep it at the end to allow translation overwriting
     },
     fr: {
         ...messages_fr,
         ...login_fr,
         ...top_bar_fr,
         ...card_error_boundary_fr,
-        ...messages_plugins_fr, // keep it at the end to allow translation overwriting
     },
 };
 
@@ -122,14 +122,19 @@ const AppWrapperWithRedux: FunctionComponent = () => {
         (state: AppState) => state.computedLanguage
     );
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
+    const themeCompiled = useMemo(
+        () => getMuiTheme(theme, computedLanguage),
+        [computedLanguage, theme]
+    );
     return (
         <IntlProvider
             locale={computedLanguage}
+            defaultLocale={LANG_ENGLISH}
             messages={messages[computedLanguage]}
         >
             <BrowserRouter basename={basename}>
                 <StyledEngineProvider injectFirst>
-                    <ThemeProvider theme={getMuiTheme(theme)}>
+                    <ThemeProvider theme={themeCompiled}>
                         <SnackbarProvider hideIconVariant={false}>
                             <CssBaseline />
                             <CardErrorBoundary>

src/components/app.test.tsx → src/components/App/app.test.tsx

@@ -7,7 +7,7 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import App from './app';
-import { store } from '../redux/store';
+import { store } from '../../redux/store';
 import {
     createTheme,
     StyledEngineProvider,

src/components/app.tsx → src/components/App/app.tsx

@@ -28,25 +28,25 @@ import {
     selectComputedLanguage,
     selectLanguage,
     selectTheme,
-} from '../redux/actions';
-import { AppState } from '../redux/reducer';
+} from '../../redux/actions';
+import { AppState } from '../../redux/reducer';
 import {
     AppsMetadataSrv,
     ConfigNotif,
     ConfigParameters,
     ConfigSrv,
     UserAdminSrv,
-} from '../services';
+} from '../../services';
 import {
     APP_NAME,
     COMMON_APP_NAME,
     PARAM_LANGUAGE,
     PARAM_THEME,
-} from '../utils/config-params';
-import { getComputedLanguage } from '../utils/language';
+} from '../../utils/config-params';
+import { getComputedLanguage } from '../../utils/language';
 import AppTopBar, { AppTopBarProps } from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
-import { getErrorMessage } from '../utils/error';
+import { getErrorMessage } from '../../utils/error';
 
 const App: FunctionComponent = () => {
     const { snackError } = useSnackMessage();
@@ -171,7 +171,7 @@ const App: FunctionComponent = () => {
                     })
                 );
 
-            ConfigSrv.fetchConfigParameters(APP_NAME.toLowerCase())
+            ConfigSrv.fetchConfigParameters(APP_NAME)
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/components/App/index.ts

@@ -0,0 +1 @@
+export { default as AppWrapper } from './app-wrapper';