pick 120

Author: Tristan-WorkGH

.eslintrc.json

@@ -1,9 +1,6 @@
 {
     "root": true,
-    "extends": [
-        "react-app",
-        "plugin:prettier/recommended"
-    ],
+    "extends": ["react-app", "plugin:prettier/recommended"],
     "ignorePatterns": [
         // node_modules is implicitly always ignored
         "build"

.prettierrc.json

@@ -1,5 +1,6 @@
 {
     "trailingComma": "es5",
     "tabWidth": 4,
+    "printWidth": 120,
     "singleQuote": true
 }

README.md

@@ -1,4 +1,5 @@
 # GridAdmin-App
+
 Application to manage users in GridSuite.
 
 ## Typescript config

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

@@ -5,24 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import {
-    forwardRef,
-    FunctionComponent,
-    ReactElement,
-    useCallback,
-    useEffect,
-    useMemo,
-    useState,
-} from 'react';
+import { forwardRef, FunctionComponent, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
 import { ManageAccounts, PeopleAlt } from '@mui/icons-material';
-import {
-    AppMetadataCommon,
-    logout,
-    PARAM_LANGUAGE,
-    PARAM_THEME,
-    TopBar,
-} from '@gridsuite/commons-ui';
+import { AppMetadataCommon, logout, PARAM_LANGUAGE, PARAM_THEME, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import { APP_NAME } from '../../utils/config-params';
 import { NavLink, useMatches, useNavigate } from 'react-router-dom';
@@ -71,9 +57,7 @@ const AppTopBar: FunctionComponent = () => {
     const theme = useTheme();
     const dispatch = useDispatch<AppDispatch>();
     const user = useSelector((state: AppState) => state.user ?? null);
-    const userManagerInstance = useSelector(
-        (state: AppState) => state.userManager?.instance
-    );
+    const userManagerInstance = useSelector((state: AppState) => state.userManager?.instance);
 
     const navigate = useNavigate();
     const matches = useMatches();
@@ -87,8 +71,7 @@ const AppTopBar: FunctionComponent = () => {
     }, [matches]);
 
     const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME);
-    const [languageLocal, handleChangeLanguage] =
-        useParameterState(PARAM_LANGUAGE);
+    const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE);
 
     const [appsAndUrls, setAppsAndUrls] = useState<AppMetadataCommon[]>([]);
     useEffect(() => {
@@ -98,33 +81,20 @@ const AppTopBar: FunctionComponent = () => {
             });
         }
     }, [user]);
-    const additionalModulesFetcher = useCallback(
-        () => studySrv.getServersInfos(APP_NAME),
-        []
-    );
+    const additionalModulesFetcher = useCallback(() => studySrv.getServersInfos(APP_NAME), []);
 
     return (
         <TopBar
             appName={capitalize(APP_NAME)}
             appColor="#FD3745"
-            appLogo={
-                theme.palette.mode === 'light' ? (
-                    <GridAdminLogoLight />
-                ) : (
-                    <GridAdminLogoDark />
-                )
-            }
+            appLogo={theme.palette.mode === 'light' ? <GridAdminLogoLight /> : <GridAdminLogoDark />}
             appVersion={AppPackage.version}
             appLicense={AppPackage.license}
             onLogoutClick={() => logout(dispatch, userManagerInstance)}
             onLogoClick={() => navigate('/', { replace: true })}
             user={user ?? undefined}
             appsAndUrls={appsAndUrls}
-            globalVersionPromise={() =>
-                appsMetadataSrv
-                    .fetchVersion()
-                    .then((res) => res?.deployVersion ?? 'unknown')
-            }
+            globalVersionPromise={() => appsMetadataSrv.fetchVersion().then((res) => res?.deployVersion ?? 'unknown')}
             additionalModulesPromise={additionalModulesFetcher}
             onThemeClick={handleChangeTheme}
             theme={themeLocal}

src/components/App/app-wrapper.tsx

@@ -8,12 +8,7 @@
 import App from './app';
 import { FunctionComponent, useMemo } from 'react';
 import { CssBaseline, responsiveFontSizes, ThemeOptions } from '@mui/material';
-import {
-    createTheme,
-    StyledEngineProvider,
-    Theme,
-    ThemeProvider,
-} from '@mui/material/styles';
+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,
@@ -121,20 +116,11 @@ const basename = new URL(document.baseURI ?? '').pathname;
  * Layer injecting Theme, Internationalization (i18n) and other tools (snackbar, error boundary, ...)
  */
 const AppWrapperRouterLayout: typeof App = (props, context) => {
-    const computedLanguage = useSelector(
-        (state: AppState) => state.computedLanguage
-    );
+    const computedLanguage = useSelector((state: AppState) => state.computedLanguage);
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
-    const themeCompiled = useMemo(
-        () => getMuiTheme(theme, computedLanguage),
-        [computedLanguage, theme]
-    );
+    const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]);
     return (
-        <IntlProvider
-            locale={computedLanguage}
-            defaultLocale={LANG_ENGLISH}
-            messages={messages[computedLanguage]}
-        >
+        <IntlProvider locale={computedLanguage} defaultLocale={LANG_ENGLISH} messages={messages[computedLanguage]}>
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={themeCompiled}>
                     <SnackbarProvider hideIconVariant={false}>

src/components/App/app.test.tsx

@@ -8,11 +8,7 @@ import { Provider } from 'react-redux';
 import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom';
 import App from './app';
 import { store } from '../../redux/store';
-import {
-    createTheme,
-    StyledEngineProvider,
-    ThemeProvider,
-} from '@mui/material/styles';
+import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from '@gridsuite/commons-ui';
 import { CssBaseline } from '@mui/material';
 import { appRoutes } from '../../routes';
@@ -37,9 +33,7 @@ it.skip('renders', async () => {
         throw new Error('No container was defined');
     }
     const root = createRoot(container);
-    const AppWrapperRouterLayout: FunctionComponent<
-        PropsWithChildren<{}>
-    > = () => (
+    const AppWrapperRouterLayout: FunctionComponent<PropsWithChildren<{}>> = () => (
         <IntlProvider locale="en">
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={createTheme({})}>

src/components/App/app.tsx

@@ -5,12 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import {
-    FunctionComponent,
-    PropsWithChildren,
-    useCallback,
-    useEffect,
-} from 'react';
+import { FunctionComponent, PropsWithChildren, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
 import {
@@ -22,11 +17,7 @@ import {
     PARAM_THEME,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
-import {
-    selectComputedLanguage,
-    selectLanguage,
-    selectTheme,
-} from '../../redux/actions';
+import { selectComputedLanguage, selectLanguage, selectTheme } from '../../redux/actions';
 import { AppState } from '../../redux/reducer';
 import { configNotificationSrv, configSrv } from '../../services';
 import { APP_NAME } from '../../utils/config-params';
@@ -52,11 +43,7 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
                         break;
                     case PARAM_LANGUAGE:
                         dispatch(selectLanguage(param.value));
-                        dispatch(
-                            selectComputedLanguage(
-                                getComputedLanguage(param.value)
-                            )
-                        );
+                        dispatch(selectComputedLanguage(getComputedLanguage(param.value)));
                         break;
                     default:
                         break;
@@ -67,8 +54,7 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
     );
 
     const connectNotificationsUpdateConfig = useCallback(() => {
-        const ws =
-            configNotificationSrv.connectNotificationsWsUpdateConfig(APP_NAME);
+        const ws = configNotificationSrv.connectNotificationsWsUpdateConfig(APP_NAME);
         ws.onmessage = function (event) {
             let eventData = JSON.parse(event.data);
             if (eventData?.headers?.parameterName) {
@@ -114,13 +100,7 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
             const ws = connectNotificationsUpdateConfig();
             return () => ws.close();
         }
-    }, [
-        user,
-        dispatch,
-        updateParams,
-        snackError,
-        connectNotificationsUpdateConfig,
-    ]);
+    }, [user, dispatch, updateParams, snackError, connectNotificationsUpdateConfig]);
 
     return (
         <Grid
@@ -133,9 +113,7 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
         >
             <Grid item xs="auto" component={AppTopBar} />
             <Grid item container xs component="main">
-                <CardErrorBoundary>
-                    {/*Router outlet ->*/ props.children}
-                </CardErrorBoundary>
+                <CardErrorBoundary>{/*Router outlet ->*/ props.children}</CardErrorBoundary>
             </Grid>
         </Grid>
     );

src/components/Grid/AgGrid.tsx

@@ -49,11 +49,8 @@ type ForwardRefComponent<Props, Ref> = ReturnType<ForwardRef<Props, Ref>>;
 
 interface AgGridWithRef extends FunctionComponent<GridOptions<unknown>> {
     <TData, TContext extends {}>(
-        props: PropsWithoutRef<GridOptions<TData>> &
-            RefAttributes<AgGridRef<TData, TContext>>
-    ): ReturnType<
-        ForwardRefComponent<GridOptions<TData>, AgGridRef<TData, TContext>>
-    >;
+        props: PropsWithoutRef<GridOptions<TData>> & RefAttributes<AgGridRef<TData, TContext>>
+    ): ReturnType<ForwardRefComponent<GridOptions<TData>, AgGridRef<TData, TContext>>>;
 }
 
 const style = {
@@ -65,10 +62,7 @@ const style = {
     },
 };
 
-export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<
-    TData,
-    TContext extends {} = {}
->(
+export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<TData, TContext extends {} = {}>(
     props: GridOptions<TData>,
     gridRef?: ForwardedRef<AgGridRef<TData, TContext>>
 ): ReactNode {
@@ -94,15 +88,9 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid<
         <Box component="div" className={theme.agGridTheme} sx={style}>
             <AgGridReact<TData>
                 ref={agGridRef}
-                localeText={
-                    messages[intl.locale] ??
-                    messages[intl.defaultLocale] ??
-                    undefined
-                }
+                localeText={messages[intl.locale] ?? messages[intl.defaultLocale] ?? undefined}
                 {...props} //destruct props to optimize react props change detection
-                debug={
-                    import.meta.env.VITE_DEBUG_AGGRID === 'true' || props.debug
-                }
+                debug={import.meta.env.VITE_DEBUG_AGGRID === 'true' || props.debug}
                 reactiveCustomComponents //AG Grid: Using custom components without `reactiveCustomComponents = true` is deprecated.
             />
         </Box>