Update types for typescript fronts (#514)

* expose `GridSuiteModule`
* expose lang & theme types
* Add missing types for common store actions
* Use correct types in router
* fix nullable user in store
* fix router args types

Author: Tristan-WorkGH

demo/src/app.jsx

@@ -95,7 +95,7 @@ import searchEquipments from '../data/EquipmentSearchBar';
 import { EquipmentItem } from '../../src/components/ElementSearchDialog/equipment-item';
 import OverflowableText from '../../src/components/OverflowableText';
 
-import { setShowAuthenticationRouterLogin } from '../../src/redux/actions';
+import { setShowAuthenticationRouterLogin } from '../../src/redux/authActions';
 import TableTab from './TableTab';
 import FlatParametersTab from './FlatParametersTab';
 

src/components/AuthenticationRouter/AuthenticationRouter.tsx

@@ -6,7 +6,13 @@
  */
 
 import { Dispatch, useCallback } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import {
+    Location,
+    Navigate,
+    NavigateFunction,
+    Route,
+    Routes,
+} from 'react-router-dom';
 import { Alert, AlertTitle, Grid } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { UserManager } from 'oidc-client';
@@ -21,22 +27,27 @@ import SilentRenewCallbackHandler from '../SilentRenewCallbackHandler';
 import Login from '../Login';
 import Logout from '../Login/Logout';
 
+import { AuthenticationActions } from '../../redux/authActions';
+
+export type AuthenticationRouterErrorState = {
+    userName?: string;
+    userValidationError?: { error: Error };
+    logoutError?: { error: Error };
+    unauthorizedUserInfo?: string;
+};
+
+export type UserManagerState = {
+    instance: UserManager | null;
+    error: string | null;
+};
+
 export interface AuthenticationRouterProps {
-    userManager: {
-        instance: UserManager;
-        error: string;
-    };
-    signInCallbackError: { message: string };
-    authenticationRouterError: {
-        userName: string;
-        userValidationError?: { error: Error };
-        logoutError?: { error: Error };
-        unauthorizedUserInfo?: string;
-        error: string;
-    };
+    userManager: UserManagerState;
+    signInCallbackError: Error | null;
+    authenticationRouterError: AuthenticationRouterErrorState | null;
     showAuthenticationRouterLogin: boolean;
-    dispatch: Dispatch<unknown>;
-    navigate: () => void;
+    dispatch: Dispatch<AuthenticationActions>;
+    navigate: NavigateFunction;
     location: Location;
 }
 
@@ -48,16 +59,17 @@ function AuthenticationRouter({
     dispatch,
     navigate,
     location,
-}: AuthenticationRouterProps) {
-    const handleSigninCallbackClosure = useCallback(
-        () => handleSigninCallback(dispatch, navigate, userManager.instance),
-        [dispatch, navigate, userManager.instance]
-    );
-    const handleSilentRenewCallbackClosure = useCallback(
-        () => handleSilentRenewCallback(userManager.instance),
-        [userManager.instance]
-    );
-
+}: Readonly<AuthenticationRouterProps>) {
+    const handleSigninCallbackClosure = useCallback(() => {
+        if (userManager.instance != null) {
+            handleSigninCallback(dispatch, navigate, userManager.instance);
+        }
+    }, [dispatch, navigate, userManager.instance]);
+    const handleSilentRenewCallbackClosure = useCallback(() => {
+        if (userManager.instance != null) {
+            handleSilentRenewCallback(userManager.instance);
+        }
+    }, [userManager.instance]);
     return (
         <Grid
             container
@@ -185,4 +197,5 @@ function AuthenticationRouter({
         </Grid>
     );
 }
+
 export default AuthenticationRouter;

src/components/AuthenticationRouter/index.ts

@@ -4,6 +4,11 @@
  * 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 defaultAuthenticationRouter from './AuthenticationRouter';
+import AuthenticationRouter from './AuthenticationRouter';
 
-export default defaultAuthenticationRouter;
+export default AuthenticationRouter;
+export type {
+    AuthenticationRouterErrorState,
+    AuthenticationRouterProps,
+    UserManagerState,
+} from './AuthenticationRouter';

src/components/SignInCallbackHandler/SignInCallbackHandler.tsx

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { UserManager } from 'oidc-client';
 
 export interface SignInCallbackHandlerProps {
-    userManager: UserManager;
+    userManager: UserManager | null;
     handleSignInCallback: () => void;
 }
 

src/components/SilentRenewCallbackHandler/SilentRenewCallbackHandler.tsx

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { UserManager } from 'oidc-client';
 
 export interface SilentRenewCallbackHandlerProps {
-    userManager: UserManager;
+    userManager: UserManager | null;
     handleSilentRenewCallback: () => void;
 }
 

src/components/TopBar/AboutDialog.tsx

@@ -134,7 +134,7 @@ function compareModules(c1: ModuleDefinition, c2: ModuleDefinition) {
     );
 }
 
-type GridSuiteModule = {
+export type GridSuiteModule = {
     name: string;
     type: ModuleType;
     version?: string;

src/components/TopBar/TopBar.tsx

@@ -159,18 +159,16 @@ export const LANG_FRENCH = 'fr';
 const EN = 'EN';
 const FR = 'FR';
 
-export type GsLang =
-    | typeof LANG_ENGLISH
-    | typeof LANG_FRENCH
-    | typeof LANG_SYSTEM;
+export type GsLangUser = typeof LANG_ENGLISH | typeof LANG_FRENCH;
+export type GsLang = GsLangUser | typeof LANG_SYSTEM;
 export type GsTheme = typeof LIGHT_THEME | typeof DARK_THEME;
 
 export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
     Omit<LogoutProps, 'disabled'> &
     Omit<AboutDialogProps, 'open' | 'onClose'> & {
         onParametersClick?: () => void;
         onLogoClick: GridLogoProps['onClick'];
-        user: User;
+        user?: User;
         onAboutClick?: () => void;
         logoAboutDialog?: ReactNode;
         appsAndUrls: CommonMetadata[];

src/index.ts

@@ -8,8 +8,14 @@
 export { TreeViewFinder } from './components/TreeViewFinder';
 export { TopBar } from './components/TopBar';
 export { default as AboutDialog } from './components/TopBar/AboutDialog';
+export type { GridSuiteModule } from './components/TopBar/AboutDialog';
 export { default as SnackbarProvider } from './components/SnackbarProvider';
 export { default as AuthenticationRouter } from './components/AuthenticationRouter';
+export type {
+    AuthenticationRouterErrorState,
+    AuthenticationRouterProps,
+    UserManagerState,
+} from './components/AuthenticationRouter';
 export { MuiVirtualizedTable } from './components/MuiVirtualizedTable';
 export {
     KeyedColumnsRowIndexer,
@@ -96,6 +102,7 @@ export {
     LANG_ENGLISH,
     LANG_FRENCH,
 } from './components/TopBar/TopBar';
+export type { GsLang, GsLangUser, GsTheme } from './components/TopBar/TopBar';
 
 export {
     USER,
@@ -107,7 +114,18 @@ export {
     USER_VALIDATION_ERROR,
     RESET_AUTHENTICATION_ROUTER_ERROR,
     SHOW_AUTH_INFO_LOGIN,
-} from './redux/actions';
+} from './redux/authActions';
+export type {
+    AuthenticationActions,
+    AuthenticationRouterErrorBase,
+    AuthenticationRouterErrorAction,
+    LogoutErrorAction,
+    ShowAuthenticationRouterLoginAction,
+    SignInCallbackErrorAction,
+    UnauthorizedUserAction,
+    UserAction,
+    UserValidationErrorAction,
+} from './redux/authActions';
 export { default as report_viewer_en } from './components/translations/report-viewer-en';
 export { default as report_viewer_fr } from './components/translations/report-viewer-fr';
 export { default as login_en } from './components/translations/login-en';
@@ -227,6 +245,7 @@ export {
 
 export { mergeSx } from './utils/styles';
 export { setCommonStore } from './redux/commonStore';
+export type { CommonStoreState } from './redux/commonStore';
 export type { EquipmentInfos } from './utils/EquipmentType';
 
 export * from './services';

src/redux/actions.ts renamed to src/redux/authActions.ts

@@ -6,27 +6,55 @@
  */
 import { User } from 'oidc-client';
 
+// Is redux or isn't redux, that is the question, 🎭
+export interface Action<T> {
+    type: T;
+}
+type ReadonlyAction<T> = Readonly<Action<T>>;
+
 export const USER = 'USER';
+export type UserAction = ReadonlyAction<typeof USER> & {
+    user: User | null;
+};
 
-export function setLoggedUser(user: User | null) {
+export function setLoggedUser(user: User | null): UserAction {
     return { type: USER, user };
 }
 
 export const SIGNIN_CALLBACK_ERROR = 'SIGNIN_CALLBACK_ERROR';
+export type SignInCallbackErrorAction = ReadonlyAction<
+    typeof SIGNIN_CALLBACK_ERROR
+> & {
+    signInCallbackError: Error | null;
+};
 
-export function setSignInCallbackError(signInCallbackError: string | null) {
+export function setSignInCallbackError(
+    signInCallbackError: Error | null
+): SignInCallbackErrorAction {
     return {
         type: SIGNIN_CALLBACK_ERROR,
         signInCallbackError,
     };
 }
 
+export type AuthenticationRouterErrorBase<T> = {
+    authenticationRouterError: {
+        userName?: string;
+    } & T;
+};
+
 export const UNAUTHORIZED_USER_INFO = 'UNAUTHORIZED_USER_INFO';
+export type UnauthorizedUserAction = ReadonlyAction<
+    typeof UNAUTHORIZED_USER_INFO
+> &
+    AuthenticationRouterErrorBase<{
+        unauthorizedUserInfo: string;
+    }>;
 
 export function setUnauthorizedUserInfo(
     userName: string | undefined,
     unauthorizedUserInfo: string
-) {
+): UnauthorizedUserAction {
     return {
         type: UNAUTHORIZED_USER_INFO,
         authenticationRouterError: {
@@ -37,11 +65,15 @@ export function setUnauthorizedUserInfo(
 }
 
 export const LOGOUT_ERROR = 'LOGOUT_ERROR';
+export type LogoutErrorAction = ReadonlyAction<typeof LOGOUT_ERROR> &
+    AuthenticationRouterErrorBase<{
+        logoutError: { error: Error };
+    }>;
 
 export function setLogoutError(
     userName: string | undefined,
     logoutError: { error: Error }
-) {
+): LogoutErrorAction {
     return {
         type: LOGOUT_ERROR,
         authenticationRouterError: {
@@ -52,11 +84,17 @@ export function setLogoutError(
 }
 
 export const USER_VALIDATION_ERROR = 'USER_VALIDATION_ERROR';
+export type UserValidationErrorAction = ReadonlyAction<
+    typeof USER_VALIDATION_ERROR
+> &
+    AuthenticationRouterErrorBase<{
+        userValidationError: { error: Error };
+    }>;
 
 export function setUserValidationError(
     userName: string | undefined,
     userValidationError: { error: Error }
-) {
+): UserValidationErrorAction {
     return {
         type: USER_VALIDATION_ERROR,
         authenticationRouterError: {
@@ -68,21 +106,40 @@ export function setUserValidationError(
 
 export const RESET_AUTHENTICATION_ROUTER_ERROR =
     'RESET_AUTHENTICATION_ROUTER_ERROR';
+export type AuthenticationRouterErrorAction = ReadonlyAction<
+    typeof RESET_AUTHENTICATION_ROUTER_ERROR
+> & {
+    authenticationRouterError: null;
+};
 
-export function resetAuthenticationRouterError() {
+export function resetAuthenticationRouterError(): AuthenticationRouterErrorAction {
     return {
         type: RESET_AUTHENTICATION_ROUTER_ERROR,
         authenticationRouterError: null,
     };
 }
 
 export const SHOW_AUTH_INFO_LOGIN = 'SHOW_AUTH_INFO_LOGIN';
+export type ShowAuthenticationRouterLoginAction = ReadonlyAction<
+    typeof SHOW_AUTH_INFO_LOGIN
+> & {
+    showAuthenticationRouterLogin: boolean;
+};
 
 export function setShowAuthenticationRouterLogin(
     showAuthenticationRouterLogin: boolean
-) {
+): ShowAuthenticationRouterLoginAction {
     return {
         type: SHOW_AUTH_INFO_LOGIN,
         showAuthenticationRouterLogin,
     };
 }
+
+export type AuthenticationActions =
+    | UserAction
+    | SignInCallbackErrorAction
+    | UnauthorizedUserAction
+    | LogoutErrorAction
+    | UserValidationErrorAction
+    | AuthenticationRouterErrorAction
+    | ShowAuthenticationRouterLoginAction;

src/redux/commonStore.ts

@@ -7,8 +7,12 @@
 
 import { User } from 'oidc-client';
 
+export type CommonStoreState = {
+    user: User | null;
+};
+
 interface CommonStore {
-    getState: () => { user: User };
+    getState(): CommonStoreState;
 }
 
 let commonStore: CommonStore | undefined;
@@ -23,5 +27,5 @@ export function setCommonStore(store: CommonStore): void {
 }
 
 export function getUserToken() {
-    return commonStore?.getState().user.id_token;
+    return commonStore?.getState().user?.id_token;
 }