Apply updated gridsuite template (#13)

Author: Tristan-WorkGH

package-lock.json

@@ -6,7 +6,7 @@
     "private": true,
     "bugs": "https://github.com/gridsuite/gridadmin-app/issues",
     "repository": {
-        "type": "TODO",
+        "type": "git",
         "url": "https://github.com/gridsuite/gridadmin-app"
     },
     "engines": {
@@ -41,6 +41,7 @@
         "react-window": "^1.8.5",
         "reconnecting-websocket": "^4.4.0",
         "redux": "^4.0.5",
+        "type-fest": "^4.11.1",
         "typeface-roboto": "^1.0.0",
         "typescript": "^5.1.3",
         "yup": "^1.2.0"

package.json

@@ -1,37 +1,35 @@
-/**
+/*
  * 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 React, { FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import { AppsMetadataSrv, StudySrv } from '../services';
+import { AppsMetadataSrv, MetadataJson, 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 { UserManager } from 'oidc-client';
 
 export type AppTopBarProps = {
     user?: AppState['user'];
     userManager: {
-        instance: UserManager | null;
+        instance: unknown | null;
         error: string | null;
     };
 };
+
 const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const navigate = useNavigate();
 
     const dispatch = useDispatch();
 
-    const [appsAndUrls, setAppsAndUrls] = useState<
-        Awaited<ReturnType<typeof AppsMetadataSrv.fetchAppsAndUrls>>
-    >([]);
+    const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
 
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
 
@@ -41,6 +39,8 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
         useParameterState(PARAM_LANGUAGE);
 
     const [showParameters, setShowParameters] = useState(false);
+    const displayParameters = useCallback(() => setShowParameters(true), []);
+    const hideParameters = useCallback(() => setShowParameters(false), []);
 
     useEffect(() => {
         if (props.user !== null) {
@@ -64,7 +64,7 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
                 }
                 appVersion={AppPackage.version}
                 appLicense={AppPackage.license}
-                onParametersClick={() => setShowParameters(true)}
+                onParametersClick={displayParameters}
                 onLogoutClick={() =>
                     logout(dispatch, props.userManager.instance)
                 }
@@ -84,7 +84,7 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
             />
             <Parameters
                 showParameters={showParameters}
-                hideParameters={() => setShowParameters(false)}
+                hideParameters={hideParameters}
             />
         </>
     );

src/components/app-top-bar.tsx

@@ -1,12 +1,13 @@
-/**
+/*
  * 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 App from './app';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
+import { CssBaseline } from '@mui/material';
 import {
     createTheme,
     StyledEngineProvider,
@@ -27,12 +28,12 @@ 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 CssBaseline from '@mui/material/CssBaseline';
 import { PARAM_THEME } from '../utils/config-params';
 import { IntlConfig } from 'react-intl/src/types';
 import { AppState } from '../redux/reducer';
@@ -89,15 +90,15 @@ const darkTheme: Theme = createTheme({
     mapboxStyle: 'mapbox://styles/mapbox/dark-v9',
 });
 
-const getMuiTheme = (theme: unknown): Theme => {
+const getMuiTheme = (theme: string): Theme => {
     if (theme === LIGHT_THEME) {
         return lightTheme;
     } else {
         return darkTheme;
     }
 };
 
-const messages: Record<string, IntlConfig['messages']> = {
+const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
     en: {
         ...messages_en,
         ...login_en,
@@ -114,7 +115,7 @@ const messages: Record<string, IntlConfig['messages']> = {
     },
 };
 
-const basename = new URL(document.querySelector('base')?.href || '').pathname;
+const basename = new URL(document.querySelector('base')?.href ?? '').pathname;
 
 const AppWrapperWithRedux: FunctionComponent = () => {
     const computedLanguage = useSelector(

src/components/app-wrapper.tsx

@@ -16,7 +16,7 @@ import {
 import { SnackbarProvider } from '@gridsuite/commons-ui';
 import { CssBaseline } from '@mui/material';
 
-let container: Element | any = null;
+let container: HTMLElement | null = null;
 
 beforeEach(() => {
     // setup a DOM element as a render target
@@ -26,11 +26,14 @@ beforeEach(() => {
 
 afterEach(() => {
     // cleanup on exiting
-    container.remove();
+    container?.remove();
     container = null;
 });
 
 it('renders', async () => {
+    if (container === null) {
+        throw new Error('No container was defined');
+    }
     const root = createRoot(container);
     await act(async () =>
         root.render(

src/components/app.test.tsx

@@ -1,16 +1,11 @@
-/**
+/*
  * Copyright (c) 2020, 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 React, {
-    FunctionComponent,
-    useCallback,
-    useEffect,
-    useState,
-} from 'react';
+import { FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
     Navigate,
@@ -36,14 +31,12 @@ import {
 } from '../redux/actions';
 import { AppState } from '../redux/reducer';
 import {
-    ConfigSrv,
+    AppsMetadataSrv,
     ConfigNotif,
-    ConfigParameter,
     ConfigParameters,
+    ConfigSrv,
     UserAdminSrv,
-    AppsMetadataSrv,
 } from '../services';
-import { UserManager } from 'oidc-client';
 import {
     APP_NAME,
     COMMON_APP_NAME,
@@ -53,12 +46,20 @@ import {
 import { getComputedLanguage } from '../utils/language';
 import AppTopBar, { AppTopBarProps } from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
+import { getErrorMessage } from '../utils/error';
 
 const App: FunctionComponent = () => {
     const { snackError } = useSnackMessage();
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+    const location = useLocation();
 
     const user = useSelector((state: AppState) => state.user);
 
+    const [userManager, setUserManager] = useState<
+        AppTopBarProps['userManager']
+    >({ instance: null, error: null });
+
     const signInCallbackError = useSelector(
         (state: AppState) => state.signInCallbackError
     );
@@ -69,20 +70,12 @@ const App: FunctionComponent = () => {
         (state: AppState) => state.showAuthenticationRouterLogin
     );
 
-    const [userManager, setUserManager] = useState<
-        AppTopBarProps['userManager']
-    >({ instance: null, error: null });
-
-    const navigate = useNavigate();
-
-    const dispatch = useDispatch();
-
-    const location = useLocation();
-
-    const updateParams: (p: ConfigParameters) => void = useCallback(
+    const updateParams = useCallback(
         (params: ConfigParameters) => {
-            console.debug('received UI parameters : ', params);
-            params.forEach((param: ConfigParameter) => {
+            console.groupCollapsed('received UI parameters');
+            console.table(params);
+            console.groupEnd();
+            params.forEach((param) => {
                 switch (param.name) {
                     case PARAM_THEME:
                         dispatch(selectTheme(param.value));
@@ -96,14 +89,15 @@ const App: FunctionComponent = () => {
                         );
                         break;
                     default:
+                        break;
                 }
             });
         },
         [dispatch]
     );
 
-    const connectNotificationsUpdateConfig: () => ReconnectingWebSocket =
-        useCallback(() => {
+    const connectNotificationsUpdateConfig =
+        useCallback((): ReconnectingWebSocket => {
             const ws = ConfigNotif.connectNotificationsWsUpdateConfig();
             ws.onmessage = function (event) {
                 let eventData = JSON.parse(event.data);
@@ -132,7 +126,7 @@ const App: FunctionComponent = () => {
             path: '/silent-renew-callback',
         })
     );
-    const [initialMatchSignInCallbackUrl] = useState(
+    const [initialMatchSigninCallbackUrl] = useState(
         useMatch({
             path: '/sign-in-callback',
         })
@@ -147,20 +141,23 @@ const App: FunctionComponent = () => {
                     fetch('idpSettings.json'),
                     UserAdminSrv.fetchValidateUser,
                     authorizationCodeFlowEnabled,
-                    initialMatchSignInCallbackUrl != null
+                    initialMatchSigninCallbackUrl != null
                 )
             )
-            .then((userManager: UserManager | undefined) => {
-                setUserManager({ instance: userManager || null, error: null });
+            .then((userManager) => {
+                setUserManager({ instance: userManager ?? null, error: null });
             })
-            .catch((error: any) => {
-                setUserManager({ instance: null, error: error.message });
+            .catch((error: unknown) => {
+                setUserManager({
+                    instance: null,
+                    error: getErrorMessage(error),
+                });
             });
-        // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change
+        // Note: initialMatchSilentRenewCallbackUrl & initialMatchSigninCallbackUrl won't change
     }, [
         dispatch,
         initialMatchSilentRenewCallbackUrl,
-        initialMatchSignInCallbackUrl,
+        initialMatchSigninCallbackUrl,
     ]);
 
     useEffect(() => {