apply patch

package.json

@@ -11,7 +11,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.61.3",
+        "@gridsuite/commons-ui": "0.61.3+2",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "^5.0.0-alpha.169",

src/components/app-top-bar.tsx

@@ -11,7 +11,12 @@ import React, {
     useEffect,
     useState,
 } from 'react';
-import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui';
+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 { useDispatch, useSelector } from 'react-redux';
@@ -29,10 +34,7 @@ import { AppDispatch } from '../redux/store';
 
 export type AppTopBarProps = {
     user?: AppState['user'];
-    userManager: {
-        instance: unknown | null;
-        error: string | null;
-    };
+    userManager: UserManagerState;
 };
 const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const navigate = useNavigate();

src/components/app-wrapper.tsx

@@ -18,6 +18,7 @@ import {
     card_error_boundary_en,
     card_error_boundary_fr,
     CardErrorBoundary,
+    GsLangUser,
     LIGHT_THEME,
     login_en,
     login_fr,
@@ -28,7 +29,6 @@ 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';
@@ -98,7 +98,7 @@ const getMuiTheme = (theme: string): Theme => {
     }
 };
 
-const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
+const messages: Record<GsLangUser, IntlConfig['messages']> = {
     en: {
         ...messages_en,
         ...login_en,

src/components/app.tsx

@@ -22,6 +22,7 @@ import {
 } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { Box, Typography } from '@mui/material';
+import { UserManager } from 'oidc-client';
 import {
     AuthenticationRouter,
     CardErrorBoundary,
@@ -140,7 +141,7 @@ const App: FunctionComponent = () => {
         })
     );
 
-    const initialize = useCallback((): Promise<unknown | undefined> => {
+    const initialize = useCallback((): Promise<UserManager> => {
         if (process.env.REACT_APP_USE_AUTHENTICATION === 'true') {
             return fetchAuthorizationCodeFlowFeatureFlag().then(
                 (authorizationCodeFlowEnabled) =>

src/redux/actions.ts

@@ -5,22 +5,25 @@
  * 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 { Action } from 'redux';
 import { AppState } from './reducer';
 
 export const SELECT_THEME = 'SELECT_THEME';
 export type ThemeAction = Readonly<Action<typeof SELECT_THEME>> & {
-    theme: string;
+    theme: GsTheme;
 };
-export function selectTheme(theme: string): ThemeAction {
+
+export function selectTheme(theme: GsTheme): ThemeAction {
     return { type: SELECT_THEME, theme: theme };
 }
 
 export const SELECT_LANGUAGE = 'SELECT_LANGUAGE';
 export type LanguageAction = Readonly<Action<typeof SELECT_LANGUAGE>> & {
     [PARAM_LANGUAGE]: AppState['language'];
 };
+
 export function selectLanguage(language: AppState['language']): LanguageAction {
     return { type: SELECT_LANGUAGE, [PARAM_LANGUAGE]: language };
 }
@@ -31,6 +34,7 @@ export type ComputedLanguageAction = Readonly<
 > & {
     computedLanguage: AppState['computedLanguage'];
 };
+
 export function selectComputedLanguage(
     computedLanguage: AppState['computedLanguage']
 ): ComputedLanguageAction {

src/redux/local-storage.ts

@@ -5,30 +5,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { DARK_THEME, LANG_SYSTEM } from '@gridsuite/commons-ui';
+import {
+    DARK_THEME,
+    GsLang,
+    GsLangUser,
+    GsTheme,
+    LANG_SYSTEM,
+} from '@gridsuite/commons-ui';
 import { getComputedLanguage } from '../utils/language';
 import { APP_NAME } from '../utils/config-params';
-import { AppState } from './reducer';
 
 const LOCAL_STORAGE_THEME_KEY = (APP_NAME + '_THEME').toUpperCase();
 const LOCAL_STORAGE_LANGUAGE_KEY = (APP_NAME + '_LANGUAGE').toUpperCase();
 
-export function getLocalStorageTheme(): string {
-    return localStorage.getItem(LOCAL_STORAGE_THEME_KEY) || DARK_THEME;
+export function getLocalStorageTheme() {
+    return (
+        (localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as GsTheme) || DARK_THEME
+    );
 }
 
-export function saveLocalStorageTheme(theme: string): void {
+export function saveLocalStorageTheme(theme: GsTheme): void {
     localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme);
 }
 
-export function getLocalStorageLanguage(): AppState['language'] {
-    return localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) || LANG_SYSTEM;
+export function getLocalStorageLanguage() {
+    return (
+        (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) as GsLang) ||
+        LANG_SYSTEM
+    );
 }
 
-export function saveLocalStorageLanguage(language: AppState['language']): void {
+export function saveLocalStorageLanguage(language: GsLang): void {
     localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, language);
 }
 
-export function getLocalStorageComputedLanguage(): AppState['computedLanguage'] {
+export function getLocalStorageComputedLanguage(): GsLangUser {
     return getComputedLanguage(getLocalStorageLanguage());
 }

src/redux/reducer.ts

@@ -5,8 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { AnyAction, createReducer, Draft } from '@reduxjs/toolkit';
-import { User } from 'oidc-client';
+import { createReducer, Draft } from '@reduxjs/toolkit';
 import {
     getLocalStorageComputedLanguage,
     getLocalStorageLanguage,
@@ -21,26 +20,37 @@ import {
     ThemeAction,
 } from './actions';
 import {
+    AuthenticationRouterErrorAction,
+    AuthenticationRouterErrorState,
+    CommonActions,
+    CommonStoreState,
+    GsLang,
+    GsLangUser,
+    GsTheme,
     LOGOUT_ERROR,
+    LogoutErrorAction,
     RESET_AUTHENTICATION_ROUTER_ERROR,
     SHOW_AUTH_INFO_LOGIN,
+    ShowAuthenticationRouterLoginAction,
     SIGNIN_CALLBACK_ERROR,
+    SignInCallbackErrorAction,
     UNAUTHORIZED_USER_INFO,
+    UnauthorizedUserAction,
     USER,
     USER_VALIDATION_ERROR,
+    UserAction,
+    UserValidationErrorAction,
 } from '@gridsuite/commons-ui';
 import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { ReducerWithInitialState } from '@reduxjs/toolkit/dist/createReducer';
-import { LanguageParameters, SupportedLanguages } from '../utils/language';
 
-export type AppState = {
-    computedLanguage: SupportedLanguages;
-    [PARAM_THEME]: string;
-    [PARAM_LANGUAGE]: LanguageParameters;
+export type AppState = CommonStoreState & {
+    computedLanguage: GsLangUser;
+    [PARAM_THEME]: GsTheme;
+    [PARAM_LANGUAGE]: GsLang;
 
-    user: User | null; //TODO use true definition when commons-ui passed to typescript
-    signInCallbackError: unknown;
-    authenticationRouterError: unknown;
+    signInCallbackError: string | null;
+    authenticationRouterError: AuthenticationRouterErrorState | null;
     showAuthenticationRouterLogin: boolean;
 };
 
@@ -57,7 +67,11 @@ const initialState: AppState = {
     computedLanguage: getLocalStorageComputedLanguage(),
 };
 
-export type Actions = AnyAction | ThemeAction | LanguageAction | ComputedLanguageAction;
+export type Actions =
+    | CommonActions
+    | ThemeAction
+    | LanguageAction
+    | ComputedLanguageAction;
 
 export type AppStateKey = keyof AppState;
 
@@ -72,51 +86,57 @@ export const reducer: ReducerWithInitialState<AppState> = createReducer(
             }
         );
 
-        builder.addCase(USER, (state: Draft<AppState>, action: AnyAction) => {
+        builder.addCase(USER, (state: Draft<AppState>, action: UserAction) => {
             state.user = action.user;
         });
 
         builder.addCase(
             SIGNIN_CALLBACK_ERROR,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (state: Draft<AppState>, action: SignInCallbackErrorAction) => {
                 state.signInCallbackError = action.signInCallbackError;
             }
         );
 
         builder.addCase(
             UNAUTHORIZED_USER_INFO,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (state: Draft<AppState>, action: UnauthorizedUserAction) => {
                 state.authenticationRouterError =
                     action.authenticationRouterError;
             }
         );
 
         builder.addCase(
             LOGOUT_ERROR,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (state: Draft<AppState>, action: LogoutErrorAction) => {
                 state.authenticationRouterError =
                     action.authenticationRouterError;
             }
         );
 
         builder.addCase(
             USER_VALIDATION_ERROR,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (state: Draft<AppState>, action: UserValidationErrorAction) => {
                 state.authenticationRouterError =
                     action.authenticationRouterError;
             }
         );
 
         builder.addCase(
             RESET_AUTHENTICATION_ROUTER_ERROR,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (
+                state: Draft<AppState>,
+                action: AuthenticationRouterErrorAction
+            ) => {
                 state.authenticationRouterError = null;
             }
         );
 
         builder.addCase(
             SHOW_AUTH_INFO_LOGIN,
-            (state: Draft<AppState>, action: AnyAction) => {
+            (
+                state: Draft<AppState>,
+                action: ShowAuthenticationRouterLoginAction
+            ) => {
                 state.showAuthenticationRouterLogin =
                     action.showAuthenticationRouterLogin;
             }

src/rest/study.ts

@@ -4,6 +4,7 @@
  * 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 { GridSuiteModule } from '@gridsuite/commons-ui';
 import { backendFetchJson } from '../utils/rest-api';
 import { getErrorMessage } from '../utils/error';
 
@@ -13,15 +14,7 @@ const API_URL =
         ? `${process.env.REACT_APP_API_GATEWAY}/study/v1`
         : `${process.env.REACT_APP_SRV_STUDY_URI}/v1`);
 
-//TODO delete when commons-ui will be in typescript
-export type ServerAbout = {
-    type: 'app' | 'server' | 'other';
-    name: string;
-    version?: string;
-    gitTag?: string;
-};
-
-export function getServersInfos(): Promise<ServerAbout[]> {
+export function getServersInfos() {
     return backendFetchJson(`${API_URL}/servers/about?view=yyy`, {
         headers: {
             Accept: 'application/json',
@@ -33,5 +26,5 @@ export function getServersInfos(): Promise<ServerAbout[]> {
             `Error while fetching the servers infos : ${getErrorMessage(error)}`
         );
         throw error;
-    }) as Promise<ServerAbout[]>;
+    }) as Promise<GridSuiteModule[]>;
 }

src/utils/language.ts

@@ -5,26 +5,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '@gridsuite/commons-ui';
+import {
+    GsLang,
+    GsLangUser,
+    LANG_ENGLISH,
+    LANG_FRENCH,
+    LANG_SYSTEM,
+} from '@gridsuite/commons-ui';
 
 const supportedLanguages = [LANG_FRENCH, LANG_ENGLISH];
-//export type SupportedLanguagesType = typeof supportedLanguages[number]; //TODO when commons-ui in typescript
-export type SupportedLanguages = 'en' | 'fr';
-//export type LanguageParameters = SupportedLanguages | typeof LANG_SYSTEM; //TODO when commons-ui in typescript
-export type LanguageParameters = SupportedLanguages | 'sys';
 
-export function getSystemLanguage(): SupportedLanguages {
+export function getSystemLanguage(): GsLangUser {
     const systemLanguage = navigator.language.split(/[-_]/)[0];
     return supportedLanguages.includes(systemLanguage)
-        ? systemLanguage
+        ? (systemLanguage as GsLangUser)
         : LANG_ENGLISH;
 }
 
-export function getComputedLanguage(
-    language: LanguageParameters
-): SupportedLanguages {
-    return language === LANG_SYSTEM
-        ? getSystemLanguage()
-        : (language as SupportedLanguages);
-    //TODO remove cast when commons-ui in typescript
+export function getComputedLanguage(language: GsLang) {
+    return language === LANG_SYSTEM ? getSystemLanguage() : language;
 }