Remove old authentication flag and update fn call (#76) & Update commons-ui ts (#77)

Author: Tristan-WorkGH

package-lock.json

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

package.json

@@ -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';
@@ -25,18 +30,16 @@ 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';
 
 export type AppTopBarProps = {
     user?: AppState['user'];
-    userManager: {
-        instance: unknown | null;
-        error: string | null;
-    };
+    userManager: UserManagerState;
 };
 const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
     const navigate = useNavigate();
 
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
 
     const [appsAndUrls, setAppsAndUrls] = useState<MetadataJson[]>([]);
 
@@ -78,10 +81,12 @@ const AppTopBar: FunctionComponent<AppTopBarProps> = (props) => {
                     logout(dispatch, props.userManager.instance)
                 }
                 onLogoClick={() => navigate('/', { replace: true })}
-                user={props.user}
+                user={props.user ?? undefined}
                 appsAndUrls={appsAndUrls}
                 globalVersionPromise={() =>
-                    fetchVersion().then((res) => res?.deployVersion)
+                    fetchVersion().then(
+                        (res) => res?.deployVersion ?? 'unknown'
+                    )
                 }
                 additionalModulesPromise={getServersInfos}
                 onThemeClick={handleChangeTheme}

src/components/app-top-bar.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-wrapper.tsx

@@ -39,9 +39,9 @@ import { AppState } from '../redux/reducer';
 import {
     ConfigParameters,
     connectNotificationsWsUpdateConfig,
-    fetchAuthorizationCodeFlowFeatureFlag,
     fetchConfigParameter,
     fetchConfigParameters,
+    fetchIdpSettings,
     fetchValidateUser,
 } from '../utils/rest-api';
 import {
@@ -54,6 +54,7 @@ import { getComputedLanguage } from '../utils/language';
 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 = () => {
     const { snackError } = useSnackMessage();
@@ -76,7 +77,7 @@ const App: FunctionComponent = () => {
 
     const navigate = useNavigate();
 
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
 
     const location = useLocation();
 
@@ -139,50 +140,45 @@ const App: FunctionComponent = () => {
         })
     );
 
-    const initialize = useCallback((): Promise<unknown | undefined> => {
-        if (process.env.REACT_APP_USE_AUTHENTICATION === 'true') {
-            return fetchAuthorizationCodeFlowFeatureFlag().then(
-                (authorizationCodeFlowEnabled) =>
-                    initializeAuthenticationProd(
-                        dispatch,
-                        initialMatchSilentRenewCallbackUrl != null,
-                        fetch('idpSettings.json'),
-                        fetchValidateUser,
-                        authorizationCodeFlowEnabled,
-                        initialMatchSigninCallbackUrl != null
-                    )
-            );
-        } else {
-            return initializeAuthenticationDev(
-                dispatch,
-                initialMatchSilentRenewCallbackUrl != null,
-                () =>
-                    new Promise((resolve) =>
-                        window.setTimeout(() => resolve(true), 500)
-                    ),
-                initialMatchSigninCallbackUrl != null
-            );
-        }
-        // Note: initialMatchSilentRenewCallbackUrl and dispatch don't change
-    }, [
-        initialMatchSilentRenewCallbackUrl,
-        dispatch,
-        initialMatchSigninCallbackUrl,
-    ]);
-
     useEffect(() => {
-        initialize()
-            .then((userManager) => {
-                setUserManager({ instance: userManager ?? null, error: null });
-            })
-            .catch((error: unknown) => {
+        // need subfunction when async as suggested by rule react-hooks/exhaustive-deps
+        (async function initializeAuthentication() {
+            try {
+                console.debug(
+                    `auth dev mode: ${process.env.REACT_APP_USE_AUTHENTICATION}`
+                );
+                const initAuth =
+                    process.env.REACT_APP_USE_AUTHENTICATION === 'true'
+                        ? initializeAuthenticationProd(
+                              dispatch,
+                              initialMatchSilentRenewCallbackUrl != null,
+                              fetchIdpSettings,
+                              fetchValidateUser,
+                              initialMatchSigninCallbackUrl != null
+                          )
+                        : initializeAuthenticationDev(
+                              dispatch,
+                              initialMatchSilentRenewCallbackUrl != null,
+                              validateUserDev,
+                              initialMatchSigninCallbackUrl != null
+                          );
+                setUserManager({
+                    instance: (await initAuth) ?? null,
+                    error: null,
+                });
+            } catch (error) {
                 setUserManager({
                     instance: null,
                     error: getErrorMessage(error),
                 });
-            });
-        // Note: initialize and initialMatchSilentRenewCallbackUrl won't change
-    }, [initialize, initialMatchSilentRenewCallbackUrl, dispatch]);
+            }
+        })();
+        // Note: dispatch and initialMatchSilentRenewCallbackUrl won't change
+    }, [
+        initialMatchSigninCallbackUrl,
+        initialMatchSilentRenewCallbackUrl,
+        dispatch,
+    ]);
 
     useEffect(() => {
         if (user !== null) {
@@ -280,3 +276,9 @@ const App: FunctionComponent = () => {
     );
 };
 export default App;
+
+function validateUserDev(): Promise<boolean> {
+    return new Promise((resolve) =>
+        window.setTimeout(() => resolve(true), 500)
+    );
+}

src/components/app.tsx

@@ -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/module-commons-ui.d.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());
 }