From 02d3dfca8d9d73d964ac91beab6c52745df3a646 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 12 Jan 2024 09:04:26 +0100 Subject: [PATCH 01/54] Add application Logo --- public/favicon.ico | Bin 1150 -> 117560 bytes src/components/app-top-bar.tsx | 9 +++---- src/images/GridAdmin_logo_dark.svg | 20 ++++++++++++++++ src/images/GridAdmin_logo_light.svg | 20 ++++++++++++++++ src/images/powsybl_logo.svg | 35 ---------------------------- 5 files changed, 45 insertions(+), 39 deletions(-) create mode 100644 src/images/GridAdmin_logo_dark.svg create mode 100644 src/images/GridAdmin_logo_light.svg delete mode 100644 src/images/powsybl_logo.svg diff --git a/public/favicon.ico b/public/favicon.ico index 6f357a0eddc3770e933f54127ad9cba654fb05cd..222b983ea78c5fb4069f81840dc0dd106887d050 100644 GIT binary patch literal 117560 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 B8#4d^ diff --git a/src/components/app-top-bar.tsx b/src/components/app-top-bar.tsx index 5643785..e7bea8d 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -12,7 +12,8 @@ import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params'; import { useDispatch, useSelector } from 'react-redux'; import { AppsMetadataSrv, StudySrv } from '../services'; import { useNavigate } from 'react-router-dom'; -import { ReactComponent as PowsyblLogo } from '../images/powsybl_logo.svg'; +import { ReactComponent as GridAdminLogoLight } from '../images/GridAdmin_logo_light.svg'; +import { ReactComponent as GridAdminLogoDark } from '../images/GridAdmin_logo_dark.svg'; import AppPackage from '../../package.json'; import { AppState } from '../redux/reducer'; import { UserManager } from 'oidc-client'; @@ -54,12 +55,12 @@ const AppTopBar: FunctionComponent = (props) => { <> //GridAdminLogoLight + ) : ( - //GridAdminLogoDark + ) } appVersion={AppPackage.version} diff --git a/src/images/GridAdmin_logo_dark.svg b/src/images/GridAdmin_logo_dark.svg new file mode 100644 index 0000000..26be3e5 --- /dev/null +++ b/src/images/GridAdmin_logo_dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/GridAdmin_logo_light.svg b/src/images/GridAdmin_logo_light.svg new file mode 100644 index 0000000..e69b1bb --- /dev/null +++ b/src/images/GridAdmin_logo_light.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/powsybl_logo.svg b/src/images/powsybl_logo.svg deleted file mode 100644 index 93c9724..0000000 --- a/src/images/powsybl_logo.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 02e647244a262bb1533e3af94f9bf4740d24e37b Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 15 Jan 2024 09:48:01 +0100 Subject: [PATCH 02/54] Add missing view in about url --- src/services/study.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/study.ts b/src/services/study.ts index 240333d..ed71025 100644 --- a/src/services/study.ts +++ b/src/services/study.ts @@ -18,7 +18,7 @@ export type ServerAbout = { export function getServersInfos(token: Token): Promise { return backendFetchJson( - `${STUDY_URL}/servers/about`, + `${STUDY_URL}/servers/about?view=admin`, { headers: { Accept: 'application/json', From 46ce7931badbf44fab02b1d757fec2ba6f672b85 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 15 Jan 2024 18:38:42 +0100 Subject: [PATCH 03/54] Update router usage to api v6 --- src/components/app-wrapper.tsx | 53 +++++---- src/components/app.test.tsx | 52 +++++--- src/components/app.tsx | 151 ++---------------------- src/module-commons-ui.d.ts | 1 + src/routes/index.ts | 1 + src/routes/router.tsx | 210 +++++++++++++++++++++++++++++++++ src/translations/en.json | 2 + src/translations/fr.json | 2 + 8 files changed, 293 insertions(+), 179 deletions(-) create mode 100644 src/routes/index.ts create mode 100644 src/routes/router.tsx diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 790164f..82d84f9 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -25,7 +25,6 @@ import { top_bar_fr, } from '@gridsuite/commons-ui'; import { IntlProvider } from 'react-intl'; -import { BrowserRouter } from 'react-router-dom'; import { Provider, useSelector } from 'react-redux'; import messages_en from '../translations/en.json'; import messages_fr from '../translations/fr.json'; @@ -36,6 +35,7 @@ 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'; +import { AppWithAuthRouter } from '../routes'; const lightTheme: Theme = createTheme({ palette: { @@ -116,7 +116,13 @@ const messages: Record = { const basename = new URL(document.querySelector('base')?.href || '').pathname; -const AppWrapperWithRedux: FunctionComponent = () => { +/** + * Layer injecting Theme, Internationalization (i18n) and other tools (snackbar, error boundary, ...) + */ +const AppWrapperRouterLayout: FunctionComponent[0]> = ( + props, + context +) => { const computedLanguage = useSelector( (state: AppState) => state.computedLanguage ); @@ -126,28 +132,33 @@ const AppWrapperWithRedux: FunctionComponent = () => { locale={computedLanguage} messages={messages[computedLanguage]} > - - - - - - - - - - - - + + + + + + {props.children} + + + + ); }; -const AppWrapper: FunctionComponent = () => { - return ( - - - - ); -}; +/** + * Layer managing router depending on user authentication state + */ +const AppWrapperWithRedux: FunctionComponent = () => ( + +); +/** + * Layer injecting Redux store in context + */ +const AppWrapper: FunctionComponent = () => ( + + + +); export default AppWrapper; diff --git a/src/components/app.test.tsx b/src/components/app.test.tsx index 016594c..0798f8b 100644 --- a/src/components/app.test.tsx +++ b/src/components/app.test.tsx @@ -1,11 +1,11 @@ // app.test.tsx -import React from 'react'; +import React, { FunctionComponent, PropsWithChildren } from 'react'; import { createRoot } from 'react-dom/client'; import { act } from 'react-dom/test-utils'; import { IntlProvider } from 'react-intl'; import { Provider } from 'react-redux'; -import { BrowserRouter } from 'react-router-dom'; +import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom'; import App from './app'; import { store } from '../redux/store'; import { @@ -14,7 +14,9 @@ import { ThemeProvider, } from '@mui/material/styles'; import { SnackbarProvider } from '@gridsuite/commons-ui'; +import { UserManagerMock } from '@gridsuite/commons-ui/es/utils/UserManagerMock'; import { CssBaseline } from '@mui/material'; +import { appRoutes } from '../routes'; let container: Element | any = null; @@ -32,22 +34,40 @@ afterEach(() => { it('renders', async () => { const root = createRoot(container); + const AppWrapperRouterLayout: FunctionComponent< + PropsWithChildren<{}> + > = () => ( + + + + + + + + + + + + + ); + const router = createMemoryRouter( + [ + { + element: ( + + + + ), + children: appRoutes(), + }, + ] + //{ basename: props.basename } + ); await act(async () => root.render( - - - - - - - - - - - - - - + + + ) ); diff --git a/src/components/app.tsx b/src/components/app.tsx index 9031113..efc475a 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -7,43 +7,20 @@ import React, { FunctionComponent, + PropsWithChildren, useCallback, useEffect, - useState, } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { - Navigate, - Route, - Routes, - useLocation, - useMatch, - useNavigate, -} from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; -import { Box, Typography } from '@mui/material'; -import { - AuthenticationRouter, - CardErrorBoundary, - getPreLoginPath, - initializeAuthenticationProd, - useSnackMessage, -} from '@gridsuite/commons-ui'; +import { CardErrorBoundary, useSnackMessage } from '@gridsuite/commons-ui'; import { selectComputedLanguage, selectLanguage, selectTheme, } from '../redux/actions'; import { AppState } from '../redux/reducer'; -import { - ConfigSrv, - ConfigParameter, - ConfigParameters, - UserAdminSrv, - AppsMetadataSrv, -} from '../services'; +import { ConfigParameter, ConfigParameters, ConfigSrv } from '../services'; import { connectNotificationsWsUpdateConfig } from '../utils/rest-api'; -import { UserManager } from 'oidc-client'; import { APP_NAME, COMMON_APP_NAME, @@ -54,30 +31,12 @@ import { getComputedLanguage } from '../utils/language'; import AppTopBar, { AppTopBarProps } from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; -const App: FunctionComponent = () => { +const App: FunctionComponent< + PropsWithChildren<{ userManager: AppTopBarProps['userManager'] }> +> = (props, context) => { const { snackError } = useSnackMessage(); - - const user = useSelector((state: AppState) => state.user); - - const signInCallbackError = useSelector( - (state: AppState) => state.signInCallbackError - ); - const authenticationRouterError = useSelector( - (state: AppState) => state.authenticationRouterError - ); - const showAuthenticationRouterLogin = useSelector( - (state: AppState) => state.showAuthenticationRouterLogin - ); - - const [userManager, setUserManager] = useState< - AppTopBarProps['userManager'] - >({ instance: null, error: null }); - - const navigate = useNavigate(); - const dispatch = useDispatch(); - - const location = useLocation(); + const user = useSelector((state: AppState) => state.user); const updateParams: (p: ConfigParameters) => void = useCallback( (params: ConfigParameters) => { @@ -126,43 +85,6 @@ const App: FunctionComponent = () => { return ws; }, [updateParams, snackError]); - // Can't use lazy initializer because useMatch is a hook - const [initialMatchSilentRenewCallbackUrl] = useState( - useMatch({ - path: '/silent-renew-callback', - }) - ); - const [initialMatchSignInCallbackUrl] = useState( - useMatch({ - path: '/sign-in-callback', - }) - ); - - useEffect(() => { - AppsMetadataSrv.fetchAuthorizationCodeFlowFeatureFlag() - .then((authorizationCodeFlowEnabled) => - initializeAuthenticationProd( - dispatch, - initialMatchSilentRenewCallbackUrl != null, - fetch('idpSettings.json'), - UserAdminSrv.fetchValidateUser, - authorizationCodeFlowEnabled, - initialMatchSignInCallbackUrl != null - ) - ) - .then((userManager: UserManager | undefined) => { - setUserManager({ instance: userManager || null, error: null }); - }) - .catch((error: any) => { - setUserManager({ instance: null, error: error.message }); - }); - // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change - }, [ - dispatch, - initialMatchSilentRenewCallbackUrl, - initialMatchSignInCallbackUrl, - ]); - useEffect(() => { if (user !== null) { ConfigSrv.fetchConfigParameters(COMMON_APP_NAME) @@ -196,64 +118,9 @@ const App: FunctionComponent = () => { return ( <> - + - {user !== null ? ( - - - - Connected - - - } - /> - - } - /> - - Error: logout failed; you are still logged - in. - - } - /> - - - - } - /> - - ) : ( - - )} + {/*Router outlet ->*/ props.children} ); diff --git a/src/module-commons-ui.d.ts b/src/module-commons-ui.d.ts index 0c0aa8c..1357b8a 100644 --- a/src/module-commons-ui.d.ts +++ b/src/module-commons-ui.d.ts @@ -2,3 +2,4 @@ declare module '@gridsuite/commons-ui' /*{ export = typeof import('@gridsuite/commons-ui'); }*/; +declare module '@gridsuite/commons-ui/es/utils/UserManagerMock'; diff --git a/src/routes/index.ts b/src/routes/index.ts new file mode 100644 index 0000000..164ab50 --- /dev/null +++ b/src/routes/index.ts @@ -0,0 +1 @@ +export * from './router'; diff --git a/src/routes/router.tsx b/src/routes/router.tsx new file mode 100644 index 0000000..7549346 --- /dev/null +++ b/src/routes/router.tsx @@ -0,0 +1,210 @@ +/* + * Copyright (c) 2024, 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, { + Dispatch, + FunctionComponent, + PropsWithChildren, + SetStateAction, + useEffect, + useMemo, + useState, +} from 'react'; +import { Box, Typography } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; +import { + AuthenticationRouter, + getPreLoginPath, + initializeAuthenticationProd, +} from '@gridsuite/commons-ui'; +import { Router } from '@remix-run/router'; +import { AppTopBarProps } from '../components/app-top-bar'; +import { + BrowserRouter, + createBrowserRouter, + Navigate, + Outlet, + RouteObject, + RouterProvider, + useLocation, + useMatch, + useNavigate, +} from 'react-router-dom'; +import { UserManager } from 'oidc-client'; +import { useDispatch, useSelector } from 'react-redux'; +import { AppState } from '../redux/reducer'; +import { UserAdminSrv, AppsMetadataSrv } from '../services'; +import App from '../components/app'; + +export function appRoutes(): RouteObject[] { + return [ + { + path: '/', + element: ( + + + + + + ), + children: undefined, + }, + { + path: '/sign-in-callback', + element: , + }, + { + path: '/logout-callback', + element: , + }, + { + path: '*', + element: , + }, + ]; +} + +const AuthRouter: FunctionComponent<{ + userManager: (typeof AuthenticationRouter)['userManager']; +}> = (props, context) => { + const signInCallbackError = useSelector( + (state: AppState) => state.signInCallbackError + ); + const authenticationRouterError = useSelector( + (state: AppState) => state.authenticationRouterError + ); + const showAuthenticationRouterLogin = useSelector( + (state: AppState) => state.showAuthenticationRouterLogin + ); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const location = useLocation(); + + return ( + + ); +}; + +/** + * Manage authentication state. + *
Sub-component because `useMatch` must be under router context. + */ +const AppAuthStateWithRouterLayer: FunctionComponent< + PropsWithChildren<{ + userManagerState: [ + AppTopBarProps['userManager'], + Dispatch> + ]; + layout: FunctionComponent[0]>; + }> +> = (props, context) => { + const AppWrapperRouterLayout = props.layout; + const [userManager, setUserManager] = props.userManagerState; + const dispatch = useDispatch(); + + // Can't use lazy initializer because useMatch is a hook + const [initialMatchSilentRenewCallbackUrl] = useState( + useMatch({ + path: '/silent-renew-callback', + }) + ); + const [initialMatchSignInCallbackUrl] = useState( + useMatch({ + path: '/sign-in-callback', + }) + ); + + useEffect(() => { + AppsMetadataSrv.fetchAuthorizationCodeFlowFeatureFlag() + .then((authorizationCodeFlowEnabled) => + initializeAuthenticationProd( + dispatch, + initialMatchSilentRenewCallbackUrl != null, + fetch('idpSettings.json'), + UserAdminSrv.fetchValidateUser, + authorizationCodeFlowEnabled, + initialMatchSignInCallbackUrl != null + ) + ) + .then((userManager: UserManager | undefined) => { + setUserManager({ instance: userManager ?? null, error: null }); + }) + .catch((error: any) => { + setUserManager({ instance: null, error: error.message }); + }); + // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change + }, [ + dispatch, + setUserManager, + initialMatchSilentRenewCallbackUrl, + initialMatchSignInCallbackUrl, + ]); + + return ( + + {props.children} + + ); +}; + +/** + * Manage authentication and assure cohabitation of legacy and new router api + */ +export const AppWithAuthRouter: FunctionComponent<{ + basename: string; + layout: FunctionComponent[0]>; +}> = (props, context) => { + const [userManager, setUserManager] = useState< + AppTopBarProps['userManager'] + >({ instance: null, error: null }); + + const user = useSelector((state: AppState) => state.user); + const router: NullableRouter = useMemo((): NullableRouter => { + if (user === null) { + return null; + } else { + return createBrowserRouter( + [ + { + element: ( + + + + ), + children: appRoutes(), + }, + ], + { basename: props.basename } + ); + } + }, [user, userManager, props.layout, props.basename]); + + return router !== null ? ( + /*new react-router v6 api*/ + ) : ( + /*legacy component router*/ + + + + + ); +}; +type NullableRouter = Router | null; diff --git a/src/translations/en.json b/src/translations/en.json index 8d9c045..faeb604 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1,4 +1,6 @@ { + "logoutFailed": "Error: logout failed; you are still logged in.", + "connected": "Connected", "close": "Close", "parameters": "Parameters", "paramsChangingError": "An error occured when changing the parameters", diff --git a/src/translations/fr.json b/src/translations/fr.json index 8a3500a..efcc00a 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -1,4 +1,6 @@ { + "logoutFailed": "Erreur: échec de la déconnexion\u00a0; vous êtes toujours connecté(e).", + "connected": "Connecté(e)", "close": "Fermer", "parameters": "Paramètres", "paramsChangingError": "Une erreur est survenue lors de la modification des paramètres", From 198e2ac4d4d85d8a69976bb1f10f64762dde69f9 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 7 Feb 2024 10:08:40 +0100 Subject: [PATCH 04/54] Add routes with tabs menu --- src/components/app-top-bar.tsx | 82 +++++++++++++++++-- .../connections/ConnectionsPage.tsx | 4 + src/components/connections/index.ts | 1 + src/components/users/UsersPage.tsx | 4 + src/components/users/index.ts | 1 + src/routes/ErrorPage.tsx | 15 ++++ src/routes/router.tsx | 37 +++++++-- src/translations/en.json | 4 +- src/translations/fr.json | 4 +- 9 files changed, 136 insertions(+), 16 deletions(-) create mode 100644 src/components/connections/ConnectionsPage.tsx create mode 100644 src/components/connections/index.ts create mode 100644 src/components/users/UsersPage.tsx create mode 100644 src/components/users/index.ts create mode 100644 src/routes/ErrorPage.tsx diff --git a/src/components/app-top-bar.tsx b/src/components/app-top-bar.tsx index e7bea8d..8ef42fc 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -5,18 +5,26 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { FunctionComponent, useEffect, useState } from 'react'; +import React, { + forwardRef, + FunctionComponent, + 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 { useNavigate } from 'react-router-dom'; +import { NavLink, useNavigate } from 'react-router-dom'; import { ReactComponent as GridAdminLogoLight } from '../images/GridAdmin_logo_light.svg'; import { ReactComponent as GridAdminLogoDark } from '../images/GridAdmin_logo_dark.svg'; import AppPackage from '../../package.json'; import { AppState } from '../redux/reducer'; import { UserManager } from 'oidc-client'; +import { FormattedMessage } from 'react-intl'; +import { Tab, TabProps, Tabs, TabsProps } from '@mui/material'; +import { History, PeopleAlt } from '@mui/icons-material'; export type AppTopBarProps = { user?: AppState['user']; @@ -27,17 +35,28 @@ export type AppTopBarProps = { }; const AppTopBar: FunctionComponent = (props) => { const navigate = useNavigate(); - const dispatch = useDispatch(); + const [tabSelected, setTabSelected] = useState(false); + const tabs = [ + { + to: '/users', + icon: , + label: , + }, + { + to: '/connections', + icon: , + label: , + }, + ]; + const [appsAndUrls, setAppsAndUrls] = useState< Awaited> >([]); const theme = useSelector((state: AppState) => state[PARAM_THEME]); - const [themeLocal, handleChangeTheme] = useParameterState(PARAM_THEME); - const [languageLocal, handleChangeLanguage] = useParameterState(PARAM_LANGUAGE); @@ -82,7 +101,29 @@ const AppTopBar: FunctionComponent = (props) => { theme={themeLocal} onLanguageClick={handleChangeLanguage} language={languageLocal} - /> + > + {props.user && ( + + )} + setShowParameters(false)} @@ -91,3 +132,32 @@ const AppTopBar: FunctionComponent = (props) => { ); }; export default AppTopBar; + +const TabNavLink: FunctionComponent<{ + icon: TabProps['icon']; + label: TabProps['label']; + href: string; + tabValue: TabsProps['value']; + setTabSelected: (tab: TabsProps['value']) => void; +}> = (props, context) => { + const fnActive = () => props.setTabSelected(props.tabValue); + return ( + ( + { + isActive && fnActive(); + return props.style; + }} + /> + ))} + /> + ); +}; diff --git a/src/components/connections/ConnectionsPage.tsx b/src/components/connections/ConnectionsPage.tsx new file mode 100644 index 0000000..0efaa7b --- /dev/null +++ b/src/components/connections/ConnectionsPage.tsx @@ -0,0 +1,4 @@ +const ConnectionsPage = () => { + return <>TODO connections; +}; +export default ConnectionsPage; diff --git a/src/components/connections/index.ts b/src/components/connections/index.ts new file mode 100644 index 0000000..86894ce --- /dev/null +++ b/src/components/connections/index.ts @@ -0,0 +1 @@ +export { default as Connections } from './ConnectionsPage'; diff --git a/src/components/users/UsersPage.tsx b/src/components/users/UsersPage.tsx new file mode 100644 index 0000000..420322b --- /dev/null +++ b/src/components/users/UsersPage.tsx @@ -0,0 +1,4 @@ +const UsersPage = () => { + return <>TODO users; +}; +export default UsersPage; diff --git a/src/components/users/index.ts b/src/components/users/index.ts new file mode 100644 index 0000000..c345551 --- /dev/null +++ b/src/components/users/index.ts @@ -0,0 +1 @@ +export { default as Users } from './UsersPage'; diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx new file mode 100644 index 0000000..5e2bde9 --- /dev/null +++ b/src/routes/ErrorPage.tsx @@ -0,0 +1,15 @@ +import { useRouteError } from 'react-router-dom'; + +export default function ErrorPage() { + const error = useRouteError() as Record; + console.error(error); + return ( +
+

Oops!

+

Sorry, an unexpected error has occurred.

+

+ {error.statusText || error.message} +

+
+ ); +} diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 7549346..66af887 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -39,19 +39,39 @@ import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { UserAdminSrv, AppsMetadataSrv } from '../services'; import App from '../components/app'; +import { Users } from '../components/users'; +import { Connections } from '../components/connections'; +import ErrorPage from './ErrorPage'; + +const pathUsers = 'users'; +const pathConnections = 'connections'; +export const UrlPaths = { + users: `/${pathUsers}`, + connections: `/${pathConnections}`, +}; export function appRoutes(): RouteObject[] { return [ { path: '/', - element: ( - - - - - - ), - children: undefined, + children: [ + { + index: true, + element: ( + + + + + + ), + }, + { path: pathUsers, element: }, + { path: pathConnections, element: }, + ], }, { path: '/sign-in-callback', @@ -64,6 +84,7 @@ export function appRoutes(): RouteObject[] { { path: '*', element: , + errorElement: , }, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index faeb604..b9eb460 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4,5 +4,7 @@ "close": "Close", "parameters": "Parameters", "paramsChangingError": "An error occured when changing the parameters", - "paramsRetrievingError": "An error occurred while retrieving the parameters" + "paramsRetrievingError": "An error occurred while retrieving the parameters", + "users": "Users", + "connections": "Connections" } diff --git a/src/translations/fr.json b/src/translations/fr.json index efcc00a..129ad0b 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -4,5 +4,7 @@ "close": "Fermer", "parameters": "Paramètres", "paramsChangingError": "Une erreur est survenue lors de la modification des paramètres", - "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres" + "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres", + "users": "Utilisateurs", + "connections": "Connexions" } From 9a77f091faeef9c7c350d81d2cafdeab9ca53b99 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 7 Feb 2024 12:31:50 +0100 Subject: [PATCH 05/54] remove unnecessary 'React' import https://www.linkedin.com/pulse/say-goodbye-react-imports-17s-game-changing-feature-deepak-sharma- --- src/components/app-top-bar.tsx | 2 +- src/components/app-wrapper.tsx | 2 +- src/components/app.tsx | 2 +- src/components/parameters.tsx | 2 +- src/routes/router.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/app-top-bar.tsx b/src/components/app-top-bar.tsx index 8ef42fc..4be04c0 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { +import { forwardRef, FunctionComponent, useEffect, diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 82d84f9..e52724a 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -6,7 +6,7 @@ */ import App from './app'; -import React, { FunctionComponent } from 'react'; +import { FunctionComponent } from 'react'; import { createTheme, StyledEngineProvider, diff --git a/src/components/app.tsx b/src/components/app.tsx index efc475a..c381d37 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { +import { FunctionComponent, PropsWithChildren, useCallback, diff --git a/src/components/parameters.tsx b/src/components/parameters.tsx index f5f5b68..3d0c1e8 100644 --- a/src/components/parameters.tsx +++ b/src/components/parameters.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { +import { FunctionComponent, PropsWithChildren, ReactElement, diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 66af887..bdc32bc 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import React, { +import { Dispatch, FunctionComponent, PropsWithChildren, From afa33215579a61827c0720c53bdcca92a7b7679d Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 7 Feb 2024 13:09:06 +0100 Subject: [PATCH 06/54] fix wrong case for config parameter --- src/services/config.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/services/config.ts b/src/services/config.ts index f120d7d..ddbe82f 100644 --- a/src/services/config.ts +++ b/src/services/config.ts @@ -13,6 +13,7 @@ export type ConfigParameters = Array; export function fetchConfigParameters( appName: string ): Promise { + appName = appName.toLowerCase(); console.info(`Fetching UI configuration params for app : ${appName}`); const fetchParams = `${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters`; return backendFetchJson(fetchParams); @@ -21,7 +22,7 @@ export function fetchConfigParameters( export function fetchConfigParameter( name: string ): ReturnType { - const appName = getAppName(name); + const appName = getAppName(name).toLowerCase(); console.info(`Fetching UI config parameter '${name}' for app '${appName}'`); const fetchParams = `${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters/${name}`; return backendFetchJson(fetchParams); @@ -31,7 +32,7 @@ export function updateConfigParameter( name: string, value: Parameters[0] ): ReturnType { - const appName = getAppName(name); + const appName = getAppName(name).toLowerCase(); console.info( `Updating config parameter '${name}=${value}' for app '${appName}'` ); From fd3cf8876e8beb0ea519cadaa3d46ca38211818e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 7 Feb 2024 15:11:48 +0100 Subject: [PATCH 07/54] Fix bug with router context not passed with legacy auth component Now tabs update correctly --- src/components/app-top-bar.tsx | 152 +++++++++++++++------------------ src/components/app-wrapper.tsx | 5 +- src/components/app.test.tsx | 2 +- src/components/app.tsx | 12 +-- src/redux/actions.ts | 42 +++++++++ src/redux/reducer.ts | 39 ++++++++- src/routes/index.ts | 7 ++ src/routes/router.tsx | 134 ++++++++++++++--------------- 8 files changed, 230 insertions(+), 163 deletions(-) diff --git a/src/components/app-top-bar.tsx b/src/components/app-top-bar.tsx index 4be04c0..8371deb 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -8,7 +8,9 @@ import { forwardRef, FunctionComponent, + ReactElement, useEffect, + useMemo, useState, } from 'react'; import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui'; @@ -16,40 +18,69 @@ 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 { NavLink, useNavigate } from 'react-router-dom'; +import { NavLink, useMatches, useNavigate } from 'react-router-dom'; import { ReactComponent as GridAdminLogoLight } from '../images/GridAdmin_logo_light.svg'; import { ReactComponent as GridAdminLogoDark } from '../images/GridAdmin_logo_dark.svg'; import AppPackage from '../../package.json'; import { AppState } from '../redux/reducer'; -import { UserManager } from 'oidc-client'; import { FormattedMessage } from 'react-intl'; -import { Tab, TabProps, Tabs, TabsProps } from '@mui/material'; +import { Tab, TabProps, Tabs } from '@mui/material'; import { History, PeopleAlt } from '@mui/icons-material'; +import { MainPaths } from '../routes'; -export type AppTopBarProps = { - user?: AppState['user']; - userManager: { - instance: UserManager | null; - error: string | null; - }; -}; -const AppTopBar: FunctionComponent = (props) => { - const navigate = useNavigate(); +const TabNavLink: FunctionComponent = ( + props, + context +) => ( + ( + + ))} + /> +); + +const tabs = new Map([ + [ + MainPaths.users, + } + label={} + href={`/${MainPaths.users}`} + value={MainPaths.users} + key={`tab-${MainPaths.users}`} + />, + ], + [ + MainPaths.connections, + } + label={} + href={`/${MainPaths.connections}`} + value={MainPaths.connections} + key={`tab-${MainPaths.connections}`} + />, + ], +]); + +const AppTopBar: FunctionComponent = () => { const dispatch = useDispatch(); + const user = useSelector((state: AppState) => state.user); + const userManagerInstance = useSelector( + (state: AppState) => state.userManager?.instance + ); - const [tabSelected, setTabSelected] = useState(false); - const tabs = [ - { - to: '/users', - icon: , - label: , - }, - { - to: '/connections', - icon: , - label: , - }, - ]; + const navigate = useNavigate(); + const matches = useMatches(); + const selectedTabValue = useMemo(() => { + const handle: any = matches + .map((match) => match.handle) + .filter((handle: any) => !!handle?.appBar_tab) + .shift(); + const tabValue: MainPaths = handle?.appBar_tab; + return tabValue && tabs.has(tabValue) ? tabValue : false; + }, [matches]); const [appsAndUrls, setAppsAndUrls] = useState< Awaited> @@ -63,12 +94,12 @@ const AppTopBar: FunctionComponent = (props) => { const [showParameters, setShowParameters] = useState(false); useEffect(() => { - if (props.user !== null) { + if (user !== null) { AppsMetadataSrv.fetchAppsAndUrls().then((res) => { setAppsAndUrls(res); }); } - }, [props.user]); + }, [user]); return ( <> @@ -85,11 +116,9 @@ const AppTopBar: FunctionComponent = (props) => { appVersion={AppPackage.version} appLicense={AppPackage.license} onParametersClick={() => setShowParameters(true)} - onLogoutClick={() => - logout(dispatch, props.userManager.instance) - } + onLogoutClick={() => logout(dispatch, userManagerInstance)} onLogoClick={() => navigate('/', { replace: true })} - user={props.user} + user={user} appsAndUrls={appsAndUrls} globalVersionPromise={() => AppsMetadataSrv.fetchVersion().then( @@ -102,27 +131,17 @@ const AppTopBar: FunctionComponent = (props) => { onLanguageClick={handleChangeLanguage} language={languageLocal} > - {props.user && ( - - )} + = (props) => { ); }; export default AppTopBar; - -const TabNavLink: FunctionComponent<{ - icon: TabProps['icon']; - label: TabProps['label']; - href: string; - tabValue: TabsProps['value']; - setTabSelected: (tab: TabsProps['value']) => void; -}> = (props, context) => { - const fnActive = () => props.setTabSelected(props.tabValue); - return ( - ( - { - isActive && fnActive(); - return props.style; - }} - /> - ))} - /> - ); -}; diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index e52724a..7c9b73a 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -119,10 +119,7 @@ const basename = new URL(document.querySelector('base')?.href || '').pathname; /** * Layer injecting Theme, Internationalization (i18n) and other tools (snackbar, error boundary, ...) */ -const AppWrapperRouterLayout: FunctionComponent[0]> = ( - props, - context -) => { +const AppWrapperRouterLayout: typeof App = (props, context) => { const computedLanguage = useSelector( (state: AppState) => state.computedLanguage ); diff --git a/src/components/app.test.tsx b/src/components/app.test.tsx index 0798f8b..227d7d1 100644 --- a/src/components/app.test.tsx +++ b/src/components/app.test.tsx @@ -42,7 +42,7 @@ it('renders', async () => { - + diff --git a/src/components/app.tsx b/src/components/app.tsx index c381d37..234dc62 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -28,12 +28,10 @@ import { PARAM_THEME, } from '../utils/config-params'; import { getComputedLanguage } from '../utils/language'; -import AppTopBar, { AppTopBarProps } from './app-top-bar'; +import AppTopBar from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; -const App: FunctionComponent< - PropsWithChildren<{ userManager: AppTopBarProps['userManager'] }> -> = (props, context) => { +const App: FunctionComponent> = (props, context) => { const { snackError } = useSnackMessage(); const dispatch = useDispatch(); const user = useSelector((state: AppState) => state.user); @@ -118,9 +116,11 @@ const App: FunctionComponent< return ( <> - +
+ +
- {/*Router outlet ->*/ props.children} +
{/*Router outlet ->*/ props.children}
 ); diff --git a/src/redux/actions.ts b/src/redux/actions.ts index 42171f9..95cfe3e 100644 --- a/src/redux/actions.ts +++ b/src/redux/actions.ts @@ -7,6 +7,48 @@ import { PARAM_LANGUAGE } from '../utils/config-params'; import { Action } from 'redux'; +import { UserManagerState } from '../routes'; + +export const UPDATE_USER_MANAGER_STATE = 'UPDATE_USER_MANAGER_STATE'; +export type UserManagerAction = Readonly< + Action +> & { + userManager: UserManagerState; +}; +export function updateUserManager( + userManager: UserManagerState +): UserManagerAction { + return { type: UPDATE_USER_MANAGER_STATE, userManager }; +} +export function updateUserManager_( + instance: UserManagerState['instance'], + error: UserManagerState['error'] +): UserManagerAction { + return { + type: UPDATE_USER_MANAGER_STATE, + userManager: { instance, error }, + }; +} + +export const UPDATE_USER_MANAGER_INSTANCE = 'UPDATE_USER_MANAGER_INSTANCE'; +export type UserManagerInstanceAction = Readonly< + Action +> & { instance: UserManagerState['instance'] }; +export function updateUserManagerInstance( + instance: UserManagerState['instance'] +): UserManagerInstanceAction { + return { type: UPDATE_USER_MANAGER_INSTANCE, instance }; +} + +export const UPDATE_USER_MANAGER_ERROR = 'UPDATE_USER_MANAGER_ERROR'; +export type UserManagerErrorAction = Readonly< + Action +> & { error: UserManagerState['error'] }; +export function updateUserManagerError( + error: UserManagerState['error'] +): UserManagerErrorAction { + return { type: UPDATE_USER_MANAGER_ERROR, error }; +} export const SELECT_THEME = 'SELECT_THEME'; export type ThemeAction = Readonly> & { diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts index 798c34a..f70ef85 100644 --- a/src/redux/reducer.ts +++ b/src/redux/reducer.ts @@ -19,6 +19,12 @@ import { SELECT_COMPUTED_LANGUAGE, SELECT_THEME, ThemeAction, + UPDATE_USER_MANAGER_ERROR, + UPDATE_USER_MANAGER_INSTANCE, + UPDATE_USER_MANAGER_STATE, + UserManagerAction, + UserManagerErrorAction, + UserManagerInstanceAction, } from './actions'; import { @@ -32,12 +38,14 @@ import { } from '@gridsuite/commons-ui'; import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params'; import { ReducerWithInitialState } from '@reduxjs/toolkit/dist/createReducer'; +import { UserManagerState } from '../routes'; export type AppState = { computedLanguage: ReturnType; [PARAM_THEME]: ReturnType; [PARAM_LANGUAGE]: ReturnType; + userManager: UserManagerState; user: Record | null; signInCallbackError: any; authenticationRouterError: any; @@ -46,6 +54,10 @@ export type AppState = { const initialState: AppState = { computedLanguage: getLocalStorageComputedLanguage(), + userManager: { + instance: null, + error: null, + }, user: null, signInCallbackError: null, authenticationRouterError: null, @@ -56,7 +68,13 @@ const initialState: AppState = { [PARAM_LANGUAGE]: getLocalStorageLanguage(), }; -export type Actions = AnyAction | ThemeAction | ComputedLanguageAction; +export type Actions = + | AnyAction + | UserManagerAction + | UserManagerInstanceAction + | UserManagerErrorAction + | ThemeAction + | ComputedLanguageAction; export type AppStateKey = keyof AppState; @@ -68,6 +86,25 @@ export const reducer: ReducerWithInitialState = createReducer( saveLocalStorageTheme(state.theme); }, + [UPDATE_USER_MANAGER_STATE]: ( + state: Draft, + action: UserManagerAction + ) => { + state.userManager = action.userManager; + }, + [UPDATE_USER_MANAGER_INSTANCE]: ( + state: Draft, + action: UserManagerInstanceAction + ) => { + state.userManager.instance = action.instance; + }, + [UPDATE_USER_MANAGER_ERROR]: ( + state: Draft, + action: UserManagerErrorAction + ) => { + state.userManager.error = action.error; + }, + [USER]: (state: Draft, action: AnyAction) => { state.user = action.user; }, diff --git a/src/routes/index.ts b/src/routes/index.ts index 164ab50..036acfb 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1 +1,8 @@ +import { UserManager } from 'oidc-client'; + export * from './router'; + +export type UserManagerState = { + instance: UserManager | null; + error: string | null; +}; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index bdc32bc..9d91961 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -6,10 +6,8 @@ */ import { - Dispatch, FunctionComponent, PropsWithChildren, - SetStateAction, useEffect, useMemo, useState, @@ -21,10 +19,7 @@ import { getPreLoginPath, initializeAuthenticationProd, } from '@gridsuite/commons-ui'; -import { Router } from '@remix-run/router'; -import { AppTopBarProps } from '../components/app-top-bar'; import { - BrowserRouter, createBrowserRouter, Navigate, Outlet, @@ -37,18 +32,17 @@ import { import { UserManager } from 'oidc-client'; import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; -import { UserAdminSrv, AppsMetadataSrv } from '../services'; +import { AppsMetadataSrv, UserAdminSrv } from '../services'; import App from '../components/app'; import { Users } from '../components/users'; import { Connections } from '../components/connections'; import ErrorPage from './ErrorPage'; +import { updateUserManager_ } from '../redux/actions'; -const pathUsers = 'users'; -const pathConnections = 'connections'; -export const UrlPaths = { - users: `/${pathUsers}`, - connections: `/${pathConnections}`, -}; +export enum MainPaths { + users = 'users', + connections = 'connections', +} export function appRoutes(): RouteObject[] { return [ @@ -69,8 +63,20 @@ export function appRoutes(): RouteObject[] { ), }, - { path: pathUsers, element: }, - { path: pathConnections, element: }, + { + path: `/${MainPaths.users}`, + element: , + handle: { + appBar_tab: MainPaths.users, + }, + }, + { + path: `/${MainPaths.connections}`, + element: , + handle: { + appBar_tab: MainPaths.connections, + }, + }, ], }, { @@ -123,16 +129,9 @@ const AuthRouter: FunctionComponent<{ *
Sub-component because `useMatch` must be under router context. */ const AppAuthStateWithRouterLayer: FunctionComponent< - PropsWithChildren<{ - userManagerState: [ - AppTopBarProps['userManager'], - Dispatch> - ]; - layout: FunctionComponent[0]>; - }> + PropsWithChildren<{ layout: typeof App }> > = (props, context) => { - const AppWrapperRouterLayout = props.layout; - const [userManager, setUserManager] = props.userManagerState; + const AppRouterLayout = props.layout; const dispatch = useDispatch(); // Can't use lazy initializer because useMatch is a hook @@ -160,72 +159,67 @@ const AppAuthStateWithRouterLayer: FunctionComponent< ) ) .then((userManager: UserManager | undefined) => { - setUserManager({ instance: userManager ?? null, error: null }); + dispatch(updateUserManager_(userManager ?? null, null)); }) .catch((error: any) => { - setUserManager({ instance: null, error: error.message }); + dispatch(updateUserManager_(null, error.message)); }); // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change }, [ dispatch, - setUserManager, initialMatchSilentRenewCallbackUrl, initialMatchSignInCallbackUrl, ]); - return ( - - {props.children} - - ); + return {props.children}; }; /** - * Manage authentication and assure cohabitation of legacy and new router api + * Manage authentication and assure cohabitation of legacy router and new data router api */ export const AppWithAuthRouter: FunctionComponent<{ basename: string; - layout: FunctionComponent[0]>; + layout: typeof App; }> = (props, context) => { - const [userManager, setUserManager] = useState< - AppTopBarProps['userManager'] - >({ instance: null, error: null }); - const user = useSelector((state: AppState) => state.user); - const router: NullableRouter = useMemo((): NullableRouter => { - if (user === null) { - return null; - } else { - return createBrowserRouter( - [ - { - element: ( - - - - ), - children: appRoutes(), - }, - ], + const router = useMemo( + () => + createBrowserRouter( + user + ? [ + /*new react-router v6 api*/ + { + element: ( + + + + ), + children: appRoutes(), + }, + ] + : ([ + /*legacy component router*/ + { + path: '*', + Component: () => ( + + ), + }, + ] as RouteObject[]), { basename: props.basename } - ); - } - }, [user, userManager, props.layout, props.basename]); + ), + [props.basename, props.layout, user] + ); + return ; +}; - return router !== null ? ( - /*new react-router v6 api*/ - ) : ( - /*legacy component router*/ - - - - +const LegacyAuthRouter: FunctionComponent<{ layout: typeof App }> = (props) => { + const userManager = useSelector((state: AppState) => state.userManager); + return ( + + + ); }; -type NullableRouter = Router | null; From fc9cf2e6bde43b8268aa68ca72ab37aee720eba0 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 02:26:33 +0100 Subject: [PATCH 08/54] Add connections list page & fix layout fullscreen --- package-lock.json | 74 +++++-- package.json | 1 + .../DataGrid/CustomNoRowsOverlay.tsx | 84 ++++++++ src/components/DataGrid/CustomToolbar.tsx | 51 +++++ src/components/app-top-bar.tsx | 8 +- src/components/app.tsx | 24 ++- .../connections/ConnectionsPage.tsx | 197 +++++++++++++++++- src/components/users/UsersPage.tsx | 4 +- src/index.css | 4 + src/routes/ErrorPage.tsx | 14 +- src/routes/HomePage.tsx | 13 ++ src/routes/router.tsx | 14 +- src/translations/en.json | 22 +- src/translations/fr.json | 20 +- 14 files changed, 474 insertions(+), 56 deletions(-) create mode 100644 src/components/DataGrid/CustomNoRowsOverlay.tsx create mode 100644 src/components/DataGrid/CustomToolbar.tsx create mode 100644 src/routes/HomePage.tsx diff --git a/package-lock.json b/package-lock.json index e3abda6..7e81ae7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.75", "@mui/material": "^5.5.3", + "@mui/x-data-grid": "^6.19.3", "@reduxjs/toolkit": "^1.2.3", "@types/core-js": "^2.5.8", "@types/node": "^18.19.3", @@ -1837,16 +1838,21 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", - "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/@babel/template": { "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", @@ -3551,13 +3557,12 @@ } }, "node_modules/@mui/utils": { - "version": "5.12.0", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz", - "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==", + "version": "5.15.7", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.7.tgz", + "integrity": "sha512-8qhsxQRNV6aEOjjSk6YQIYJxkF5klhj8oG1FEEU4z6HV78TjNqRxMP08QGcdsibEbez+nihAaz6vu83b4XqbAg==", "dependencies": { - "@babel/runtime": "^7.21.0", - "@types/prop-types": "^15.7.5", - "@types/react-is": "^16.7.1 || ^17.0.0", + "@babel/runtime": "^7.23.9", + "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -3566,10 +3571,16 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/@mui/utils/node_modules/react-is": { @@ -3577,6 +3588,39 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/@mui/x-data-grid": { + "version": "6.19.3", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.3.tgz", + "integrity": "sha512-RHt+MhTgvpXTWY0MYvzSNLF8npo+mlmWuTO+qKRt42Zj634IlUYDwW5jjQ9fWZnIpWJLunw253KqHoAlSAOXaw==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "@mui/utils": "^5.14.16", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "reselect": "^4.1.8" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@mui/x-data-grid/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4335,14 +4379,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-is": { - "version": "17.0.3", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", - "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 478e8fc..0d70505 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.75", "@mui/material": "^5.5.3", + "@mui/x-data-grid": "^6.19.3", "@reduxjs/toolkit": "^1.2.3", "@types/core-js": "^2.5.8", "@types/node": "^18.19.3", diff --git a/src/components/DataGrid/CustomNoRowsOverlay.tsx b/src/components/DataGrid/CustomNoRowsOverlay.tsx new file mode 100644 index 0000000..b5c3939 --- /dev/null +++ b/src/components/DataGrid/CustomNoRowsOverlay.tsx @@ -0,0 +1,84 @@ +/* + * from https://mui.com/x/react-data-grid/components/#no-rows-overlay + */ +import { ReactElement } from 'react'; +import { Box } from '@mui/material'; +import { SxProps } from '@mui/system/styleFunctionSx'; +import { Theme } from '@emotion/react'; +import { FormattedMessage } from 'react-intl'; + +const style: SxProps = (theme) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100%', + '& .ant-empty-img-1': { + fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626', + }, + '& .ant-empty-img-2': { + fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959', + }, + '& .ant-empty-img-3': { + fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343', + }, + '& .ant-empty-img-4': { + fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c', + }, + '& .ant-empty-img-5': { + fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08', + fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff', + }, +}); + +export default function CustomNoRowsOverlay(): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/DataGrid/CustomToolbar.tsx b/src/components/DataGrid/CustomToolbar.tsx new file mode 100644 index 0000000..af67bf5 --- /dev/null +++ b/src/components/DataGrid/CustomToolbar.tsx @@ -0,0 +1,51 @@ +import { forwardRef, FunctionComponent, PropsWithChildren } from 'react'; +import { Box } from '@mui/material'; +import { + GridToolbarColumnsButton, + GridToolbarContainer, + GridToolbarDensitySelector, + GridToolbarExport, + GridToolbarFilterButton, + GridToolbarProps, + GridToolbarQuickFilter, useGridApiContext, + useGridRootProps +} from '@mui/x-data-grid'; + +export const CustomToolbar: FunctionComponent> = forwardRef< + HTMLDivElement, + GridToolbarProps +>((props, ref) => { + const rootProps = useGridRootProps(); + const apiRef = useGridApiContext(); + + /*const handleExport = (options: GridCsvExportOptions) => + apiRef.current.exportDataAsCsv(options);*/ + + if ( + rootProps.disableColumnFilter && + rootProps.disableColumnSelector && + rootProps.disableDensitySelector && + !props.showQuickFilter + ) { + return null; + } else { + return ( + + + + + + + {props.showQuickFilter && ( + + )} + {props.children} //TODO refresh-data + + ); + } +}); +export default CustomToolbar; diff --git a/src/components/app-top-bar.tsx b/src/components/app-top-bar.tsx index 8371deb..7373aa1 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -36,7 +36,7 @@ const TabNavLink: FunctionComponent = ( {...props} iconPosition="start" LinkComponent={forwardRef((props, ref) => ( - + ))} /> ); @@ -46,7 +46,7 @@ const tabs = new Map([ MainPaths.users, } - label={} + label={} href={`/${MainPaths.users}`} value={MainPaths.users} key={`tab-${MainPaths.users}`} @@ -56,7 +56,7 @@ const tabs = new Map([ MainPaths.connections, } - label={} + label={} href={`/${MainPaths.connections}`} value={MainPaths.connections} key={`tab-${MainPaths.connections}`} @@ -136,7 +136,7 @@ const AppTopBar: FunctionComponent = () => { variant="scrollable" scrollButtons="auto" aria-label="Main navigation menu" - disabled={!user} + sx={{ display: user ? 'hidden' : undefined }} value={selectedTabValue} > {[...tabs.values()]} diff --git a/src/components/app.tsx b/src/components/app.tsx index 234dc62..37c6b6e 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -30,6 +30,7 @@ import { import { getComputedLanguage } from '../utils/language'; import AppTopBar from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; +import { Grid } from '@mui/material'; const App: FunctionComponent> = (props, context) => { const { snackError } = useSnackMessage(); @@ -115,14 +116,21 @@ const App: FunctionComponent> = (props, context) => { ]); return ( - <> -
- -
- -
{/*Router outlet ->*/ props.children}
- - + + + + + {/*Router outlet ->*/ props.children} + + + ); }; export default App; diff --git a/src/components/connections/ConnectionsPage.tsx b/src/components/connections/ConnectionsPage.tsx index 0efaa7b..7bdabdd 100644 --- a/src/components/connections/ConnectionsPage.tsx +++ b/src/components/connections/ConnectionsPage.tsx @@ -1,4 +1,197 @@ -const ConnectionsPage = () => { - return <>TODO connections; +import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid'; +import { + Chip, + ChipProps, + Grid, + LinearProgress, + Typography, +} from '@mui/material'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { FunctionComponent, useMemo } from 'react'; +import { Check, Close, QuestionMark } from '@mui/icons-material'; +import CustomNoRowsOverlay from '../DataGrid/CustomNoRowsOverlay'; + +type ConnectionRow = { + sub: string; + firstConnection: string; //Datetime + lastConnection: string; //Datetime + allowed: boolean; +}; + +function getRowId(row: ConnectionRow) { + return row.sub; +} + +const BoolValue: FunctionComponent<{ + value: boolean | null | undefined; +}> = (props, context) => { + const conf = ((value: unknown): Partial => { + switch (value) { + case true: + return { + label: ( + + ), + icon: , + color: 'success', + }; + case false: + return { + label: ( + + ), + icon: , + color: 'error', + }; + default: + return { + label: ( + + ), + icon: , + }; + } + })(props.value); + return ; +}; + +const commonColDef: Partial> = { + editable: false, + filterable: true, + //minWidth: 50, + //width: 100, +}; + +const ConnectionsPage: FunctionComponent = () => { + const intl = useIntl(); + const columns: GridColDef[] = useMemo( + () => [ + { + ...commonColDef, + field: 'sub', + headerName: intl.formatMessage({ id: 'connections.table.id' }), + description: intl.formatMessage({ + id: 'connections.table.id.description', + }), + type: 'string', + flex: 0.25, + hideable: false, + }, + { + ...commonColDef, + field: 'firstConnection', + headerName: intl.formatMessage({ + id: 'connections.table.firstConnection', + }), + description: intl.formatMessage({ + id: 'connections.table.firstConnection.description', + }), + type: 'dateTime', + valueGetter: ({ value }) => value && new Date(value), + flex: 0.3, + }, + { + ...commonColDef, + field: 'lastConnection', + headerName: intl.formatMessage({ + id: 'connections.table.lastConnection', + }), + description: intl.formatMessage({ + id: 'connections.table.lastConnection.description', + }), + type: 'dateTime', + valueGetter: ({ value }) => value && new Date(value), + flex: 0.3, + //TODO valueFormatter + }, + { + ...commonColDef, + field: 'allowed', + headerName: intl.formatMessage({ + id: 'connections.table.allowed', + }), + description: intl.formatMessage({ + id: 'connections.table.allowed.description', + }), + type: 'boolean', + sortable: false, + flex: 0.15, + renderCell: (params) => , + headerAlign: 'left', + align: 'left', + }, + ], + [intl] + ); + return ( + + + + + + + + + params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd' + }*/ + /> + + + ); }; export default ConnectionsPage; diff --git a/src/components/users/UsersPage.tsx b/src/components/users/UsersPage.tsx index 420322b..22ddc8e 100644 --- a/src/components/users/UsersPage.tsx +++ b/src/components/users/UsersPage.tsx @@ -1,4 +1,6 @@ -const UsersPage = () => { +import { FunctionComponent } from 'react'; + +const UsersPage: FunctionComponent = () => { return <>TODO users; }; export default UsersPage; diff --git a/src/index.css b/src/index.css index 407ba15..958f104 100644 --- a/src/index.css +++ b/src/index.css @@ -20,3 +20,7 @@ code { body > iframe[width='0'][height='0'] { border: 0; } + +#root { + height: 100vh; +} diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx index 5e2bde9..39d969d 100644 --- a/src/routes/ErrorPage.tsx +++ b/src/routes/ErrorPage.tsx @@ -1,15 +1,19 @@ +import { Grid, Typography } from '@mui/material'; import { useRouteError } from 'react-router-dom'; +import { ReactElement } from 'react'; -export default function ErrorPage() { +export default function ErrorPage(): ReactElement { const error = useRouteError() as Record; console.error(error); return ( -
-

Oops!

-

Sorry, an unexpected error has occurred.

+ + Oops! + + Sorry, an unexpected error has occurred. +

{error.statusText || error.message}

-
+ ); } diff --git a/src/routes/HomePage.tsx b/src/routes/HomePage.tsx new file mode 100644 index 0000000..58acc4b --- /dev/null +++ b/src/routes/HomePage.tsx @@ -0,0 +1,13 @@ +import { Grid, Typography } from '@mui/material'; +import { ReactElement } from 'react'; +import { FormattedMessage } from 'react-intl'; + +export default function HomePage(): ReactElement { + return ( + + + + + + ); +} diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 9d91961..ab5ffd2 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -12,7 +12,6 @@ import { useMemo, useState, } from 'react'; -import { Box, Typography } from '@mui/material'; import { FormattedMessage } from 'react-intl'; import { AuthenticationRouter, @@ -38,6 +37,7 @@ import { Users } from '../components/users'; import { Connections } from '../components/connections'; import ErrorPage from './ErrorPage'; import { updateUserManager_ } from '../redux/actions'; +import HomePage from './HomePage'; export enum MainPaths { users = 'users', @@ -51,17 +51,7 @@ export function appRoutes(): RouteObject[] { children: [ { index: true, - element: ( - - - - - - ), + element: , }, { path: `/${MainPaths.users}`, diff --git a/src/translations/en.json b/src/translations/en.json index b9eb460..8c0774c 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -3,8 +3,24 @@ "connected": "Connected", "close": "Close", "parameters": "Parameters", - "paramsChangingError": "An error occured when changing the parameters", + "paramsChangingError": "An error occurred when changing the parameters", "paramsRetrievingError": "An error occurred while retrieving the parameters", - "users": "Users", - "connections": "Connections" + + "appBar.tabs.users": "Users", + "appBar.tabs.connections": "Connections", + + "table.noRows": "No data", + + "connections.title": "History of connections", + "connections.table.id": "ID", + "connections.table.id.description": "User login", + "connections.table.firstConnection": "First see", + "connections.table.firstConnection.description": "The first time the user try to connect", + "connections.table.lastConnection": "Last see", + "connections.table.lastConnection.description": "The last time the user try to connect", + "connections.table.allowed": "Allowed", + "connections.table.allowed.description": "Is the user as authorized last time?", + "connections.table.allowed.yes": "Yes", + "connections.table.allowed.no": "No", + "connections.table.allowed.unknown": "Unknown" } diff --git a/src/translations/fr.json b/src/translations/fr.json index 129ad0b..d086ae2 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -5,6 +5,22 @@ "parameters": "Paramètres", "paramsChangingError": "Une erreur est survenue lors de la modification des paramètres", "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres", - "users": "Utilisateurs", - "connections": "Connexions" + + "appBar.tabs.users": "Utilisateurs", + "appBar.tabs.connections": "Connexions", + + "table.noRows": "No data", + + "connections.title": "Historique des connexions", + "connections.table.id": "ID", + "connections.table.id.description": "Identifiant de l'utilisateur", + "connections.table.firstConnection": "1ᵉʳᵉ connexion", + "connections.table.firstConnection.description": "La première tentative de connexion de l'utilisateur", + "connections.table.lastConnection": "Dernière conn.", + "connections.table.lastConnection.description": "La dernière tentative de connexion de l'utilisateur", + "connections.table.allowed": "Autorisé", + "connections.table.allowed.description": "Si l'utilisateur fût autorisé lors de sa dernière tentative de connexion", + "connections.table.allowed.yes": "Oui", + "connections.table.allowed.no": "Échec", + "connections.table.allowed.unknown": "\u00A0" } From b960861707e545a8766fecd91a04c5a2cb941060 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 03:53:43 +0100 Subject: [PATCH 09/54] Use MUI translations --- src/components/app-wrapper.tsx | 43 ++++++++++++++++++++++------------ src/redux/reducer.ts | 2 ++ 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx index 7c9b73a..63cdce3 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -6,17 +6,27 @@ */ import App from './app'; -import { FunctionComponent } from 'react'; +import { FunctionComponent, useCallback } from 'react'; +import { CssBaseline, responsiveFontSizes } from '@mui/material'; import { createTheme, StyledEngineProvider, Theme, + ThemeOptions, ThemeProvider, } from '@mui/material/styles'; +import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale'; +//import { enUS as MuiPickersEnUS, frFR as MuiPickersFrFR } from '@mui/x-date-pickers/locales'; +import { + enUS as MuiDataGridEnUS, + frFR as MuiDataGridFrFR, +} from '@mui/x-data-grid'; import { card_error_boundary_en, card_error_boundary_fr, CardErrorBoundary, + LANG_ENGLISH, + LANG_FRENCH, LIGHT_THEME, login_en, login_fr, @@ -31,13 +41,12 @@ 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'; import { AppWithAuthRouter } from '../routes'; -const lightTheme: Theme = createTheme({ +const lightTheme: ThemeOptions = { palette: { mode: 'light', }, @@ -61,9 +70,9 @@ const lightTheme: Theme = createTheme({ color: 'blue', }, mapboxStyle: 'mapbox://styles/mapbox/light-v9', -}); +}; -const darkTheme: Theme = createTheme({ +const darkTheme: ThemeOptions = { palette: { mode: 'dark', }, @@ -87,25 +96,28 @@ const darkTheme: Theme = createTheme({ color: 'green', }, mapboxStyle: 'mapbox://styles/mapbox/dark-v9', -}); +}; -const getMuiTheme = (theme: unknown): Theme => { - if (theme === LIGHT_THEME) { - return lightTheme; - } else { - return darkTheme; - } +const getMuiTheme = (theme: unknown, locale: unknown): Theme => { + return responsiveFontSizes( + createTheme( + theme === LIGHT_THEME ? lightTheme : darkTheme, + locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS, // MUI core translations + //locale === LANG_FRENCH ? MuiPickersFrFR : MuiPickersEnUS, // MUI x-date-pickers translations + locale === LANG_FRENCH ? MuiDataGridFrFR : MuiDataGridEnUS // MUI x-data-grid translations + ) + ); }; const messages: Record = { - en: { + [LANG_ENGLISH]: { ...messages_en, ...login_en, ...top_bar_en, ...card_error_boundary_en, ...messages_plugins_en, // keep it at the end to allow translation overwriting }, - fr: { + [LANG_FRENCH]: { ...messages_fr, ...login_fr, ...top_bar_fr, @@ -124,13 +136,14 @@ const AppWrapperRouterLayout: typeof App = (props, context) => { (state: AppState) => state.computedLanguage ); const theme = useSelector((state: AppState) => state[PARAM_THEME]); + const getTheme = useCallback(getMuiTheme, []); return ( - + diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts index f70ef85..edfcb64 100644 --- a/src/redux/reducer.ts +++ b/src/redux/reducer.ts @@ -16,6 +16,7 @@ import { import { ComputedLanguageAction, + LanguageAction, SELECT_COMPUTED_LANGUAGE, SELECT_THEME, ThemeAction, @@ -74,6 +75,7 @@ export type Actions = | UserManagerInstanceAction | UserManagerErrorAction | ThemeAction + | LanguageAction | ComputedLanguageAction; export type AppStateKey = keyof AppState; From 1bb86912c93953d815609c0b47255d3520947fa0 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 05:42:08 +0100 Subject: [PATCH 10/54] move pages and add users list page --- src/components/XDataGrid/CommonDataGrid.tsx | 56 +++++++++ .../CustomNoRowsOverlay.tsx | 0 src/components/users/UsersPage.tsx | 6 - .../connections/ConnectionsPage.tsx | 116 ++++++------------ .../connections/index.ts | 0 src/pages/index.ts | 2 + .../users}/CustomToolbar.tsx | 17 +-- src/pages/users/UsersPage.tsx | 98 +++++++++++++++ src/{components => pages}/users/index.ts | 0 src/routes/router.tsx | 3 +- src/translations/en.json | 6 +- src/translations/fr.json | 10 +- 12 files changed, 215 insertions(+), 99 deletions(-) create mode 100644 src/components/XDataGrid/CommonDataGrid.tsx rename src/components/{DataGrid => XDataGrid}/CustomNoRowsOverlay.tsx (100%) delete mode 100644 src/components/users/UsersPage.tsx rename src/{components => pages}/connections/ConnectionsPage.tsx (54%) rename src/{components => pages}/connections/index.ts (100%) create mode 100644 src/pages/index.ts rename src/{components/DataGrid => pages/users}/CustomToolbar.tsx (79%) create mode 100644 src/pages/users/UsersPage.tsx rename src/{components => pages}/users/index.ts (100%) diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx new file mode 100644 index 0000000..7094e1d --- /dev/null +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -0,0 +1,56 @@ +import { DataGrid, DataGridProps, GridToolbar } from '@mui/x-data-grid'; +import { LinearProgress } from '@mui/material'; +import CustomNoRowsOverlay from './CustomNoRowsOverlay'; +import { GridValidRowModel } from '@mui/x-data-grid/models/gridRows'; +import { ReactElement } from 'react'; +import { deepmerge } from '@mui/utils'; + +export default function CommonDataGrid( + props: DataGridProps +): ReactElement { + return ( + + params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd' + }*/ + /> + ); +} diff --git a/src/components/DataGrid/CustomNoRowsOverlay.tsx b/src/components/XDataGrid/CustomNoRowsOverlay.tsx similarity index 100% rename from src/components/DataGrid/CustomNoRowsOverlay.tsx rename to src/components/XDataGrid/CustomNoRowsOverlay.tsx diff --git a/src/components/users/UsersPage.tsx b/src/components/users/UsersPage.tsx deleted file mode 100644 index 22ddc8e..0000000 --- a/src/components/users/UsersPage.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { FunctionComponent } from 'react'; - -const UsersPage: FunctionComponent = () => { - return <>TODO users; -}; -export default UsersPage; diff --git a/src/components/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx similarity index 54% rename from src/components/connections/ConnectionsPage.tsx rename to src/pages/connections/ConnectionsPage.tsx index 7bdabdd..1afc816 100644 --- a/src/components/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -1,15 +1,9 @@ -import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid'; -import { - Chip, - ChipProps, - Grid, - LinearProgress, - Typography, -} from '@mui/material'; +import { GridColDef } from '@mui/x-data-grid'; +import { Chip, ChipProps, Grid, Typography } from '@mui/material'; import { FormattedMessage, useIntl } from 'react-intl'; import { FunctionComponent, useMemo } from 'react'; import { Check, Close, QuestionMark } from '@mui/icons-material'; -import CustomNoRowsOverlay from '../DataGrid/CustomNoRowsOverlay'; +import CommonDataGrid from '../../components/XDataGrid/CommonDataGrid'; type ConnectionRow = { sub: string; @@ -55,30 +49,43 @@ const BoolValue: FunctionComponent<{ return ; }; -const commonColDef: Partial> = { - editable: false, - filterable: true, - //minWidth: 50, - //width: 100, -}; - -const ConnectionsPage: FunctionComponent = () => { +const dataExample: ConnectionRow[] = [ + { + sub: 'test', + firstConnection: `${new Date()}`, + lastConnection: `${new Date()}`, + allowed: true, + }, + { + sub: 'test2', + firstConnection: `${new Date()}`, + lastConnection: `${new Date()}`, + allowed: true, + }, + { + sub: 'test3', + firstConnection: `${new Date()}`, + lastConnection: `${new Date()}`, + allowed: false, + }, +]; +export const ConnectionsPage: FunctionComponent = () => { const intl = useIntl(); const columns: GridColDef[] = useMemo( () => [ { - ...commonColDef, field: 'sub', - headerName: intl.formatMessage({ id: 'connections.table.id' }), + headerName: intl.formatMessage({ id: 'table.id' }), description: intl.formatMessage({ - id: 'connections.table.id.description', + id: 'table.id.description', }), type: 'string', flex: 0.25, + editable: false, + filterable: true, hideable: false, }, { - ...commonColDef, field: 'firstConnection', headerName: intl.formatMessage({ id: 'connections.table.firstConnection', @@ -89,9 +96,11 @@ const ConnectionsPage: FunctionComponent = () => { type: 'dateTime', valueGetter: ({ value }) => value && new Date(value), flex: 0.3, + editable: false, + filterable: true, + //TODO valueFormatter }, { - ...commonColDef, field: 'lastConnection', headerName: intl.formatMessage({ id: 'connections.table.lastConnection', @@ -102,10 +111,11 @@ const ConnectionsPage: FunctionComponent = () => { type: 'dateTime', valueGetter: ({ value }) => value && new Date(value), flex: 0.3, + editable: false, + filterable: true, //TODO valueFormatter }, { - ...commonColDef, field: 'allowed', headerName: intl.formatMessage({ id: 'connections.table.allowed', @@ -116,6 +126,8 @@ const ConnectionsPage: FunctionComponent = () => { type: 'boolean', sortable: false, flex: 0.15, + editable: false, + filterable: true, renderCell: (params) => , headerAlign: 'left', align: 'left', @@ -131,64 +143,10 @@ const ConnectionsPage: FunctionComponent = () => { - - params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd' - }*/ /> diff --git a/src/components/connections/index.ts b/src/pages/connections/index.ts similarity index 100% rename from src/components/connections/index.ts rename to src/pages/connections/index.ts diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..5e3310d --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,2 @@ +export * from './connections'; +export * from './users'; diff --git a/src/components/DataGrid/CustomToolbar.tsx b/src/pages/users/CustomToolbar.tsx similarity index 79% rename from src/components/DataGrid/CustomToolbar.tsx rename to src/pages/users/CustomToolbar.tsx index af67bf5..adc371c 100644 --- a/src/components/DataGrid/CustomToolbar.tsx +++ b/src/pages/users/CustomToolbar.tsx @@ -7,14 +7,14 @@ import { GridToolbarExport, GridToolbarFilterButton, GridToolbarProps, - GridToolbarQuickFilter, useGridApiContext, - useGridRootProps + GridToolbarQuickFilter, + useGridApiContext, + useGridRootProps, } from '@mui/x-data-grid'; -export const CustomToolbar: FunctionComponent> = forwardRef< - HTMLDivElement, - GridToolbarProps ->((props, ref) => { +export const CustomToolbar: FunctionComponent< + PropsWithChildren +> = forwardRef((props, ref) => { const rootProps = useGridRootProps(); const apiRef = useGridApiContext(); @@ -31,7 +31,7 @@ export const CustomToolbar: FunctionComponent - + {/**/} + {/*TODO refresh-data*/} {props.showQuickFilter && ( )} - {props.children} //TODO refresh-data + {props.children} ); } diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx new file mode 100644 index 0000000..4d26cce --- /dev/null +++ b/src/pages/users/UsersPage.tsx @@ -0,0 +1,98 @@ +import { FunctionComponent, useMemo } from 'react'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { GridColDef } from '@mui/x-data-grid'; +import { Grid, Typography } from '@mui/material'; +import CommonDataGrid from '../../components/XDataGrid/CommonDataGrid'; +import CustomToolbar from './CustomToolbar'; + +type UserInfosRow = { + sub: string; + isAdmin: boolean; +}; + +function getRowId(row: UserInfosRow) { + return row.sub; +} + +const dataExample: UserInfosRow[] = [ + { + sub: 'test', + isAdmin: true, + }, + { + sub: 'test2', + isAdmin: true, + }, + { + sub: 'test3', + isAdmin: false, + }, +]; +const UsersPage: FunctionComponent = () => { + const intl = useIntl(); + const columns: GridColDef[] = useMemo( + () => [ + { + field: 'sub', + headerName: intl.formatMessage({ id: 'table.id' }), + description: intl.formatMessage({ + id: 'table.id.description', + }), + type: 'string', + flex: 0.25, + editable: false, + filterable: true, + hideable: false, + }, + { + field: 'isAdmin', + headerName: intl.formatMessage({ + id: 'users.table.isAdmin', + }), + description: intl.formatMessage({ + id: 'users.table.isAdmin.description', + }), + type: 'boolean', + sortable: false, + flex: 0.15, + editable: false, + filterable: true, + }, + ], + [intl] + ); + return ( + + + + + + + + + + + ); +}; +export default UsersPage; diff --git a/src/components/users/index.ts b/src/pages/users/index.ts similarity index 100% rename from src/components/users/index.ts rename to src/pages/users/index.ts diff --git a/src/routes/router.tsx b/src/routes/router.tsx index ab5ffd2..df90afa 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -33,8 +33,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { AppsMetadataSrv, UserAdminSrv } from '../services'; import App from '../components/app'; -import { Users } from '../components/users'; -import { Connections } from '../components/connections'; +import { Users, Connections } from '../pages'; import ErrorPage from './ErrorPage'; import { updateUserManager_ } from '../redux/actions'; import HomePage from './HomePage'; diff --git a/src/translations/en.json b/src/translations/en.json index 8c0774c..bcfb6d3 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -22,5 +22,9 @@ "connections.table.allowed.description": "Is the user as authorized last time?", "connections.table.allowed.yes": "Yes", "connections.table.allowed.no": "No", - "connections.table.allowed.unknown": "Unknown" + "connections.table.allowed.unknown": "Unknown", + + "users.title": "List of GridSuite users", + "users.table.isAdmin": "Admin", + "users.table.isAdmin.description": "The users is an administrator of GridSuite" } diff --git a/src/translations/fr.json b/src/translations/fr.json index d086ae2..6e11f9e 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -10,10 +10,10 @@ "appBar.tabs.connections": "Connexions", "table.noRows": "No data", + "table.id": "ID", + "table.id.description": "Identifiant de l'utilisateur", "connections.title": "Historique des connexions", - "connections.table.id": "ID", - "connections.table.id.description": "Identifiant de l'utilisateur", "connections.table.firstConnection": "1ᵉʳᵉ connexion", "connections.table.firstConnection.description": "La première tentative de connexion de l'utilisateur", "connections.table.lastConnection": "Dernière conn.", @@ -22,5 +22,9 @@ "connections.table.allowed.description": "Si l'utilisateur fût autorisé lors de sa dernière tentative de connexion", "connections.table.allowed.yes": "Oui", "connections.table.allowed.no": "Échec", - "connections.table.allowed.unknown": "\u00A0" + "connections.table.allowed.unknown": "\u00A0", + + "users.title": "Liste des utilisateurs", + "users.table.isAdmin": "Admin", + "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite" } From 0e844faf24dd19c317590ae875c3f368a5ecae20 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 17:02:40 +0100 Subject: [PATCH 11/54] Connect tables to API --- src/components/XDataGrid/CommonDataGrid.tsx | 38 ++++++++- src/pages/connections/ConnectionsPage.tsx | 39 ++-------- src/pages/users/UsersPage.tsx | 27 ++----- src/routes/ErrorPage.tsx | 65 ++++++++++++---- src/routes/router.tsx | 5 +- src/services/user-admin.ts | 85 ++++++++++++++++----- src/translations/en.json | 5 +- src/translations/fr.json | 1 + src/utils/rest-api.ts | 26 ++++++- 9 files changed, 197 insertions(+), 94 deletions(-) diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx index 7094e1d..d1e64af 100644 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -2,17 +2,49 @@ import { DataGrid, DataGridProps, GridToolbar } from '@mui/x-data-grid'; import { LinearProgress } from '@mui/material'; import CustomNoRowsOverlay from './CustomNoRowsOverlay'; import { GridValidRowModel } from '@mui/x-data-grid/models/gridRows'; -import { ReactElement } from 'react'; +import { ReactElement, useEffect, useMemo, useState } from 'react'; import { deepmerge } from '@mui/utils'; +import { useSnackMessage } from '@gridsuite/commons-ui'; export default function CommonDataGrid( - props: DataGridProps + props: Omit, 'rows' | 'loading'> & { + //rows: Partial['rows']>; + loader: () => Promise; + } ): ReactElement { + const { snackError } = useSnackMessage(); + const [data, setData] = useState(null); + const [loading, setLoading] = useState(false); + + const { loader } = props; //for eslint who don't understand with usememo + const loadData = useMemo( + () => + function loadData() { + setLoading(true); + loader() + .then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //TODO what to do with "old" data? + }) + .finally(() => setLoading(false)); + }, + [loader, snackError] + ); + + useEffect(() => { + //Load data one time at initial render + loadData(); + }, [loadData]); + return ( ; }; -const dataExample: ConnectionRow[] = [ - { - sub: 'test', - firstConnection: `${new Date()}`, - lastConnection: `${new Date()}`, - allowed: true, - }, - { - sub: 'test2', - firstConnection: `${new Date()}`, - lastConnection: `${new Date()}`, - allowed: true, - }, - { - sub: 'test3', - firstConnection: `${new Date()}`, - lastConnection: `${new Date()}`, - allowed: false, - }, -]; export const ConnectionsPage: FunctionComponent = () => { + //const [dataConnections, setDataConnections] = useState(null); const intl = useIntl(); - const columns: GridColDef[] = useMemo( + const columns: GridColDef[] = useMemo( () => [ { field: 'sub', @@ -98,7 +73,7 @@ export const ConnectionsPage: FunctionComponent = () => { flex: 0.3, editable: false, filterable: true, - //TODO valueFormatter + //TODO valueFormatter "2023-09-05T21:42:18.100151Z" }, { field: 'lastConnection', @@ -116,7 +91,7 @@ export const ConnectionsPage: FunctionComponent = () => { //TODO valueFormatter }, { - field: 'allowed', + field: 'isAccepted', headerName: intl.formatMessage({ id: 'connections.table.allowed', }), @@ -144,7 +119,7 @@ export const ConnectionsPage: FunctionComponent = () => { diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 4d26cce..2efb0e9 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -4,33 +4,16 @@ import { GridColDef } from '@mui/x-data-grid'; import { Grid, Typography } from '@mui/material'; import CommonDataGrid from '../../components/XDataGrid/CommonDataGrid'; import CustomToolbar from './CustomToolbar'; +import { UserAdminSrv, UserInfos } from '../../services'; -type UserInfosRow = { - sub: string; - isAdmin: boolean; -}; - -function getRowId(row: UserInfosRow) { +function getRowId(row: UserInfos) { return row.sub; } -const dataExample: UserInfosRow[] = [ - { - sub: 'test', - isAdmin: true, - }, - { - sub: 'test2', - isAdmin: true, - }, - { - sub: 'test3', - isAdmin: false, - }, -]; const UsersPage: FunctionComponent = () => { + //const data = useLoaderData() as DeferredData; const intl = useIntl(); - const columns: GridColDef[] = useMemo( + const columns: GridColDef[] = useMemo( () => [ { field: 'sub', @@ -70,7 +53,7 @@ const UsersPage: FunctionComponent = () => { ; + const error = useRouteError() as any; console.error(error); - return ( - - Oops! - - Sorry, an unexpected error has occurred. - -

- {error.statusText || error.message} -

- + return useMemo( + () => ( + + Oops! + + Sorry, an unexpected error has occurred. + + {isRouteErrorResponse(error) && ( + <> + + {error.status} + + + {error.statusText} + + + )} +

+ + {error.message || + error?.data?.message || + error.statusText} + +

+ {isRouteErrorResponse(error) && error.error && ( + 
+                        
+                            {(function () {
+                                try {
+                                    return JSON.stringify(
+                                        error.error,
+                                        undefined,
+                                        2
+                                    );
+                                } catch (e) {
+                                    return null;
+                                }
+                            })() ?? `${error.error}`}
+                        
+
+ )} + + ), + [error] ); } diff --git a/src/routes/router.tsx b/src/routes/router.tsx index df90afa..1fdf8aa 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -33,7 +33,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { AppsMetadataSrv, UserAdminSrv } from '../services'; import App from '../components/app'; -import { Users, Connections } from '../pages'; +import { Connections, Users } from '../pages'; import ErrorPage from './ErrorPage'; import { updateUserManager_ } from '../redux/actions'; import HomePage from './HomePage'; @@ -47,6 +47,7 @@ export function appRoutes(): RouteObject[] { return [ { path: '/', + errorElement: , children: [ { index: true, @@ -58,6 +59,7 @@ export function appRoutes(): RouteObject[] { handle: { appBar_tab: MainPaths.users, }, + //loader: () => defer({users: new Promise(r => setTimeout(r, 4000)).then(() => UserAdminSrv.fetchUsers())}), }, { path: `/${MainPaths.connections}`, @@ -65,6 +67,7 @@ export function appRoutes(): RouteObject[] { handle: { appBar_tab: MainPaths.connections, }, + //loader: () => UserAdminSrv.fetchUsersConnections, }, ], }, diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index 2067823..3304564 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -1,24 +1,34 @@ -import { backendFetch, ReqResponse } from '../utils/rest-api'; +import { + backendFetch, + backendFetchJson, + extractUserSub, + getToken, + getUser, + ReqResponse, + User, +} from '../utils/rest-api'; -const USER_ADMIN_URL = `${process.env.REACT_APP_API_GATEWAY}/user-admin`; +const USER_ADMIN_URL = `${process.env.REACT_APP_API_GATEWAY}/user-admin/v1`; -export function fetchValidateUser(user: Record): Promise { - const sub = user?.profile?.sub; - if (!sub) { - return Promise.reject( - new Error( - `Fetching access for missing user.profile.sub : ${JSON.stringify( - user - )}` - ) - ); - } - - console.info(`Fetching access for user...`); - const CheckAccessUrl = `${USER_ADMIN_URL}/v1/users/${sub}`; - console.debug(CheckAccessUrl); +export function getUserSub(): Promise { + return extractUserSub(getUser()); +} - return backendFetch(CheckAccessUrl, { method: 'head' }, user?.id_token) +/* + * fetchValidateUser is call from commons-ui AuthServices to validate user infos before setting state.user! + */ +export function fetchValidateUser(user: User): Promise { + return extractUserSub(user) + .then((sub) => { + console.info(`Fetching access for user...`); + const CheckAccessUrl = `${USER_ADMIN_URL}/users/${sub}`; + console.debug(CheckAccessUrl); + return backendFetch( + CheckAccessUrl, + { method: 'head' }, + getToken(user) + ); + }) .then((response: ReqResponse) => { //if the response is ok, the responseCode will be either 200 or 204 otherwise it's an HTTP error and it will be caught return response.status === 200; @@ -31,3 +41,42 @@ export function fetchValidateUser(user: Record): Promise { } }); } + +export type UserInfos = { + sub: string; + isAdmin: boolean; +}; + +export function fetchUsers(): Promise { + console.info(`Fetching access for user...`); + return backendFetchJson(`${USER_ADMIN_URL}/users`, { + headers: { + Accept: 'application/json', + //'Content-Type': 'application/json; utf-8', + }, + cache: 'default', + }).catch((reason) => { + console.error(`Error while fetching the servers data : ${reason}`); + throw reason; + }); +} + +export type UserConnection = { + sub: string; + firstConnection: string; //$date-time + lastConnection: string; //$date-time + isAccepted: boolean; +}; + +export function fetchUsersConnections(): Promise { + console.info(`Fetching access for user...`); + return backendFetchJson(`${USER_ADMIN_URL}/connections`, { + headers: { + Accept: 'application/json', + }, + cache: 'default', + }).catch((reason) => { + console.error(`Error while fetching the servers data : ${reason}`); + throw reason; + }); +} diff --git a/src/translations/en.json b/src/translations/en.json index bcfb6d3..f40b989 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -10,9 +10,10 @@ "appBar.tabs.connections": "Connections", "table.noRows": "No data", + "table.id": "ID", + "table.id.description": "Identifiant de l'utilisateur", + "table.error.retrieve": "Error while retrieving data", - "connections.title": "History of connections", - "connections.table.id": "ID", "connections.table.id.description": "User login", "connections.table.firstConnection": "First see", "connections.table.firstConnection.description": "The first time the user try to connect", diff --git a/src/translations/fr.json b/src/translations/fr.json index 6e11f9e..c507304 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -12,6 +12,7 @@ "table.noRows": "No data", "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", + "table.error.retrieve": "Error while retrieving data", "connections.title": "Historique des connexions", "connections.table.firstConnection": "1ᵉʳᵉ connexion", diff --git a/src/utils/rest-api.ts b/src/utils/rest-api.ts index b8acb73..9be7cc0 100644 --- a/src/utils/rest-api.ts +++ b/src/utils/rest-api.ts @@ -18,6 +18,7 @@ export type Url = Exclude[0], Request>; //string | URL; export type InitRequest = Partial[1]>; //Partial; export type Token = string; export type ReqResponse = Awaited>; +export type User = AppState['user']; const PREFIX_CONFIG_NOTIFICATION_WS = `${process.env.REACT_APP_WS_GATEWAY}/config-notification`; @@ -38,9 +39,28 @@ export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket { return reconnectingWebSocket; } -function getToken(): Token { +export function getToken(user?: User): Token { + return (user ?? getUser())?.id_token; +} + +export function getUser(): User { const state: AppState = store.getState(); - return state.user?.id_token; + return state.user; //?? state.userManager?.instance?.getUser().then(); +} + +export function extractUserSub(user: User): Promise { + const sub = user?.profile?.sub; + if (!sub) { + return Promise.reject( + new Error( + `Fetching access for missing user.profile.sub : ${JSON.stringify( + user + )}` + ) + ); + } else { + return Promise.resolve(sub); + } } function parseError(text: string): any { @@ -79,7 +99,7 @@ function prepareRequest(init?: InitRequest, token?: Token): RequestInit { } const initCopy: RequestInit = { ...init }; initCopy.headers = new Headers(initCopy.headers || {}); - const tokenCopy = token || getToken(); + const tokenCopy = token ?? getToken(); initCopy.headers.append('Authorization', `Bearer ${tokenCopy}`); return initCopy; } From 63b745ed858bb54de7c50faa15c99046a837274a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 19:06:43 +0100 Subject: [PATCH 12/54] Move App components to package --- src/components/{ => App}/app-top-bar.tsx | 20 ++++++++++++-------- src/components/{ => App}/app-wrapper.tsx | 18 +++++++++--------- src/components/{ => App}/app.test.tsx | 4 ++-- src/components/{ => App}/app.tsx | 12 ++++++------ src/components/App/index.ts | 4 ++++ src/index.tsx | 2 +- src/routes/router.tsx | 8 ++++---- 7 files changed, 38 insertions(+), 30 deletions(-) rename src/components/{ => App}/app-top-bar.tsx (89%) rename src/components/{ => App}/app-wrapper.tsx (90%) rename src/components/{ => App}/app.test.tsx (96%) rename src/components/{ => App}/app.tsx (94%) create mode 100644 src/components/App/index.ts diff --git a/src/components/app-top-bar.tsx b/src/components/App/app-top-bar.tsx similarity index 89% rename from src/components/app-top-bar.tsx rename to src/components/App/app-top-bar.tsx index 7373aa1..dadc927 100644 --- a/src/components/app-top-bar.tsx +++ b/src/components/App/app-top-bar.tsx @@ -14,19 +14,23 @@ import { 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 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, StudySrv } from '../../services'; import { NavLink, useMatches, useNavigate } from 'react-router-dom'; -import { ReactComponent as GridAdminLogoLight } from '../images/GridAdmin_logo_light.svg'; -import { ReactComponent as GridAdminLogoDark } from '../images/GridAdmin_logo_dark.svg'; -import AppPackage from '../../package.json'; -import { AppState } from '../redux/reducer'; +import { ReactComponent as GridAdminLogoLight } from '../../images/GridAdmin_logo_light.svg'; +import { ReactComponent as GridAdminLogoDark } from '../../images/GridAdmin_logo_dark.svg'; +import AppPackage from '../../../package.json'; +import { AppState } from '../../redux/reducer'; import { FormattedMessage } from 'react-intl'; import { Tab, TabProps, Tabs } from '@mui/material'; import { History, PeopleAlt } from '@mui/icons-material'; -import { MainPaths } from '../routes'; +import { MainPaths } from '../../routes'; const TabNavLink: FunctionComponent = ( props, diff --git a/src/components/app-wrapper.tsx b/src/components/App/app-wrapper.tsx similarity index 90% rename from src/components/app-wrapper.tsx rename to src/components/App/app-wrapper.tsx index 63cdce3..8226747 100644 --- a/src/components/app-wrapper.tsx +++ b/src/components/App/app-wrapper.tsx @@ -36,15 +36,15 @@ import { } from '@gridsuite/commons-ui'; import { IntlProvider } from 'react-intl'; import { Provider, useSelector } from 'react-redux'; -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 { PARAM_THEME } from '../utils/config-params'; +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 { PARAM_THEME } from '../../utils/config-params'; import { IntlConfig } from 'react-intl/src/types'; -import { AppState } from '../redux/reducer'; -import { AppWithAuthRouter } from '../routes'; +import { AppState } from '../../redux/reducer'; +import { AppWithAuthRouter } from '../../routes'; const lightTheme: ThemeOptions = { palette: { @@ -166,7 +166,7 @@ const AppWrapperWithRedux: FunctionComponent = () => ( /** * Layer injecting Redux store in context */ -const AppWrapper: FunctionComponent = () => ( +export const AppWrapper: FunctionComponent = () => ( diff --git a/src/components/app.test.tsx b/src/components/App/app.test.tsx similarity index 96% rename from src/components/app.test.tsx rename to src/components/App/app.test.tsx index 227d7d1..f1d7698 100644 --- a/src/components/app.test.tsx +++ b/src/components/App/app.test.tsx @@ -7,7 +7,7 @@ import { IntlProvider } from 'react-intl'; import { Provider } from 'react-redux'; import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom'; import App from './app'; -import { store } from '../redux/store'; +import { store } from '../../redux/store'; import { createTheme, StyledEngineProvider, @@ -16,7 +16,7 @@ import { import { SnackbarProvider } from '@gridsuite/commons-ui'; import { UserManagerMock } from '@gridsuite/commons-ui/es/utils/UserManagerMock'; import { CssBaseline } from '@mui/material'; -import { appRoutes } from '../routes'; +import { appRoutes } from '../../routes'; let container: Element | any = null; diff --git a/src/components/app.tsx b/src/components/App/app.tsx similarity index 94% rename from src/components/app.tsx rename to src/components/App/app.tsx index 37c6b6e..3a9bc5d 100644 --- a/src/components/app.tsx +++ b/src/components/App/app.tsx @@ -17,17 +17,17 @@ import { selectComputedLanguage, selectLanguage, selectTheme, -} from '../redux/actions'; -import { AppState } from '../redux/reducer'; -import { ConfigParameter, ConfigParameters, ConfigSrv } from '../services'; -import { connectNotificationsWsUpdateConfig } from '../utils/rest-api'; +} from '../../redux/actions'; +import { AppState } from '../../redux/reducer'; +import { ConfigParameter, ConfigParameters, ConfigSrv } from '../../services'; +import { connectNotificationsWsUpdateConfig } from '../../utils/rest-api'; import { APP_NAME, COMMON_APP_NAME, PARAM_LANGUAGE, PARAM_THEME, -} from '../utils/config-params'; -import { getComputedLanguage } from '../utils/language'; +} from '../../utils/config-params'; +import { getComputedLanguage } from '../../utils/language'; import AppTopBar from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; import { Grid } from '@mui/material'; diff --git a/src/components/App/index.ts b/src/components/App/index.ts new file mode 100644 index 0000000..d7ddb96 --- /dev/null +++ b/src/components/App/index.ts @@ -0,0 +1,4 @@ +import AppComponent from './app'; +export type App = typeof AppComponent; + +export { AppWrapper } from './app-wrapper'; diff --git a/src/index.tsx b/src/index.tsx index 67733ef..c75356e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,7 +10,7 @@ import 'typeface-roboto'; import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; -import AppWrapper from './components/app-wrapper'; +import { AppWrapper } from './components/App'; const container = document.getElementById('root'); if (container) { diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 1fdf8aa..c2551cd 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -32,7 +32,7 @@ import { UserManager } from 'oidc-client'; import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { AppsMetadataSrv, UserAdminSrv } from '../services'; -import App from '../components/app'; +import { App } from '../components/App'; import { Connections, Users } from '../pages'; import ErrorPage from './ErrorPage'; import { updateUserManager_ } from '../redux/actions'; @@ -121,7 +121,7 @@ const AuthRouter: FunctionComponent<{ *
Sub-component because `useMatch` must be under router context. */ const AppAuthStateWithRouterLayer: FunctionComponent< - PropsWithChildren<{ layout: typeof App }> + PropsWithChildren<{ layout: App }> > = (props, context) => { const AppRouterLayout = props.layout; const dispatch = useDispatch(); @@ -171,7 +171,7 @@ const AppAuthStateWithRouterLayer: FunctionComponent< */ export const AppWithAuthRouter: FunctionComponent<{ basename: string; - layout: typeof App; + layout: App; }> = (props, context) => { const user = useSelector((state: AppState) => state.user); const router = useMemo( @@ -207,7 +207,7 @@ export const AppWithAuthRouter: FunctionComponent<{ return ; }; -const LegacyAuthRouter: FunctionComponent<{ layout: typeof App }> = (props) => { +const LegacyAuthRouter: FunctionComponent<{ layout: App }> = (props) => { const userManager = useSelector((state: AppState) => state.userManager); return ( From 1a72eda5b8a280954c6978e2e34184c4e6ea8cab Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 21:49:15 +0100 Subject: [PATCH 13/54] fix --- src/services/user-admin.ts | 4 ++-- src/translations/fr.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index 3304564..2d08a45 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -48,7 +48,7 @@ export type UserInfos = { }; export function fetchUsers(): Promise { - console.info(`Fetching access for user...`); + console.info(`Fetching list of users...`); return backendFetchJson(`${USER_ADMIN_URL}/users`, { headers: { Accept: 'application/json', @@ -69,7 +69,7 @@ export type UserConnection = { }; export function fetchUsersConnections(): Promise { - console.info(`Fetching access for user...`); + console.info(`Fetching users connections...`); return backendFetchJson(`${USER_ADMIN_URL}/connections`, { headers: { Accept: 'application/json', diff --git a/src/translations/fr.json b/src/translations/fr.json index c507304..2749c36 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -12,7 +12,7 @@ "table.noRows": "No data", "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", - "table.error.retrieve": "Error while retrieving data", + "table.error.retrieve": "Erreur pendant la récupération des données", "connections.title": "Historique des connexions", "connections.table.firstConnection": "1ᵉʳᵉ connexion", From f78be06f6d73012d46d930f3209c195bc52ec946 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 8 Feb 2024 21:49:50 +0100 Subject: [PATCH 14/54] Add support for custom toolbar in tables --- src/components/RotateIcon.tsx | 33 ++++++ src/components/XDataGrid/CommonDataGrid.tsx | 8 +- src/components/XDataGrid/CustomToolbar.tsx | 65 +++++++++++ .../XDataGrid/GridToolbarRefresh.tsx | 107 ++++++++++++++++++ src/pages/users/CustomToolbar.tsx | 52 --------- src/pages/users/UsersPage.tsx | 6 +- src/routes/router.tsx | 2 - src/translations/en.json | 3 + src/translations/fr.json | 3 + 9 files changed, 218 insertions(+), 61 deletions(-) create mode 100644 src/components/RotateIcon.tsx create mode 100644 src/components/XDataGrid/CustomToolbar.tsx create mode 100644 src/components/XDataGrid/GridToolbarRefresh.tsx delete mode 100644 src/pages/users/CustomToolbar.tsx diff --git a/src/components/RotateIcon.tsx b/src/components/RotateIcon.tsx new file mode 100644 index 0000000..45044f1 --- /dev/null +++ b/src/components/RotateIcon.tsx @@ -0,0 +1,33 @@ +import { FunctionComponent } from 'react'; +import { SvgIconComponent } from '@mui/icons-material'; +import { SvgIconProps } from '@mui/material'; +import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon'; +import { CSSObject } from '@emotion/react'; + +type ExtendIconProps = SvgIconProps< + SvgIconTypeMap['defaultComponent'], + { component: I } +>; +interface ExtendIcon< + I extends SvgIconComponent = any, + P extends ExtendIconProps = any +> extends FunctionComponent

{ + (props: P, context?: any): I; +} + +const style: CSSObject = { + animation: 'spin 2s linear infinite', + '@keyframes spin': { + '0%': { + transform: 'rotate(0deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, + }, +}; + +export const RotateIcon: ExtendIcon = (props, context) => ( + +); +export default RotateIcon; diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx index d1e64af..020230b 100644 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -1,10 +1,11 @@ -import { DataGrid, DataGridProps, GridToolbar } from '@mui/x-data-grid'; +import { DataGrid, DataGridProps } from '@mui/x-data-grid'; import { LinearProgress } from '@mui/material'; import CustomNoRowsOverlay from './CustomNoRowsOverlay'; import { GridValidRowModel } from '@mui/x-data-grid/models/gridRows'; import { ReactElement, useEffect, useMemo, useState } from 'react'; import { deepmerge } from '@mui/utils'; import { useSnackMessage } from '@gridsuite/commons-ui'; +import CustomToolbar from './CustomToolbar'; export default function CommonDataGrid( props: Omit, 'rows' | 'loading'> & { @@ -46,7 +47,10 @@ export default function CommonDataGrid( loading={loading} density="compact" slots={{ - toolbar: GridToolbar, //TODO (des)active as app parameter + //toolbar: GridToolbar, + toolbar: (props, context) => ( + + ), loadingOverlay: LinearProgress, noRowsOverlay: CustomNoRowsOverlay, //TODO noResultsOverlay: ... diff --git a/src/components/XDataGrid/CustomToolbar.tsx b/src/components/XDataGrid/CustomToolbar.tsx new file mode 100644 index 0000000..3b50592 --- /dev/null +++ b/src/components/XDataGrid/CustomToolbar.tsx @@ -0,0 +1,65 @@ +import { forwardRef, FunctionComponent, PropsWithChildren } from 'react'; +import { Box, Divider } from '@mui/material'; +import { + GridToolbarContainer, + GridToolbarDensitySelector, + GridToolbarExport, + GridToolbarFilterButton, + GridToolbarProps, + GridToolbarQuickFilter, + useGridRootProps, +} from '@mui/x-data-grid'; +import GridToolbarRefresh, { + GridToolbarRefreshProps, +} from './GridToolbarRefresh'; + +export type CustomGridToolbarProps = GridToolbarProps & { + refresh?: GridToolbarRefreshProps['refresh']; +}; + +export const CustomToolbar: FunctionComponent< + PropsWithChildren +> = forwardRef((props, ref) => { + const rootProps = useGridRootProps(); + //const apiRef = useGridApiContext(); + + //const handleExport = (options: GridCsvExportOptions) => apiRef.current.exportDataAsCsv(options); + + if ( + rootProps.disableColumnFilter && + rootProps.disableColumnSelector && + rootProps.disableDensitySelector && + !props.showQuickFilter + ) { + return null; + } else { + return ( + + {/**/} + + + + {(props.showQuickFilter || props.refresh || props.children) && ( + <> + + {props.refresh && ( + + )} + + {props.showQuickFilter && ( + + )} + {props.children} + + )} + + ); + } +}); +export default CustomToolbar; diff --git a/src/components/XDataGrid/GridToolbarRefresh.tsx b/src/components/XDataGrid/GridToolbarRefresh.tsx new file mode 100644 index 0000000..3bd805c --- /dev/null +++ b/src/components/XDataGrid/GridToolbarRefresh.tsx @@ -0,0 +1,107 @@ +import { ButtonProps, TooltipProps } from '@mui/material'; +import { + unstable_useForkRef as useForkRef, + unstable_useId as useId, +} from '@mui/utils'; +import { useGridRootProps } from '@mui/x-data-grid'; +import { forwardRef, useMemo, useRef, useState } from 'react'; +import { Refresh } from '@mui/icons-material'; +import { useIntl } from 'react-intl'; +import RotateIcon from '../RotateIcon'; + +function IconRotate() { + return ; +} + +function IconStatic() { + return ; +} + +function isPromise(obj: any): boolean { + return ( + typeof obj?.then === 'function' || //only standard/common thing in implementations + obj instanceof Promise || //native promise + (obj && Object.prototype.toString.call(obj) === '[object Promise]') + ); //ES6 Promise +} + +function onClickRefresh( + fn: GridToolbarRefreshProps['refresh'], + setState: (n: boolean) => void +) { + if (fn !== undefined && fn !== null) { + if (isPromise(fn)) { + setState(true); + Promise.resolve() + .then(() => (fn as () => Promise)()) + .finally(() => setState(false)); + } /*if (typeof fn === 'function')*/ else { + setState(true); + fn(); + setState(false); + } + } +} + +export type GridToolbarRefreshProps = { + refresh?: () => void | Promise; // ButtonProps['onClick']; //(event: MouseEvent) => void + + /** + * The props used for each slot inside. + * @default {} + */ + slotProps?: { + button?: Partial; + tooltip?: Partial; + }; + [key: string]: any; +}; + +export const GridToolbarExport = forwardRef< + HTMLButtonElement, + GridToolbarRefreshProps +>(function GridToolbarRefresh(props, ref) { + const { slotProps = {} } = props; + const buttonProps = slotProps.button ?? {}; + const tooltipProps = slotProps.tooltip ?? {}; + + //const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const intl = useIntl(); + + const buttonRef = useRef(null); + const handleRef = useForkRef(ref, buttonRef); + const refreshButtonId = useId(); + const [refreshing, setRefreshing] = useState(false); + const onClick = useMemo( + () => () => onClickRefresh(props.refresh, setRefreshing), + [props.refresh] + ); + + return ( + + : } + aria-label={intl.formatMessage({ + id: 'table.toolbar.refresh.label', + })} + id={refreshButtonId} + {...buttonProps} + onClick={onClick} + {...rootProps.slotProps?.baseButton} + > + {intl.formatMessage({ id: 'table.toolbar.refresh' })} + + + ); +}); +export default GridToolbarExport; diff --git a/src/pages/users/CustomToolbar.tsx b/src/pages/users/CustomToolbar.tsx deleted file mode 100644 index adc371c..0000000 --- a/src/pages/users/CustomToolbar.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { forwardRef, FunctionComponent, PropsWithChildren } from 'react'; -import { Box } from '@mui/material'; -import { - GridToolbarColumnsButton, - GridToolbarContainer, - GridToolbarDensitySelector, - GridToolbarExport, - GridToolbarFilterButton, - GridToolbarProps, - GridToolbarQuickFilter, - useGridApiContext, - useGridRootProps, -} from '@mui/x-data-grid'; - -export const CustomToolbar: FunctionComponent< - PropsWithChildren -> = forwardRef((props, ref) => { - const rootProps = useGridRootProps(); - const apiRef = useGridApiContext(); - - /*const handleExport = (options: GridCsvExportOptions) => - apiRef.current.exportDataAsCsv(options);*/ - - if ( - rootProps.disableColumnFilter && - rootProps.disableColumnSelector && - rootProps.disableDensitySelector && - !props.showQuickFilter - ) { - return null; - } else { - return ( - - {/**/} - - - - {/*TODO refresh-data*/} - - {props.showQuickFilter && ( - - )} - {props.children} - - ); - } -}); -export default CustomToolbar; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 2efb0e9..7963c50 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from 'react-intl'; import { GridColDef } from '@mui/x-data-grid'; import { Grid, Typography } from '@mui/material'; import CommonDataGrid from '../../components/XDataGrid/CommonDataGrid'; -import CustomToolbar from './CustomToolbar'; import { UserAdminSrv, UserInfos } from '../../services'; function getRowId(row: UserInfos) { @@ -56,15 +55,12 @@ const UsersPage: FunctionComponent = () => { loader={UserAdminSrv.fetchUsers} columns={columns} getRowId={getRowId} - slots={{ - toolbar: CustomToolbar, - }} + ignoreDiacritics slotProps={{ toolbar: { showQuickFilter: true, }, }} - ignoreDiacritics initialState={{ filter: { filterModel: { diff --git a/src/routes/router.tsx b/src/routes/router.tsx index c2551cd..4193228 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -59,7 +59,6 @@ export function appRoutes(): RouteObject[] { handle: { appBar_tab: MainPaths.users, }, - //loader: () => defer({users: new Promise(r => setTimeout(r, 4000)).then(() => UserAdminSrv.fetchUsers())}), }, { path: `/${MainPaths.connections}`, @@ -67,7 +66,6 @@ export function appRoutes(): RouteObject[] { handle: { appBar_tab: MainPaths.connections, }, - //loader: () => UserAdminSrv.fetchUsersConnections, }, ], }, diff --git a/src/translations/en.json b/src/translations/en.json index f40b989..3cb9601 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -13,6 +13,9 @@ "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Error while retrieving data", + "table.toolbar.refresh": "Refresh", + "table.toolbar.refresh.label": "Refresh data", + "table.toolbar.refresh.tooltip": "Refresh table data", "connections.table.id.description": "User login", "connections.table.firstConnection": "First see", diff --git a/src/translations/fr.json b/src/translations/fr.json index 2749c36..6097640 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -13,6 +13,9 @@ "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Erreur pendant la récupération des données", + "table.toolbar.refresh": "Rafraîchir", + "table.toolbar.refresh.label": "Refresh data", + "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", "connections.title": "Historique des connexions", "connections.table.firstConnection": "1ᵉʳᵉ connexion", From b598baceeaee4bff7dbef424b9b88a8d83924478 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 9 Feb 2024 00:14:03 +0100 Subject: [PATCH 15/54] Add suppression of users --- src/components/XDataGrid/CommonDataGrid.tsx | 78 +++++++++++++++------ src/pages/connections/ConnectionsPage.tsx | 8 ++- src/pages/users/UsersPage.tsx | 45 ++++++++++-- src/services/user-admin.ts | 10 +++ src/translations/en.json | 1 + src/translations/fr.json | 1 + 6 files changed, 114 insertions(+), 29 deletions(-) diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx index 020230b..3b33cf1 100644 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -2,37 +2,60 @@ import { DataGrid, DataGridProps } from '@mui/x-data-grid'; import { LinearProgress } from '@mui/material'; import CustomNoRowsOverlay from './CustomNoRowsOverlay'; import { GridValidRowModel } from '@mui/x-data-grid/models/gridRows'; -import { ReactElement, useEffect, useMemo, useState } from 'react'; +import { + FunctionComponent, + ReactElement, + Ref, + useCallback, + useEffect, + useImperativeHandle, + useRef, + useState, +} from 'react'; import { deepmerge } from '@mui/utils'; import { useSnackMessage } from '@gridsuite/commons-ui'; -import CustomToolbar from './CustomToolbar'; +import CustomToolbar, { CustomGridToolbarProps } from './CustomToolbar'; + +export type CommonDataGridExposed = { + actionThenRefresh: (action: () => Promise) => void; +}; +interface CommonDataGridProps + extends Omit, 'rows' | 'loading'> { + //rows: Partial['rows']>; + loader: () => Promise; + exposesRef: ReturnType>; +} export default function CommonDataGrid( - props: Omit, 'rows' | 'loading'> & { - //rows: Partial['rows']>; - loader: () => Promise; - } + props: Readonly> ): ReactElement { const { snackError } = useSnackMessage(); const [data, setData] = useState(null); const [loading, setLoading] = useState(false); + const actionWithRefresh = useCallback(function action( + action: () => Promise + ) { + //TODO how to block simultaneous calls? + setLoading(true); + action().finally(() => setLoading(false)); + }, + []); + const { loader } = props; //for eslint who don't understand with usememo - const loadData = useMemo( - () => - function loadData() { - setLoading(true); - loader() - .then(setData, (error) => { - snackError({ - messageTxt: error.message, - headerId: 'table.error.retrieve', - }); - //TODO what to do with "old" data? - }) - .finally(() => setLoading(false)); - }, - [loader, snackError] + const loadData = useCallback( + function loadData() { + actionWithRefresh(() => + loader().then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //TODO what to do with "old" data? + }) + ); + }, + [actionWithRefresh, loader, snackError] ); useEffect(() => { @@ -40,6 +63,14 @@ export default function CommonDataGrid( loadData(); }, [loadData]); + //expose to parent + useImperativeHandle( + props.exposesRef as Ref, + () => ({ + actionThenRefresh: actionWithRefresh, + }), + [actionWithRefresh] + ); return ( ( density="compact" slots={{ //toolbar: GridToolbar, - toolbar: (props, context) => ( - + toolbar: useCallback>( + (props) => , + [loadData] ), loadingOverlay: LinearProgress, noRowsOverlay: CustomNoRowsOverlay, diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 22844c5..b8759ea 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -1,9 +1,11 @@ import { GridColDef } from '@mui/x-data-grid'; import { Chip, ChipProps, Grid, Typography } from '@mui/material'; import { FormattedMessage, useIntl } from 'react-intl'; -import { FunctionComponent, useMemo } from 'react'; +import { FunctionComponent, useMemo, useRef } from 'react'; import { Check, Close, QuestionMark } from '@mui/icons-material'; -import CommonDataGrid from '../../components/XDataGrid/CommonDataGrid'; +import CommonDataGrid, { + CommonDataGridExposed, +} from '../../components/XDataGrid/CommonDataGrid'; import { UserAdminSrv, UserConnection } from '../../services'; function getRowId(row: UserConnection) { @@ -46,6 +48,7 @@ const BoolValue: FunctionComponent<{ export const ConnectionsPage: FunctionComponent = () => { //const [dataConnections, setDataConnections] = useState(null); const intl = useIntl(); + const gridRef = useRef(); const columns: GridColDef[] = useMemo( () => [ { @@ -119,6 +122,7 @@ export const ConnectionsPage: FunctionComponent = () => { { //const data = useLoaderData() as DeferredData; const intl = useIntl(); + const { snackError } = useSnackMessage(); + const gridRef = useRef(); + const deleteUser = useCallback( + (id: string) => () => + gridRef.current?.actionThenRefresh(() => + UserAdminSrv.deleteUser(id).then( + (success) => + snackError({ + messageTxt: `Error while deleting user ${id}`, + headerId: 'table.error.delete', + }), + (error) => + snackError({ + messageTxt: error.message, + headerId: 'table.error.delete', + }) + ) + ), + [snackError] + ); const columns: GridColDef[] = useMemo( () => [ { @@ -40,8 +64,20 @@ const UsersPage: FunctionComponent = () => { editable: false, filterable: true, }, + { + field: 'actions', + type: 'actions', + width: 80, + getActions: (params) => [ + } + label="Delete" + onClick={deleteUser(params.row.sub)} + />, + ], + }, ], - [intl] + [intl, deleteUser] ); return ( @@ -52,6 +88,7 @@ const UsersPage: FunctionComponent = () => { { }); } +export function deleteUser(sub: string): Promise { + console.info(`Deleting sub user "${sub}"...`); + return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'delete' }) + .then((response: ReqResponse) => undefined) + .catch((reason) => { + console.error(`Error while deleting the servers data : ${reason}`); + throw reason; + }); +} + export type UserConnection = { sub: string; firstConnection: string; //$date-time diff --git a/src/translations/en.json b/src/translations/en.json index 3cb9601..c15450e 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -13,6 +13,7 @@ "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Error while retrieving data", + "table.error.delete": "Error while deleting user", "table.toolbar.refresh": "Refresh", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Refresh table data", diff --git a/src/translations/fr.json b/src/translations/fr.json index 6097640..18f078b 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -13,6 +13,7 @@ "table.id": "ID", "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Erreur pendant la récupération des données", + "table.error.delete": "Erreur pendant la suppression de l'utilisateur", "table.toolbar.refresh": "Rafraîchir", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", From 9679235c20335764cf9a8ca54e9c86c20a898e81 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 9 Feb 2024 01:19:34 +0100 Subject: [PATCH 16/54] add json export --- src/components/XDataGrid/CustomToolbar.tsx | 17 +++-- .../XDataGrid/GridJsonExportMenuItem.tsx | 66 +++++++++++++++++++ 2 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 src/components/XDataGrid/GridJsonExportMenuItem.tsx diff --git a/src/components/XDataGrid/CustomToolbar.tsx b/src/components/XDataGrid/CustomToolbar.tsx index 3b50592..5c99e02 100644 --- a/src/components/XDataGrid/CustomToolbar.tsx +++ b/src/components/XDataGrid/CustomToolbar.tsx @@ -1,9 +1,11 @@ import { forwardRef, FunctionComponent, PropsWithChildren } from 'react'; import { Box, Divider } from '@mui/material'; import { + GridCsvExportMenuItem, + GridPrintExportMenuItem, GridToolbarContainer, GridToolbarDensitySelector, - GridToolbarExport, + GridToolbarExportContainer, GridToolbarFilterButton, GridToolbarProps, GridToolbarQuickFilter, @@ -12,6 +14,7 @@ import { import GridToolbarRefresh, { GridToolbarRefreshProps, } from './GridToolbarRefresh'; +import GridJsonExportMenuItem from './GridJsonExportMenuItem'; export type CustomGridToolbarProps = GridToolbarProps & { refresh?: GridToolbarRefreshProps['refresh']; @@ -38,11 +41,13 @@ export const CustomToolbar: FunctionComponent< {/**/} - + + + + {/**/} + + {/*TODO add to props definition*/} + {(props.showQuickFilter || props.refresh || props.children) && ( <> diff --git a/src/components/XDataGrid/GridJsonExportMenuItem.tsx b/src/components/XDataGrid/GridJsonExportMenuItem.tsx new file mode 100644 index 0000000..c006491 --- /dev/null +++ b/src/components/XDataGrid/GridJsonExportMenuItem.tsx @@ -0,0 +1,66 @@ +/* + * recipe from https://mui.com/x/react-data-grid/export/#custom-export-format + */ + +import { + GridApi, + GridExportMenuItemProps, + gridFilteredSortedRowIdsSelector, + gridVisibleColumnFieldsSelector, + useGridApiContext, +} from '@mui/x-data-grid'; +import { MenuItem } from '@mui/material'; + +const getJson = (apiRef: React.MutableRefObject) => { + // Select rows and columns + const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef); + const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); + + // Format the data. Here we only keep the value + const data = filteredSortedRowIds.map((id) => { + const row: Record = {}; + visibleColumnsField.forEach((field) => { + row[field] = apiRef.current.getCellParams(id, field).value; + }); + return row; + }); + + // Stringify with some indentation + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#parameters + return JSON.stringify(data, null, 2); +}; + +const exportBlob = (blob: Blob, filename: string) => { + // Save the blob in a json file + const url = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + + setTimeout(() => { + URL.revokeObjectURL(url); + }); +}; + +export default function GridJsonExportMenuItem( + props: Readonly> +) { + const apiRef = useGridApiContext(); + return ( + { + const jsonString = getJson(apiRef); + const blob = new Blob([jsonString], { + type: 'text/json', + }); + exportBlob(blob, 'DataGrid_export.json'); //TODO parameter in props? + // Hide the export menu after the export + props.hideMenu?.(); + }} + > + Export JSON + + ); +} From 4a14fe9291ca4ad0e4792c3af40504f84ca8ec01 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Mon, 12 Feb 2024 18:44:08 +0100 Subject: [PATCH 17/54] fix translation --- src/pages/connections/ConnectionsPage.tsx | 2 +- src/pages/users/UsersPage.tsx | 6 +++--- src/translations/en.json | 6 +++--- src/translations/fr.json | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index b8759ea..994d40a 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -55,7 +55,7 @@ export const ConnectionsPage: FunctionComponent = () => { field: 'sub', headerName: intl.formatMessage({ id: 'table.id' }), description: intl.formatMessage({ - id: 'table.id.description', + id: 'connections.table.id.description', }), type: 'string', flex: 0.25, diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index eeae09c..919edab 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -25,12 +25,12 @@ const UsersPage: FunctionComponent = () => { (success) => snackError({ messageTxt: `Error while deleting user ${id}`, - headerId: 'table.error.delete', + headerId: 'users.table.error.delete', }), (error) => snackError({ messageTxt: error.message, - headerId: 'table.error.delete', + headerId: 'users.table.error.delete', }) ) ), @@ -42,7 +42,7 @@ const UsersPage: FunctionComponent = () => { field: 'sub', headerName: intl.formatMessage({ id: 'table.id' }), description: intl.formatMessage({ - id: 'table.id.description', + id: 'users.table.id.description', }), type: 'string', flex: 0.25, diff --git a/src/translations/en.json b/src/translations/en.json index c15450e..bf72290 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -11,9 +11,7 @@ "table.noRows": "No data", "table.id": "ID", - "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Error while retrieving data", - "table.error.delete": "Error while deleting user", "table.toolbar.refresh": "Refresh", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Refresh table data", @@ -30,6 +28,8 @@ "connections.table.allowed.unknown": "Unknown", "users.title": "List of GridSuite users", + "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", - "users.table.isAdmin.description": "The users is an administrator of GridSuite" + "users.table.isAdmin.description": "The users is an administrator of GridSuite", + "users.table.error.delete": "Error while deleting user" } diff --git a/src/translations/fr.json b/src/translations/fr.json index 18f078b..347e6b5 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -11,9 +11,7 @@ "table.noRows": "No data", "table.id": "ID", - "table.id.description": "Identifiant de l'utilisateur", "table.error.retrieve": "Erreur pendant la récupération des données", - "table.error.delete": "Erreur pendant la suppression de l'utilisateur", "table.toolbar.refresh": "Rafraîchir", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", @@ -30,6 +28,8 @@ "connections.table.allowed.unknown": "\u00A0", "users.title": "Liste des utilisateurs", + "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", - "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite" + "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite", + "users.table.error.delete": "Erreur pendant la suppression de l'utilisateur" } From fab50c55cb6103dd45f3d30ac609a1f6fec39604 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 15 Feb 2024 01:29:04 +0100 Subject: [PATCH 18/54] Add button new user & refresh after modification of data --- src/components/RotateIcon.tsx | 18 +- src/components/XDataGrid/CommonDataGrid.tsx | 59 ++++-- src/components/XDataGrid/CustomToolbar.tsx | 21 ++- .../XDataGrid/GridToolbarButton.tsx | 77 ++++++++ .../XDataGrid/GridToolbarButtonAdd.tsx | 40 +++++ .../XDataGrid/GridToolbarButtonRefresh.tsx | 46 +++++ .../XDataGrid/GridToolbarRefresh.tsx | 107 ----------- src/pages/users/UsersPage.tsx | 168 ++++++++++++++++-- src/services/user-admin.ts | 10 ++ src/translations/en.json | 11 +- src/translations/fr.json | 11 +- src/utils/functions.ts | 30 ++++ 12 files changed, 438 insertions(+), 160 deletions(-) create mode 100644 src/components/XDataGrid/GridToolbarButton.tsx create mode 100644 src/components/XDataGrid/GridToolbarButtonAdd.tsx create mode 100644 src/components/XDataGrid/GridToolbarButtonRefresh.tsx delete mode 100644 src/components/XDataGrid/GridToolbarRefresh.tsx create mode 100644 src/utils/functions.ts diff --git a/src/components/RotateIcon.tsx b/src/components/RotateIcon.tsx index 45044f1..b1c0dc8 100644 --- a/src/components/RotateIcon.tsx +++ b/src/components/RotateIcon.tsx @@ -1,4 +1,3 @@ -import { FunctionComponent } from 'react'; import { SvgIconComponent } from '@mui/icons-material'; import { SvgIconProps } from '@mui/material'; import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon'; @@ -8,12 +7,6 @@ type ExtendIconProps = SvgIconProps< SvgIconTypeMap['defaultComponent'], { component: I } >; -interface ExtendIcon< - I extends SvgIconComponent = any, - P extends ExtendIconProps = any -> extends FunctionComponent

{ - (props: P, context?: any): I; -} const style: CSSObject = { animation: 'spin 2s linear infinite', @@ -27,7 +20,10 @@ const style: CSSObject = { }, }; -export const RotateIcon: ExtendIcon = (props, context) => ( - -); -export default RotateIcon; +export default function RotateIcon( + props: ExtendIconProps +) { + const { component, ...restProps } = props; + const Cmpnt = component as SvgIconComponent; + return ; +} diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx index 3b33cf1..f91215e 100644 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -15,6 +15,8 @@ import { import { deepmerge } from '@mui/utils'; import { useSnackMessage } from '@gridsuite/commons-ui'; import CustomToolbar, { CustomGridToolbarProps } from './CustomToolbar'; +import { LinearProgressProps } from '@mui/material/LinearProgress/LinearProgress'; +import { GridSlotsComponentsProps } from '@mui/x-data-grid/models/gridSlotsComponentsProps'; export type CommonDataGridExposed = { actionThenRefresh: (action: () => Promise) => void; @@ -24,6 +26,7 @@ interface CommonDataGridProps //rows: Partial['rows']>; loader: () => Promise; exposesRef: ReturnType>; + toolbarExtends?: CustomGridToolbarProps['children']; } export default function CommonDataGrid( @@ -32,37 +35,44 @@ export default function CommonDataGrid( const { snackError } = useSnackMessage(); const [data, setData] = useState(null); const [loading, setLoading] = useState(false); + const [loadingRefresh, setLoadingRefresh] = useState(false); - const actionWithRefresh = useCallback(function action( + const actionWithLoadingState = useCallback(function actionWithState( action: () => Promise ) { //TODO how to block simultaneous calls? setLoading(true); - action().finally(() => setLoading(false)); + return action().finally(() => { + setLoading(false); + }); }, []); const { loader } = props; //for eslint who don't understand with usememo const loadData = useCallback( function loadData() { - actionWithRefresh(() => - loader().then(setData, (error) => { - snackError({ - messageTxt: error.message, - headerId: 'table.error.retrieve', - }); - //TODO what to do with "old" data? - }) + setLoadingRefresh(true); + actionWithLoadingState(() => + loader() + .then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //TODO what to do with "old" data? + }) + .finally(() => setLoadingRefresh(false)) ); }, - [actionWithRefresh, loader, snackError] + [actionWithLoadingState, loader, snackError] ); - useEffect(() => { - //Load data one time at initial render - loadData(); - }, [loadData]); - + const actionWithRefresh = useCallback( + function actionThenRefresh(action: () => Promise) { + actionWithLoadingState(action).then(loadData); + }, + [actionWithLoadingState, loadData] + ); //expose to parent useImperativeHandle( props.exposesRef as Ref, @@ -71,6 +81,12 @@ export default function CommonDataGrid( }), [actionWithRefresh] ); + + useEffect(() => { + //Load data one time at initial render + loadData(); + }, [loadData]); + return ( ( slots={{ //toolbar: GridToolbar, toolbar: useCallback>( - (props) => , - [loadData] + (toolbarProps) => ( + + {props.toolbarExtends} + + ), + [loadData, props.toolbarExtends] ), loadingOverlay: LinearProgress, noRowsOverlay: CustomNoRowsOverlay, @@ -103,6 +123,9 @@ export default function CommonDataGrid( //https://mui.com/x/api/data-grid/grid-print-export-options/ }, }, + loadingOverlay: { + variant: loadingRefresh ? 'query' : 'indeterminate', + } as LinearProgressProps as GridSlotsComponentsProps['loadingOverlay'], }, props.slotProps )} diff --git a/src/components/XDataGrid/CustomToolbar.tsx b/src/components/XDataGrid/CustomToolbar.tsx index 5c99e02..7a9740a 100644 --- a/src/components/XDataGrid/CustomToolbar.tsx +++ b/src/components/XDataGrid/CustomToolbar.tsx @@ -13,12 +13,13 @@ import { } from '@mui/x-data-grid'; import GridToolbarRefresh, { GridToolbarRefreshProps, -} from './GridToolbarRefresh'; +} from './GridToolbarButtonRefresh'; import GridJsonExportMenuItem from './GridJsonExportMenuItem'; -export type CustomGridToolbarProps = GridToolbarProps & { - refresh?: GridToolbarRefreshProps['refresh']; -}; +export interface CustomGridToolbarProps extends GridToolbarProps { + onRefresh?: GridToolbarRefreshProps['refresh']; + //TODO remove multi selection +} export const CustomToolbar: FunctionComponent< PropsWithChildren @@ -48,19 +49,23 @@ export const CustomToolbar: FunctionComponent< {/*TODO add to props definition*/} - {(props.showQuickFilter || props.refresh || props.children) && ( + {(props.children || props.onRefresh) && ( <> - {props.refresh && ( - + {props.onRefresh && ( + )} + {props.children} + + )} + {props.showQuickFilter && ( + <> {props.showQuickFilter && ( )} - {props.children} )} diff --git a/src/components/XDataGrid/GridToolbarButton.tsx b/src/components/XDataGrid/GridToolbarButton.tsx new file mode 100644 index 0000000..ddf51a3 --- /dev/null +++ b/src/components/XDataGrid/GridToolbarButton.tsx @@ -0,0 +1,77 @@ +import { ButtonProps, TooltipProps } from '@mui/material'; +import { + unstable_useForkRef as useForkRef, + unstable_useId as useId, +} from '@mui/utils'; +import { useGridRootProps } from '@mui/x-data-grid'; +import { forwardRef, useRef } from 'react'; +import { useIntl } from 'react-intl'; + +export type GridToolbarButtonProps = { + tooltip: { + titleId: string; + }; + button: { + labelId: string; + textId: string; + color?: ButtonProps['color']; + startIcon: ButtonProps['startIcon']; + onClick: ButtonProps['onClick']; + }; + + /** + * The props used for each slot inside. + * @default {} + */ + slotProps?: { + button?: Partial; + tooltip?: Partial; + }; + [key: string]: any; +}; + +/* + * Code based on sources of MUI-X Toolbar components + */ +export const GridToolbarButton = forwardRef< + HTMLButtonElement, + GridToolbarButtonProps +>(function GridToolbarButton(props, ref) { + const buttonProps = props.slotProps?.button ?? {}; + const tooltipProps = props.slotProps?.tooltip ?? {}; + + //const apiRef = useGridApiContext(); + const rootProps = useGridRootProps(); + const intl = useIntl(); + + const buttonRef = useRef(null); + const handleRef = useForkRef(ref, buttonRef); + const buttonId = useId(); + + return ( + + + {intl.formatMessage({ id: props.button.textId })} + + + ); +}); +export default GridToolbarButton; diff --git a/src/components/XDataGrid/GridToolbarButtonAdd.tsx b/src/components/XDataGrid/GridToolbarButtonAdd.tsx new file mode 100644 index 0000000..b2bfeaf --- /dev/null +++ b/src/components/XDataGrid/GridToolbarButtonAdd.tsx @@ -0,0 +1,40 @@ +import { forwardRef, useMemo } from 'react'; +import { AddCircleOutline, SvgIconComponent } from '@mui/icons-material'; +import GridToolbarButton, { GridToolbarButtonProps } from './GridToolbarButton'; + +export type GridToolbarAddProps = GridToolbarButtonProps & { + addElement?: () => void; + icon?: SvgIconComponent; + textId?: string; + tooltipId: string; + labelId: string; +}; + +export const GridToolbarBtnAdd = forwardRef< + HTMLButtonElement, + GridToolbarAddProps +>(function GridToolbarBtnAdd(props, ref) { + const AddIcon = useMemo(() => { + const IcnCmpnt: SvgIconComponent = props.icon ?? AddCircleOutline; + return ; + }, [props.icon]); + + return ( + + ); +}); +export default GridToolbarBtnAdd; diff --git a/src/components/XDataGrid/GridToolbarButtonRefresh.tsx b/src/components/XDataGrid/GridToolbarButtonRefresh.tsx new file mode 100644 index 0000000..999485e --- /dev/null +++ b/src/components/XDataGrid/GridToolbarButtonRefresh.tsx @@ -0,0 +1,46 @@ +import { forwardRef, useCallback, useState } from 'react'; +import { Refresh } from '@mui/icons-material'; +import RotateIcon from '../RotateIcon'; +import GridToolbarButton, { GridToolbarButtonProps } from './GridToolbarButton'; +import { FnSyncAsync, runFnWithState } from '../../utils/functions'; + +function RefreshIconRotate() { + return ; +} + +function RefreshIcon() { + return ; +} + +export type GridToolbarRefreshProps = GridToolbarButtonProps & { + refresh?: FnSyncAsync; // ButtonProps['onClick']; //(event: MouseEvent) => void +}; + +export const GridToolbarRefresh = forwardRef< + HTMLButtonElement, + GridToolbarRefreshProps +>(function GridToolbarRefresh(props, ref) { + const [refreshing, setRefreshing] = useState(false); + const onClick = useCallback( + () => runFnWithState(props.refresh, setRefreshing), + [props.refresh] + ); + + return ( + : , + onClick: onClick, + disabled: onClick === undefined || refreshing, + }} + /> + ); +}); +export default GridToolbarRefresh; diff --git a/src/components/XDataGrid/GridToolbarRefresh.tsx b/src/components/XDataGrid/GridToolbarRefresh.tsx deleted file mode 100644 index 3bd805c..0000000 --- a/src/components/XDataGrid/GridToolbarRefresh.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { ButtonProps, TooltipProps } from '@mui/material'; -import { - unstable_useForkRef as useForkRef, - unstable_useId as useId, -} from '@mui/utils'; -import { useGridRootProps } from '@mui/x-data-grid'; -import { forwardRef, useMemo, useRef, useState } from 'react'; -import { Refresh } from '@mui/icons-material'; -import { useIntl } from 'react-intl'; -import RotateIcon from '../RotateIcon'; - -function IconRotate() { - return ; -} - -function IconStatic() { - return ; -} - -function isPromise(obj: any): boolean { - return ( - typeof obj?.then === 'function' || //only standard/common thing in implementations - obj instanceof Promise || //native promise - (obj && Object.prototype.toString.call(obj) === '[object Promise]') - ); //ES6 Promise -} - -function onClickRefresh( - fn: GridToolbarRefreshProps['refresh'], - setState: (n: boolean) => void -) { - if (fn !== undefined && fn !== null) { - if (isPromise(fn)) { - setState(true); - Promise.resolve() - .then(() => (fn as () => Promise)()) - .finally(() => setState(false)); - } /*if (typeof fn === 'function')*/ else { - setState(true); - fn(); - setState(false); - } - } -} - -export type GridToolbarRefreshProps = { - refresh?: () => void | Promise; // ButtonProps['onClick']; //(event: MouseEvent) => void - - /** - * The props used for each slot inside. - * @default {} - */ - slotProps?: { - button?: Partial; - tooltip?: Partial; - }; - [key: string]: any; -}; - -export const GridToolbarExport = forwardRef< - HTMLButtonElement, - GridToolbarRefreshProps ->(function GridToolbarRefresh(props, ref) { - const { slotProps = {} } = props; - const buttonProps = slotProps.button ?? {}; - const tooltipProps = slotProps.tooltip ?? {}; - - //const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const intl = useIntl(); - - const buttonRef = useRef(null); - const handleRef = useForkRef(ref, buttonRef); - const refreshButtonId = useId(); - const [refreshing, setRefreshing] = useState(false); - const onClick = useMemo( - () => () => onClickRefresh(props.refresh, setRefreshing), - [props.refresh] - ); - - return ( - - : } - aria-label={intl.formatMessage({ - id: 'table.toolbar.refresh.label', - })} - id={refreshButtonId} - {...buttonProps} - onClick={onClick} - {...rootProps.slotProps?.baseButton} - > - {intl.formatMessage({ id: 'table.toolbar.refresh' })} - - - ); -}); -export default GridToolbarExport; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 919edab..cd10146 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -1,13 +1,35 @@ -import { FunctionComponent, useCallback, useMemo, useRef } from 'react'; +import { + Fragment, + FunctionComponent, + useCallback, + useMemo, + useRef, + useState, +} from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import { GridActionsCellItem, GridColDef } from '@mui/x-data-grid'; -import { Grid, Typography } from '@mui/material'; -import { Delete } from '@mui/icons-material'; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Grid, + InputAdornment, + Paper, + PaperProps, + TextField, + Typography, +} from '@mui/material'; +import { AccountCircle, Delete, PersonAdd } from '@mui/icons-material'; import CommonDataGrid, { CommonDataGridExposed, } from '../../components/XDataGrid/CommonDataGrid'; import { UserAdminSrv, UserInfos } from '../../services'; import { useSnackMessage } from '@gridsuite/commons-ui'; +import GridToolbarBtnAdd from '../../components/XDataGrid/GridToolbarButtonAdd'; +import { Controller, SubmitHandler, useForm } from 'react-hook-form'; function getRowId(row: UserInfos) { return row.sub; @@ -18,20 +40,17 @@ const UsersPage: FunctionComponent = () => { const intl = useIntl(); const { snackError } = useSnackMessage(); const gridRef = useRef(); + const deleteUser = useCallback( (id: string) => () => gridRef.current?.actionThenRefresh(() => - UserAdminSrv.deleteUser(id).then( - (success) => - snackError({ - messageTxt: `Error while deleting user ${id}`, - headerId: 'users.table.error.delete', - }), - (error) => - snackError({ - messageTxt: error.message, - headerId: 'users.table.error.delete', - }) + UserAdminSrv.deleteUser(id).catch((error) => + snackError({ + messageTxt: `Error while deleting user "${id}"${ + error.message && ':\n' + error.message + }`, + headerId: 'users.table.error.delete', + }) ) ), [snackError] @@ -79,6 +98,44 @@ const UsersPage: FunctionComponent = () => { ], [intl, deleteUser] ); + + const addUser = useCallback( + (id: string) => + gridRef.current?.actionThenRefresh(() => + UserAdminSrv.addUser(id).catch((error) => + snackError({ + messageTxt: `Error while adding user "${id}"${ + error.message && ':\n' + error.message + }`, + headerId: 'users.table.error.delete', + }) + ) + ), + [snackError] + ); + const { + register, + setValue, + handleSubmit, + formState: { errors }, + control, + reset, + setFocus, + clearErrors, + } = useForm<{ user: string }>(); + const [open, setOpen] = useState(false); + const handleClose = () => { + setOpen(false); + reset(); + clearErrors(); + }; + const onSubmit: SubmitHandler<{ user: string }> = (data) => { + console.log('onSubmit(', data, ')'); + addUser(data.user); + handleClose(); + }; + const onSubmitForm = handleSubmit(onSubmit); + return ( @@ -106,9 +163,92 @@ const UsersPage: FunctionComponent = () => { }, }, }} + toolbarExtends={ + <> + setOpen(true), + [] + )} + icon={PersonAdd} + /> + {/*TODO remove selection*/} + + } /> +

( + + )} + > + + + + + + + + ( + + } + type="text" + fullWidth + variant="standard" + inputMode="text" + InputProps={{ + startAdornment: ( + + + + ), + }} + error={fieldState?.invalid} + helperText={fieldState?.error?.message} + /> + )} + /> + + + + + + ); }; export default UsersPage; + +/* + * is defined in without generics, which default to `PaperProps => PaperProps<'div'>`, + * so we must trick typescript check with a cast + */ +const PaperForm: FunctionComponent< + PaperProps<'form'> & { untypedProps?: PaperProps } +> = (props, context) => { + const { untypedProps, ...formProps } = props; + const othersProps = untypedProps as PaperProps<'form'>; //trust me ts + return ; +}; diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index 442f5e1..c2002e5 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -71,6 +71,16 @@ export function deleteUser(sub: string): Promise { }); } +export function addUser(sub: string): Promise { + console.info(`Creating sub user "${sub}"...`); + return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'put' }) + .then((response: ReqResponse) => undefined) + .catch((reason) => { + console.error(`Error while pushing the data : ${reason}`); + throw reason; + }); +} + export type UserConnection = { sub: string; firstConnection: string; //$date-time diff --git a/src/translations/en.json b/src/translations/en.json index bf72290..794d7b6 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -15,6 +15,8 @@ "table.toolbar.refresh": "Refresh", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Refresh table data", + "table.toolbar.add": "Add", + "table.toolbar.delete": "Delete", "connections.table.id.description": "User login", "connections.table.firstConnection": "First see", @@ -31,5 +33,12 @@ "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", "users.table.isAdmin.description": "The users is an administrator of GridSuite", - "users.table.error.delete": "Error while deleting user" + "users.table.error.delete": "Error while deleting user", + "users.table.error.add": "Error while adding user", + "users.table.toolbar.add": "Add user", + "users.table.toolbar.add.label": "Add user", + "users.table.toolbar.add.tooltip": "Add a user", + "users.form.title": "Add a user", + "users.form.content": "Please fill in new user data.", + "users.form.field.username.label": "User ID" } diff --git a/src/translations/fr.json b/src/translations/fr.json index 347e6b5..964cc13 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -15,6 +15,8 @@ "table.toolbar.refresh": "Rafraîchir", "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", + "table.toolbar.add": "Ajouter", + "table.toolbar.delete": "Supprimer", "connections.title": "Historique des connexions", "connections.table.firstConnection": "1ᵉʳᵉ connexion", @@ -31,5 +33,12 @@ "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite", - "users.table.error.delete": "Erreur pendant la suppression de l'utilisateur" + "users.table.error.delete": "Erreur pendant la suppression de l'utilisateur", + "users.table.error.add": "Erreur pendant l'ajout de l'utilisateur", + "users.table.toolbar.add": "Add user", + "users.table.toolbar.add.label": "Add user", + "users.table.toolbar.add.tooltip": "Ajouter un utilisateur", + "users.form.title": "Ajouter un utilisateur", + "users.form.content": "Veuillez renseigner les informations de l'utilisateur.", + "users.form.field.username.label": ":ID utilisateur" } diff --git a/src/utils/functions.ts b/src/utils/functions.ts new file mode 100644 index 0000000..bbb20a1 --- /dev/null +++ b/src/utils/functions.ts @@ -0,0 +1,30 @@ +export type FnSyncAsync = (() => R) | (() => Promise); +export type Setter = (v: T) => void; + +export function runFnWithState( + fn: FnSyncAsync | null | undefined, + setState: Setter +) { + if (fn !== undefined && fn !== null) { + return new Promise((resolve, reject) => { + try { + setState(true); + resolve(); + } catch (error) { + reject(error); + } + }) + .then(fn) + .finally(() => setState(false)); + } else { + return null; + } +} + +export function isPromise(obj: any): boolean { + return ( + typeof obj?.then === 'function' || //only standard/common thing in implementations + obj instanceof Promise || //native promise + (obj && Object.prototype.toString.call(obj) === '[object Promise]') + ); //ES6 Promise +} From 6f939bf46c5ff4c014d9d757965dd2a445e9ec2e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 15 Feb 2024 10:23:20 +0100 Subject: [PATCH 19/54] Fix CSS layout bug with Chromium navigators --- src/components/App/app.tsx | 2 +- src/index.css | 4 ---- src/pages/connections/ConnectionsPage.tsx | 2 +- src/pages/users/UsersPage.tsx | 2 +- 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/App/app.tsx b/src/components/App/app.tsx index 3a9bc5d..cdfdb0d 100644 --- a/src/components/App/app.tsx +++ b/src/components/App/app.tsx @@ -122,7 +122,7 @@ const App: FunctionComponent> = (props, context) => { spacing={0} justifyContent="flex-start" alignItems="stretch" - sx={{ height: '100vh' }} + sx={{ height: '100vh', width: '100vw' }} > diff --git a/src/index.css b/src/index.css index 958f104..407ba15 100644 --- a/src/index.css +++ b/src/index.css @@ -20,7 +20,3 @@ code { body > iframe[width='0'][height='0'] { border: 0; } - -#root { - height: 100vh; -} diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 994d40a..d179e1b 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -120,7 +120,7 @@ export const ConnectionsPage: FunctionComponent = () => { - + { - + Date: Thu, 15 Feb 2024 10:28:55 +0100 Subject: [PATCH 20/54] Fix visibility of navigation links --- src/components/App/app-top-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App/app-top-bar.tsx b/src/components/App/app-top-bar.tsx index dadc927..d4226fc 100644 --- a/src/components/App/app-top-bar.tsx +++ b/src/components/App/app-top-bar.tsx @@ -140,7 +140,7 @@ const AppTopBar: FunctionComponent = () => { variant="scrollable" scrollButtons="auto" aria-label="Main navigation menu" - sx={{ display: user ? 'hidden' : undefined }} + sx={{ visibility: !user ? 'hidden' : undefined }} value={selectedTabValue} > {[...tabs.values()]} From 48588a43152beb985c9481717e31f93043c840f2 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 15 Feb 2024 15:18:28 +0100 Subject: [PATCH 21/54] trim input before calling api --- src/pages/users/UsersPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 55719d5..80ec98d 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -131,7 +131,7 @@ const UsersPage: FunctionComponent = () => { }; const onSubmit: SubmitHandler<{ user: string }> = (data) => { console.log('onSubmit(', data, ')'); - addUser(data.user); + addUser(data.user.trim()); handleClose(); }; const onSubmitForm = handleSubmit(onSubmit); From 5a307974aa0503ca9dd4ab06ca9671c3d8fe4070 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 16 Feb 2024 09:38:59 +0100 Subject: [PATCH 22/54] Set `console` levels/types --- src/components/App/app.tsx | 3 +++ src/pages/users/UsersPage.tsx | 4 +++- src/services/apps-metadata.ts | 8 ++++---- src/services/config.ts | 19 ++++++------------- src/services/user-admin.ts | 14 ++++++-------- src/utils/rest-api.ts | 2 +- 6 files changed, 23 insertions(+), 27 deletions(-) diff --git a/src/components/App/app.tsx b/src/components/App/app.tsx index cdfdb0d..0c5fba6 100644 --- a/src/components/App/app.tsx +++ b/src/components/App/app.tsx @@ -33,6 +33,9 @@ import ReconnectingWebSocket from 'reconnecting-websocket'; import { Grid } from '@mui/material'; const App: FunctionComponent> = (props, context) => { + console.count('app render'); + console?.timeStamp('app render'); + const { snackError } = useSnackMessage(); const dispatch = useDispatch(); const user = useSelector((state: AppState) => state.user); diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 80ec98d..e901d27 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -130,7 +130,9 @@ const UsersPage: FunctionComponent = () => { clearErrors(); }; const onSubmit: SubmitHandler<{ user: string }> = (data) => { - console.log('onSubmit(', data, ')'); + console.groupCollapsed('onSubmit(...)'); + console.dir(data); + console.groupEnd(); addUser(data.user.trim()); handleClose(); }; diff --git a/src/services/apps-metadata.ts b/src/services/apps-metadata.ts index ba87af7..36667cf 100644 --- a/src/services/apps-metadata.ts +++ b/src/services/apps-metadata.ts @@ -7,14 +7,14 @@ function fetchEnv(): Promise { } export function fetchAuthorizationCodeFlowFeatureFlag(): Promise { - console.info(`Fetching authorization code flow feature flag...`); + console.debug(`Fetching authorization code flow feature flag...`); return fetchEnv() .then((env: EnvJson) => fetch(`${env.appsMetadataServerUrl}/authentication.json`) ) .then((res: ReqResponse) => res.json()) .then((res: Record) => { - console.log( + console.info( `Authorization code flow is ${ res.authorizationCodeFlowFeatureFlag ? 'enabled' @@ -33,7 +33,7 @@ export function fetchAuthorizationCodeFlowFeatureFlag(): Promise { } export function fetchVersion(): Promise> { - console.info(`Fetching global metadata...`); + console.debug(`Fetching global metadata...`); return fetchEnv() .then((env: EnvJson) => fetch(`${env.appsMetadataServerUrl}/version.json`) @@ -46,7 +46,7 @@ export function fetchVersion(): Promise> { } export function fetchAppsAndUrls(): Promise>> { - console.info(`Fetching apps and urls...`); + console.debug(`Fetching apps and urls...`); return fetchEnv() .then((env: EnvJson) => fetch(`${env.appsMetadataServerUrl}/apps-metadata.json`) diff --git a/src/services/config.ts b/src/services/config.ts index ddbe82f..baafb02 100644 --- a/src/services/config.ts +++ b/src/services/config.ts @@ -14,18 +14,16 @@ export function fetchConfigParameters( appName: string ): Promise { appName = appName.toLowerCase(); - console.info(`Fetching UI configuration params for app : ${appName}`); - const fetchParams = `${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters`; - return backendFetchJson(fetchParams); + console.debug(`Fetching UI configuration params for app : ${appName}`); + return backendFetchJson(`${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters`); } export function fetchConfigParameter( name: string ): ReturnType { const appName = getAppName(name).toLowerCase(); - console.info(`Fetching UI config parameter '${name}' for app '${appName}'`); - const fetchParams = `${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters/${name}`; - return backendFetchJson(fetchParams); + console.debug(`Fetching UI config parameter '${name}' for app '${appName}'`); + return backendFetchJson(`${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters/${name}`); } export function updateConfigParameter( @@ -33,11 +31,6 @@ export function updateConfigParameter( value: Parameters[0] ): ReturnType { const appName = getAppName(name).toLowerCase(); - console.info( - `Updating config parameter '${name}=${value}' for app '${appName}'` - ); - const updateParams = `${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters/${name}?value=${encodeURIComponent( - value - )}`; - return backendFetch(updateParams, { method: 'put' }); + console.debug(`Updating config parameter '${name}=${value}' for app '${appName}'`); + return backendFetch(`${PREFIX_CONFIG_QUERIES}/v1/applications/${appName}/parameters/${name}?value=${encodeURIComponent(value)}`, { method: 'put' }); } diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index c2002e5..db10f46 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -20,11 +20,9 @@ export function getUserSub(): Promise { export function fetchValidateUser(user: User): Promise { return extractUserSub(user) .then((sub) => { - console.info(`Fetching access for user...`); - const CheckAccessUrl = `${USER_ADMIN_URL}/users/${sub}`; - console.debug(CheckAccessUrl); + console.debug(`Fetching access for user "${sub}"...`); return backendFetch( - CheckAccessUrl, + `${USER_ADMIN_URL}/users/${sub}`, { method: 'head' }, getToken(user) ); @@ -48,7 +46,7 @@ export type UserInfos = { }; export function fetchUsers(): Promise { - console.info(`Fetching list of users...`); + console.debug(`Fetching list of users...`); return backendFetchJson(`${USER_ADMIN_URL}/users`, { headers: { Accept: 'application/json', @@ -62,7 +60,7 @@ export function fetchUsers(): Promise { } export function deleteUser(sub: string): Promise { - console.info(`Deleting sub user "${sub}"...`); + console.debug(`Deleting sub user "${sub}"...`); return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'delete' }) .then((response: ReqResponse) => undefined) .catch((reason) => { @@ -72,7 +70,7 @@ export function deleteUser(sub: string): Promise { } export function addUser(sub: string): Promise { - console.info(`Creating sub user "${sub}"...`); + console.debug(`Creating sub user "${sub}"...`); return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'put' }) .then((response: ReqResponse) => undefined) .catch((reason) => { @@ -89,7 +87,7 @@ export type UserConnection = { }; export function fetchUsersConnections(): Promise { - console.info(`Fetching users connections...`); + console.debug(`Fetching users connections...`); return backendFetchJson(`${USER_ADMIN_URL}/connections`, { headers: { Accept: 'application/json', diff --git a/src/utils/rest-api.ts b/src/utils/rest-api.ts index 9be7cc0..c5da49b 100644 --- a/src/utils/rest-api.ts +++ b/src/utils/rest-api.ts @@ -33,7 +33,7 @@ export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket { ); reconnectingWebSocket.onopen = function (event: Event) { console.info( - `Connected Websocket update config ui ${webSocketUrl} ...` + `Connected Websocket update config ui: ${webSocketUrl} ...` ); }; return reconnectingWebSocket; From add235b3f0e8c31222674d1a13c24c8fd6fcec6a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 23 Feb 2024 18:04:49 +0100 Subject: [PATCH 23/54] review --- src/components/App/app-wrapper.tsx | 2 - src/components/XDataGrid/CommonDataGrid.tsx | 12 ++- .../XDataGrid/CustomNoRowsOverlay.tsx | 85 ++++++++-------- src/components/XDataGrid/CustomToolbar.tsx | 4 - src/pages/connections/ConnectionsPage.tsx | 1 - src/redux/actions.ts | 7 +- src/routes/ErrorPage.tsx | 99 +++++++++---------- src/routes/router.tsx | 8 +- src/translations/en.json | 1 + src/translations/fr.json | 1 + 10 files changed, 107 insertions(+), 113 deletions(-) diff --git a/src/components/App/app-wrapper.tsx b/src/components/App/app-wrapper.tsx index 8226747..1cd5b9a 100644 --- a/src/components/App/app-wrapper.tsx +++ b/src/components/App/app-wrapper.tsx @@ -16,7 +16,6 @@ import { ThemeProvider, } from '@mui/material/styles'; import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale'; -//import { enUS as MuiPickersEnUS, frFR as MuiPickersFrFR } from '@mui/x-date-pickers/locales'; import { enUS as MuiDataGridEnUS, frFR as MuiDataGridFrFR, @@ -103,7 +102,6 @@ const getMuiTheme = (theme: unknown, locale: unknown): Theme => { createTheme( theme === LIGHT_THEME ? lightTheme : darkTheme, locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS, // MUI core translations - //locale === LANG_FRENCH ? MuiPickersFrFR : MuiPickersEnUS, // MUI x-date-pickers translations locale === LANG_FRENCH ? MuiDataGridFrFR : MuiDataGridEnUS // MUI x-data-grid translations ) ); diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx index f91215e..bb47a5a 100644 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ b/src/components/XDataGrid/CommonDataGrid.tsx @@ -23,7 +23,6 @@ export type CommonDataGridExposed = { }; interface CommonDataGridProps extends Omit, 'rows' | 'loading'> { - //rows: Partial['rows']>; loader: () => Promise; exposesRef: ReturnType>; toolbarExtends?: CustomGridToolbarProps['children']; @@ -82,10 +81,14 @@ export default function CommonDataGrid( [actionWithRefresh] ); + const [firstRun, setFirstRun] = useState(true); useEffect(() => { - //Load data one time at initial render - loadData(); - }, [loadData]); + // Load data one time at initial render + if (firstRun) { + loadData(); + setFirstRun(false); + } + }, [firstRun, loadData]); return ( ( loading={loading} density="compact" slots={{ - //toolbar: GridToolbar, toolbar: useCallback>( (toolbarProps) => ( diff --git a/src/components/XDataGrid/CustomNoRowsOverlay.tsx b/src/components/XDataGrid/CustomNoRowsOverlay.tsx index b5c3939..677adde 100644 --- a/src/components/XDataGrid/CustomNoRowsOverlay.tsx +++ b/src/components/XDataGrid/CustomNoRowsOverlay.tsx @@ -31,51 +31,52 @@ const style: SxProps = (theme) => ({ }, }); +const NoRowsSvg = ( + + + + + + + + + + + + + + + +); + export default function CustomNoRowsOverlay(): ReactElement { return ( - - - - - - - - - - - - - - - + {NoRowsSvg} diff --git a/src/components/XDataGrid/CustomToolbar.tsx b/src/components/XDataGrid/CustomToolbar.tsx index 7a9740a..21caf1f 100644 --- a/src/components/XDataGrid/CustomToolbar.tsx +++ b/src/components/XDataGrid/CustomToolbar.tsx @@ -25,10 +25,6 @@ export const CustomToolbar: FunctionComponent< PropsWithChildren > = forwardRef((props, ref) => { const rootProps = useGridRootProps(); - //const apiRef = useGridApiContext(); - - //const handleExport = (options: GridCsvExportOptions) => apiRef.current.exportDataAsCsv(options); - if ( rootProps.disableColumnFilter && rootProps.disableColumnSelector && diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index d179e1b..11c5543 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -46,7 +46,6 @@ const BoolValue: FunctionComponent<{ }; export const ConnectionsPage: FunctionComponent = () => { - //const [dataConnections, setDataConnections] = useState(null); const intl = useIntl(); const gridRef = useRef(); const columns: GridColDef[] = useMemo( diff --git a/src/redux/actions.ts b/src/redux/actions.ts index 95cfe3e..432ef61 100644 --- a/src/redux/actions.ts +++ b/src/redux/actions.ts @@ -20,14 +20,11 @@ export function updateUserManager( ): UserManagerAction { return { type: UPDATE_USER_MANAGER_STATE, userManager }; } -export function updateUserManager_( +export function updateUserManagerDestructured( instance: UserManagerState['instance'], error: UserManagerState['error'] ): UserManagerAction { - return { - type: UPDATE_USER_MANAGER_STATE, - userManager: { instance, error }, - }; + return updateUserManager({ instance, error }); } export const UPDATE_USER_MANAGER_INSTANCE = 'UPDATE_USER_MANAGER_INSTANCE'; diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx index 0eb7e4b..c7d322c 100644 --- a/src/routes/ErrorPage.tsx +++ b/src/routes/ErrorPage.tsx @@ -1,58 +1,55 @@ import { Grid, Typography } from '@mui/material'; import { isRouteErrorResponse, useRouteError } from 'react-router-dom'; -import { ReactElement, useMemo } from 'react'; +import { ReactElement, useEffect } from 'react'; export default function ErrorPage(): ReactElement { const error = useRouteError() as any; - console.error(error); - return useMemo( - () => ( - - Oops! - - Sorry, an unexpected error has occurred. - - {isRouteErrorResponse(error) && ( - <> - - {error.status} - - - {error.statusText} - - - )} -

- - {error.message || - error?.data?.message || - error.statusText} - -

- {isRouteErrorResponse(error) && error.error && ( - 
-                        
-                            {(function () {
-                                try {
-                                    return JSON.stringify(
-                                        error.error,
-                                        undefined,
-                                        2
-                                    );
-                                } catch (e) {
-                                    return null;
-                                }
-                            })() ?? `${error.error}`}
-                        
-
- )} - - ), - [error] + useEffect(() => { + console.error(error); + }, [error]); + return ( + + Oops! + + Sorry, an unexpected error has occurred. + + {isRouteErrorResponse(error) && ( + <> + + {error.status} + + + {error.statusText} + + + )} +

+ + {error.message || error?.data?.message || error.statusText} + +

+ {isRouteErrorResponse(error) && error.error && ( + 
+                    
+                        {(function () {
+                            try {
+                                return JSON.stringify(
+                                    error.error,
+                                    undefined,
+                                    2
+                                );
+                            } catch (e) {
+                                return null;
+                            }
+                        })() ?? `${error.error}`}
+                    
+
+ )} + ); } diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 4193228..45f646e 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -35,7 +35,7 @@ import { AppsMetadataSrv, UserAdminSrv } from '../services'; import { App } from '../components/App'; import { Connections, Users } from '../pages'; import ErrorPage from './ErrorPage'; -import { updateUserManager_ } from '../redux/actions'; +import { updateUserManagerDestructured } from '../redux/actions'; import HomePage from './HomePage'; export enum MainPaths { @@ -149,10 +149,12 @@ const AppAuthStateWithRouterLayer: FunctionComponent< ) ) .then((userManager: UserManager | undefined) => { - dispatch(updateUserManager_(userManager ?? null, null)); + dispatch( + updateUserManagerDestructured(userManager ?? null, null) + ); }) .catch((error: any) => { - dispatch(updateUserManager_(null, error.message)); + dispatch(updateUserManagerDestructured(null, error.message)); }); // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change }, [ diff --git a/src/translations/en.json b/src/translations/en.json index 794d7b6..667c937 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -18,6 +18,7 @@ "table.toolbar.add": "Add", "table.toolbar.delete": "Delete", + "connections.title": "Connections history", "connections.table.id.description": "User login", "connections.table.firstConnection": "First see", "connections.table.firstConnection.description": "The first time the user try to connect", diff --git a/src/translations/fr.json b/src/translations/fr.json index 964cc13..f5e4558 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -19,6 +19,7 @@ "table.toolbar.delete": "Supprimer", "connections.title": "Historique des connexions", + "connections.table.id.description": "Identifiant de l'utilisateur", "connections.table.firstConnection": "1ᵉʳᵉ connexion", "connections.table.firstConnection.description": "La première tentative de connexion de l'utilisateur", "connections.table.lastConnection": "Dernière conn.", From 176ebf7cf8de6c6a1fa92e9de299e77147a93517 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 1 Mar 2024 15:11:34 +0100 Subject: [PATCH 24/54] pick update api --- src/services/user-admin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index bfcaf7f..f4c9b65 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -64,7 +64,7 @@ export function deleteUser(sub: string): Promise { export function addUser(sub: string): Promise { console.debug(`Creating sub user "${sub}"...`); - return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'put' }) + return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'post' }) .then((response: ReqResponse) => undefined) .catch((reason) => { console.error(`Error while pushing the data : ${reason}`); From 619c4fdff6818b308cfc76d36d3dc2663c5c7ce1 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 1 Mar 2024 15:37:54 +0100 Subject: [PATCH 25/54] fix package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 19801d1..1b02fa2 100644 --- a/package.json +++ b/package.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": { From 82da9250e2b0c69961ca45127f1fd0b7d0a58fd7 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 6 Mar 2024 09:19:22 +0100 Subject: [PATCH 26/54] Migrate from x-data-grid to ag-grid & reorganize code --- .env | 1 + package-lock.json | 54 +- package.json | 3 +- src/components/App/app-wrapper.tsx | 9 +- src/components/Grid/AgGrid/AgGrid.tsx | 276 +++++++ src/components/Grid/AgGrid/AgGrid.type.ts | 723 ++++++++++++++++++ .../Grid/AgGrid/ag-theme-alpine.d.ts | 149 ++++ src/components/Grid/DataGrid.tsx | 258 +++++++ src/components/Grid/Grid.tsx | 123 +++ src/components/Grid/GridFormat.tsx | 95 +++ .../NoRowsOverlay.tsx} | 3 +- src/components/Grid/buttons/BaseButton.tsx | 82 ++ src/components/Grid/buttons/ButtonAdd.tsx | 41 + src/components/Grid/buttons/ButtonDelete.tsx | 43 ++ src/components/Grid/buttons/ButtonRefresh.tsx | 50 ++ src/components/XDataGrid/CommonDataGrid.tsx | 149 ---- src/components/XDataGrid/CustomToolbar.tsx | 71 -- .../XDataGrid/GridJsonExportMenuItem.tsx | 66 -- .../XDataGrid/GridToolbarButton.tsx | 77 -- .../XDataGrid/GridToolbarButtonAdd.tsx | 40 - .../XDataGrid/GridToolbarButtonRefresh.tsx | 46 -- src/module-commons-ui.d.ts | 1 + src/module-mui.d.ts | 7 +- src/pages/connections/ConnectionsPage.tsx | 119 ++- src/pages/users/UsersPage.tsx | 134 ++-- src/routes/ErrorPage.tsx | 2 +- src/routes/HomePage.tsx | 8 +- src/setupTests.js | 14 + src/translations/ag-grid/locale.en.ts | 532 +++++++++++++ src/translations/ag-grid/locale.fr.ts | 531 +++++++++++++ src/translations/en.json | 12 +- src/translations/fr.json | 12 +- src/utils/types.d.ts | 6 + 33 files changed, 3086 insertions(+), 651 deletions(-) create mode 100644 src/components/Grid/AgGrid/AgGrid.tsx create mode 100644 src/components/Grid/AgGrid/AgGrid.type.ts create mode 100644 src/components/Grid/AgGrid/ag-theme-alpine.d.ts create mode 100644 src/components/Grid/DataGrid.tsx create mode 100644 src/components/Grid/Grid.tsx create mode 100644 src/components/Grid/GridFormat.tsx rename src/components/{XDataGrid/CustomNoRowsOverlay.tsx => Grid/NoRowsOverlay.tsx} (97%) create mode 100644 src/components/Grid/buttons/BaseButton.tsx create mode 100644 src/components/Grid/buttons/ButtonAdd.tsx create mode 100644 src/components/Grid/buttons/ButtonDelete.tsx create mode 100644 src/components/Grid/buttons/ButtonRefresh.tsx delete mode 100644 src/components/XDataGrid/CommonDataGrid.tsx delete mode 100644 src/components/XDataGrid/CustomToolbar.tsx delete mode 100644 src/components/XDataGrid/GridJsonExportMenuItem.tsx delete mode 100644 src/components/XDataGrid/GridToolbarButton.tsx delete mode 100644 src/components/XDataGrid/GridToolbarButtonAdd.tsx delete mode 100644 src/components/XDataGrid/GridToolbarButtonRefresh.tsx create mode 100644 src/translations/ag-grid/locale.en.ts create mode 100644 src/translations/ag-grid/locale.fr.ts create mode 100644 src/utils/types.d.ts diff --git a/.env b/.env index 55d5131..23f955a 100644 --- a/.env +++ b/.env @@ -1,5 +1,6 @@ EXTEND_ESLINT=true REACT_APP_DEBUG_REQUESTS=false +REACT_APP_DEBUG_AGGRID=false REACT_APP_API_GATEWAY=/api/gateway REACT_APP_WS_GATEWAY=/ws/gateway diff --git a/package-lock.json b/package-lock.json index 4649d74..6e61cff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.75", "@mui/material": "^5.5.3", - "@mui/x-data-grid": "^6.19.3", "@reduxjs/toolkit": "^1.2.3", "@types/core-js": "^2.5.8", "@types/node": "^18.19.3", @@ -24,6 +23,8 @@ "@types/react": "^18.2.9", "@types/react-dom": "^18.2.4", "@types/react-window": "^1.8.8", + "ag-grid-community": "^31.1.1", + "ag-grid-react": "^31.1.1", "core-js": "^3.6.4", "notistack": "^3.0.0", "prop-types": "^15.7.2", @@ -3588,39 +3589,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, - "node_modules/@mui/x-data-grid": { - "version": "6.19.3", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.3.tgz", - "integrity": "sha512-RHt+MhTgvpXTWY0MYvzSNLF8npo+mlmWuTO+qKRt42Zj634IlUYDwW5jjQ9fWZnIpWJLunw253KqHoAlSAOXaw==", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@mui/utils": "^5.14.16", - "clsx": "^2.0.0", - "prop-types": "^15.8.1", - "reselect": "^4.1.8" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@mui/material": "^5.4.1", - "@mui/system": "^5.4.1", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, - "node_modules/@mui/x-data-grid/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "engines": { - "node": ">=6" - } - }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4919,6 +4887,24 @@ "node": ">=8.9" } }, + "node_modules/ag-grid-community": { + "version": "31.1.1", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.1.1.tgz", + "integrity": "sha512-tiQZ7VQ07yJScTMIQpaYoUMPgiyXMwYDcwTxe4riRrcYGTg0e258XEihoPUZFejR60P1fYWMxdJaR2JUnyhGrg==" + }, + "node_modules/ag-grid-react": { + "version": "31.1.1", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.1.1.tgz", + "integrity": "sha512-aaDMSP8MGhoXL5M9c4UmhBClRlc3mEMMC0E0/1mhXU6bdiz0QxXT/xQtDe3DFC62VrtXVda9x20Lpj6p6Bfy8g==", + "dependencies": { + "ag-grid-community": "31.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", diff --git a/package.json b/package.json index 1b02fa2..1647268 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.75", "@mui/material": "^5.5.3", - "@mui/x-data-grid": "^6.19.3", "@reduxjs/toolkit": "^1.2.3", "@types/core-js": "^2.5.8", "@types/node": "^18.19.3", @@ -29,6 +28,8 @@ "@types/react": "^18.2.9", "@types/react-dom": "^18.2.4", "@types/react-window": "^1.8.8", + "ag-grid-community": "^31.1.1", + "ag-grid-react": "^31.1.1", "core-js": "^3.6.4", "notistack": "^3.0.0", "prop-types": "^15.7.2", diff --git a/src/components/App/app-wrapper.tsx b/src/components/App/app-wrapper.tsx index 1cd5b9a..5e030fe 100644 --- a/src/components/App/app-wrapper.tsx +++ b/src/components/App/app-wrapper.tsx @@ -16,10 +16,6 @@ import { ThemeProvider, } from '@mui/material/styles'; import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale'; -import { - enUS as MuiDataGridEnUS, - frFR as MuiDataGridFrFR, -} from '@mui/x-data-grid'; import { card_error_boundary_en, card_error_boundary_fr, @@ -69,6 +65,7 @@ const lightTheme: ThemeOptions = { color: 'blue', }, mapboxStyle: 'mapbox://styles/mapbox/light-v9', + agGridTheme: 'ag-theme-alpine', }; const darkTheme: ThemeOptions = { @@ -95,14 +92,14 @@ const darkTheme: ThemeOptions = { color: 'green', }, mapboxStyle: 'mapbox://styles/mapbox/dark-v9', + agGridTheme: 'ag-theme-alpine-dark', }; const getMuiTheme = (theme: unknown, locale: unknown): Theme => { return responsiveFontSizes( createTheme( theme === LIGHT_THEME ? lightTheme : darkTheme, - locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS, // MUI core translations - locale === LANG_FRENCH ? MuiDataGridFrFR : MuiDataGridEnUS // MUI x-data-grid translations + locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS // MUI core translations ) ); }; diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx new file mode 100644 index 0000000..2e43a63 --- /dev/null +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -0,0 +1,276 @@ +import 'ag-grid-community/styles/ag-grid.min.css'; +import 'ag-grid-community/styles/ag-theme-alpine-no-font.min.css'; +import 'ag-grid-community/styles/agGridMaterialFont.min.css'; + +import { + ForwardedRef, + forwardRef, + FunctionComponent, + JSXElementConstructor, + PropsWithoutRef, + ReactNode, + RefAttributes, + useImperativeHandle, + useMemo, + useRef, +} from 'react'; +import { Box, useTheme } from '@mui/material'; +import { AgGridReact } from 'ag-grid-react'; +import { CsvExportModule, ProcessCellForExportParams } from 'ag-grid-community'; +import { useIntl } from 'react-intl'; +import { AgGridProps } from './AgGrid.type'; +import { LANG_ENGLISH, LANG_FRENCH } from '@gridsuite/commons-ui'; +import { + AG_GRID_LOCALE_EN, + AgGridLocale, +} from '../../../translations/ag-grid/locale.en'; +import { AG_GRID_LOCALE_FR } from '../../../translations/ag-grid/locale.fr'; +import { + ProcessGroupHeaderForExportParams, + ProcessHeaderForExportParams, + ProcessRowGroupForExportParams, +} from 'ag-grid-community/dist/lib/interfaces/exportParams'; +import deepmerge from '@mui/utils/deepmerge/deepmerge'; + +const messages: Record = { + [LANG_ENGLISH]: AG_GRID_LOCALE_EN, + [LANG_FRENCH]: AG_GRID_LOCALE_FR, +}; + +type AccessibleAgGridReact = Omit< + AgGridReact, + 'apiListeners' | 'setGridApi' //private in class +>; +export type AgGridRef = Partial< + AccessibleAgGridReact +> & { + context?: TContext; +}; + +/* + * Restore lost generics from `forwardRef()`
+ * https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref + */ +type ForwardRef = typeof forwardRef; +type ForwardRefComponent = ReturnType>; +interface AgGridWithRef + extends FunctionComponent> { + < + TData, + TContext extends {}, + LdgCmpnt extends JSXElementConstructor, + NoCmpnt extends JSXElementConstructor + >( + props: PropsWithoutRef< + AgGridProps + > & + RefAttributes> + ): ReturnType< + ForwardRefComponent< + AgGridProps, + AgGridRef + > + >; +} + +//TODO @ag-grid-community/core +//TODO CsvExportModule +//TODO @ag-grid-community/react +//TODO ClientSideRowModelModule -> https://ag-grid.com/javascript-data-grid/client-side-model/ +export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< + TData, + TContext extends {} = {}, + LdgCmpnt extends JSXElementConstructor = any, + NoCmpnt extends JSXElementConstructor = any +>( + props: AgGridProps, + gridRef?: ForwardedRef> +): ReactNode { + const intl = useIntl(); + const theme = useTheme(); + + const agGridRef = useRef>(null); + useImperativeHandle( + gridRef, + () => ({ + ...((agGridRef.current ?? {}) as AgGridReact), + // destruct doesn't include functions, so we need to redeclare them + //apiListeners: agGridRef.current?.apiListeners, + registerApiListener: agGridRef.current?.registerApiListener, + //setGridApi: agGridRef.current?.setGridApi, + componentWillUnmount: agGridRef.current?.componentWillUnmount, + render: agGridRef.current?.render, + setState: agGridRef.current?.setState, + forceUpdate: agGridRef.current?.forceUpdate, + //... + context: agGridRef.current?.context as AgGridRef< + TData, + TContext + >['context'], + }), + [] + ); + + const translations = useMemo( + () => messages[intl.locale] ?? messages[intl.defaultLocale], + [intl.locale, intl.defaultLocale] + ); + + const customTheme = useMemo( + () => + deepmerge( + { + width: '100%', + height: '100%', + //@media print -> page-break-inside: avoid + }, + deepmerge(theme.agGridThemeOverride ?? {}, { + '--ag-icon-font-family': 'agGridMaterial !important', + '& *': { + '--ag-icon-font-family': 'agGridMaterial !important', + }, + }) + ), + [theme.agGridThemeOverride] + ); + /*const customContext = useMemo( + () => + ({ + ...(props.context ?? ({} as TContext)), + //TODO + } as TContext), + [props.context] + );*/ + + return ( + // wrapping container with theme & size + + + ref={agGridRef} + modules={[ + //ClientSideRowModelModule, + CsvExportModule, + ]} + localeText={translations} + /*getLocaleText={(params) => + intl.formatMessage( + { id: params.key, defaultMessage: params.defaultValue }, + Array.reduce( + params.variableValues ?? [], + (acc, value, idx, array) => ({ + ...acc, + [`var${idx}`]: value, + }), + {} + ) + ) + }*/ + {...props} //destruct props to optimize react props change detection + debug={ + process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug + } + //context={customContext} + defaultCsvExportParams={useSecuredCsvExportParams( + props.defaultCsvExportParams + )} + reactiveCustomComponents //AG Grid: Using custom components without `reactiveCustomComponents = true` is deprecated. + /> + + ); +}); +export default AgGrid; +/*export default function AgGrid({ + ref, + ...props +}: AgGridProps & { + ref: Ref>; +}) { + return ref={ref} {...props} />; +}*/ + +function counterCsvInjection(value: string): string { + return value ? value.replace(/^[+\-=@\t\r]/, '_') : value; +} + +/* + * https://www.ag-grid.com/react-data-grid/csv-export/#security-concerns + */ +function useSecuredCsvExportParams( + defaultCsvExportParams: AgGridProps< + TData, + TContext + >['defaultCsvExportParams'] +) { + const processCellCallback = defaultCsvExportParams?.processCellCallback; + const customProcessCellCallback = useMemo( + () => + (processCellCallback && + ((params: ProcessCellForExportParams) => { + let result = processCellCallback?.(params); + return result ? counterCsvInjection(result) : result; + })) || + undefined, + [processCellCallback] + ); + + const processHeaderCallback = defaultCsvExportParams?.processHeaderCallback; + const customProcessHeaderCallback = useMemo( + () => + (processHeaderCallback && + ((params: ProcessHeaderForExportParams) => { + let result = processHeaderCallback?.(params); + return result ? counterCsvInjection(result) : result; + })) || + undefined, + [processHeaderCallback] + ); + + const processGroupHeaderCallback = + defaultCsvExportParams?.processGroupHeaderCallback; + const customProcessGroupHeaderCallback = useMemo( + () => + (processGroupHeaderCallback && + (( + params: ProcessGroupHeaderForExportParams + ) => { + let result = processGroupHeaderCallback?.(params); + return result ? counterCsvInjection(result) : result; + })) || + undefined, + [processGroupHeaderCallback] + ); + + const processRowGroupCallback = + defaultCsvExportParams?.processRowGroupCallback; + const customProcessRowGroupCallback = useMemo( + () => + (processRowGroupCallback && + ((params: ProcessRowGroupForExportParams) => { + let result = processRowGroupCallback?.(params); + return result ? counterCsvInjection(result) : result; + })) || + undefined, + [processRowGroupCallback] + ); + + return useMemo( + () => + defaultCsvExportParams === undefined + ? undefined + : { + ...defaultCsvExportParams, + processCellCallback: customProcessCellCallback, + processHeaderCallback: customProcessHeaderCallback, + processGroupHeaderCallback: + customProcessGroupHeaderCallback, + processRowGroupCallback: customProcessRowGroupCallback, + }, + [ + customProcessCellCallback, + customProcessGroupHeaderCallback, + customProcessHeaderCallback, + customProcessRowGroupCallback, + defaultCsvExportParams, + ] + ); +} diff --git a/src/components/Grid/AgGrid/AgGrid.type.ts b/src/components/Grid/AgGrid/AgGrid.type.ts new file mode 100644 index 0000000..9dc2f95 --- /dev/null +++ b/src/components/Grid/AgGrid/AgGrid.type.ts @@ -0,0 +1,723 @@ +import { + ColDef, + GridOptions, + ICellEditorComp, + ICellEditorParams, + ICheckboxCellRendererParams, + IDateCellEditorParams, + IDateFilterParams, + IDateStringCellEditorParams, + IGroupCellRendererParams, + ILargeTextEditorParams, + INumberCellEditorParams, + INumberFilterParams, + INumberFloatingFilterParams, + ISelectCellEditorParams, + ITextCellEditorParams, + ITextFilterParams, + ITextFloatingFilterParams, +} from 'ag-grid-community'; +import { + GetRowIdParams, + IsExternalFilterPresentParams, + IsFullWidthRowParams, + NavigateToNextCellParams, + NavigateToNextHeaderParams, + PaginationNumberFormatterParams, + PostSortRowsParams, + ProcessRowParams, + ProcessUnpinnedColumnsParams, + RowHeightParams, + TabToNextCellParams, + TabToNextHeaderParams, +} from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; +import { Column } from 'ag-grid-community/dist/lib/entities/column'; +import { + LoadingCellRendererSelectorResult, + RowClassParams, + RowStyle, +} from 'ag-grid-community/dist/lib/entities/gridOptions'; +import { HeaderPosition } from 'ag-grid-community/dist/lib/headerRendering/common/headerPosition'; +import { CellPosition } from 'ag-grid-community/dist/lib/entities/cellPositionUtils'; +import { + AsyncTransactionsFlushed, + BodyScrollEndEvent, + BodyScrollEvent, + CellClickedEvent, + CellContextMenuEvent, + CellDoubleClickedEvent, + CellEditingStartedEvent, + CellEditingStoppedEvent, + CellEditRequestEvent, + CellFocusedEvent, + CellKeyDownEvent, + CellMouseDownEvent, + CellMouseOutEvent, + CellMouseOverEvent, + CellValueChangedEvent, + ColumnEverythingChangedEvent, + ColumnGroupOpenedEvent, + ColumnHeaderClickedEvent, + ColumnHeaderContextMenuEvent, + ColumnHeaderMouseLeaveEvent, + ColumnHeaderMouseOverEvent, + ColumnMovedEvent, + ColumnPinnedEvent, + ColumnPivotChangedEvent, + ColumnPivotModeChangedEvent, + ColumnResizedEvent, + ColumnValueChangedEvent, + ColumnVisibleEvent, + ComponentStateChangedEvent, + DisplayedColumnsChangedEvent, + DragStartedEvent, + DragStoppedEvent, + FilterChangedEvent, + FilterModifiedEvent, + FilterOpenedEvent, + FirstDataRenderedEvent, + FullWidthCellKeyDownEvent, + GridColumnsChangedEvent, + GridPreDestroyedEvent, + GridReadyEvent, + GridSizeChangedEvent, + ModelUpdatedEvent, + NewColumnsLoadedEvent, + PaginationChangedEvent, + PinnedRowDataChangedEvent, + RedoEndedEvent, + RedoStartedEvent, + RowClickedEvent, + RowDataUpdatedEvent, + RowDoubleClickedEvent, + RowDragEvent, + RowEditingStartedEvent, + RowEditingStoppedEvent, + RowSelectedEvent, + RowValueChangedEvent, + SelectionChangedEvent, + SortChangedEvent, + StateUpdatedEvent, + TooltipHideEvent, + TooltipShowEvent, + UndoEndedEvent, + UndoStartedEvent, + ViewportChangedEvent, + VirtualColumnsChangedEvent, + VirtualRowRemovedEvent, +} from 'ag-grid-community/dist/lib/events'; +import { ColGroupDef } from 'ag-grid-community/dist/lib/entities/colDef'; +import { RowModelType } from 'ag-grid-community/dist/lib/interfaces/iRowModel'; +import { ILoadingCellRendererParams } from 'ag-grid-community/dist/lib/rendering/cellRenderers/loadingCellRenderer'; +import { JSXElementConstructor } from 'react'; +import { + CustomLoadingOverlayProps, + CustomNoRowsOverlayProps, +} from 'ag-grid-react'; +import { + ICellRenderer, + ICellRendererParams, +} from 'ag-grid-community/dist/lib/rendering/cellRenderers/iCellRenderer'; +import { IComponent } from 'ag-grid-community/dist/lib/interfaces/iComponent'; +import { + IHeader, + IHeaderParams, +} from 'ag-grid-community/dist/lib/headerRendering/cells/column/headerComp'; +import { LiteralUnion } from '../../../utils/types'; +import { + IFilter, + IFilterParams, +} from 'ag-grid-community/dist/lib/interfaces/iFilter'; +import { + IFloatingFilter, + IFloatingFilterParams, +} from 'ag-grid-community/dist/lib/filter/floating/floatingFilter'; +import { ITooltipParams } from 'ag-grid-community/dist/lib/rendering/tooltipComponent'; + +type JsxConstructorParameter> = + Cmpnt extends abstract new (...args: any) => any + ? ConstructorParameters[0] + : Cmpnt extends (...args: any) => any + ? Parameters[0] + : unknown; + +type JsxConstructorReturnType> = + Cmpnt extends abstract new (...args: any) => any + ? InstanceType + : Cmpnt extends (...args: any) => any + ? ReturnType + : unknown; + +/* + * Override implicit "any" generics and remove deprecated & enterprise/paid options + * https://www.ag-grid.com/react-data-grid/grid-options/ + * https://www.ag-grid.com/react-data-grid/grid-events/ + */ +/** + * Filtered & fixed version of GridOptions + * @template TData the datatype of rows + * @template TContext the context content given by user to the grid + * @template LdgCmpnt the component use for the loading overlay + * @template NoCmpnt the component use for the no-row overlay + */ +export interface AgGridProps< + TData, + TContext extends {}, + //TValue = any, + LdgCmpnt extends JSXElementConstructor = any, + NoCmpnt extends JSXElementConstructor = any +> extends Omit< + GridOptions, + // deprecated options + | 'enterMovesDown' + | 'enterMovesDownAfterEdit' + | 'excludeHiddenColumnsFromQuickFilter' + | 'advancedFilterModel' + | 'enableChartToolPanelsButton' + | 'suppressParentsInRowNodes' + | 'suppressAsyncEvents' + | 'suppressAggAtRootLevel' + | 'cellFlashDelay' + | 'cellFadeDelay' + | 'suppressGroupMaintainValueType' + | 'suppressServerSideInfiniteScroll' + | 'serverSideFilterAllLevels' + | 'serverSideSortOnServer' + | 'serverSideFilterOnServer' + | 'functionsPassive' + | 'reactiveCustomComponents' + | 'onColumnRowGroupChangeRequest' + | 'onColumnPivotChangeRequest' + | 'onColumnValueChangeRequest' + | 'onColumnAggFuncChangeRequest' + | 'api' + | 'columnApi' + // enterprise features... + | 'statusBar' + // enterprise features "Tool Panels" + | 'sideBar' + | 'onToolPanelVisibleChanged' + | 'onToolPanelSizeChanged' + // enterprise feature "Tool Panels: Context Menu" + | 'getContextMenuItems' + | 'suppressContextMenu' + //| 'preventDefaultOnContextMenu' + | 'allowContextMenuWithControlKey' + | 'popupParent' + // enterprise feature "Tool Panels: Column Menu" + | 'getMainMenuItems' + | 'columnMenu' + | 'suppressMenuHide' + | 'postProcessPopup' + | 'onColumnMenuVisibleChanged' + // enterprise feature "Clipboard" + | 'copyHeadersToClipboard' + | 'copyGroupHeadersToClipboard' + | 'clipboardDelimiter' + | 'suppressCutToClipboard' + | 'suppressCopyRowsToClipboard' + | 'suppressCopySingleCellRanges' + | 'suppressLastEmptyLineOnPaste' + | 'suppressClipboardPaste' + | 'suppressClipboardApi' + | 'processCellForClipboard' + | 'processHeaderForClipboard' + | 'processGroupHeaderForClipboard' + | 'processCellFromClipboard' + | 'sendToClipboard' + | 'processDataFromClipboard' + | 'enableCellTextSelection' + | 'onCutStart' + | 'onCutEnd' + | 'onPasteStart' + | 'onPasteEnd' + // enterprise feature "Excel Export" + | 'defaultExcelExportParams' + | 'suppressExcelExport' + | 'excelStyles' + // enterprise feature "Tree Data" + | 'excludeChildrenWhenTreeDataFiltering' + // enterprise feature "Advanced Filter" + | 'enableAdvancedFilter' + | 'includeHiddenColumnsInAdvancedFilter' + | 'advancedFilterParent' + | 'advancedFilterBuilderParams' + | 'onAdvancedFilterBuilderVisibleChanged' + // enterprise feature "Integrated Charts" + | 'enableCharts' + | 'suppressChartToolPanelsButton' + | 'getChartToolbarItems' + | 'createChartContainer' + | 'chartThemes' + | 'customChartThemes' + | 'chartThemeOverrides' + | 'chartToolPanelsDef' + | 'onChartCreated' + | 'onChartRangeSelectionChanged' + | 'onChartOptionsChanged' + | 'onChartDestroyed' + // enterprise feature "Master Detail" + | 'masterDetail' + | 'isRowMaster' + | 'detailCellRenderer' + | 'detailCellRendererParams' + | 'detailRowHeight' + | 'detailRowAutoHeight' + | 'embedFullWidthRows' + | 'keepDetailRows' + | 'keepDetailRowsCount' + // enterprise features "Pivot" and "Aggregation" + | 'pivotMode' + | 'pivotPanelShow' + | 'pivotDefaultExpanded' + | 'pivotColumnGroupTotals' + | 'pivotRowTotals' + | 'pivotSuppressAutoColumn' + | 'processPivotResultColDef' + | 'processPivotResultColGroupDef' + | 'suppressExpandablePivotGroups' + | 'functionsReadOnly' + | 'aggFuncs' + | 'getGroupRowAgg' + | 'suppressAggFuncInHeader' + | 'alwaysAggregateAtRootLevel' + | 'aggregateOnlyChangedColumns' + | 'suppressAggFilteredOnly' + | 'groupAggFiltering' + | 'removePivotHeaderRowWhenSingleValueColumn' + // enterprise feature "Row Grouping" + | 'groupDisplayType' + | 'groupDefaultExpanded' + | 'autoGroupColumnDef' + | 'groupMaintainOrder' + | 'groupSelectsChildren' + | 'groupLockGroupColumns' + | 'groupIncludeFooter' + | 'groupIncludeTotalFooter' + | 'groupSuppressBlankHeader' + | 'groupSelectsFiltered' + | 'showOpenedGroup' + | 'isGroupOpenByDefault' + | 'initialGroupOrderComparator' + | 'groupRemoveSingleChildren' + | 'groupRemoveLowestSingleChildren' + | 'groupHideOpenParents' + | 'groupAllowUnbalanced' + | 'rowGroupPanelShow' + | 'rowGroupPanelSuppressSort' + | 'groupRowRenderer' + | 'groupRowRendererParams' + | 'suppressDragLeaveHidesColumns' + | 'suppressGroupRowsSticky' + | 'suppressRowGroupHidesColumns' + | 'suppressMakeColumnVisibleAfterUnGroup' + | 'treeData' + | 'getDataPath' + | 'onColumnRowGroupChanged' + | 'onRowGroupOpened' + | 'onExpandOrCollapseAll' + // enterprise feature "RowModel: Server-Side" + | 'serverSideDatasource' + | 'cacheBlockSize' + | 'maxBlocksInCache' + | 'maxConcurrentDatasourceRequests' + | 'blockLoadDebounceMillis' + | 'purgeClosedRowNodes' + | 'serverSidePivotResultFieldSeparator' + | 'serverSideSortAllLevels' + | 'serverSideEnableClientSideSort' + | 'serverSideOnlyRefreshFilteredGroups' + | 'serverSideInitialRowCount' + | 'getChildCount' + | 'getServerSideGroupLevelParams' + | 'isServerSideGroupOpenByDefault' + | 'isApplyServerSideTransaction' + | 'isServerSideGroup' + | 'getServerSideGroupKey' + | 'onStoreRefreshed' + // enterprise feature "RowModel: Viewport" + | 'viewportDatasource' + | 'viewportRowModelPageSize' + | 'viewportRowModelBufferSize' + // enterprise feature "Range selection" + | 'suppressMultiRangeSelection' + | 'enableRangeSelection' + | 'enableRangeHandle' + | 'enableFillHandle' + | 'fillHandleDirection' + | 'fillOperation' + | 'suppressClearOnFillReduction' + | 'onRangeDeleteStart' + | 'onRangeDeleteEnd' + | 'onRangeSelectionChanged' + // managed by component + | 'localeText' + | 'getLocaleText' + /*| 'overlayLoadingTemplate' + | 'loadingOverlayComponent' + | 'loadingOverlayComponentParams' + | 'suppressLoadingOverlay' + | 'overlayNoRowsTemplate' + | 'noRowsOverlayComponent' + | 'noRowsOverlayComponentParams' + | 'suppressNoRowsOverlay'*/ + > { + context?: TContext; + + loadingOverlayComponent?: ( + props: CustomLoadingOverlayProps & + JsxConstructorParameter + ) => JsxConstructorReturnType; + loadingOverlayComponentParams?: JsxConstructorParameter; + + noRowsOverlayComponent?: ( + props: CustomNoRowsOverlayProps & + JsxConstructorParameter + ) => JsxConstructorReturnType; + noRowsOverlayComponentParams?: JsxConstructorParameter; + + /* + * some modes are for enterprise features + * https://www.ag-grid.com/react-data-grid/row-models/ + */ + rowModelType?: Exclude; + + /* + * add missing + */ + //TODO manage TValue correctly + + columnDefs?: + | ( + | AgColDef + | AgColGroupDef + )[] + | null; + defaultColDef?: AgColDef; + autoGroupColumnDef?: AgColDef; + + columnTypes?: { + [key: string]: AgColTypeDef; + }; + + processPivotResultColDef?: ( + colDef: AgColDef + ) => void; + + /* + * add missing + */ + + loadingCellRendererSelector?: ( + params: ILoadingCellRendererParams + ) => LoadingCellRendererSelectorResult | undefined; + rowClassRules?: { + [cssClassName: string]: + | ((params: RowClassParams) => boolean) + | string; + }; + getRowId?: (params: GetRowIdParams) => string; + + processUnpinnedColumns?: ( + params: ProcessUnpinnedColumnsParams + ) => Column[]; + isExternalFilterPresent?: ( + params: IsExternalFilterPresentParams + ) => boolean; + navigateToNextHeader?: ( + params: NavigateToNextHeaderParams + ) => HeaderPosition | null; + tabToNextHeader?: ( + params: TabToNextHeaderParams + ) => HeaderPosition | null; + navigateToNextCell?: ( + params: NavigateToNextCellParams + ) => CellPosition | null; + tabToNextCell?: ( + params: TabToNextCellParams + ) => CellPosition | null; + paginationNumberFormatter?: ( + params: PaginationNumberFormatterParams + ) => string; + processRowPostCreate?: (params: ProcessRowParams) => void; + postSortRows?: (params: PostSortRowsParams) => void; + getRowStyle?: ( + params: RowClassParams + ) => RowStyle | undefined; + getRowClass?: ( + params: RowClassParams + ) => string | string[] | undefined; + getRowHeight?: ( + params: RowHeightParams + ) => number | undefined | null; + isFullWidthRow?: (params: IsFullWidthRowParams) => boolean; + + // TODO remove enterprise related events + onColumnVisible?(event: ColumnVisibleEvent): void; + onColumnPinned?(event: ColumnPinnedEvent): void; + onColumnResized?(event: ColumnResizedEvent): void; + onColumnMoved?(event: ColumnMovedEvent): void; + onColumnValueChanged?( + event: ColumnValueChangedEvent + ): void; + onColumnPivotModeChanged?( + event: ColumnPivotModeChangedEvent + ): void; + onColumnPivotChanged?( + event: ColumnPivotChangedEvent + ): void; + onColumnGroupOpened?(event: ColumnGroupOpenedEvent): void; + onNewColumnsLoaded?(event: NewColumnsLoadedEvent): void; + onGridColumnsChanged?( + event: GridColumnsChangedEvent + ): void; + onDisplayedColumnsChanged?( + event: DisplayedColumnsChangedEvent + ): void; + onVirtualColumnsChanged?( + event: VirtualColumnsChangedEvent + ): void; + onColumnEverythingChanged?( + event: ColumnEverythingChangedEvent + ): void; + onColumnHeaderMouseOver?( + event: ColumnHeaderMouseOverEvent + ): void; + onColumnHeaderMouseLeave?( + event: ColumnHeaderMouseLeaveEvent + ): void; + onColumnHeaderClicked?( + event: ColumnHeaderClickedEvent + ): void; + onColumnHeaderContextMenu?( + event: ColumnHeaderContextMenuEvent + ): void; + onComponentStateChanged?( + event: ComponentStateChangedEvent + ): void; + onCellValueChanged?(event: CellValueChangedEvent): void; + onCellEditRequest?(event: CellEditRequestEvent): void; + onRowValueChanged?(event: RowValueChangedEvent): void; + onCellEditingStarted?( + event: CellEditingStartedEvent + ): void; + onCellEditingStopped?( + event: CellEditingStoppedEvent + ): void; + onRowEditingStarted?(event: RowEditingStartedEvent): void; + onRowEditingStopped?(event: RowEditingStoppedEvent): void; + onUndoStarted?(event: UndoStartedEvent): void; + onUndoEnded?(event: UndoEndedEvent): void; + onRedoStarted?(event: RedoStartedEvent): void; + onRedoEnded?(event: RedoEndedEvent): void; + onFilterOpened?(event: FilterOpenedEvent): void; + onFilterChanged?(event: FilterChangedEvent): void; + onFilterModified?(event: FilterModifiedEvent): void; + onCellKeyDown?( + event: + | CellKeyDownEvent + | FullWidthCellKeyDownEvent + ): void; + onGridReady?(event: GridReadyEvent): void; + onGridPreDestroyed?(event: GridPreDestroyedEvent): void; + onFirstDataRendered?(event: FirstDataRenderedEvent): void; + onGridSizeChanged?(event: GridSizeChangedEvent): void; + onModelUpdated?(event: ModelUpdatedEvent): void; + onVirtualRowRemoved?(event: VirtualRowRemovedEvent): void; + onViewportChanged?(event: ViewportChangedEvent): void; + onBodyScroll?(event: BodyScrollEvent): void; + onBodyScrollEnd?(event: BodyScrollEndEvent): void; + onDragStarted?(event: DragStartedEvent): void; + onDragStopped?(event: DragStoppedEvent): void; + onStateUpdated?(event: StateUpdatedEvent): void; + onPaginationChanged?(event: PaginationChangedEvent): void; + onRowDragEnter?(event: RowDragEvent): void; + onRowDragMove?(event: RowDragEvent): void; + onRowDragLeave?(event: RowDragEvent): void; + onRowDragEnd?(event: RowDragEvent): void; + onPinnedRowDataChanged?( + event: PinnedRowDataChangedEvent + ): void; + onRowDataUpdated?(event: RowDataUpdatedEvent): void; + onAsyncTransactionsFlushed?(event: AsyncTransactionsFlushed): void; + onCellClicked?(event: CellClickedEvent): void; + onCellDoubleClicked?(event: CellDoubleClickedEvent): void; + onCellFocused?(event: CellFocusedEvent): void; + onCellMouseOver?(event: CellMouseOverEvent): void; + onCellMouseOut?(event: CellMouseOutEvent): void; + onCellMouseDown?(event: CellMouseDownEvent): void; + onRowClicked?(event: RowClickedEvent): void; + onRowDoubleClicked?(event: RowDoubleClickedEvent): void; + onRowSelected?(event: RowSelectedEvent): void; + onSelectionChanged?(event: SelectionChangedEvent): void; + onCellContextMenu?(event: CellContextMenuEvent): void; + onTooltipShow?(event?: TooltipShowEvent): void; + onTooltipHide?(event?: TooltipHideEvent): void; + onSortChanged?(event: SortChangedEvent): void; +} + +export declare type AgColTypeDef = Omit< + AgColDef, + 'type' +>; + +export interface AgColGroupDef extends ColGroupDef { + children: ( + | AgColDef + | AgColGroupDef + )[]; + + tooltipComponent?: string | ITooltipComp; + tooltipComponentParams?: ITooltipParams< + TData, + /*TValue=*/ any, + TContext + > & { + [key: string]: any; + }; +} +export interface ITooltipComp + extends IComponent> {} + +/* + * Remove deprecated & enterprise/paid options + * https://www.ag-grid.com/react-data-grid/column-properties/ + */ +export interface AgColDef + extends Omit< + ColDef, + // deprecated options + | 'columnsMenuParams' + | 'suppressMenu' + // enterprise feature "Range selection" + | 'suppressFillHandle' + // enterprise feature "Context Menu" + | 'contextMenuItems' + | 'menuTabs' + | 'columnChooserParams' + | 'mainMenuItems' + | 'suppressHeaderMenuButton' + | 'suppressHeaderFilterButton' + | 'suppressHeaderContextMenu' + // enterprise feature "Integrated Charts" + | 'chartDataType' + // enterprise features "Pivot" and "Aggregation" + | 'pivot' + | 'pivotIndex' + //| 'pivotKeys' + | 'pivotComparator' + //| 'pivotValueColumn' + //| 'pivotTotalColumnIds' + | 'enablePivot' + | 'initialPivot' + | 'initialPivotIndex' + // enterprise feature "Row Grouping" + | 'rowGroup' + | 'initialRowGroup' + | 'rowGroupIndex' + | 'initialRowGroupIndex' + | 'enableRowGroup' + | 'showRowGroup' + | 'enableValue' + | 'aggFunc' + | 'initialAggFunc' + | 'allowedAggFuncs' + | 'defaultAggFunc' + > { + cellEditor?: + | LiteralUnion< + | 'agTextCellEditor' + | 'agSelectCellEditor' + | 'agLargeTextCellEditor' + | 'agNumberCellEditor' + | 'agDateCellEditor' + | 'agDateStringCellEditor' + | 'agCheckboxCellEditor' + > + | ICellEditorComp; + //TODO discriminative conditional type on cellEditor value + cellEditorParams?: + | (ICellEditorParams & { [key: string]: any }) + | ITextCellEditorParams + | ISelectCellEditorParams + | ILargeTextEditorParams + | INumberCellEditorParams + | IDateCellEditorParams + | IDateStringCellEditorParams + | ICheckboxCellRendererParams; + + headerComponent?: string | IHeaderComp; + headerComponentParams?: IHeaderParams & { + [key: string]: any; + }; + + cellRenderer?: + | LiteralUnion< + | 'agAnimateShowChangeCellRenderer' + | 'agAnimateSlideCellRenderer' + | 'agGroupCellRenderer' + | 'agCheckboxCellRenderer' + > + | ICellRendererComp + | ICellRendererFunc; + //TODO discriminative conditional type on cellRenderer value + cellRendererParams?: + | (Partial> & { [key: string]: any }) + | IGroupCellRendererParams + | ICheckboxCellRendererParams; + + cellDataType?: + | boolean + | LiteralUnion< + 'text' | 'number' | 'boolean' | 'date' | 'dateString' | 'object' + >; + + tooltipComponent?: string | ITooltipComp; + tooltipComponentParams?: ITooltipParams & { + [key: string]: any; + }; + + filter?: + | true + | LiteralUnion< + | 'agNumberColumnFilter' + | 'agTextColumnFilter' + | 'agDateColumnFilter' + > + | IFilterComp; + //TODO discriminative conditional type on filter value + filterParams?: + | (IFilterParams & { [key: string]: any }) + | INumberFilterParams + | ITextFilterParams + | IDateFilterParams; + + floatingFilterComponent?: + | true + | LiteralUnion< + | 'agTextColumnFloatingFilter' + | 'agNumberColumnFloatingFilter' + | 'agDateColumnFloatingFilter' + > + | IFloatingFilterComp; + //TODO discriminative conditional type on floatingFilterComponent value + floatingFilterComponentParams?: + | (IFloatingFilterParams & { [key: string]: any }) + | ITextFloatingFilterParams + | INumberFloatingFilterParams; +} +interface ICellRendererComp + extends IComponent>, + ICellRenderer {} +type ICellRendererFunc = ( + params: ICellRendererParams +) => HTMLElement | string; +interface IHeaderComp + extends IHeader, + IComponent> {} +export interface IFilterComp + extends IComponent>, + IFilter {} +export interface IFloatingFilterComp

+ extends IFloatingFilter

, + IComponent> {} diff --git a/src/components/Grid/AgGrid/ag-theme-alpine.d.ts b/src/components/Grid/AgGrid/ag-theme-alpine.d.ts new file mode 100644 index 0000000..9852db6 --- /dev/null +++ b/src/components/Grid/AgGrid/ag-theme-alpine.d.ts @@ -0,0 +1,149 @@ +// list taken from ag-grid-community/styles/ag-theme-alpine-no-font.css +import { PaletteMode } from '@mui/material'; + +type AgGridClassesCommon = + | '.ag-advanced-filter-builder-button' + | '.ag-center-cols-container' + | '.ag-center-cols-viewport' + | '.ag-chart-menu-close' + | '.ag-chart-menu-icon' + | '.ag-chart-mini-thumbnail' + | '.ag-chart-settings-card-item' + | '.ag-chart-settings-nav-bar' + | '.ag-chart-settings-next' + | '.ag-chart-settings-prev' + | '.ag-charts-data-group-title-bar' + | '.ag-charts-format-sub-level-group' + | '.ag-charts-format-sub-level-group-container' + | '.ag-charts-format-sub-level-group-item' + | '.ag-charts-format-sub-level-group-title-bar' + | '.ag-charts-format-top-level-group-title-bar' + | '.ag-charts-format-top-level-group-toolbar' + | '.ag-charts-settings-group-title-bar' + | '.ag-column-drop-cell-button' + | '.ag-column-drop-empty-message' + | '.ag-column-drop-vertical' + | '.ag-column-drop-vertical-empty-message' + | '.ag-column-drop-vertical-title-bar' + | '.ag-column-group-icons' + | '.ag-column-select' + | '.ag-column-select-column-readonly' + | '.ag-column-select-header-icon' + | '.ag-date-time-list-page-entry-is-current' + | '.ag-dnd-ghost' + | '.ag-filter-active' + | '.ag-filter-toolpanel-expand' + | '.ag-filter-toolpanel-group-container' + | '.ag-filter-toolpanel-header' + | '.ag-filter-toolpanel-instance-filter' + | '.ag-filter-toolpanel-search' + | '.ag-floating-filter-button-button' + | '.ag-group-contracted' + | '.ag-group-expanded' + | '.ag-group-title-bar-icon' + | '.ag-header-cell-filter-button' + | '.ag-header-cell-menu-button' + | '.ag-header-expand-icon' + | '.ag-header-row' + | '.ag-icon' + | '.ag-icon-filter' + | '.ag-icon-grip' + | '.ag-layout-auto-height' + | '.ag-layout-print' + | '.ag-ltr' + | '.ag-menu' + | '.ag-menu-header' + | '.ag-multi-filter-group-title-bar' + | '.ag-not-selected' + | '.ag-overlay-no-rows-wrapper' + | '.ag-paging-number' + | '.ag-paging-row-summary-panel-number' + | '.ag-panel-content-wrapper' + | '.ag-panel-title-bar-button' + | '.ag-panel-title-bar-title' + | '.ag-row' + | '.ag-rtl' + | '.ag-set-filter-group-icons' + | '.ag-set-filter-list' + | '.ag-side-button-button' + | '.ag-side-buttons' + | '.ag-standard-button' + | '.ag-status-bar' + | '.ag-status-name-value-value' + | '.ag-tab' + | '.ag-tab-selected' + | '.ag-tabs-header'; +type AgGridClassesLight = '.ag-theme-alpine' | AgGridClassesCommon; +type AgGridClassesDark = '.ag-theme-alpine-dark' | AgGridClassesCommon; +export type AgGridClasses = Theme extends 'dark' + ? AgGridClassesDark + : AgGridClassesLight; + +export type AgGridCss = + | '--ag-advanced-filter-builder-indent-size' + | '--ag-advanced-filter-column-pill-color' + | '--ag-advanced-filter-join-pill-color' + | '--ag-advanced-filter-option-pill-color' + | '--ag-advanced-filter-value-pill-color' + | '--ag-alpine-active-color' + | '--ag-background-color' + | '--ag-border-color' + | '--ag-border-radius' + | '--ag-borders' + | '--ag-borders-side-button' + | '--ag-card-shadow' + | '--ag-cell-horizontal-padding' + | '--ag-cell-widget-spacing' + | '--ag-checkbox-background-color' + | '--ag-checkbox-checked-color' + | '--ag-checkbox-unchecked-color' + | '--ag-chip-background-color' + | '--ag-column-hover-color' + | '--ag-column-select-indent-size' + | '--ag-control-panel-background-color' + | '--ag-disabled-foreground-color' + | '--ag-font-family' + | '--ag-font-size' + | '--ag-foreground-color' + | '--ag-grid-size' + | '--ag-header-background-color' + | '--ag-header-column-resize-handle-display' + | '--ag-header-column-resize-handle-height' + | '--ag-header-column-resize-handle-width' + | '--ag-header-height' + | '--ag-icon-font-family' + | '--ag-icon-size' + | '--ag-input-border-color' + | '--ag-input-border-color-invalid' + | '--ag-input-disabled-background-color' + | '--ag-input-disabled-border-color' + | '--ag-input-focus-border-color' + | '--ag-input-focus-box-shadow' + | '--ag-invalid-color' + | '--ag-list-item-height' + | '--ag-menu-background-color' + | '--ag-modal-overlay-background-color' + | '--ag-odd-row-background-color' + | '--ag-panel-background-color' + | '--ag-popup-shadow' + | '--ag-range-selection-background-color' + | '--ag-range-selection-border-color' + | '--ag-row-height' + | '--ag-row-hover-color' + | '--ag-secondary-border-color' + | '--ag-secondary-foreground-color' + | '--ag-selected-row-background-color' + | '--ag-selected-tab-underline-color' + | '--ag-selected-tab-underline-transition-speed' + | '--ag-selected-tab-underline-width' + | '--ag-set-filter-indent-size' + | '--ag-side-bar-panel-width' + | '--ag-side-button-selected-background-color' + | '--ag-subheader-background-color' + | '--ag-tab-min-width' + | '--ag-toggle-button-height' + | '--ag-toggle-button-width' + | '--ag-tooltip-background-color' + | '--ag-widget-container-horizontal-padding' + | '--ag-widget-container-vertical-padding' + | '--ag-widget-vertical-spacing'; diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx new file mode 100644 index 0000000..dc72dfc --- /dev/null +++ b/src/components/Grid/DataGrid.tsx @@ -0,0 +1,258 @@ +import { Divider, useForkRef } from '@mui/material'; +import NoRowsOverlay from './NoRowsOverlay'; +import { + Dispatch, + PropsWithChildren, + ReactElement, + RefObject, + SetStateAction, + useCallback, + useMemo, + useRef, + useState, +} from 'react'; +import { useSnackMessage } from '@gridsuite/commons-ui'; +import { AgColDef } from './AgGrid/AgGrid.type'; +import { AgGridRef } from './AgGrid/AgGrid'; +import Grid, { GridProps } from './Grid'; +import { + ComponentStateChangedEvent, + GridReadyEvent, + SelectionChangedEvent, +} from 'ag-grid-community/dist/lib/events'; +import { GridButtonRefresh } from './buttons/ButtonRefresh'; +import { GridButtonDelete } from './buttons/ButtonDelete'; +import { GridButtonAdd } from './buttons/ButtonAdd'; + +type NoRowOverlay = typeof NoRowsOverlay; +type FullDataGridProps = GridProps< + TData, + TContext, + NoRowOverlay +>; + +export type DataGridExposed = { + actionThenRefresh: (action: () => Promise) => void; +}; + +interface DataGridProps + extends Omit, 'rowData'> { + //context: NonNullable['context']>; //required + accessRef: RefObject>; + dataLoader: () => Promise; + removeElement?: (dataLine: TData) => Promise; + addBtn?: () => ReactElement; +} + +export type DataGridRef = AgGridRef< + TData, + TContext & DataGridExposed +>; + +const defaultColDef: AgColDef = { + editable: false, + resizable: true, + minWidth: 50, + cellRenderer: 'agAnimateSlideCellRenderer', //'agAnimateShowChangeCellRenderer' + showDisabledCheckboxes: true, + rowDrag: false, + sortable: true, + enableCellChangeFlash: process.env.REACT_APP_DEBUG_AGGRID === 'true', +}; + +/** + * When AgGridReact props change, maybe rowData after a refresh, show no-rows overlay in this case + * because code call hideOverlay from api... + */ +function onComponentStateChanged( + event: ComponentStateChangedEvent +): void { + if ( + event.api.getInfiniteRowCount()! > 0 || + event.api.getDisplayedRowCount() > 0 + ) { + event.api.showNoRowsOverlay(); + } else { + event.api.hideOverlay(); + } +} + +/* + * Exposed to grid pre-configuration: + * * common columns config + * * configuration with formatter i18n for columns with timestamp + * Add common buttons in toolbar (with management of states) + * Manage also the progressbar animation: + * * "loading" have two states: performing action, and loading/refreshing data + * * full flow state with (action, loader) = + * - isAction = true <=== start here with actionWithRefresh + * - gridApi.showLoadingOverlay() + * - action() + * - gridApi.hideOverlay() + * - isAction = false + * - gridApi.showLoadingOverlay() <=== start here with refresh + * - loadDataAndSave() + * - gridApi.hideOverlay() + */ +//TODO optionally save grid state to just show/hide in tabs without losing grid state +export default function DataGrid( + props: Readonly>> +): ReactElement { + const { + context, + accessRef, + dataLoader, + removeElement, + addBtn, + children, + ...gridProps + } = props; + + const { snackError } = useSnackMessage(); + const gridRef = useRef>(null); + const handleGridRef = useForkRef(accessRef, gridRef); + + const [data, setData] = useState(null); + const [rowsSelection, setRowsSelection] = useState([]); + + const [loadingAction, setLoadingAction] = useState(false); + + function loadDataAndSave( + loader: () => Promise, + setData: Dispatch>, + snackError: (snackInputs: unknown) => void + ): Promise { + return loader().then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //setData(null); + //TODO what to do with "old" data? + }); + } + + const actionWithLoadingState = useCallback(function actionWithState( + action: () => Promise, + notHideOverlay?: true + ) { + console.debug( + '[DEBUG]', + 'actionWithLoadingState()', + action, + notHideOverlay + ); + //TODO how to block simultaneous calls? + //gridRef.current?.api?.showLoadingOverlay(); + setLoadingAction(true); + return action().finally(() => { + console.debug('[DEBUG]', 'actionWithLoadingState() -> finally'); + if (!notHideOverlay) { + setLoadingAction(false); + } + }); + }, + []); + const refreshWithLoadingState = useCallback( + function actionWithState(notManageOverlay?: true) { + console.debug( + '[DEBUG]', + 'refreshWithLoadingState()', + notManageOverlay + ); + //TODO how to block simultaneous calls? + //gridRef.current?.api?.showLoadingOverlay(); + if (!notManageOverlay) { + gridRef.current?.api?.showLoadingOverlay(); + } + return loadDataAndSave(dataLoader, setData, snackError).finally( + () => { + console.debug( + '[DEBUG]', + 'refreshWithLoadingState() -> finally' + ); + if (!notManageOverlay) { + setLoadingAction(false); + } + } + ); + }, + [dataLoader, snackError] + ); + const actionThenRefresh = useCallback( + function actionThenRefresh(action: () => Promise) { + console.debug('[DEBUG]', 'actionThenRefresh()', action); + actionWithLoadingState(action).then(() => + refreshWithLoadingState() + ); + }, + [actionWithLoadingState, refreshWithLoadingState] + ); + + return ( + + {...(gridProps as GridProps< + TData, + TContext & DataGridExposed, + NoRowOverlay + >)} + ref={handleGridRef} + rowData={data} + defaultColDef={defaultColDef as AgColDef} + alwaysShowVerticalScroll={true} + onGridReady={useCallback( + (event: GridReadyEvent) => { + console.debug('[DEBUG]', 'gridReady()', event); + loadDataAndSave(dataLoader, setData, snackError); + //event.api.addEventListener('componentStateChanged', onComponentStateChanged); + }, + [dataLoader, snackError] + )} + rowSelection="single" //TODO multiple with delete action + onSelectionChanged={useCallback( + (event: SelectionChangedEvent) => + setRowsSelection(event.api.getSelectedRows() ?? []), + [] + )} + //immutableData={true} + context={ + useMemo( + () => ({ + ...(context ?? {}), + actionThenRefresh, + }), + [context, actionThenRefresh] + ) as TContext & DataGridExposed + } + //TODO progress={loadingAction ? 'query' : 'indeterminate'} + noRowsOverlayComponent={ + (!gridProps.overlayNoRowsTemplate && + !gridProps.noRowsOverlayComponent && + NoRowsOverlay) || + undefined + } + noRowsOverlayComponentParams={undefined} + > + + { + actionThenRefresh(() => + Promise.all(rowsSelection.map(removeElement!)) + ); + }, [actionThenRefresh, removeElement, rowsSelection])} + disabled={useMemo( + () => !removeElement && rowsSelection.length <= 0, + [removeElement, rowsSelection.length] + )} + /> + {addBtn?.() ?? } + {children && ( + <> + + {children} + + )} + {/**/} + + ); +} diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx new file mode 100644 index 0000000..672871f --- /dev/null +++ b/src/components/Grid/Grid.tsx @@ -0,0 +1,123 @@ +import { + ForwardedRef, + forwardRef, + FunctionComponent, + JSXElementConstructor, + PropsWithChildren, + PropsWithoutRef, + ReactNode, + RefAttributes, +} from 'react'; +import { AppBar, Box, LinearProgress, Toolbar } from '@mui/material'; +import { AgGridProps } from './AgGrid/AgGrid.type'; +import AgGrid, { AgGridRef } from './AgGrid/AgGrid'; +import { useColumnTypes } from './GridFormat'; + +export interface GridProgressProps { + /** + * intended to be a percent number in range [0;1] or null or NaN + */ + progress: null | number; +} + +export interface GridProps< + TData, + TContext extends {}, + NoCmpnt extends JSXElementConstructor +> extends Omit< + AgGridProps, + | 'overlayLoadingTemplate' + | 'loadingOverlayComponent' + | 'loadingOverlayComponentParams' + >, + Partial {} + +/* + * Restore lost generics from `forwardRef()`
+ * https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref + */ +type ForwardRef = typeof forwardRef; +type ForwardRefComponent = ReturnType>; +interface GridWithRef + extends FunctionComponent>> { + >( + props: PropsWithoutRef< + PropsWithChildren> + > & + RefAttributes> + ): ReturnType< + ForwardRefComponent< + GridProps, + AgGridRef + > + >; +} + +/** + * Common part for a Grid with toolbar + * @param props + */ +export const Grid: GridWithRef = forwardRef(function AgGridToolbar< + TData, + TContext extends {} = {}, + NoCmpnt extends JSXElementConstructor = any +>( + props: PropsWithChildren>, + gridRef: ForwardedRef> +): ReactNode { + const { children: toolbarContent, progress, ...agGridProps } = props; + const columnTypes = useColumnTypes(); + return ( + + + *': { + marginRight: '0.2em', + '&:last-child': { + marginRight: 0, + }, + }, + }} + > + {/*TODO button reset grid filter/sort/column-hide/rows-selection ...*/} + {/**/} + {toolbarContent} + + + + + + columnTypes={columnTypes} + {...agGridProps} + ref={gridRef} + /> + + ); +}); +export default Grid; + +const GridProgress: FunctionComponent = (props, context) => { + if (props.progress === null || props.progress === undefined) { + // simulate a disabled state + //TODO css to match color with AppBar background (.MuiLinearProgress-root, .MuiLinearProgress-determinate) + return ( + + ); + } else if (Number.isNaN(props.progress)) { + // animation from right to left + return ; + } else if (props.progress < 0) { + // animation from left to right + return ; + } /*if (props.progress >= 0)*/ else { + // animation dashed + return ( + + ); + } +}; diff --git a/src/components/Grid/GridFormat.tsx b/src/components/Grid/GridFormat.tsx new file mode 100644 index 0000000..c745629 --- /dev/null +++ b/src/components/Grid/GridFormat.tsx @@ -0,0 +1,95 @@ +import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; +import { + ValueFormatterFunc, + ValueFormatterParams, +} from 'ag-grid-community/dist/lib/entities/colDef'; +import { FunctionComponent, useCallback, useMemo } from 'react'; +import { Chip, ChipProps } from '@mui/material'; +import { Check, Close, QuestionMark } from '@mui/icons-material'; +import { AgColTypeDef } from './AgGrid/AgGrid.type'; +import { IDateFilterParams } from 'ag-grid-community'; + +export enum GridColumnTypes { + // default of ag-grid + // ... + // custom components + Timestamp = 'timestamp', + BoolIcons = 'boolIcons', +} + +function timestampFormatter( + intl: IntlShape, + params: ValueFormatterParams +): string { + if (params.value !== null && params.value !== undefined) { + let val = params.value; + if (!(val instanceof Date)) { + val = new Date(val); + } + return intl.formatDate(val); + } else { + return '∅'; + } +} + +const BoolValue: FunctionComponent<{ + value: boolean | null | undefined; +}> = (props, context) => { + const conf = ((value: unknown): Partial => { + switch (value) { + case true: + return { + label: , + icon: , + color: 'success', + }; + case false: + return { + label: , + icon: , + color: 'error', + }; + default: + return { + label: , + icon: , + }; + } + })(props.value); + return ; +}; + +export function useColumnTypes(): Record< + GridColumnTypes, + AgColTypeDef +> { + const intl = useIntl(); + const timestampFormat: ValueFormatterFunc< + TData, + string | number | Date | null | undefined + > = useCallback((params) => timestampFormatter(intl, params), [intl]); + + //https://www.ag-grid.com/react-data-grid/components/ + return useMemo( + () => ({ + [GridColumnTypes.BoolIcons]: { + //TODO + //filter: '', //agNumberColumnFilter agTextColumnFilter + //align: 'left', + cellRenderer: (params) => + ( + + ) as unknown as HTMLElement, + }, + [GridColumnTypes.Timestamp]: { + cellDataType: 'dateString', + filter: 'agDateColumnFilter', + filterParams: { + debounceMs: 150, + } as IDateFilterParams, + valueFormatter: timestampFormat, + }, + }), + [timestampFormat] + ); +} diff --git a/src/components/XDataGrid/CustomNoRowsOverlay.tsx b/src/components/Grid/NoRowsOverlay.tsx similarity index 97% rename from src/components/XDataGrid/CustomNoRowsOverlay.tsx rename to src/components/Grid/NoRowsOverlay.tsx index 677adde..62b9296 100644 --- a/src/components/XDataGrid/CustomNoRowsOverlay.tsx +++ b/src/components/Grid/NoRowsOverlay.tsx @@ -1,7 +1,6 @@ /* * from https://mui.com/x/react-data-grid/components/#no-rows-overlay */ -import { ReactElement } from 'react'; import { Box } from '@mui/material'; import { SxProps } from '@mui/system/styleFunctionSx'; import { Theme } from '@emotion/react'; @@ -73,7 +72,7 @@ const NoRowsSvg = ( ); -export default function CustomNoRowsOverlay(): ReactElement { +export default function NoRowsOverlay() { return ( {NoRowsSvg} diff --git a/src/components/Grid/buttons/BaseButton.tsx b/src/components/Grid/buttons/BaseButton.tsx new file mode 100644 index 0000000..0703c8a --- /dev/null +++ b/src/components/Grid/buttons/BaseButton.tsx @@ -0,0 +1,82 @@ +import { + Button as MuiButton, + ButtonProps, + Tooltip, + TooltipProps, + useForkRef, +} from '@mui/material'; +import { + OverridableComponent, + OverridableTypeMap, + OverrideProps, +} from '@mui/material/OverridableComponent'; +import { ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase/ButtonBase'; +import { ButtonTypeMap } from '@mui/material/Button/Button'; +import { forwardRef, useId, useRef } from 'react'; +import { useIntl } from 'react-intl'; + +type PropsWithoutChildren

= P extends any + ? 'children' extends keyof P + ? Omit + : P + : P; + +export type GridBaseButtonProps = { + tooltipTextId: string; + textId: string; + labelId: string; + color?: ButtonProps['color']; + startIcon: ButtonProps['startIcon']; + onClick: ButtonProps['onClick']; + + buttonProps?: PropsWithoutChildren; + tooltipProps?: PropsWithoutChildren; +}; + +/* Taken from MUI/materials-ui codebase + * Mui expose button's defaultComponent as "button" and button component as "a"... but generate in reality a + + + ); +}); diff --git a/src/components/Grid/buttons/ButtonAdd.tsx b/src/components/Grid/buttons/ButtonAdd.tsx new file mode 100644 index 0000000..2de20bf --- /dev/null +++ b/src/components/Grid/buttons/ButtonAdd.tsx @@ -0,0 +1,41 @@ +import { forwardRef, useMemo } from 'react'; +import { AddCircleOutline, SvgIconComponent } from '@mui/icons-material'; +import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; + +export type GridButtonAddProps = Partial & { + icon?: SvgIconComponent; +}; + +function noClickProps() { + console.error('GridButtonDelete.onClick not defined'); +} + +export const GridButtonAdd = forwardRef( + function GridButtonAdd(props, ref) { + const AddIcon = useMemo(() => { + const IcnCmpnt: SvgIconComponent = props.icon ?? AddCircleOutline; + return ; + }, [props.icon]); + const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( + () => ({ + disabled: props.onClick === undefined, + }), + [props.onClick] + ); + + return ( + + ); + } +); +export default GridButtonAdd; diff --git a/src/components/Grid/buttons/ButtonDelete.tsx b/src/components/Grid/buttons/ButtonDelete.tsx new file mode 100644 index 0000000..cde1475 --- /dev/null +++ b/src/components/Grid/buttons/ButtonDelete.tsx @@ -0,0 +1,43 @@ +import { forwardRef, useMemo } from 'react'; +import { Delete, SvgIconComponent } from '@mui/icons-material'; +import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; + +export type GridButtonDeleteProps = Partial & { + icon?: SvgIconComponent; + disabled?: boolean; +}; + +function noClickProps() { + console.error('GridButtonDelete.onClick not defined'); +} + +export const GridButtonDelete = forwardRef< + HTMLButtonElement, + GridButtonDeleteProps +>(function GridButtonDelete(props, ref) { + const AddIcon = useMemo(() => { + const IcnCmpnt: SvgIconComponent = props.icon ?? Delete; + return ; + }, [props.icon]); + const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( + () => ({ + disabled: props.disabled || props.onClick === undefined, + }), + [props.disabled, props.onClick] + ); + + return ( + + ); +}); +export default GridButtonDelete; diff --git a/src/components/Grid/buttons/ButtonRefresh.tsx b/src/components/Grid/buttons/ButtonRefresh.tsx new file mode 100644 index 0000000..08c3123 --- /dev/null +++ b/src/components/Grid/buttons/ButtonRefresh.tsx @@ -0,0 +1,50 @@ +import { forwardRef, useCallback, useMemo, useState } from 'react'; +import { Refresh } from '@mui/icons-material'; +import RotateIcon from '../../RotateIcon'; +import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; +import { FnSyncAsync, runFnWithState } from '../../../utils/functions'; + +function RefreshIconRotate() { + return ; +} + +function RefreshIcon() { + return ; +} + +export type GridButtonRefreshProps = Partial< + Omit +> & { + refresh: FnSyncAsync; // ButtonProps['onClick']; //(event: MouseEvent) => void +}; + +export const GridButtonRefresh = forwardRef< + HTMLButtonElement, + GridButtonRefreshProps +>(function GridButtonRefresh(props, ref) { + const [refreshing, setRefreshing] = useState(false); + const onClick = useCallback( + () => runFnWithState(props.refresh, setRefreshing), + [props.refresh] + ); + const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( + () => ({ + disabled: onClick === undefined || refreshing, + }), + [onClick, refreshing] + ); + + return ( + : } + buttonProps={buttonProps} + ref={ref} + /> + ); +}); +export default GridButtonRefresh; diff --git a/src/components/XDataGrid/CommonDataGrid.tsx b/src/components/XDataGrid/CommonDataGrid.tsx deleted file mode 100644 index bb47a5a..0000000 --- a/src/components/XDataGrid/CommonDataGrid.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { DataGrid, DataGridProps } from '@mui/x-data-grid'; -import { LinearProgress } from '@mui/material'; -import CustomNoRowsOverlay from './CustomNoRowsOverlay'; -import { GridValidRowModel } from '@mui/x-data-grid/models/gridRows'; -import { - FunctionComponent, - ReactElement, - Ref, - useCallback, - useEffect, - useImperativeHandle, - useRef, - useState, -} from 'react'; -import { deepmerge } from '@mui/utils'; -import { useSnackMessage } from '@gridsuite/commons-ui'; -import CustomToolbar, { CustomGridToolbarProps } from './CustomToolbar'; -import { LinearProgressProps } from '@mui/material/LinearProgress/LinearProgress'; -import { GridSlotsComponentsProps } from '@mui/x-data-grid/models/gridSlotsComponentsProps'; - -export type CommonDataGridExposed = { - actionThenRefresh: (action: () => Promise) => void; -}; -interface CommonDataGridProps - extends Omit, 'rows' | 'loading'> { - loader: () => Promise; - exposesRef: ReturnType>; - toolbarExtends?: CustomGridToolbarProps['children']; -} - -export default function CommonDataGrid( - props: Readonly> -): ReactElement { - const { snackError } = useSnackMessage(); - const [data, setData] = useState(null); - const [loading, setLoading] = useState(false); - const [loadingRefresh, setLoadingRefresh] = useState(false); - - const actionWithLoadingState = useCallback(function actionWithState( - action: () => Promise - ) { - //TODO how to block simultaneous calls? - setLoading(true); - return action().finally(() => { - setLoading(false); - }); - }, - []); - - const { loader } = props; //for eslint who don't understand with usememo - const loadData = useCallback( - function loadData() { - setLoadingRefresh(true); - actionWithLoadingState(() => - loader() - .then(setData, (error) => { - snackError({ - messageTxt: error.message, - headerId: 'table.error.retrieve', - }); - //TODO what to do with "old" data? - }) - .finally(() => setLoadingRefresh(false)) - ); - }, - [actionWithLoadingState, loader, snackError] - ); - - const actionWithRefresh = useCallback( - function actionThenRefresh(action: () => Promise) { - actionWithLoadingState(action).then(loadData); - }, - [actionWithLoadingState, loadData] - ); - //expose to parent - useImperativeHandle( - props.exposesRef as Ref, - () => ({ - actionThenRefresh: actionWithRefresh, - }), - [actionWithRefresh] - ); - - const [firstRun, setFirstRun] = useState(true); - useEffect(() => { - // Load data one time at initial render - if (firstRun) { - loadData(); - setFirstRun(false); - } - }, [firstRun, loadData]); - - return ( - >( - (toolbarProps) => ( - - {props.toolbarExtends} - - ), - [loadData, props.toolbarExtends] - ), - loadingOverlay: LinearProgress, - noRowsOverlay: CustomNoRowsOverlay, - //TODO noResultsOverlay: ... - ...props.slots, - }} - slotProps={deepmerge( - { - toolbar: { - csvOptions: { - //https://mui.com/x/api/data-grid/grid-print-export-options/ - //TODO fileName: `customerDataBase-${new Date()}`, - delimiter: ';', - utf8WithBom: true, - allColumns: true, - includeHeaders: true, - }, - printOptions: { - //https://mui.com/x/api/data-grid/grid-print-export-options/ - }, - }, - loadingOverlay: { - variant: loadingRefresh ? 'query' : 'indeterminate', - } as LinearProgressProps as GridSlotsComponentsProps['loadingOverlay'], - }, - props.slotProps - )} - experimentalFeatures={{ ariaV7: true }} - /*TODO https://mui.com/x/react-data-grid/style/#striped-rows - sx={{ - '& .even': { - backgroundColor: 'grey', - }, - '& .odd': { - //backgroundColor: 'grey', - }, - }} - getRowClassName={(params) => - params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd' - }*/ - /> - ); -} diff --git a/src/components/XDataGrid/CustomToolbar.tsx b/src/components/XDataGrid/CustomToolbar.tsx deleted file mode 100644 index 21caf1f..0000000 --- a/src/components/XDataGrid/CustomToolbar.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { forwardRef, FunctionComponent, PropsWithChildren } from 'react'; -import { Box, Divider } from '@mui/material'; -import { - GridCsvExportMenuItem, - GridPrintExportMenuItem, - GridToolbarContainer, - GridToolbarDensitySelector, - GridToolbarExportContainer, - GridToolbarFilterButton, - GridToolbarProps, - GridToolbarQuickFilter, - useGridRootProps, -} from '@mui/x-data-grid'; -import GridToolbarRefresh, { - GridToolbarRefreshProps, -} from './GridToolbarButtonRefresh'; -import GridJsonExportMenuItem from './GridJsonExportMenuItem'; - -export interface CustomGridToolbarProps extends GridToolbarProps { - onRefresh?: GridToolbarRefreshProps['refresh']; - //TODO remove multi selection -} - -export const CustomToolbar: FunctionComponent< - PropsWithChildren -> = forwardRef((props, ref) => { - const rootProps = useGridRootProps(); - if ( - rootProps.disableColumnFilter && - rootProps.disableColumnSelector && - rootProps.disableDensitySelector && - !props.showQuickFilter - ) { - return null; - } else { - return ( - - {/**/} - - - - - - {/**/} - - {/*TODO add to props definition*/} - - {(props.children || props.onRefresh) && ( - <> - - {props.onRefresh && ( - - )} - {props.children} - - )} - {props.showQuickFilter && ( - <> - - {props.showQuickFilter && ( - - )} - - )} - - ); - } -}); -export default CustomToolbar; diff --git a/src/components/XDataGrid/GridJsonExportMenuItem.tsx b/src/components/XDataGrid/GridJsonExportMenuItem.tsx deleted file mode 100644 index c006491..0000000 --- a/src/components/XDataGrid/GridJsonExportMenuItem.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - * recipe from https://mui.com/x/react-data-grid/export/#custom-export-format - */ - -import { - GridApi, - GridExportMenuItemProps, - gridFilteredSortedRowIdsSelector, - gridVisibleColumnFieldsSelector, - useGridApiContext, -} from '@mui/x-data-grid'; -import { MenuItem } from '@mui/material'; - -const getJson = (apiRef: React.MutableRefObject) => { - // Select rows and columns - const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef); - const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef); - - // Format the data. Here we only keep the value - const data = filteredSortedRowIds.map((id) => { - const row: Record = {}; - visibleColumnsField.forEach((field) => { - row[field] = apiRef.current.getCellParams(id, field).value; - }); - return row; - }); - - // Stringify with some indentation - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#parameters - return JSON.stringify(data, null, 2); -}; - -const exportBlob = (blob: Blob, filename: string) => { - // Save the blob in a json file - const url = URL.createObjectURL(blob); - - const a = document.createElement('a'); - a.href = url; - a.download = filename; - a.click(); - - setTimeout(() => { - URL.revokeObjectURL(url); - }); -}; - -export default function GridJsonExportMenuItem( - props: Readonly> -) { - const apiRef = useGridApiContext(); - return ( - { - const jsonString = getJson(apiRef); - const blob = new Blob([jsonString], { - type: 'text/json', - }); - exportBlob(blob, 'DataGrid_export.json'); //TODO parameter in props? - // Hide the export menu after the export - props.hideMenu?.(); - }} - > - Export JSON - - ); -} diff --git a/src/components/XDataGrid/GridToolbarButton.tsx b/src/components/XDataGrid/GridToolbarButton.tsx deleted file mode 100644 index ddf51a3..0000000 --- a/src/components/XDataGrid/GridToolbarButton.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { ButtonProps, TooltipProps } from '@mui/material'; -import { - unstable_useForkRef as useForkRef, - unstable_useId as useId, -} from '@mui/utils'; -import { useGridRootProps } from '@mui/x-data-grid'; -import { forwardRef, useRef } from 'react'; -import { useIntl } from 'react-intl'; - -export type GridToolbarButtonProps = { - tooltip: { - titleId: string; - }; - button: { - labelId: string; - textId: string; - color?: ButtonProps['color']; - startIcon: ButtonProps['startIcon']; - onClick: ButtonProps['onClick']; - }; - - /** - * The props used for each slot inside. - * @default {} - */ - slotProps?: { - button?: Partial; - tooltip?: Partial; - }; - [key: string]: any; -}; - -/* - * Code based on sources of MUI-X Toolbar components - */ -export const GridToolbarButton = forwardRef< - HTMLButtonElement, - GridToolbarButtonProps ->(function GridToolbarButton(props, ref) { - const buttonProps = props.slotProps?.button ?? {}; - const tooltipProps = props.slotProps?.tooltip ?? {}; - - //const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const intl = useIntl(); - - const buttonRef = useRef(null); - const handleRef = useForkRef(ref, buttonRef); - const buttonId = useId(); - - return ( - - - {intl.formatMessage({ id: props.button.textId })} - - - ); -}); -export default GridToolbarButton; diff --git a/src/components/XDataGrid/GridToolbarButtonAdd.tsx b/src/components/XDataGrid/GridToolbarButtonAdd.tsx deleted file mode 100644 index b2bfeaf..0000000 --- a/src/components/XDataGrid/GridToolbarButtonAdd.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { forwardRef, useMemo } from 'react'; -import { AddCircleOutline, SvgIconComponent } from '@mui/icons-material'; -import GridToolbarButton, { GridToolbarButtonProps } from './GridToolbarButton'; - -export type GridToolbarAddProps = GridToolbarButtonProps & { - addElement?: () => void; - icon?: SvgIconComponent; - textId?: string; - tooltipId: string; - labelId: string; -}; - -export const GridToolbarBtnAdd = forwardRef< - HTMLButtonElement, - GridToolbarAddProps ->(function GridToolbarBtnAdd(props, ref) { - const AddIcon = useMemo(() => { - const IcnCmpnt: SvgIconComponent = props.icon ?? AddCircleOutline; - return ; - }, [props.icon]); - - return ( - - ); -}); -export default GridToolbarBtnAdd; diff --git a/src/components/XDataGrid/GridToolbarButtonRefresh.tsx b/src/components/XDataGrid/GridToolbarButtonRefresh.tsx deleted file mode 100644 index 999485e..0000000 --- a/src/components/XDataGrid/GridToolbarButtonRefresh.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { forwardRef, useCallback, useState } from 'react'; -import { Refresh } from '@mui/icons-material'; -import RotateIcon from '../RotateIcon'; -import GridToolbarButton, { GridToolbarButtonProps } from './GridToolbarButton'; -import { FnSyncAsync, runFnWithState } from '../../utils/functions'; - -function RefreshIconRotate() { - return ; -} - -function RefreshIcon() { - return ; -} - -export type GridToolbarRefreshProps = GridToolbarButtonProps & { - refresh?: FnSyncAsync; // ButtonProps['onClick']; //(event: MouseEvent) => void -}; - -export const GridToolbarRefresh = forwardRef< - HTMLButtonElement, - GridToolbarRefreshProps ->(function GridToolbarRefresh(props, ref) { - const [refreshing, setRefreshing] = useState(false); - const onClick = useCallback( - () => runFnWithState(props.refresh, setRefreshing), - [props.refresh] - ); - - return ( - : , - onClick: onClick, - disabled: onClick === undefined || refreshing, - }} - /> - ); -}); -export default GridToolbarRefresh; diff --git a/src/module-commons-ui.d.ts b/src/module-commons-ui.d.ts index 1357b8a..cc9c8c7 100644 --- a/src/module-commons-ui.d.ts +++ b/src/module-commons-ui.d.ts @@ -3,3 +3,4 @@ declare module '@gridsuite/commons-ui' /*{ export = typeof import('@gridsuite/commons-ui'); }*/; declare module '@gridsuite/commons-ui/es/utils/UserManagerMock'; +declare module '@gridsuite/commons-ui/es/utils/styles'; diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts index 6d08a06..3cc45f5 100644 --- a/src/module-mui.d.ts +++ b/src/module-mui.d.ts @@ -4,6 +4,7 @@ import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions, } from '@mui/material/styles/createTheme'; +import { AgGridClasses, AgGridCss } from './components/Grid/AgGrid/ag-theme-alpine'; declare module '@mui/material/styles/createTheme' { export * from '@mui/material/styles/createTheme'; @@ -15,8 +16,12 @@ declare module '@mui/material/styles/createTheme' { circle_hover: CSSObject; link: CSSObject; mapboxStyle: string; + agGridTheme: 'ag-theme-alpine' | 'ag-theme-alpine-dark'; + agGridThemeOverride?: CSSObject & { + [K in AgGridCss | AgGridClasses]?: CSSObject; + }; }; - export interface Theme extends MuiTheme, Required {} + export interface Theme extends MuiTheme, ThemeExtension {} // allow configuration using `createTheme` export interface ThemeOptions extends MuiThemeOptions, diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 11c5543..3498a94 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -1,129 +1,96 @@ -import { GridColDef } from '@mui/x-data-grid'; -import { Chip, ChipProps, Grid, Typography } from '@mui/material'; +import { Grid, Typography } from '@mui/material'; import { FormattedMessage, useIntl } from 'react-intl'; import { FunctionComponent, useMemo, useRef } from 'react'; -import { Check, Close, QuestionMark } from '@mui/icons-material'; -import CommonDataGrid, { - CommonDataGridExposed, -} from '../../components/XDataGrid/CommonDataGrid'; +import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; import { UserAdminSrv, UserConnection } from '../../services'; +import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; +import { AgColDef } from '../../components/Grid/AgGrid/AgGrid.type'; +import { GridColumnTypes } from '../../components/Grid/GridFormat'; -function getRowId(row: UserConnection) { - return row.sub; +function getRowId(params: GetRowIdParams): string { + return params.data.sub; } -const BoolValue: FunctionComponent<{ - value: boolean | null | undefined; -}> = (props, context) => { - const conf = ((value: unknown): Partial => { - switch (value) { - case true: - return { - label: ( - - ), - icon: , - color: 'success', - }; - case false: - return { - label: ( - - ), - icon: , - color: 'error', - }; - default: - return { - label: ( - - ), - icon: , - }; - } - })(props.value); - return ; -}; - export const ConnectionsPage: FunctionComponent = () => { const intl = useIntl(); - const gridRef = useRef(); - const columns: GridColDef[] = useMemo( + const gridRef = useRef>(null); + + const columns: AgColDef[] = useMemo( () => [ { field: 'sub', + cellDataType: 'text', + flex: 2, headerName: intl.formatMessage({ id: 'table.id' }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'connections.table.id.description', }), - type: 'string', - flex: 0.25, - editable: false, - filterable: true, - hideable: false, + filter: true, + lockVisible: true, }, { field: 'firstConnection', + type: GridColumnTypes.Timestamp, + flex: 3, headerName: intl.formatMessage({ id: 'connections.table.firstConnection', }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'connections.table.firstConnection.description', }), - type: 'dateTime', - valueGetter: ({ value }) => value && new Date(value), - flex: 0.3, - editable: false, - filterable: true, + valueGetter: (params) => + params.data?.firstConnection && + new Date(params.data?.firstConnection), + //filter: true, //TODO valueFormatter "2023-09-05T21:42:18.100151Z" }, { field: 'lastConnection', + type: GridColumnTypes.Timestamp, + flex: 3, headerName: intl.formatMessage({ id: 'connections.table.lastConnection', }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'connections.table.lastConnection.description', }), - type: 'dateTime', - valueGetter: ({ value }) => value && new Date(value), - flex: 0.3, - editable: false, - filterable: true, - //TODO valueFormatter + valueGetter: (params) => + params.data?.lastConnection && + new Date(params.data?.lastConnection), + //filter: true, }, { field: 'isAccepted', + cellDataType: 'boolean', + flex: 1, headerName: intl.formatMessage({ id: 'connections.table.allowed', }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'connections.table.allowed.description', }), - type: 'boolean', sortable: false, - flex: 0.15, - editable: false, - filterable: true, - renderCell: (params) => , + filter: true, + /*renderCell: (params) => , headerAlign: 'left', - align: 'left', + */ }, ], [intl] ); return ( - - + + - - + + accessRef={gridRef} + dataLoader={UserAdminSrv.fetchUsersConnections} + columnDefs={columns} + gridId="grid-connections" getRowId={getRowId} /> diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index e901d27..3544696 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -1,5 +1,4 @@ import { - Fragment, FunctionComponent, useCallback, useMemo, @@ -7,7 +6,6 @@ import { useState, } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import { GridActionsCellItem, GridColDef } from '@mui/x-data-grid'; import { Button, Dialog, @@ -22,28 +20,29 @@ import { TextField, Typography, } from '@mui/material'; -import { AccountCircle, Delete, PersonAdd } from '@mui/icons-material'; -import CommonDataGrid, { - CommonDataGridExposed, -} from '../../components/XDataGrid/CommonDataGrid'; +import { AccountCircle, PersonAdd } from '@mui/icons-material'; +import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; import { UserAdminSrv, UserInfos } from '../../services'; import { useSnackMessage } from '@gridsuite/commons-ui'; -import GridToolbarBtnAdd from '../../components/XDataGrid/GridToolbarButtonAdd'; +import GridToolbarBtnAdd from '../../components/Grid/buttons/ButtonAdd'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; +import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; +import { AgColDef } from '../../components/Grid/AgGrid/AgGrid.type'; +import { TextFilterParams } from 'ag-grid-community/dist/lib/filter/provided/text/textFilter'; -function getRowId(row: UserInfos) { - return row.sub; +function getRowId(params: GetRowIdParams): string { + return params.data.sub; } const UsersPage: FunctionComponent = () => { //const data = useLoaderData() as DeferredData; const intl = useIntl(); const { snackError } = useSnackMessage(); - const gridRef = useRef(); + const gridRef = useRef>(null); const deleteUser = useCallback( (id: string) => () => - gridRef.current?.actionThenRefresh(() => + gridRef.current?.context?.actionThenRefresh(() => UserAdminSrv.deleteUser(id).catch((error) => snackError({ messageTxt: `Error while deleting user "${id}"${ @@ -55,53 +54,52 @@ const UsersPage: FunctionComponent = () => { ), [snackError] ); - const columns: GridColDef[] = useMemo( - () => [ + const columns = useMemo( + (): AgColDef[] => [ { field: 'sub', + cellDataType: 'text', + flex: 3, + lockVisible: true, + filter: true, headerName: intl.formatMessage({ id: 'table.id' }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'users.table.id.description', }), - type: 'string', - flex: 0.25, - editable: false, - filterable: true, - hideable: false, + //TODO headerCheckboxSelection: true, + //initialSortIndex: 2, + filterParams: { + caseSensitive: false, + trimInput: true, + } as TextFilterParams, }, { field: 'isAdmin', + cellDataType: 'boolean', + //checkboxSelection: true, + //cellRenderer: 'agCheckboxCellRenderer', + cellRendererParams: { + disabled: true, + }, + flex: 1, headerName: intl.formatMessage({ id: 'users.table.isAdmin', }), - description: intl.formatMessage({ + headerTooltip: intl.formatMessage({ id: 'users.table.isAdmin.description', }), - type: 'boolean', sortable: false, - flex: 0.15, - editable: false, - filterable: true, - }, - { - field: 'actions', - type: 'actions', - width: 80, - getActions: (params) => [ - } - label="Delete" - onClick={deleteUser(params.row.sub)} - />, - ], + filter: true, + initialSortIndex: 1, + initialSort: 'asc', }, ], - [intl, deleteUser] + [intl.locale] ); const addUser = useCallback( (id: string) => - gridRef.current?.actionThenRefresh(() => + gridRef.current?.context?.actionThenRefresh(() => UserAdminSrv.addUser(id).catch((error) => snackError({ messageTxt: `Error while adding user "${id}"${ @@ -138,48 +136,36 @@ const UsersPage: FunctionComponent = () => { }; const onSubmitForm = handleSubmit(onSubmit); + const buttonAdd = useCallback( + () => ( + setOpen(true)} + icon={PersonAdd} + /> + ), + [] + ); + return ( - - + + - + accessRef={gridRef} + dataLoader={UserAdminSrv.fetchUsers} + addBtn={buttonAdd} + columnDefs={columns} + gridId="table-users" getRowId={getRowId} - ignoreDiacritics - slotProps={{ - toolbar: { - showQuickFilter: true, - }, - }} - initialState={{ - filter: { - filterModel: { - items: [], - quickFilterExcludeHiddenColumns: true, - }, - }, - }} - toolbarExtends={ - <> - setOpen(true), - [] - )} - icon={PersonAdd} - /> - {/*TODO remove selection*/} - - } + //TODO onClick={deleteUser(params.row.sub)} + //TODO onRemove />

= (props, context) => { const { untypedProps, ...formProps } = props; const othersProps = untypedProps as PaperProps<'form'>; //trust me ts - return ; + return ; }; diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx index c7d322c..5a73760 100644 --- a/src/routes/ErrorPage.tsx +++ b/src/routes/ErrorPage.tsx @@ -8,7 +8,7 @@ export default function ErrorPage(): ReactElement { console.error(error); }, [error]); return ( - + Oops! Sorry, an unexpected error has occurred. diff --git a/src/routes/HomePage.tsx b/src/routes/HomePage.tsx index 58acc4b..fd0df5e 100644 --- a/src/routes/HomePage.tsx +++ b/src/routes/HomePage.tsx @@ -4,7 +4,13 @@ import { FormattedMessage } from 'react-intl'; export default function HomePage(): ReactElement { return ( - + diff --git a/src/setupTests.js b/src/setupTests.js index e373e4d..bdbcf3d 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -6,3 +6,17 @@ */ global.IS_REACT_ACT_ENVIRONMENT = true; + +// jest.config.js +module.exports = { + transform: { + '^.+\\.(ts|tsx|js|jsx|mjs|cjs)$': [ + 'babel-jest', // or "ts-test" or whichever transformer you're using + ], + }, + transformIgnorePatterns: [ + '/node_modules/(?!(@ag-grid-community|@ag-grid-enterprise)/)', + ], +}; + +// see https://www.ag-grid.com/react-data-grid/testing/ diff --git a/src/translations/ag-grid/locale.en.ts b/src/translations/ag-grid/locale.en.ts new file mode 100644 index 0000000..508b64c --- /dev/null +++ b/src/translations/ag-grid/locale.en.ts @@ -0,0 +1,532 @@ +// from https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/src/content/docs/localisation/_examples/localisation/locale.en.js +/* eslint-disable no-template-curly-in-string */ + +export const AG_GRID_LOCALE_EN = { + // Set Filter + selectAll: '(Select All)', + selectAllSearchResults: '(Select All Search Results)', + addCurrentSelectionToFilter: 'Add current selection to filter', + searchOoo: 'Search...', + blanks: '(Blanks)', + noMatches: 'No matches', + + // Number Filter & Text Filter + filterOoo: 'Filter...', + equals: 'Equals', + notEqual: 'Does not equal', + blank: 'Blank', + notBlank: 'Not blank', + empty: 'Choose one', + + // Number Filter + lessThan: 'Less than', + greaterThan: 'Greater than', + lessThanOrEqual: 'Less than or equal to', + greaterThanOrEqual: 'Greater than or equal to', + inRange: 'Between', + inRangeStart: 'From', + inRangeEnd: 'To', + + // Text Filter + contains: 'Contains', + notContains: 'Does not contain', + startsWith: 'Begins with', + endsWith: 'Ends with', + + // Date Filter + dateFormatOoo: 'yyyy-mm-dd', + before: 'Before', + after: 'After', + + // Filter Conditions + andCondition: 'AND', + orCondition: 'OR', + + // Filter Buttons + applyFilter: 'Apply', + resetFilter: 'Reset', + clearFilter: 'Clear', + cancelFilter: 'Cancel', + + // Filter Titles + textFilter: 'Text Filter', + numberFilter: 'Number Filter', + dateFilter: 'Date Filter', + setFilter: 'Set Filter', + + // Group Column Filter + groupFilterSelect: 'Select field:', + + // Advanced Filter + advancedFilterContains: 'contains', + advancedFilterNotContains: 'does not contain', + advancedFilterTextEquals: 'equals', + advancedFilterTextNotEqual: 'does not equal', + advancedFilterStartsWith: 'begins with', + advancedFilterEndsWith: 'ends with', + advancedFilterBlank: 'is blank', + advancedFilterNotBlank: 'is not blank', + advancedFilterEquals: '=', + advancedFilterNotEqual: '!=', + advancedFilterGreaterThan: '>', + advancedFilterGreaterThanOrEqual: '>=', + advancedFilterLessThan: '<', + advancedFilterLessThanOrEqual: '<=', + advancedFilterTrue: 'is true', + advancedFilterFalse: 'is false', + advancedFilterAnd: 'AND', + advancedFilterOr: 'OR', + advancedFilterApply: 'Apply', + advancedFilterBuilder: 'Builder', + advancedFilterValidationMissingColumn: 'Column is missing', + advancedFilterValidationMissingOption: 'Option is missing', + advancedFilterValidationMissingValue: 'Value is missing', + advancedFilterValidationInvalidColumn: 'Column not found', + advancedFilterValidationInvalidOption: 'Option not found', + advancedFilterValidationMissingQuote: 'Value is missing an end quote', + advancedFilterValidationNotANumber: 'Value is not a number', + advancedFilterValidationInvalidDate: 'Value is not a valid date', + advancedFilterValidationMissingCondition: 'Condition is missing', + advancedFilterValidationJoinOperatorMismatch: + 'Join operators within a condition must be the same', + advancedFilterValidationInvalidJoinOperator: 'Join operator not found', + advancedFilterValidationMissingEndBracket: 'Missing end bracket', + advancedFilterValidationExtraEndBracket: 'Too many end brackets', + advancedFilterValidationMessage: + 'Expression has an error. ${variable} - ${variable}.', + advancedFilterValidationMessageAtEnd: + 'Expression has an error. ${variable} at end of expression.', + advancedFilterBuilderTitle: 'Advanced Filter', + advancedFilterBuilderApply: 'Apply', + advancedFilterBuilderCancel: 'Cancel', + advancedFilterBuilderAddButtonTooltip: 'Add Filter or Group', + advancedFilterBuilderRemoveButtonTooltip: 'Remove', + advancedFilterBuilderMoveUpButtonTooltip: 'Move Up', + advancedFilterBuilderMoveDownButtonTooltip: 'Move Down', + advancedFilterBuilderAddJoin: 'Add Group', + advancedFilterBuilderAddCondition: 'Add Filter', + advancedFilterBuilderSelectColumn: 'Select a column', + advancedFilterBuilderSelectOption: 'Select an option', + advancedFilterBuilderEnterValue: 'Enter a value...', + advancedFilterBuilderValidationAlreadyApplied: + 'Current filter already applied.', + advancedFilterBuilderValidationIncomplete: + 'Not all conditions are complete.', + advancedFilterBuilderValidationSelectColumn: 'Must select a column.', + advancedFilterBuilderValidationSelectOption: 'Must select an option.', + advancedFilterBuilderValidationEnterValue: 'Must enter a value.', + + // Side Bar + columns: 'Columns', + filters: 'Filters', + + // columns tool panel + pivotMode: 'Pivot Mode', + groups: 'Row Groups', + rowGroupColumnsEmptyMessage: 'Drag here to set row groups', + values: 'Values', + valueColumnsEmptyMessage: 'Drag here to aggregate', + pivots: 'Column Labels', + pivotColumnsEmptyMessage: 'Drag here to set column labels', + + // Header of the Default Group Column + group: 'Group', + + // Row Drag + rowDragRow: 'row', + rowDragRows: 'rows', + + // Other + loadingOoo: 'Loading...', + loadingError: 'ERR', + noRowsToShow: 'No Rows To Show', + enabled: 'Enabled', + + // Menu + pinColumn: 'Pin Column', + pinLeft: 'Pin Left', + pinRight: 'Pin Right', + noPin: 'No Pin', + valueAggregation: 'Value Aggregation', + noAggregation: 'None', + autosizeThiscolumn: 'Autosize This Column', + autosizeAllColumns: 'Autosize All Columns', + groupBy: 'Group by', + ungroupBy: 'Un-Group by', + ungroupAll: 'Un-Group All', + addToValues: 'Add ${variable} to values', + removeFromValues: 'Remove ${variable} from values', + addToLabels: 'Add ${variable} to labels', + removeFromLabels: 'Remove ${variable} from labels', + resetColumns: 'Reset Columns', + expandAll: 'Expand All Row Groups', + collapseAll: 'Close All Row Groups', + copy: 'Copy', + ctrlC: 'Ctrl+C', + ctrlX: 'Ctrl+X', + copyWithHeaders: 'Copy With Headers', + copyWithGroupHeaders: 'Copy with Group Headers', + cut: 'Cut', + paste: 'Paste', + ctrlV: 'Ctrl+V', + export: 'Export', + csvExport: 'CSV Export', + excelExport: 'Excel Export', + columnFilter: 'Column Filter', + columnChooser: 'Choose Columns', + sortAscending: 'Sort Ascending', + sortDescending: 'Sort Descending', + sortUnSort: 'Clear Sort', + + // Enterprise Menu Aggregation and Status Bar + sum: 'Sum', + first: 'First', + last: 'Last', + min: 'Min', + max: 'Max', + none: 'None', + count: 'Count', + avg: 'Average', + filteredRows: 'Filtered', + selectedRows: 'Selected', + totalRows: 'Total Rows', + totalAndFilteredRows: 'Rows', + more: 'More', + to: 'to', + of: 'of', + page: 'Page', + pageLastRowUnknown: '?', + nextPage: 'Next Page', + lastPage: 'Last Page', + firstPage: 'First Page', + previousPage: 'Previous Page', + pageSizeSelectorLabel: 'Page Size:', + footerTotal: 'Total', + + // Pivoting + pivotColumnGroupTotals: 'Total', + + // Enterprise Menu (Charts) + pivotChartAndPivotMode: 'Pivot Chart & Pivot Mode', + pivotChart: 'Pivot Chart', + chartRange: 'Chart Range', + + columnChart: 'Column', + groupedColumn: 'Grouped', + stackedColumn: 'Stacked', + normalizedColumn: '100% Stacked', + + barChart: 'Bar', + groupedBar: 'Grouped', + stackedBar: 'Stacked', + normalizedBar: '100% Stacked', + + pieChart: 'Pie', + pie: 'Pie', + donut: 'Donut', + + line: 'Line', + + xyChart: 'X Y (Scatter)', + scatter: 'Scatter', + bubble: 'Bubble', + + areaChart: 'Area', + area: 'Area', + stackedArea: 'Stacked', + normalizedArea: '100% Stacked', + + histogramChart: 'Histogram', + histogramFrequency: 'Frequency', + + polarChart: 'Polar', + radarLine: 'Radar Line', + radarArea: 'Radar Area', + nightingale: 'Nightingale', + radialColumn: 'Radial Column', + radialBar: 'Radial Bar', + + statisticalChart: 'Statistical', + boxPlot: 'Box Plot', + rangeBar: 'Range Bar', + rangeArea: 'Range Area', + + hierarchicalChart: 'Hierarchical', + treemap: 'Treemap', + sunburst: 'Sunburst', + + specializedChart: 'Specialized', + waterfall: 'Waterfall', + heatmap: 'Heatmap', + + combinationChart: 'Combination', + columnLineCombo: 'Column & Line', + AreaColumnCombo: 'Area & Column', + + // Charts + pivotChartTitle: 'Pivot Chart', + rangeChartTitle: 'Range Chart', + settings: 'Settings', + data: 'Data', + format: 'Format', + categories: 'Categories', + defaultCategory: '(None)', + series: 'Series', + xyValues: 'X Y Values', + paired: 'Paired Mode', + axis: 'Axis', + radiusAxis: 'Radius Axis', + navigator: 'Navigator', + color: 'Color', + thickness: 'Thickness', + preferredLength: 'Preferred Length', + xType: 'X Type', + automatic: 'Automatic', + category: 'Category', + number: 'Number', + time: 'Time', + autoRotate: 'Auto Rotate', + xRotation: 'X Rotation', + yRotation: 'Y Rotation', + labelRotation: 'Rotation', + circle: 'Circle', + polygon: 'Polygon', + orientation: 'Orientation', + fixed: 'Fixed', + parallel: 'Parallel', + perpendicular: 'Perpendicular', + radiusAxisPosition: 'Position', + ticks: 'Ticks', + width: 'Width', + height: 'Height', + length: 'Length', + padding: 'Padding', + spacing: 'Spacing', + chart: 'Chart', + title: 'Title', + titlePlaceholder: 'Chart title - double click to edit', + background: 'Background', + font: 'Font', + top: 'Top', + right: 'Right', + bottom: 'Bottom', + left: 'Left', + labels: 'Labels', + calloutLabels: 'Callout Labels', + sectorLabels: 'Sector Labels', + positionRatio: 'Position Ratio', + size: 'Size', + shape: 'Shape', + minSize: 'Minimum Size', + maxSize: 'Maximum Size', + legend: 'Legend', + position: 'Position', + markerSize: 'Marker Size', + markerStroke: 'Marker Stroke', + markerPadding: 'Marker Padding', + itemSpacing: 'Item Spacing', + itemPaddingX: 'Item Padding X', + itemPaddingY: 'Item Padding Y', + layoutHorizontalSpacing: 'Horizontal Spacing', + layoutVerticalSpacing: 'Vertical Spacing', + strokeWidth: 'Stroke Width', + offset: 'Offset', + offsets: 'Offsets', + tooltips: 'Tooltips', + callout: 'Callout', + markers: 'Markers', + shadow: 'Shadow', + blur: 'Blur', + xOffset: 'X Offset', + yOffset: 'Y Offset', + lineWidth: 'Line Width', + lineDash: 'Line Dash', + lineDashOffset: 'Dash Offset', + normal: 'Normal', + bold: 'Bold', + italic: 'Italic', + boldItalic: 'Bold Italic', + predefined: 'Predefined', + fillOpacity: 'Fill Opacity', + strokeColor: 'Line Color', + strokeOpacity: 'Line Opacity', + histogramBinCount: 'Bin count', + connectorLine: 'Connector Line', + seriesItems: 'Series Items', + seriesItemType: 'Item Type', + seriesItemPositive: 'Positive', + seriesItemNegative: 'Negative', + seriesItemLabels: 'Item Labels', + columnGroup: 'Column', + barGroup: 'Bar', + pieGroup: 'Pie', + lineGroup: 'Line', + scatterGroup: 'X Y (Scatter)', + areaGroup: 'Area', + polarGroup: 'Polar', + statisticalGroup: 'Statistical', + hierarchicalGroup: 'Hierarchical', + specializedGroup: 'Specialized', + combinationGroup: 'Combination', + groupedColumnTooltip: 'Grouped', + stackedColumnTooltip: 'Stacked', + normalizedColumnTooltip: '100% Stacked', + groupedBarTooltip: 'Grouped', + stackedBarTooltip: 'Stacked', + normalizedBarTooltip: '100% Stacked', + pieTooltip: 'Pie', + donutTooltip: 'Donut', + lineTooltip: 'Line', + groupedAreaTooltip: 'Area', + stackedAreaTooltip: 'Stacked', + normalizedAreaTooltip: '100% Stacked', + scatterTooltip: 'Scatter', + bubbleTooltip: 'Bubble', + histogramTooltip: 'Histogram', + radialColumnTooltip: 'Radial Column', + radialBarTooltip: 'Radial Bar', + radarLineTooltip: 'Radar Line', + radarAreaTooltip: 'Radar Area', + nightingaleTooltip: 'Nightingale', + rangeBarTooltip: 'Range Bar', + rangeAreaTooltip: 'Range Area', + boxPlotTooltip: 'Box Plot', + treemapTooltip: 'Treemap', + sunburstTooltip: 'Sunburst', + waterfallTooltip: 'Waterfall', + heatmapTooltip: 'Heatmap', + columnLineComboTooltip: 'Column & Line', + areaColumnComboTooltip: 'Area & Column', + customComboTooltip: 'Custom Combination', + innerRadius: 'Inner Radius', + startAngle: 'Start Angle', + endAngle: 'End Angle', + reverseDirection: 'Reverse Direction', + groupPadding: 'Group Padding', + seriesPadding: 'Series Padding', + //group: 'Group', + tile: 'Tile', + whisker: 'Whisker', + cap: 'Cap', + capLengthRatio: 'Length Ratio', + labelPlacement: 'Placement', + inside: 'Inside', + outside: 'Outside', + noDataToChart: 'No data available to be charted.', + pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.', + chartSettingsToolbarTooltip: 'Menu', + chartLinkToolbarTooltip: 'Linked to Grid', + chartUnlinkToolbarTooltip: 'Unlinked from Grid', + chartDownloadToolbarTooltip: 'Download Chart', + seriesChartType: 'Series Chart Type', + seriesType: 'Series Type', + secondaryAxis: 'Secondary Axis', + + // ARIA + ariaAdvancedFilterBuilderItem: + '${variable}. Level ${variable}. Press ENTER to edit.', + ariaAdvancedFilterBuilderItemValidation: + '${variable}. Level ${variable}. ${variable} Press ENTER to edit.', + ariaAdvancedFilterBuilderList: 'Advanced Filter Builder List', + ariaAdvancedFilterBuilderFilterItem: 'Filter Condition', + ariaAdvancedFilterBuilderGroupItem: 'Filter Group', + ariaAdvancedFilterBuilderColumn: 'Column', + ariaAdvancedFilterBuilderOption: 'Option', + ariaAdvancedFilterBuilderValueP: 'Value', + ariaAdvancedFilterBuilderJoinOperator: 'Join Operator', + ariaAdvancedFilterInput: 'Advanced Filter Input', + ariaChecked: 'checked', + ariaColumn: 'Column', + ariaColumnGroup: 'Column Group', + ariaColumnFiltered: 'Column Filtered', + ariaColumnSelectAll: 'Toggle Select All Columns', + ariaDateFilterInput: 'Date Filter Input', + ariaDefaultListName: 'List', + ariaFilterColumnsInput: 'Filter Columns Input', + ariaFilterFromValue: 'Filter from value', + ariaFilterInput: 'Filter Input', + ariaFilterList: 'Filter List', + ariaFilterToValue: 'Filter to value', + ariaFilterValue: 'Filter Value', + ariaFilterMenuOpen: 'Open Filter Menu', + ariaFilteringOperator: 'Filtering Operator', + ariaHidden: 'hidden', + ariaIndeterminate: 'indeterminate', + ariaInputEditor: 'Input Editor', + ariaMenuColumn: 'Press ALT DOWN to open column menu', + ariaFilterColumn: 'Press CTRL ENTER to open filter', + ariaRowDeselect: 'Press SPACE to deselect this row', + ariaRowSelectAll: 'Press Space to toggle all rows selection', + ariaRowToggleSelection: 'Press Space to toggle row selection', + ariaRowSelect: 'Press SPACE to select this row', + ariaSearch: 'Search', + ariaSortableColumn: 'Press ENTER to sort', + ariaToggleVisibility: 'Press SPACE to toggle visibility', + ariaToggleCellValue: 'Press SPACE to toggle cell value', + ariaUnchecked: 'unchecked', + ariaVisible: 'visible', + ariaSearchFilterValues: 'Search filter values', + ariaPageSizeSelectorLabel: 'Page Size', + + // ARIA Labels for Drop Zones + ariaRowGroupDropZonePanelLabel: 'Row Groups', + ariaValuesDropZonePanelLabel: 'Values', + ariaPivotDropZonePanelLabel: 'Column Labels', + ariaDropZoneColumnComponentDescription: 'Press DELETE to remove', + ariaDropZoneColumnValueItemDescription: + 'Press ENTER to change the aggregation type', + ariaDropZoneColumnGroupItemDescription: 'Press ENTER to sort', + // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} + ariaDropZoneColumnComponentAggFuncSeparator: ' of ', + ariaDropZoneColumnComponentSortAscending: 'ascending', + ariaDropZoneColumnComponentSortDescending: 'descending', + + // ARIA Labels for Dialogs + ariaLabelColumnMenu: 'Column Menu', + ariaLabelColumnFilter: 'Column Filter', + ariaLabelCellEditor: 'Cell Editor', + ariaLabelDialog: 'Dialog', + ariaLabelSelectField: 'Select Field', + ariaLabelRichSelectField: 'Rich Select Field', + ariaLabelTooltip: 'Tooltip', + ariaLabelContextMenu: 'Context Menu', + ariaLabelSubMenu: 'SubMenu', + ariaLabelAggregationFunction: 'Aggregation Function', + ariaLabelAdvancedFilterAutocomplete: 'Advanced Filter Autocomplete', + ariaLabelAdvancedFilterBuilderAddField: 'Advanced Filter Builder Add Field', + ariaLabelAdvancedFilterBuilderColumnSelectField: + 'Advanced Filter Builder Column Select Field', + ariaLabelAdvancedFilterBuilderOptionSelectField: + 'Advanced Filter Builder Option Select Field', + ariaLabelAdvancedFilterBuilderJoinSelectField: + 'Advanced Filter Builder Join Operator Select Field', + + // ARIA Labels for the Side Bar + ariaColumnPanelList: 'Column List', + ariaFilterPanelList: 'Filter List', + + // Number Format (Status Bar, Pagination Panel) + thousandSeparator: ',', + decimalSeparator: '.', + + // Data types + true: 'True', + false: 'False', + invalidDate: 'Invalid Date', + invalidNumber: 'Invalid Number', + january: 'January', + february: 'February', + march: 'March', + april: 'April', + may: 'May', + june: 'June', + july: 'July', + august: 'August', + september: 'September', + october: 'October', + november: 'November', + december: 'December', +}; + +export type AgGridLocale = typeof AG_GRID_LOCALE_EN; +export type AgGridLocaleKeys = keyof AgGridLocale; diff --git a/src/translations/ag-grid/locale.fr.ts b/src/translations/ag-grid/locale.fr.ts new file mode 100644 index 0000000..a624ddf --- /dev/null +++ b/src/translations/ag-grid/locale.fr.ts @@ -0,0 +1,531 @@ +/* eslint-disable no-template-curly-in-string */ + +import { AgGridLocale } from './locale.en'; + +// TODO translate to french +export const AG_GRID_LOCALE_FR: AgGridLocale = { + // Set Filter + selectAll: '(Select All)', + selectAllSearchResults: '(Select All Search Results)', + addCurrentSelectionToFilter: 'Add current selection to filter', + searchOoo: 'Search...', + blanks: '(Blanks)', + noMatches: 'No matches', + + // Number Filter & Text Filter + filterOoo: 'Filter...', + equals: 'Equals', + notEqual: 'Does not equal', + blank: 'Blank', + notBlank: 'Not blank', + empty: 'Choose one', + + // Number Filter + lessThan: 'Less than', + greaterThan: 'Greater than', + lessThanOrEqual: 'Less than or equal to', + greaterThanOrEqual: 'Greater than or equal to', + inRange: 'Between', + inRangeStart: 'From', + inRangeEnd: 'To', + + // Text Filter + contains: 'Contains', + notContains: 'Does not contain', + startsWith: 'Begins with', + endsWith: 'Ends with', + + // Date Filter + dateFormatOoo: 'yyyy-mm-dd', + before: 'Before', + after: 'After', + + // Filter Conditions + andCondition: 'AND', + orCondition: 'OR', + + // Filter Buttons + applyFilter: 'Apply', + resetFilter: 'Reset', + clearFilter: 'Clear', + cancelFilter: 'Cancel', + + // Filter Titles + textFilter: 'Text Filter', + numberFilter: 'Number Filter', + dateFilter: 'Date Filter', + setFilter: 'Set Filter', + + // Group Column Filter + groupFilterSelect: 'Select field:', + + // Advanced Filter + advancedFilterContains: 'contains', + advancedFilterNotContains: 'does not contain', + advancedFilterTextEquals: 'equals', + advancedFilterTextNotEqual: 'does not equal', + advancedFilterStartsWith: 'begins with', + advancedFilterEndsWith: 'ends with', + advancedFilterBlank: 'is blank', + advancedFilterNotBlank: 'is not blank', + advancedFilterEquals: '=', + advancedFilterNotEqual: '!=', + advancedFilterGreaterThan: '>', + advancedFilterGreaterThanOrEqual: '>=', + advancedFilterLessThan: '<', + advancedFilterLessThanOrEqual: '<=', + advancedFilterTrue: 'is true', + advancedFilterFalse: 'is false', + advancedFilterAnd: 'AND', + advancedFilterOr: 'OR', + advancedFilterApply: 'Apply', + advancedFilterBuilder: 'Builder', + advancedFilterValidationMissingColumn: 'Column is missing', + advancedFilterValidationMissingOption: 'Option is missing', + advancedFilterValidationMissingValue: 'Value is missing', + advancedFilterValidationInvalidColumn: 'Column not found', + advancedFilterValidationInvalidOption: 'Option not found', + advancedFilterValidationMissingQuote: 'Value is missing an end quote', + advancedFilterValidationNotANumber: 'Value is not a number', + advancedFilterValidationInvalidDate: 'Value is not a valid date', + advancedFilterValidationMissingCondition: 'Condition is missing', + advancedFilterValidationJoinOperatorMismatch: + 'Join operators within a condition must be the same', + advancedFilterValidationInvalidJoinOperator: 'Join operator not found', + advancedFilterValidationMissingEndBracket: 'Missing end bracket', + advancedFilterValidationExtraEndBracket: 'Too many end brackets', + advancedFilterValidationMessage: + 'Expression has an error. ${variable} - ${variable}.', + advancedFilterValidationMessageAtEnd: + 'Expression has an error. ${variable} at end of expression.', + advancedFilterBuilderTitle: 'Advanced Filter', + advancedFilterBuilderApply: 'Apply', + advancedFilterBuilderCancel: 'Cancel', + advancedFilterBuilderAddButtonTooltip: 'Add Filter or Group', + advancedFilterBuilderRemoveButtonTooltip: 'Remove', + advancedFilterBuilderMoveUpButtonTooltip: 'Move Up', + advancedFilterBuilderMoveDownButtonTooltip: 'Move Down', + advancedFilterBuilderAddJoin: 'Add Group', + advancedFilterBuilderAddCondition: 'Add Filter', + advancedFilterBuilderSelectColumn: 'Select a column', + advancedFilterBuilderSelectOption: 'Select an option', + advancedFilterBuilderEnterValue: 'Enter a value...', + advancedFilterBuilderValidationAlreadyApplied: + 'Current filter already applied.', + advancedFilterBuilderValidationIncomplete: + 'Not all conditions are complete.', + advancedFilterBuilderValidationSelectColumn: 'Must select a column.', + advancedFilterBuilderValidationSelectOption: 'Must select an option.', + advancedFilterBuilderValidationEnterValue: 'Must enter a value.', + + // Side Bar + columns: 'Columns', + filters: 'Filters', + + // columns tool panel + pivotMode: 'Pivot Mode', + groups: 'Row Groups', + rowGroupColumnsEmptyMessage: 'Drag here to set row groups', + values: 'Values', + valueColumnsEmptyMessage: 'Drag here to aggregate', + pivots: 'Column Labels', + pivotColumnsEmptyMessage: 'Drag here to set column labels', + + // Header of the Default Group Column + group: 'Group', + + // Row Drag + rowDragRow: 'row', + rowDragRows: 'rows', + + // Other + loadingOoo: 'Loading...', + loadingError: 'ERR', + noRowsToShow: 'No Rows To Show', + enabled: 'Enabled', + + // Menu + pinColumn: 'Pin Column', + pinLeft: 'Pin Left', + pinRight: 'Pin Right', + noPin: 'No Pin', + valueAggregation: 'Value Aggregation', + noAggregation: 'None', + autosizeThiscolumn: 'Autosize This Column', + autosizeAllColumns: 'Autosize All Columns', + groupBy: 'Group by', + ungroupBy: 'Un-Group by', + ungroupAll: 'Un-Group All', + addToValues: 'Add ${variable} to values', + removeFromValues: 'Remove ${variable} from values', + addToLabels: 'Add ${variable} to labels', + removeFromLabels: 'Remove ${variable} from labels', + resetColumns: 'Reset Columns', + expandAll: 'Expand All Row Groups', + collapseAll: 'Close All Row Groups', + copy: 'Copy', + ctrlC: 'Ctrl+C', + ctrlX: 'Ctrl+X', + copyWithHeaders: 'Copy With Headers', + copyWithGroupHeaders: 'Copy with Group Headers', + cut: 'Cut', + paste: 'Paste', + ctrlV: 'Ctrl+V', + export: 'Export', + csvExport: 'CSV Export', + excelExport: 'Excel Export', + columnFilter: 'Column Filter', + columnChooser: 'Choose Columns', + sortAscending: 'Sort Ascending', + sortDescending: 'Sort Descending', + sortUnSort: 'Clear Sort', + + // Enterprise Menu Aggregation and Status Bar + sum: 'Sum', + first: 'First', + last: 'Last', + min: 'Min', + max: 'Max', + none: 'None', + count: 'Count', + avg: 'Average', + filteredRows: 'Filtered', + selectedRows: 'Selected', + totalRows: 'Total Rows', + totalAndFilteredRows: 'Rows', + more: 'More', + to: 'to', + of: 'of', + page: 'Page', + pageLastRowUnknown: '?', + nextPage: 'Next Page', + lastPage: 'Last Page', + firstPage: 'First Page', + previousPage: 'Previous Page', + pageSizeSelectorLabel: 'Page Size:', + footerTotal: 'Total', + + // Pivoting + pivotColumnGroupTotals: 'Total', + + // Enterprise Menu (Charts) + pivotChartAndPivotMode: 'Pivot Chart & Pivot Mode', + pivotChart: 'Pivot Chart', + chartRange: 'Chart Range', + + columnChart: 'Column', + groupedColumn: 'Grouped', + stackedColumn: 'Stacked', + normalizedColumn: '100% Stacked', + + barChart: 'Bar', + groupedBar: 'Grouped', + stackedBar: 'Stacked', + normalizedBar: '100% Stacked', + + pieChart: 'Pie', + pie: 'Pie', + donut: 'Donut', + + line: 'Line', + + xyChart: 'X Y (Scatter)', + scatter: 'Scatter', + bubble: 'Bubble', + + areaChart: 'Area', + area: 'Area', + stackedArea: 'Stacked', + normalizedArea: '100% Stacked', + + histogramChart: 'Histogram', + histogramFrequency: 'Frequency', + + polarChart: 'Polar', + radarLine: 'Radar Line', + radarArea: 'Radar Area', + nightingale: 'Nightingale', + radialColumn: 'Radial Column', + radialBar: 'Radial Bar', + + statisticalChart: 'Statistical', + boxPlot: 'Box Plot', + rangeBar: 'Range Bar', + rangeArea: 'Range Area', + + hierarchicalChart: 'Hierarchical', + treemap: 'Treemap', + sunburst: 'Sunburst', + + specializedChart: 'Specialized', + waterfall: 'Waterfall', + heatmap: 'Heatmap', + + combinationChart: 'Combination', + columnLineCombo: 'Column & Line', + AreaColumnCombo: 'Area & Column', + + // Charts + pivotChartTitle: 'Pivot Chart', + rangeChartTitle: 'Range Chart', + settings: 'Settings', + data: 'Data', + format: 'Format', + categories: 'Categories', + defaultCategory: '(None)', + series: 'Series', + xyValues: 'X Y Values', + paired: 'Paired Mode', + axis: 'Axis', + radiusAxis: 'Radius Axis', + navigator: 'Navigator', + color: 'Color', + thickness: 'Thickness', + preferredLength: 'Preferred Length', + xType: 'X Type', + automatic: 'Automatic', + category: 'Category', + number: 'Number', + time: 'Time', + autoRotate: 'Auto Rotate', + xRotation: 'X Rotation', + yRotation: 'Y Rotation', + labelRotation: 'Rotation', + circle: 'Circle', + polygon: 'Polygon', + orientation: 'Orientation', + fixed: 'Fixed', + parallel: 'Parallel', + perpendicular: 'Perpendicular', + radiusAxisPosition: 'Position', + ticks: 'Ticks', + width: 'Width', + height: 'Height', + length: 'Length', + padding: 'Padding', + spacing: 'Spacing', + chart: 'Chart', + title: 'Title', + titlePlaceholder: 'Chart title - double click to edit', + background: 'Background', + font: 'Font', + top: 'Top', + right: 'Right', + bottom: 'Bottom', + left: 'Left', + labels: 'Labels', + calloutLabels: 'Callout Labels', + sectorLabels: 'Sector Labels', + positionRatio: 'Position Ratio', + size: 'Size', + shape: 'Shape', + minSize: 'Minimum Size', + maxSize: 'Maximum Size', + legend: 'Legend', + position: 'Position', + markerSize: 'Marker Size', + markerStroke: 'Marker Stroke', + markerPadding: 'Marker Padding', + itemSpacing: 'Item Spacing', + itemPaddingX: 'Item Padding X', + itemPaddingY: 'Item Padding Y', + layoutHorizontalSpacing: 'Horizontal Spacing', + layoutVerticalSpacing: 'Vertical Spacing', + strokeWidth: 'Stroke Width', + offset: 'Offset', + offsets: 'Offsets', + tooltips: 'Tooltips', + callout: 'Callout', + markers: 'Markers', + shadow: 'Shadow', + blur: 'Blur', + xOffset: 'X Offset', + yOffset: 'Y Offset', + lineWidth: 'Line Width', + lineDash: 'Line Dash', + lineDashOffset: 'Dash Offset', + normal: 'Normal', + bold: 'Bold', + italic: 'Italic', + boldItalic: 'Bold Italic', + predefined: 'Predefined', + fillOpacity: 'Fill Opacity', + strokeColor: 'Line Color', + strokeOpacity: 'Line Opacity', + histogramBinCount: 'Bin count', + connectorLine: 'Connector Line', + seriesItems: 'Series Items', + seriesItemType: 'Item Type', + seriesItemPositive: 'Positive', + seriesItemNegative: 'Negative', + seriesItemLabels: 'Item Labels', + columnGroup: 'Column', + barGroup: 'Bar', + pieGroup: 'Pie', + lineGroup: 'Line', + scatterGroup: 'X Y (Scatter)', + areaGroup: 'Area', + polarGroup: 'Polar', + statisticalGroup: 'Statistical', + hierarchicalGroup: 'Hierarchical', + specializedGroup: 'Specialized', + combinationGroup: 'Combination', + groupedColumnTooltip: 'Grouped', + stackedColumnTooltip: 'Stacked', + normalizedColumnTooltip: '100% Stacked', + groupedBarTooltip: 'Grouped', + stackedBarTooltip: 'Stacked', + normalizedBarTooltip: '100% Stacked', + pieTooltip: 'Pie', + donutTooltip: 'Donut', + lineTooltip: 'Line', + groupedAreaTooltip: 'Area', + stackedAreaTooltip: 'Stacked', + normalizedAreaTooltip: '100% Stacked', + scatterTooltip: 'Scatter', + bubbleTooltip: 'Bubble', + histogramTooltip: 'Histogram', + radialColumnTooltip: 'Radial Column', + radialBarTooltip: 'Radial Bar', + radarLineTooltip: 'Radar Line', + radarAreaTooltip: 'Radar Area', + nightingaleTooltip: 'Nightingale', + rangeBarTooltip: 'Range Bar', + rangeAreaTooltip: 'Range Area', + boxPlotTooltip: 'Box Plot', + treemapTooltip: 'Treemap', + sunburstTooltip: 'Sunburst', + waterfallTooltip: 'Waterfall', + heatmapTooltip: 'Heatmap', + columnLineComboTooltip: 'Column & Line', + areaColumnComboTooltip: 'Area & Column', + customComboTooltip: 'Custom Combination', + innerRadius: 'Inner Radius', + startAngle: 'Start Angle', + endAngle: 'End Angle', + reverseDirection: 'Reverse Direction', + groupPadding: 'Group Padding', + seriesPadding: 'Series Padding', + //group: 'Group', + tile: 'Tile', + whisker: 'Whisker', + cap: 'Cap', + capLengthRatio: 'Length Ratio', + labelPlacement: 'Placement', + inside: 'Inside', + outside: 'Outside', + noDataToChart: 'No data available to be charted.', + pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.', + chartSettingsToolbarTooltip: 'Menu', + chartLinkToolbarTooltip: 'Linked to Grid', + chartUnlinkToolbarTooltip: 'Unlinked from Grid', + chartDownloadToolbarTooltip: 'Download Chart', + seriesChartType: 'Series Chart Type', + seriesType: 'Series Type', + secondaryAxis: 'Secondary Axis', + + // ARIA + ariaAdvancedFilterBuilderItem: + '${variable}. Level ${variable}. Press ENTER to edit.', + ariaAdvancedFilterBuilderItemValidation: + '${variable}. Level ${variable}. ${variable} Press ENTER to edit.', + ariaAdvancedFilterBuilderList: 'Advanced Filter Builder List', + ariaAdvancedFilterBuilderFilterItem: 'Filter Condition', + ariaAdvancedFilterBuilderGroupItem: 'Filter Group', + ariaAdvancedFilterBuilderColumn: 'Column', + ariaAdvancedFilterBuilderOption: 'Option', + ariaAdvancedFilterBuilderValueP: 'Value', + ariaAdvancedFilterBuilderJoinOperator: 'Join Operator', + ariaAdvancedFilterInput: 'Advanced Filter Input', + ariaChecked: 'checked', + ariaColumn: 'Column', + ariaColumnGroup: 'Column Group', + ariaColumnFiltered: 'Column Filtered', + ariaColumnSelectAll: 'Toggle Select All Columns', + ariaDateFilterInput: 'Date Filter Input', + ariaDefaultListName: 'List', + ariaFilterColumnsInput: 'Filter Columns Input', + ariaFilterFromValue: 'Filter from value', + ariaFilterInput: 'Filter Input', + ariaFilterList: 'Filter List', + ariaFilterToValue: 'Filter to value', + ariaFilterValue: 'Filter Value', + ariaFilterMenuOpen: 'Open Filter Menu', + ariaFilteringOperator: 'Filtering Operator', + ariaHidden: 'hidden', + ariaIndeterminate: 'indeterminate', + ariaInputEditor: 'Input Editor', + ariaMenuColumn: 'Press ALT DOWN to open column menu', + ariaFilterColumn: 'Press CTRL ENTER to open filter', + ariaRowDeselect: 'Press SPACE to deselect this row', + ariaRowSelectAll: 'Press Space to toggle all rows selection', + ariaRowToggleSelection: 'Press Space to toggle row selection', + ariaRowSelect: 'Press SPACE to select this row', + ariaSearch: 'Search', + ariaSortableColumn: 'Press ENTER to sort', + ariaToggleVisibility: 'Press SPACE to toggle visibility', + ariaToggleCellValue: 'Press SPACE to toggle cell value', + ariaUnchecked: 'unchecked', + ariaVisible: 'visible', + ariaSearchFilterValues: 'Search filter values', + ariaPageSizeSelectorLabel: 'Page Size', + + // ARIA Labels for Drop Zones + ariaRowGroupDropZonePanelLabel: 'Row Groups', + ariaValuesDropZonePanelLabel: 'Values', + ariaPivotDropZonePanelLabel: 'Column Labels', + ariaDropZoneColumnComponentDescription: 'Press DELETE to remove', + ariaDropZoneColumnValueItemDescription: + 'Press ENTER to change the aggregation type', + ariaDropZoneColumnGroupItemDescription: 'Press ENTER to sort', + // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} + ariaDropZoneColumnComponentAggFuncSeparator: ' of ', + ariaDropZoneColumnComponentSortAscending: 'ascending', + ariaDropZoneColumnComponentSortDescending: 'descending', + + // ARIA Labels for Dialogs + ariaLabelColumnMenu: 'Column Menu', + ariaLabelColumnFilter: 'Column Filter', + ariaLabelCellEditor: 'Cell Editor', + ariaLabelDialog: 'Dialog', + ariaLabelSelectField: 'Select Field', + ariaLabelRichSelectField: 'Rich Select Field', + ariaLabelTooltip: 'Tooltip', + ariaLabelContextMenu: 'Context Menu', + ariaLabelSubMenu: 'SubMenu', + ariaLabelAggregationFunction: 'Aggregation Function', + ariaLabelAdvancedFilterAutocomplete: 'Advanced Filter Autocomplete', + ariaLabelAdvancedFilterBuilderAddField: 'Advanced Filter Builder Add Field', + ariaLabelAdvancedFilterBuilderColumnSelectField: + 'Advanced Filter Builder Column Select Field', + ariaLabelAdvancedFilterBuilderOptionSelectField: + 'Advanced Filter Builder Option Select Field', + ariaLabelAdvancedFilterBuilderJoinSelectField: + 'Advanced Filter Builder Join Operator Select Field', + + // ARIA Labels for the Side Bar + ariaColumnPanelList: 'List colonne', + ariaFilterPanelList: 'Liste filtre', + + // Number Format (Status Bar, Pagination Panel) + thousandSeparator: '.', + decimalSeparator: ',', + + // Data types + true: 'Vrai', + false: 'Faux', + invalidDate: 'Date invalide', + invalidNumber: 'Nombre invalide', + january: 'Janvier', + february: 'Février', + march: 'Mars', + april: 'Avril', + may: 'Mai', + june: 'Juin', + july: 'Juillet', + august: 'Août', + september: 'Septembre', + october: 'Octobre', + november: 'Novembre', + december: 'Décembre', +}; diff --git a/src/translations/en.json b/src/translations/en.json index 667c937..f9661e6 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2,6 +2,8 @@ "logoutFailed": "Error: logout failed; you are still logged in.", "connected": "Connected", "close": "Close", + "ok": "OK", + "cancel": "Cancel", "parameters": "Parameters", "paramsChangingError": "An error occurred when changing the parameters", "paramsRetrievingError": "An error occurred while retrieving the parameters", @@ -16,7 +18,14 @@ "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Refresh table data", "table.toolbar.add": "Add", + "table.toolbar.add.label": "Add element", + "table.toolbar.add.tooltip": "Add an element", "table.toolbar.delete": "Delete", + "table.toolbar.delete.label": "Delete selection", + "table.toolbar.delete.tooltip": "Delete selected element(s)", + "table.bool.yes": "Yes", + "table.bool.no": "No", + "table.bool.unknown": "Unknown", "connections.title": "Connections history", "connections.table.id.description": "User login", @@ -26,9 +35,6 @@ "connections.table.lastConnection.description": "The last time the user try to connect", "connections.table.allowed": "Allowed", "connections.table.allowed.description": "Is the user as authorized last time?", - "connections.table.allowed.yes": "Yes", - "connections.table.allowed.no": "No", - "connections.table.allowed.unknown": "Unknown", "users.title": "List of GridSuite users", "users.table.id.description": "Identifiant de l'utilisateur", diff --git a/src/translations/fr.json b/src/translations/fr.json index f5e4558..0419b56 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -2,6 +2,8 @@ "logoutFailed": "Erreur: échec de la déconnexion\u00a0; vous êtes toujours connecté(e).", "connected": "Connecté(e)", "close": "Fermer", + "ok": "OK", + "cancel": "Annuler", "parameters": "Paramètres", "paramsChangingError": "Une erreur est survenue lors de la modification des paramètres", "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres", @@ -16,7 +18,14 @@ "table.toolbar.refresh.label": "Refresh data", "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", "table.toolbar.add": "Ajouter", + "table.toolbar.add.label": "Add element", + "table.toolbar.add.tooltip": "Ajouter un élément", "table.toolbar.delete": "Supprimer", + "table.toolbar.delete.label": "Supprimer sélection", + "table.toolbar.delete.tooltip": "Supprimer le(s) élément(s) sélectionné(s)", + "table.bool.yes": "Oui", + "table.bool.no": "No", + "table.bool.unknown": "Inconnu", "connections.title": "Historique des connexions", "connections.table.id.description": "Identifiant de l'utilisateur", @@ -26,9 +35,6 @@ "connections.table.lastConnection.description": "La dernière tentative de connexion de l'utilisateur", "connections.table.allowed": "Autorisé", "connections.table.allowed.description": "Si l'utilisateur fût autorisé lors de sa dernière tentative de connexion", - "connections.table.allowed.yes": "Oui", - "connections.table.allowed.no": "Échec", - "connections.table.allowed.unknown": "\u00A0", "users.title": "Liste des utilisateurs", "users.table.id.description": "Identifiant de l'utilisateur", diff --git a/src/utils/types.d.ts b/src/utils/types.d.ts new file mode 100644 index 0000000..b3a6ddc --- /dev/null +++ b/src/utils/types.d.ts @@ -0,0 +1,6 @@ +// https://github.com/microsoft/TypeScript/issues/29729#issuecomment-505826972 +//TODO use version of type-fest instead? +export type LiteralUnion< + Literals, + Base extends string | number | boolean | bigint = string +> = Literals | (Base & Record); From 838f07ae79e8d593db3bdfc5f337348e593fdc59 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 6 Mar 2024 09:24:28 +0100 Subject: [PATCH 27/54] fix & review --- src/components/App/app-wrapper.tsx | 1 + src/components/parameters.tsx | 2 +- src/index.css | 2 +- src/plugins/README.md | 7 ++++--- src/plugins/translations/en.json | 3 +-- src/plugins/translations/fr.json | 3 +-- src/translations/fr.json | 2 +- src/utils/api.ts | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/App/app-wrapper.tsx b/src/components/App/app-wrapper.tsx index 5e030fe..87d0d67 100644 --- a/src/components/App/app-wrapper.tsx +++ b/src/components/App/app-wrapper.tsx @@ -135,6 +135,7 @@ const AppWrapperRouterLayout: typeof App = (props, context) => { return ( diff --git a/src/components/parameters.tsx b/src/components/parameters.tsx index 3d0c1e8..d8b0021 100644 --- a/src/components/parameters.tsx +++ b/src/components/parameters.tsx @@ -116,7 +116,7 @@ const Parameters: FunctionComponent< open={props.showParameters} onClose={props.hideParameters} aria-labelledby="form-dialog-title" - maxWidth={'md'} + maxWidth="md" fullWidth={true} > diff --git a/src/index.css b/src/index.css index 407ba15..69e621e 100644 --- a/src/index.css +++ b/src/index.css @@ -16,7 +16,7 @@ code { Except iframes have a border value set to 2 which can cause a slight offset to the UI. This rule prevent the iframe to cause an unwanted offset. It can be removed if oidc-client-js is no longer the authentification library in use in this project. */ - + body > iframe[width='0'][height='0'] { border: 0; } diff --git a/src/plugins/README.md b/src/plugins/README.md index fd2ae97..3650fb0 100644 --- a/src/plugins/README.md +++ b/src/plugins/README.md @@ -1,4 +1,3 @@ - # How to add plugins Add a plugin component or object in the corresponding group represented as folders. @@ -12,6 +11,7 @@ export default MyNewPlugin; ``` Edit `index.ts` to export your new plugin in the corresponding group + ```ts import MyNewPlugin from './myPluginGroup/myNewPlugin'; ... @@ -48,5 +48,6 @@ const MyPluggableComponent: FunctionComponent = () => { # How to overwrite translations Add your private translations to the following files to complete or overwrite existing translations -* `src/plugins/translations/en.json` -* `src/plugins/translations/fr.json` + +- `src/plugins/translations/en.json` +- `src/plugins/translations/fr.json` diff --git a/src/plugins/translations/en.json b/src/plugins/translations/en.json index 2c63c08..0967ef4 100644 --- a/src/plugins/translations/en.json +++ b/src/plugins/translations/en.json @@ -1,2 +1 @@ -{ -} +{} diff --git a/src/plugins/translations/fr.json b/src/plugins/translations/fr.json index 2c63c08..0967ef4 100644 --- a/src/plugins/translations/fr.json +++ b/src/plugins/translations/fr.json @@ -1,2 +1 @@ -{ -} +{} diff --git a/src/translations/fr.json b/src/translations/fr.json index 0419b56..b78165d 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -47,5 +47,5 @@ "users.table.toolbar.add.tooltip": "Ajouter un utilisateur", "users.form.title": "Ajouter un utilisateur", "users.form.content": "Veuillez renseigner les informations de l'utilisateur.", - "users.form.field.username.label": ":ID utilisateur" + "users.form.field.username.label": "ID utilisateur" } diff --git a/src/utils/api.ts b/src/utils/api.ts index 16a18b1..e2d97de 100644 --- a/src/utils/api.ts +++ b/src/utils/api.ts @@ -10,7 +10,7 @@ export function getToken(user?: User): Token { export function getUser(): User { const state: AppState = store.getState(); - return state.user; //?? state.userManager?.instance?.getUser().then(); + return state.user; } export function extractUserSub(user: User): Promise { From 28295940af3dfff739c8724306a2dca854a01ece Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 6 Mar 2024 13:08:57 +0100 Subject: [PATCH 28/54] imports & copyright header --- src/components/App/index.ts | 7 ++++++ src/components/Grid/AgGrid/AgGrid.tsx | 9 ++++++- src/components/Grid/AgGrid/AgGrid.type.ts | 11 +++++++- .../Grid/AgGrid/ag-theme-alpine.d.ts | 7 ++++++ src/components/Grid/DataGrid.tsx | 16 +++++++++--- src/components/Grid/Grid.tsx | 7 ++++++ src/components/Grid/GridFormat.tsx | 7 ++++++ src/components/Grid/NoRowsOverlay.tsx | 7 ++++++ src/components/Grid/buttons/BaseButton.tsx | 7 ++++++ src/components/Grid/buttons/ButtonAdd.tsx | 7 ++++++ src/components/Grid/buttons/ButtonDelete.tsx | 7 ++++++ src/components/Grid/buttons/ButtonRefresh.tsx | 7 ++++++ src/components/Grid/index.ts | 25 +++++++++++++++++++ src/components/RotateIcon.tsx | 7 ++++++ src/module-mui.d.ts | 2 +- src/pages/connections/ConnectionsPage.tsx | 7 ++++++ src/pages/connections/index.ts | 7 ++++++ src/pages/index.ts | 7 ++++++ src/pages/users/UsersPage.tsx | 18 ++++++++++--- src/pages/users/index.ts | 7 ++++++ src/routes/ErrorPage.tsx | 7 ++++++ src/routes/HomePage.tsx | 7 ++++++ src/routes/index.ts | 7 ++++++ src/services/apps-metadata.ts | 7 ++++++ src/services/config-notification.ts | 7 ++++++ src/services/config.ts | 7 ++++++ src/services/index.ts | 7 ++++++ src/services/user-admin.ts | 7 ++++++ src/translations/ag-grid/locale.en.ts | 1 + src/translations/ag-grid/locale.fr.ts | 1 + src/utils/api-ws.ts | 7 ++++++ src/utils/api.ts | 7 ++++++ src/utils/functions.ts | 7 ++++++ 33 files changed, 247 insertions(+), 11 deletions(-) create mode 100644 src/components/Grid/index.ts diff --git a/src/components/App/index.ts b/src/components/App/index.ts index d7ddb96..8353c88 100644 --- a/src/components/App/index.ts +++ b/src/components/App/index.ts @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 AppComponent from './app'; export type App = typeof AppComponent; diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx index 2e43a63..56d0acf 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 'ag-grid-community/styles/ag-grid.min.css'; import 'ag-grid-community/styles/ag-theme-alpine-no-font.min.css'; import 'ag-grid-community/styles/agGridMaterialFont.min.css'; @@ -148,7 +155,7 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< ref={agGridRef} modules={[ - //ClientSideRowModelModule, + //ClientSideRowModelModule implicitly recognized? CsvExportModule, ]} localeText={translations} diff --git a/src/components/Grid/AgGrid/AgGrid.type.ts b/src/components/Grid/AgGrid/AgGrid.type.ts index 9dc2f95..ddca481 100644 --- a/src/components/Grid/AgGrid/AgGrid.type.ts +++ b/src/components/Grid/AgGrid/AgGrid.type.ts @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { ColDef, GridOptions, @@ -662,7 +669,9 @@ export interface AgColDef | ICellRendererFunc; //TODO discriminative conditional type on cellRenderer value cellRendererParams?: - | (Partial> & { [key: string]: any }) + | (Partial> & { + [key: string]: any; + }) | IGroupCellRendererParams | ICheckboxCellRendererParams; diff --git a/src/components/Grid/AgGrid/ag-theme-alpine.d.ts b/src/components/Grid/AgGrid/ag-theme-alpine.d.ts index 9852db6..a9a4a65 100644 --- a/src/components/Grid/AgGrid/ag-theme-alpine.d.ts +++ b/src/components/Grid/AgGrid/ag-theme-alpine.d.ts @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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/. + */ + // list taken from ag-grid-community/styles/ag-theme-alpine-no-font.css import { PaletteMode } from '@mui/material'; diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index dc72dfc..01c1030 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { Divider, useForkRef } from '@mui/material'; import NoRowsOverlay from './NoRowsOverlay'; import { @@ -31,12 +38,13 @@ type FullDataGridProps = GridProps< NoRowOverlay >; -export type DataGridExposed = { +type DataGridExposed = { actionThenRefresh: (action: () => Promise) => void; }; -interface DataGridProps - extends Omit, 'rowData'> { +export interface DataGridProps + extends Omit, 'rowData'>, + PropsWithChildren<{}> { //context: NonNullable['context']>; //required accessRef: RefObject>; dataLoader: () => Promise; @@ -96,7 +104,7 @@ function onComponentStateChanged( */ //TODO optionally save grid state to just show/hide in tabs without losing grid state export default function DataGrid( - props: Readonly>> + props: Readonly> ): ReactElement { const { context, diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 672871f..5dfb066 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { ForwardedRef, forwardRef, diff --git a/src/components/Grid/GridFormat.tsx b/src/components/Grid/GridFormat.tsx index c745629..8034ea9 100644 --- a/src/components/Grid/GridFormat.tsx +++ b/src/components/Grid/GridFormat.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { FormattedMessage, IntlShape, useIntl } from 'react-intl'; import { ValueFormatterFunc, diff --git a/src/components/Grid/NoRowsOverlay.tsx b/src/components/Grid/NoRowsOverlay.tsx index 62b9296..708ab85 100644 --- a/src/components/Grid/NoRowsOverlay.tsx +++ b/src/components/Grid/NoRowsOverlay.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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/. + */ + /* * from https://mui.com/x/react-data-grid/components/#no-rows-overlay */ diff --git a/src/components/Grid/buttons/BaseButton.tsx b/src/components/Grid/buttons/BaseButton.tsx index 0703c8a..7ea4678 100644 --- a/src/components/Grid/buttons/BaseButton.tsx +++ b/src/components/Grid/buttons/BaseButton.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { Button as MuiButton, ButtonProps, diff --git a/src/components/Grid/buttons/ButtonAdd.tsx b/src/components/Grid/buttons/ButtonAdd.tsx index 2de20bf..2bbb646 100644 --- a/src/components/Grid/buttons/ButtonAdd.tsx +++ b/src/components/Grid/buttons/ButtonAdd.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { forwardRef, useMemo } from 'react'; import { AddCircleOutline, SvgIconComponent } from '@mui/icons-material'; import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; diff --git a/src/components/Grid/buttons/ButtonDelete.tsx b/src/components/Grid/buttons/ButtonDelete.tsx index cde1475..4d2b638 100644 --- a/src/components/Grid/buttons/ButtonDelete.tsx +++ b/src/components/Grid/buttons/ButtonDelete.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { forwardRef, useMemo } from 'react'; import { Delete, SvgIconComponent } from '@mui/icons-material'; import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; diff --git a/src/components/Grid/buttons/ButtonRefresh.tsx b/src/components/Grid/buttons/ButtonRefresh.tsx index 08c3123..0b9c886 100644 --- a/src/components/Grid/buttons/ButtonRefresh.tsx +++ b/src/components/Grid/buttons/ButtonRefresh.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { forwardRef, useCallback, useMemo, useState } from 'react'; import { Refresh } from '@mui/icons-material'; import RotateIcon from '../../RotateIcon'; diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts new file mode 100644 index 0000000..7b0ca94 --- /dev/null +++ b/src/components/Grid/index.ts @@ -0,0 +1,25 @@ +/* + * Copyright (c) 2024, 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/. + */ + +export type * from './AgGrid/ag-theme-alpine'; +export type * from './AgGrid/AgGrid.type'; + +/*export { AgGrid } from './AgGrid/AgGrid'; +export type { AgGridRef } from './AgGrid/AgGrid';*/ + +export { GridButtonAdd } from './buttons/ButtonAdd'; +export type { GridButtonAddProps } from './buttons/ButtonAdd'; +//export { GridButtonDelete, GridButtonDeleteProps } from './buttons/ButtonDelete'; +//export { GridButtonRefresh, GridButtonRefreshProps } from './buttons/ButtonRefresh'; + +export { default as NoRowsOverlay } from './NoRowsOverlay'; +export { GridColumnTypes } from './GridFormat'; +export { Grid } from './Grid'; +export type { GridProps } from './Grid'; + +export { default as DataGrid } from './DataGrid'; +export type { DataGridProps, DataGridRef } from './DataGrid'; diff --git a/src/components/RotateIcon.tsx b/src/components/RotateIcon.tsx index b1c0dc8..01790d1 100644 --- a/src/components/RotateIcon.tsx +++ b/src/components/RotateIcon.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { SvgIconComponent } from '@mui/icons-material'; import { SvgIconProps } from '@mui/material'; import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon'; diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts index 3cc45f5..1168546 100644 --- a/src/module-mui.d.ts +++ b/src/module-mui.d.ts @@ -4,7 +4,7 @@ import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions, } from '@mui/material/styles/createTheme'; -import { AgGridClasses, AgGridCss } from './components/Grid/AgGrid/ag-theme-alpine'; +import { AgGridClasses, AgGridCss } from './components/Grid'; declare module '@mui/material/styles/createTheme' { export * from '@mui/material/styles/createTheme'; diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 3498a94..78961be 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { Grid, Typography } from '@mui/material'; import { FormattedMessage, useIntl } from 'react-intl'; import { FunctionComponent, useMemo, useRef } from 'react'; diff --git a/src/pages/connections/index.ts b/src/pages/connections/index.ts index 86894ce..24695ab 100644 --- a/src/pages/connections/index.ts +++ b/src/pages/connections/index.ts @@ -1 +1,8 @@ +/* + * Copyright (c) 2024, 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/. + */ + export { default as Connections } from './ConnectionsPage'; diff --git a/src/pages/index.ts b/src/pages/index.ts index 5e3310d..661a5dd 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,2 +1,9 @@ +/* + * Copyright (c) 2024, 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/. + */ + export * from './connections'; export * from './users'; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 3544696..1a5057e 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -1,3 +1,10 @@ +/* + * Copyright (c) 2024, 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 { FunctionComponent, useCallback, @@ -21,13 +28,16 @@ import { Typography, } from '@mui/material'; import { AccountCircle, PersonAdd } from '@mui/icons-material'; -import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; +import { + AgColDef, + DataGrid, + DataGridRef, + GridButtonAdd, +} from '../../components/Grid'; import { UserAdminSrv, UserInfos } from '../../services'; import { useSnackMessage } from '@gridsuite/commons-ui'; -import GridToolbarBtnAdd from '../../components/Grid/buttons/ButtonAdd'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; -import { AgColDef } from '../../components/Grid/AgGrid/AgGrid.type'; import { TextFilterParams } from 'ag-grid-community/dist/lib/filter/provided/text/textFilter'; function getRowId(params: GetRowIdParams): string { @@ -138,7 +148,7 @@ const UsersPage: FunctionComponent = () => { const buttonAdd = useCallback( () => ( - = (() => R) | (() => Promise); export type Setter = (v: T) => void; From 85d8ed996330105ebcff98ad4033eaed4e551d1a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Wed, 6 Mar 2024 17:58:04 +0100 Subject: [PATCH 29/54] fix buttons --- src/components/Grid/AgGrid/AgGrid.tsx | 34 +---- src/components/Grid/DataGrid.tsx | 189 +++++++++++--------------- src/pages/users/UsersPage.tsx | 61 +++++---- 3 files changed, 123 insertions(+), 161 deletions(-) diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx index 56d0acf..b01c3fe 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -48,10 +48,9 @@ type AccessibleAgGridReact = Omit< AgGridReact, 'apiListeners' | 'setGridApi' //private in class >; -export type AgGridRef = Partial< - AccessibleAgGridReact -> & { - context?: TContext; +export type AgGridRef = { + aggrid: AccessibleAgGridReact | null; + context: TContext | null; }; /* @@ -97,25 +96,14 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< const theme = useTheme(); const agGridRef = useRef>(null); + const agGridRefContent = agGridRef.current; useImperativeHandle( gridRef, () => ({ - ...((agGridRef.current ?? {}) as AgGridReact), - // destruct doesn't include functions, so we need to redeclare them - //apiListeners: agGridRef.current?.apiListeners, - registerApiListener: agGridRef.current?.registerApiListener, - //setGridApi: agGridRef.current?.setGridApi, - componentWillUnmount: agGridRef.current?.componentWillUnmount, - render: agGridRef.current?.render, - setState: agGridRef.current?.setState, - forceUpdate: agGridRef.current?.forceUpdate, - //... - context: agGridRef.current?.context as AgGridRef< - TData, - TContext - >['context'], + aggrid: agGridRefContent, + context: props.context ?? null, }), - [] + [agGridRefContent, props.context] ); const translations = useMemo( @@ -140,14 +128,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< ), [theme.agGridThemeOverride] ); - /*const customContext = useMemo( - () => - ({ - ...(props.context ?? ({} as TContext)), - //TODO - } as TContext), - [props.context] - );*/ return ( // wrapping container with theme & size diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 01c1030..433ce9a 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -5,17 +5,14 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Divider, useForkRef } from '@mui/material'; +import { Divider } from '@mui/material'; import NoRowsOverlay from './NoRowsOverlay'; import { - Dispatch, PropsWithChildren, ReactElement, RefObject, - SetStateAction, useCallback, useMemo, - useRef, useState, } from 'react'; import { useSnackMessage } from '@gridsuite/commons-ui'; @@ -24,7 +21,6 @@ import { AgGridRef } from './AgGrid/AgGrid'; import Grid, { GridProps } from './Grid'; import { ComponentStateChangedEvent, - GridReadyEvent, SelectionChangedEvent, } from 'ag-grid-community/dist/lib/events'; import { GridButtonRefresh } from './buttons/ButtonRefresh'; @@ -38,8 +34,14 @@ type FullDataGridProps = GridProps< NoRowOverlay >; +type FnAction = () => Promise; +type CatchError = (reason: E) => R | PromiseLike; type DataGridExposed = { - actionThenRefresh: (action: () => Promise) => void; + refresh: () => Promise; + queryAction: ( + action: FnAction, + onerror?: CatchError + ) => Promise; }; export interface DataGridProps @@ -48,7 +50,7 @@ export interface DataGridProps //context: NonNullable['context']>; //required accessRef: RefObject>; dataLoader: () => Promise; - removeElement?: (dataLine: TData) => Promise; + removeElement?: (dataLine: TData) => Promise; addBtn?: () => ReactElement; } @@ -85,22 +87,15 @@ function onComponentStateChanged( } } +/** + * Generic near CRUD (no update part) Grid + */ /* * Exposed to grid pre-configuration: * * common columns config * * configuration with formatter i18n for columns with timestamp * Add common buttons in toolbar (with management of states) * Manage also the progressbar animation: - * * "loading" have two states: performing action, and loading/refreshing data - * * full flow state with (action, loader) = - * - isAction = true <=== start here with actionWithRefresh - * - gridApi.showLoadingOverlay() - * - action() - * - gridApi.hideOverlay() - * - isAction = false - * - gridApi.showLoadingOverlay() <=== start here with refresh - * - loadDataAndSave() - * - gridApi.hideOverlay() */ //TODO optionally save grid state to just show/hide in tabs without losing grid state export default function DataGrid( @@ -117,84 +112,62 @@ export default function DataGrid( } = props; const { snackError } = useSnackMessage(); - const gridRef = useRef>(null); - const handleGridRef = useForkRef(accessRef, gridRef); const [data, setData] = useState(null); const [rowsSelection, setRowsSelection] = useState([]); + const [progress, setProgress] = useState(null); - const [loadingAction, setLoadingAction] = useState(false); - - function loadDataAndSave( - loader: () => Promise, - setData: Dispatch>, - snackError: (snackInputs: unknown) => void - ): Promise { - return loader().then(setData, (error) => { - snackError({ - messageTxt: error.message, - headerId: 'table.error.retrieve', + const loadDataAndSave = useCallback( + function loadDataAndSave(): Promise { + return dataLoader().then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //setData(null); + //TODO what to do with "old" data? }); - //setData(null); - //TODO what to do with "old" data? - }); - } - - const actionWithLoadingState = useCallback(function actionWithState( - action: () => Promise, - notHideOverlay?: true - ) { - console.debug( - '[DEBUG]', - 'actionWithLoadingState()', - action, - notHideOverlay - ); - //TODO how to block simultaneous calls? - //gridRef.current?.api?.showLoadingOverlay(); - setLoadingAction(true); - return action().finally(() => { - console.debug('[DEBUG]', 'actionWithLoadingState() -> finally'); - if (!notHideOverlay) { - setLoadingAction(false); - } - }); - }, - []); - const refreshWithLoadingState = useCallback( - function actionWithState(notManageOverlay?: true) { - console.debug( - '[DEBUG]', - 'refreshWithLoadingState()', - notManageOverlay - ); - //TODO how to block simultaneous calls? - //gridRef.current?.api?.showLoadingOverlay(); - if (!notManageOverlay) { - gridRef.current?.api?.showLoadingOverlay(); - } - return loadDataAndSave(dataLoader, setData, snackError).finally( - () => { - console.debug( - '[DEBUG]', - 'refreshWithLoadingState() -> finally' - ); - if (!notManageOverlay) { - setLoadingAction(false); - } - } - ); }, [dataLoader, snackError] ); - const actionThenRefresh = useCallback( - function actionThenRefresh(action: () => Promise) { - console.debug('[DEBUG]', 'actionThenRefresh()', action); - actionWithLoadingState(action).then(() => - refreshWithLoadingState() - ); - }, - [actionWithLoadingState, refreshWithLoadingState] + + const setProgressDisable = useCallback(() => setProgress(null), []); + const setProgressQuery = useCallback(() => setProgress(Number.NaN), []); + const setProgressLoading = useCallback(() => setProgress(-1), []); + + const loadingAction = useCallback( + (action: FnAction, onerror?: CatchError): Promise => + new Promise((resolve, reject) => { + try { + setProgressLoading(); + resolve(); + } catch (err) { + reject(err); + } + }) + .then(action, onerror) + .catch(onerror) + .finally(setProgressDisable), + [setProgressDisable, setProgressLoading] + ); + const queryAction: DataGridExposed['queryAction'] = useCallback( + (action, onerror?) => + new Promise((resolve, reject) => { + try { + setProgressQuery(); + resolve(); + } catch (err) { + reject(err); + } + }) + .then(action, onerror) + .catch(onerror) + .finally(setProgressDisable), + [setProgressDisable, setProgressQuery] + ); + const refresh = useCallback( + () => loadingAction(loadDataAndSave), + [loadDataAndSave, loadingAction] ); return ( @@ -204,18 +177,11 @@ export default function DataGrid( TContext & DataGridExposed, NoRowOverlay >)} - ref={handleGridRef} + ref={props.accessRef} rowData={data} defaultColDef={defaultColDef as AgColDef} alwaysShowVerticalScroll={true} - onGridReady={useCallback( - (event: GridReadyEvent) => { - console.debug('[DEBUG]', 'gridReady()', event); - loadDataAndSave(dataLoader, setData, snackError); - //event.api.addEventListener('componentStateChanged', onComponentStateChanged); - }, - [dataLoader, snackError] - )} + onGridReady={refresh} rowSelection="single" //TODO multiple with delete action onSelectionChanged={useCallback( (event: SelectionChangedEvent) => @@ -227,12 +193,13 @@ export default function DataGrid( useMemo( () => ({ ...(context ?? {}), - actionThenRefresh, + refresh: refresh, + queryAction: queryAction, }), - [context, actionThenRefresh] + [context, queryAction, refresh] ) as TContext & DataGridExposed } - //TODO progress={loadingAction ? 'query' : 'indeterminate'} + progress={progress} noRowsOverlayComponent={ (!gridProps.overlayNoRowsTemplate && !gridProps.noRowsOverlayComponent && @@ -241,15 +208,25 @@ export default function DataGrid( } noRowsOverlayComponentParams={undefined} > - + { - actionThenRefresh(() => - Promise.all(rowsSelection.map(removeElement!)) - ); - }, [actionThenRefresh, removeElement, rowsSelection])} + onClick={useCallback( + () => + queryAction(() => + Promise.all(rowsSelection.map(removeElement!)).then( + (values) => {} + ) + ).then(() => loadingAction(loadDataAndSave)), + [ + loadDataAndSave, + loadingAction, + queryAction, + removeElement, + rowsSelection, + ] + )} disabled={useMemo( - () => !removeElement && rowsSelection.length <= 0, + () => !removeElement || rowsSelection.length <= 0, [removeElement, rowsSelection.length] )} /> diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 1a5057e..c2acf10 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -49,21 +49,8 @@ const UsersPage: FunctionComponent = () => { const intl = useIntl(); const { snackError } = useSnackMessage(); const gridRef = useRef>(null); + const gridContext = gridRef.current?.context; - const deleteUser = useCallback( - (id: string) => () => - gridRef.current?.context?.actionThenRefresh(() => - UserAdminSrv.deleteUser(id).catch((error) => - snackError({ - messageTxt: `Error while deleting user "${id}"${ - error.message && ':\n' + error.message - }`, - headerId: 'users.table.error.delete', - }) - ) - ), - [snackError] - ); const columns = useMemo( (): AgColDef[] => [ { @@ -107,20 +94,37 @@ const UsersPage: FunctionComponent = () => { [intl.locale] ); - const addUser = useCallback( - (id: string) => - gridRef.current?.context?.actionThenRefresh(() => - UserAdminSrv.addUser(id).catch((error) => - snackError({ - messageTxt: `Error while adding user "${id}"${ - error.message && ':\n' + error.message - }`, - headerId: 'users.table.error.delete', - }) - ) + const deleteUser = useCallback( + (dataLine: UserInfos): Promise => + UserAdminSrv.deleteUser(dataLine.sub).catch((error) => + snackError({ + messageTxt: `Error while deleting user "${dataLine.sub}"${ + error.message && ':\n' + error.message + }`, + headerId: 'users.table.error.delete', + }) ), [snackError] ); + + const addUser = useCallback( + (id: string) => { + console.log(gridRef); + gridContext + ?.queryAction(() => + UserAdminSrv.addUser(id).catch((error) => + snackError({ + messageTxt: `Error while adding user "${id}"${ + error.message && ':\n' + error.message + }`, + headerId: 'users.table.error.delete', + }) + ) + ) + .then(() => gridContext?.refresh?.()); + }, + [gridContext, snackError] + ); const { register, setValue, @@ -130,7 +134,9 @@ const UsersPage: FunctionComponent = () => { reset, setFocus, clearErrors, - } = useForm<{ user: string }>(); + } = useForm<{ user: string }>({ + defaultValues: { user: '' }, //need default not undefined value for html input, else react error at runtime + }); const [open, setOpen] = useState(false); const handleClose = () => { setOpen(false); @@ -171,11 +177,10 @@ const UsersPage: FunctionComponent = () => { accessRef={gridRef} dataLoader={UserAdminSrv.fetchUsers} addBtn={buttonAdd} + removeElement={deleteUser} columnDefs={columns} gridId="table-users" getRowId={getRowId} - //TODO onClick={deleteUser(params.row.sub)} - //TODO onRemove /> Date: Thu, 7 Mar 2024 00:31:31 +0100 Subject: [PATCH 30/54] clean code --- src/components/Grid/AgGrid/AgGrid.tsx | 35 +++-------------------- src/components/Grid/DataGrid.tsx | 24 +--------------- src/pages/connections/ConnectionsPage.tsx | 3 +- src/pages/users/UsersPage.tsx | 16 +++-------- 4 files changed, 10 insertions(+), 68 deletions(-) diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx index b01c3fe..d1856da 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -79,10 +79,6 @@ interface AgGridWithRef >; } -//TODO @ag-grid-community/core -//TODO CsvExportModule -//TODO @ag-grid-community/react -//TODO ClientSideRowModelModule -> https://ag-grid.com/javascript-data-grid/client-side-model/ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< TData, TContext extends {} = {}, @@ -106,11 +102,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< [agGridRefContent, props.context] ); - const translations = useMemo( - () => messages[intl.locale] ?? messages[intl.defaultLocale], - [intl.locale, intl.defaultLocale] - ); - const customTheme = useMemo( () => deepmerge( @@ -138,25 +129,15 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< //ClientSideRowModelModule implicitly recognized? CsvExportModule, ]} - localeText={translations} - /*getLocaleText={(params) => - intl.formatMessage( - { id: params.key, defaultMessage: params.defaultValue }, - Array.reduce( - params.variableValues ?? [], - (acc, value, idx, array) => ({ - ...acc, - [`var${idx}`]: value, - }), - {} - ) - ) + /*localeText={ + messages[intl.locale] ?? + messages[intl.defaultLocale] ?? + messages[LANG_ENGLISH] }*/ {...props} //destruct props to optimize react props change detection debug={ process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug } - //context={customContext} defaultCsvExportParams={useSecuredCsvExportParams( props.defaultCsvExportParams )} @@ -166,14 +147,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< ); }); export default AgGrid; -/*export default function AgGrid({ - ref, - ...props -}: AgGridProps & { - ref: Ref>; -}) { - return ref={ref} {...props} />; -}*/ function counterCsvInjection(value: string): string { return value ? value.replace(/^[+\-=@\t\r]/, '_') : value; diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 433ce9a..4bf3b2c 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -19,10 +19,7 @@ import { useSnackMessage } from '@gridsuite/commons-ui'; import { AgColDef } from './AgGrid/AgGrid.type'; import { AgGridRef } from './AgGrid/AgGrid'; import Grid, { GridProps } from './Grid'; -import { - ComponentStateChangedEvent, - SelectionChangedEvent, -} from 'ag-grid-community/dist/lib/events'; +import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonRefresh } from './buttons/ButtonRefresh'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { GridButtonAdd } from './buttons/ButtonAdd'; @@ -70,23 +67,6 @@ const defaultColDef: AgColDef = { enableCellChangeFlash: process.env.REACT_APP_DEBUG_AGGRID === 'true', }; -/** - * When AgGridReact props change, maybe rowData after a refresh, show no-rows overlay in this case - * because code call hideOverlay from api... - */ -function onComponentStateChanged( - event: ComponentStateChangedEvent -): void { - if ( - event.api.getInfiniteRowCount()! > 0 || - event.api.getDisplayedRowCount() > 0 - ) { - event.api.showNoRowsOverlay(); - } else { - event.api.hideOverlay(); - } -} - /** * Generic near CRUD (no update part) Grid */ @@ -188,7 +168,6 @@ export default function DataGrid( setRowsSelection(event.api.getSelectedRows() ?? []), [] )} - //immutableData={true} context={ useMemo( () => ({ @@ -237,7 +216,6 @@ export default function DataGrid( {children} )} - {/**/} ); } diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 78961be..692232c 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -11,8 +11,7 @@ import { FunctionComponent, useMemo, useRef } from 'react'; import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; import { UserAdminSrv, UserConnection } from '../../services'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; -import { AgColDef } from '../../components/Grid/AgGrid/AgGrid.type'; -import { GridColumnTypes } from '../../components/Grid/GridFormat'; +import { AgColDef, GridColumnTypes } from '../../components/Grid'; function getRowId(params: GetRowIdParams): string { return params.data.sub; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index c2acf10..5aee414 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -45,7 +45,6 @@ function getRowId(params: GetRowIdParams): string { } const UsersPage: FunctionComponent = () => { - //const data = useLoaderData() as DeferredData; const intl = useIntl(); const { snackError } = useSnackMessage(); const gridRef = useRef>(null); @@ -91,7 +90,7 @@ const UsersPage: FunctionComponent = () => { initialSort: 'asc', }, ], - [intl.locale] + [intl] ); const deleteUser = useCallback( @@ -125,16 +124,9 @@ const UsersPage: FunctionComponent = () => { }, [gridContext, snackError] ); - const { - register, - setValue, - handleSubmit, - formState: { errors }, - control, - reset, - setFocus, - clearErrors, - } = useForm<{ user: string }>({ + const { handleSubmit, control, reset, clearErrors } = useForm<{ + user: string; + }>({ defaultValues: { user: '' }, //need default not undefined value for html input, else react error at runtime }); const [open, setOpen] = useState(false); From c847aee0125ba1fd6d20f71fde64921d8776d4cb Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 10:59:51 +0100 Subject: [PATCH 31/54] minify ag-grid translations --- src/components/Grid/AgGrid/AgGrid.tsx | 14 +- src/translations/ag-grid/locale.en.ts | 533 -------------------------- src/translations/ag-grid/locale.fr.ts | 532 ------------------------- src/translations/ag-grid/locales.ts | 198 ++++++++++ 4 files changed, 204 insertions(+), 1073 deletions(-) delete mode 100644 src/translations/ag-grid/locale.en.ts delete mode 100644 src/translations/ag-grid/locale.fr.ts create mode 100644 src/translations/ag-grid/locales.ts diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx index d1856da..9755957 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -26,12 +26,11 @@ import { AgGridReact } from 'ag-grid-react'; import { CsvExportModule, ProcessCellForExportParams } from 'ag-grid-community'; import { useIntl } from 'react-intl'; import { AgGridProps } from './AgGrid.type'; -import { LANG_ENGLISH, LANG_FRENCH } from '@gridsuite/commons-ui'; +import { LANG_FRENCH } from '@gridsuite/commons-ui'; import { - AG_GRID_LOCALE_EN, + AG_GRID_LOCALE_FR, AgGridLocale, -} from '../../../translations/ag-grid/locale.en'; -import { AG_GRID_LOCALE_FR } from '../../../translations/ag-grid/locale.fr'; +} from '../../../translations/ag-grid/locales'; import { ProcessGroupHeaderForExportParams, ProcessHeaderForExportParams, @@ -40,7 +39,6 @@ import { import deepmerge from '@mui/utils/deepmerge/deepmerge'; const messages: Record = { - [LANG_ENGLISH]: AG_GRID_LOCALE_EN, [LANG_FRENCH]: AG_GRID_LOCALE_FR, }; @@ -129,11 +127,11 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< //ClientSideRowModelModule implicitly recognized? CsvExportModule, ]} - /*localeText={ + localeText={ messages[intl.locale] ?? messages[intl.defaultLocale] ?? - messages[LANG_ENGLISH] - }*/ + undefined + } {...props} //destruct props to optimize react props change detection debug={ process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug diff --git a/src/translations/ag-grid/locale.en.ts b/src/translations/ag-grid/locale.en.ts deleted file mode 100644 index 9670104..0000000 --- a/src/translations/ag-grid/locale.en.ts +++ /dev/null @@ -1,533 +0,0 @@ -// from https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/src/content/docs/localisation/_examples/localisation/locale.en.js -/* eslint-disable no-template-curly-in-string */ - -export const AG_GRID_LOCALE_EN = { - // Set Filter - selectAll: '(Select All)', - selectAllSearchResults: '(Select All Search Results)', - addCurrentSelectionToFilter: 'Add current selection to filter', - searchOoo: 'Search...', - blanks: '(Blanks)', - noMatches: 'No matches', - - // Number Filter & Text Filter - filterOoo: 'Filter...', - equals: 'Equals', - notEqual: 'Does not equal', - blank: 'Blank', - notBlank: 'Not blank', - empty: 'Choose one', - - // Number Filter - lessThan: 'Less than', - greaterThan: 'Greater than', - lessThanOrEqual: 'Less than or equal to', - greaterThanOrEqual: 'Greater than or equal to', - inRange: 'Between', - inRangeStart: 'From', - inRangeEnd: 'To', - - // Text Filter - contains: 'Contains', - notContains: 'Does not contain', - startsWith: 'Begins with', - endsWith: 'Ends with', - - // Date Filter - dateFormatOoo: 'yyyy-mm-dd', - before: 'Before', - after: 'After', - - // Filter Conditions - andCondition: 'AND', - orCondition: 'OR', - - // Filter Buttons - applyFilter: 'Apply', - resetFilter: 'Reset', - clearFilter: 'Clear', - cancelFilter: 'Cancel', - - // Filter Titles - textFilter: 'Text Filter', - numberFilter: 'Number Filter', - dateFilter: 'Date Filter', - setFilter: 'Set Filter', - - // Group Column Filter - groupFilterSelect: 'Select field:', - - // Advanced Filter - advancedFilterContains: 'contains', - advancedFilterNotContains: 'does not contain', - advancedFilterTextEquals: 'equals', - advancedFilterTextNotEqual: 'does not equal', - advancedFilterStartsWith: 'begins with', - advancedFilterEndsWith: 'ends with', - advancedFilterBlank: 'is blank', - advancedFilterNotBlank: 'is not blank', - advancedFilterEquals: '=', - advancedFilterNotEqual: '!=', - advancedFilterGreaterThan: '>', - advancedFilterGreaterThanOrEqual: '>=', - advancedFilterLessThan: '<', - advancedFilterLessThanOrEqual: '<=', - advancedFilterTrue: 'is true', - advancedFilterFalse: 'is false', - advancedFilterAnd: 'AND', - advancedFilterOr: 'OR', - advancedFilterApply: 'Apply', - advancedFilterBuilder: 'Builder', - advancedFilterValidationMissingColumn: 'Column is missing', - advancedFilterValidationMissingOption: 'Option is missing', - advancedFilterValidationMissingValue: 'Value is missing', - advancedFilterValidationInvalidColumn: 'Column not found', - advancedFilterValidationInvalidOption: 'Option not found', - advancedFilterValidationMissingQuote: 'Value is missing an end quote', - advancedFilterValidationNotANumber: 'Value is not a number', - advancedFilterValidationInvalidDate: 'Value is not a valid date', - advancedFilterValidationMissingCondition: 'Condition is missing', - advancedFilterValidationJoinOperatorMismatch: - 'Join operators within a condition must be the same', - advancedFilterValidationInvalidJoinOperator: 'Join operator not found', - advancedFilterValidationMissingEndBracket: 'Missing end bracket', - advancedFilterValidationExtraEndBracket: 'Too many end brackets', - advancedFilterValidationMessage: - 'Expression has an error. ${variable} - ${variable}.', - advancedFilterValidationMessageAtEnd: - 'Expression has an error. ${variable} at end of expression.', - advancedFilterBuilderTitle: 'Advanced Filter', - advancedFilterBuilderApply: 'Apply', - advancedFilterBuilderCancel: 'Cancel', - advancedFilterBuilderAddButtonTooltip: 'Add Filter or Group', - advancedFilterBuilderRemoveButtonTooltip: 'Remove', - advancedFilterBuilderMoveUpButtonTooltip: 'Move Up', - advancedFilterBuilderMoveDownButtonTooltip: 'Move Down', - advancedFilterBuilderAddJoin: 'Add Group', - advancedFilterBuilderAddCondition: 'Add Filter', - advancedFilterBuilderSelectColumn: 'Select a column', - advancedFilterBuilderSelectOption: 'Select an option', - advancedFilterBuilderEnterValue: 'Enter a value...', - advancedFilterBuilderValidationAlreadyApplied: - 'Current filter already applied.', - advancedFilterBuilderValidationIncomplete: - 'Not all conditions are complete.', - advancedFilterBuilderValidationSelectColumn: 'Must select a column.', - advancedFilterBuilderValidationSelectOption: 'Must select an option.', - advancedFilterBuilderValidationEnterValue: 'Must enter a value.', - - // Side Bar - columns: 'Columns', - filters: 'Filters', - - // columns tool panel - pivotMode: 'Pivot Mode', - groups: 'Row Groups', - rowGroupColumnsEmptyMessage: 'Drag here to set row groups', - values: 'Values', - valueColumnsEmptyMessage: 'Drag here to aggregate', - pivots: 'Column Labels', - pivotColumnsEmptyMessage: 'Drag here to set column labels', - - // Header of the Default Group Column - group: 'Group', - - // Row Drag - rowDragRow: 'row', - rowDragRows: 'rows', - - // Other - loadingOoo: 'Loading...', - loadingError: 'ERR', - noRowsToShow: 'No Rows To Show', - enabled: 'Enabled', - - // Menu - pinColumn: 'Pin Column', - pinLeft: 'Pin Left', - pinRight: 'Pin Right', - noPin: 'No Pin', - valueAggregation: 'Value Aggregation', - noAggregation: 'None', - autosizeThiscolumn: 'Autosize This Column', - autosizeAllColumns: 'Autosize All Columns', - groupBy: 'Group by', - ungroupBy: 'Un-Group by', - ungroupAll: 'Un-Group All', - addToValues: 'Add ${variable} to values', - removeFromValues: 'Remove ${variable} from values', - addToLabels: 'Add ${variable} to labels', - removeFromLabels: 'Remove ${variable} from labels', - resetColumns: 'Reset Columns', - expandAll: 'Expand All Row Groups', - collapseAll: 'Close All Row Groups', - copy: 'Copy', - ctrlC: 'Ctrl+C', - ctrlX: 'Ctrl+X', - copyWithHeaders: 'Copy With Headers', - copyWithGroupHeaders: 'Copy with Group Headers', - cut: 'Cut', - paste: 'Paste', - ctrlV: 'Ctrl+V', - export: 'Export', - csvExport: 'CSV Export', - excelExport: 'Excel Export', - columnFilter: 'Column Filter', - columnChooser: 'Choose Columns', - sortAscending: 'Sort Ascending', - sortDescending: 'Sort Descending', - sortUnSort: 'Clear Sort', - - // Enterprise Menu Aggregation and Status Bar - sum: 'Sum', - first: 'First', - last: 'Last', - min: 'Min', - max: 'Max', - none: 'None', - count: 'Count', - avg: 'Average', - filteredRows: 'Filtered', - selectedRows: 'Selected', - totalRows: 'Total Rows', - totalAndFilteredRows: 'Rows', - more: 'More', - to: 'to', - of: 'of', - page: 'Page', - pageLastRowUnknown: '?', - nextPage: 'Next Page', - lastPage: 'Last Page', - firstPage: 'First Page', - previousPage: 'Previous Page', - pageSizeSelectorLabel: 'Page Size:', - footerTotal: 'Total', - - // Pivoting - pivotColumnGroupTotals: 'Total', - - // Enterprise Menu (Charts) - pivotChartAndPivotMode: 'Pivot Chart & Pivot Mode', - pivotChart: 'Pivot Chart', - chartRange: 'Chart Range', - - columnChart: 'Column', - groupedColumn: 'Grouped', - stackedColumn: 'Stacked', - normalizedColumn: '100% Stacked', - - barChart: 'Bar', - groupedBar: 'Grouped', - stackedBar: 'Stacked', - normalizedBar: '100% Stacked', - - pieChart: 'Pie', - pie: 'Pie', - donut: 'Donut', - - line: 'Line', - - xyChart: 'X Y (Scatter)', - scatter: 'Scatter', - bubble: 'Bubble', - - areaChart: 'Area', - area: 'Area', - stackedArea: 'Stacked', - normalizedArea: '100% Stacked', - - histogramChart: 'Histogram', - histogramFrequency: 'Frequency', - - polarChart: 'Polar', - radarLine: 'Radar Line', - radarArea: 'Radar Area', - nightingale: 'Nightingale', - radialColumn: 'Radial Column', - radialBar: 'Radial Bar', - - statisticalChart: 'Statistical', - boxPlot: 'Box Plot', - rangeBar: 'Range Bar', - rangeArea: 'Range Area', - - hierarchicalChart: 'Hierarchical', - treemap: 'Treemap', - sunburst: 'Sunburst', - - specializedChart: 'Specialized', - waterfall: 'Waterfall', - heatmap: 'Heatmap', - - combinationChart: 'Combination', - columnLineCombo: 'Column & Line', - AreaColumnCombo: 'Area & Column', - - // Charts - pivotChartTitle: 'Pivot Chart', - rangeChartTitle: 'Range Chart', - settings: 'Settings', - data: 'Data', - format: 'Format', - categories: 'Categories', - defaultCategory: '(None)', - series: 'Series', - xyValues: 'X Y Values', - paired: 'Paired Mode', - axis: 'Axis', - radiusAxis: 'Radius Axis', - navigator: 'Navigator', - color: 'Color', - thickness: 'Thickness', - preferredLength: 'Preferred Length', - xType: 'X Type', - automatic: 'Automatic', - category: 'Category', - number: 'Number', - time: 'Time', - autoRotate: 'Auto Rotate', - xRotation: 'X Rotation', - yRotation: 'Y Rotation', - labelRotation: 'Rotation', - circle: 'Circle', - polygon: 'Polygon', - orientation: 'Orientation', - fixed: 'Fixed', - parallel: 'Parallel', - perpendicular: 'Perpendicular', - radiusAxisPosition: 'Position', - ticks: 'Ticks', - width: 'Width', - height: 'Height', - length: 'Length', - padding: 'Padding', - spacing: 'Spacing', - chart: 'Chart', - title: 'Title', - titlePlaceholder: 'Chart title - double click to edit', - background: 'Background', - font: 'Font', - top: 'Top', - right: 'Right', - bottom: 'Bottom', - left: 'Left', - labels: 'Labels', - calloutLabels: 'Callout Labels', - sectorLabels: 'Sector Labels', - positionRatio: 'Position Ratio', - size: 'Size', - shape: 'Shape', - minSize: 'Minimum Size', - maxSize: 'Maximum Size', - legend: 'Legend', - position: 'Position', - markerSize: 'Marker Size', - markerStroke: 'Marker Stroke', - markerPadding: 'Marker Padding', - itemSpacing: 'Item Spacing', - itemPaddingX: 'Item Padding X', - itemPaddingY: 'Item Padding Y', - layoutHorizontalSpacing: 'Horizontal Spacing', - layoutVerticalSpacing: 'Vertical Spacing', - strokeWidth: 'Stroke Width', - offset: 'Offset', - offsets: 'Offsets', - tooltips: 'Tooltips', - callout: 'Callout', - markers: 'Markers', - shadow: 'Shadow', - blur: 'Blur', - xOffset: 'X Offset', - yOffset: 'Y Offset', - lineWidth: 'Line Width', - lineDash: 'Line Dash', - lineDashOffset: 'Dash Offset', - normal: 'Normal', - bold: 'Bold', - italic: 'Italic', - boldItalic: 'Bold Italic', - predefined: 'Predefined', - fillOpacity: 'Fill Opacity', - strokeColor: 'Line Color', - strokeOpacity: 'Line Opacity', - histogramBinCount: 'Bin count', - connectorLine: 'Connector Line', - seriesItems: 'Series Items', - seriesItemType: 'Item Type', - seriesItemPositive: 'Positive', - seriesItemNegative: 'Negative', - seriesItemLabels: 'Item Labels', - columnGroup: 'Column', - barGroup: 'Bar', - pieGroup: 'Pie', - lineGroup: 'Line', - scatterGroup: 'X Y (Scatter)', - areaGroup: 'Area', - polarGroup: 'Polar', - statisticalGroup: 'Statistical', - hierarchicalGroup: 'Hierarchical', - specializedGroup: 'Specialized', - combinationGroup: 'Combination', - groupedColumnTooltip: 'Grouped', - stackedColumnTooltip: 'Stacked', - normalizedColumnTooltip: '100% Stacked', - groupedBarTooltip: 'Grouped', - stackedBarTooltip: 'Stacked', - normalizedBarTooltip: '100% Stacked', - pieTooltip: 'Pie', - donutTooltip: 'Donut', - lineTooltip: 'Line', - groupedAreaTooltip: 'Area', - stackedAreaTooltip: 'Stacked', - normalizedAreaTooltip: '100% Stacked', - scatterTooltip: 'Scatter', - bubbleTooltip: 'Bubble', - histogramTooltip: 'Histogram', - radialColumnTooltip: 'Radial Column', - radialBarTooltip: 'Radial Bar', - radarLineTooltip: 'Radar Line', - radarAreaTooltip: 'Radar Area', - nightingaleTooltip: 'Nightingale', - rangeBarTooltip: 'Range Bar', - rangeAreaTooltip: 'Range Area', - boxPlotTooltip: 'Box Plot', - treemapTooltip: 'Treemap', - sunburstTooltip: 'Sunburst', - waterfallTooltip: 'Waterfall', - heatmapTooltip: 'Heatmap', - columnLineComboTooltip: 'Column & Line', - areaColumnComboTooltip: 'Area & Column', - customComboTooltip: 'Custom Combination', - innerRadius: 'Inner Radius', - startAngle: 'Start Angle', - endAngle: 'End Angle', - reverseDirection: 'Reverse Direction', - groupPadding: 'Group Padding', - seriesPadding: 'Series Padding', - //group: 'Group', - tile: 'Tile', - whisker: 'Whisker', - cap: 'Cap', - capLengthRatio: 'Length Ratio', - labelPlacement: 'Placement', - inside: 'Inside', - outside: 'Outside', - noDataToChart: 'No data available to be charted.', - pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.', - chartSettingsToolbarTooltip: 'Menu', - chartLinkToolbarTooltip: 'Linked to Grid', - chartUnlinkToolbarTooltip: 'Unlinked from Grid', - chartDownloadToolbarTooltip: 'Download Chart', - seriesChartType: 'Series Chart Type', - seriesType: 'Series Type', - secondaryAxis: 'Secondary Axis', - - // ARIA - ariaAdvancedFilterBuilderItem: - '${variable}. Level ${variable}. Press ENTER to edit.', - ariaAdvancedFilterBuilderItemValidation: - '${variable}. Level ${variable}. ${variable} Press ENTER to edit.', - ariaAdvancedFilterBuilderList: 'Advanced Filter Builder List', - ariaAdvancedFilterBuilderFilterItem: 'Filter Condition', - ariaAdvancedFilterBuilderGroupItem: 'Filter Group', - ariaAdvancedFilterBuilderColumn: 'Column', - ariaAdvancedFilterBuilderOption: 'Option', - ariaAdvancedFilterBuilderValueP: 'Value', - ariaAdvancedFilterBuilderJoinOperator: 'Join Operator', - ariaAdvancedFilterInput: 'Advanced Filter Input', - ariaChecked: 'checked', - ariaColumn: 'Column', - ariaColumnGroup: 'Column Group', - ariaColumnFiltered: 'Column Filtered', - ariaColumnSelectAll: 'Toggle Select All Columns', - ariaDateFilterInput: 'Date Filter Input', - ariaDefaultListName: 'List', - ariaFilterColumnsInput: 'Filter Columns Input', - ariaFilterFromValue: 'Filter from value', - ariaFilterInput: 'Filter Input', - ariaFilterList: 'Filter List', - ariaFilterToValue: 'Filter to value', - ariaFilterValue: 'Filter Value', - ariaFilterMenuOpen: 'Open Filter Menu', - ariaFilteringOperator: 'Filtering Operator', - ariaHidden: 'hidden', - ariaIndeterminate: 'indeterminate', - ariaInputEditor: 'Input Editor', - ariaMenuColumn: 'Press ALT DOWN to open column menu', - ariaFilterColumn: 'Press CTRL ENTER to open filter', - ariaRowDeselect: 'Press SPACE to deselect this row', - ariaRowSelectAll: 'Press Space to toggle all rows selection', - ariaRowToggleSelection: 'Press Space to toggle row selection', - ariaRowSelect: 'Press SPACE to select this row', - ariaSearch: 'Search', - ariaSortableColumn: 'Press ENTER to sort', - ariaToggleVisibility: 'Press SPACE to toggle visibility', - ariaToggleCellValue: 'Press SPACE to toggle cell value', - ariaUnchecked: 'unchecked', - ariaVisible: 'visible', - ariaSearchFilterValues: 'Search filter values', - ariaPageSizeSelectorLabel: 'Page Size', - - // ARIA Labels for Drop Zones - ariaRowGroupDropZonePanelLabel: 'Row Groups', - ariaValuesDropZonePanelLabel: 'Values', - ariaPivotDropZonePanelLabel: 'Column Labels', - ariaDropZoneColumnComponentDescription: 'Press DELETE to remove', - ariaDropZoneColumnValueItemDescription: - 'Press ENTER to change the aggregation type', - ariaDropZoneColumnGroupItemDescription: 'Press ENTER to sort', - // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} - ariaDropZoneColumnComponentAggFuncSeparator: ' of ', - ariaDropZoneColumnComponentSortAscending: 'ascending', - ariaDropZoneColumnComponentSortDescending: 'descending', - - // ARIA Labels for Dialogs - ariaLabelColumnMenu: 'Column Menu', - ariaLabelColumnFilter: 'Column Filter', - ariaLabelCellEditor: 'Cell Editor', - ariaLabelDialog: 'Dialog', - ariaLabelSelectField: 'Select Field', - ariaLabelRichSelectField: 'Rich Select Field', - ariaLabelTooltip: 'Tooltip', - ariaLabelContextMenu: 'Context Menu', - ariaLabelSubMenu: 'SubMenu', - ariaLabelAggregationFunction: 'Aggregation Function', - ariaLabelAdvancedFilterAutocomplete: 'Advanced Filter Autocomplete', - ariaLabelAdvancedFilterBuilderAddField: 'Advanced Filter Builder Add Field', - ariaLabelAdvancedFilterBuilderColumnSelectField: - 'Advanced Filter Builder Column Select Field', - ariaLabelAdvancedFilterBuilderOptionSelectField: - 'Advanced Filter Builder Option Select Field', - ariaLabelAdvancedFilterBuilderJoinSelectField: - 'Advanced Filter Builder Join Operator Select Field', - - // ARIA Labels for the Side Bar - ariaColumnPanelList: 'Column List', - ariaFilterPanelList: 'Filter List', - - // Number Format (Status Bar, Pagination Panel) - thousandSeparator: ',', - decimalSeparator: '.', - - // Data types - true: 'True', - false: 'False', - invalidDate: 'Invalid Date', - invalidNumber: 'Invalid Number', - january: 'January', - february: 'February', - march: 'March', - april: 'April', - may: 'May', - june: 'June', - july: 'July', - august: 'August', - september: 'September', - october: 'October', - november: 'November', - december: 'December', -}; -export default AG_GRID_LOCALE_EN; - -export type AgGridLocale = typeof AG_GRID_LOCALE_EN; -export type AgGridLocaleKeys = keyof AgGridLocale; diff --git a/src/translations/ag-grid/locale.fr.ts b/src/translations/ag-grid/locale.fr.ts deleted file mode 100644 index 75fc2f1..0000000 --- a/src/translations/ag-grid/locale.fr.ts +++ /dev/null @@ -1,532 +0,0 @@ -/* eslint-disable no-template-curly-in-string */ - -import { AgGridLocale } from './locale.en'; - -// TODO translate to french -export const AG_GRID_LOCALE_FR: AgGridLocale = { - // Set Filter - selectAll: '(Select All)', - selectAllSearchResults: '(Select All Search Results)', - addCurrentSelectionToFilter: 'Add current selection to filter', - searchOoo: 'Search...', - blanks: '(Blanks)', - noMatches: 'No matches', - - // Number Filter & Text Filter - filterOoo: 'Filter...', - equals: 'Equals', - notEqual: 'Does not equal', - blank: 'Blank', - notBlank: 'Not blank', - empty: 'Choose one', - - // Number Filter - lessThan: 'Less than', - greaterThan: 'Greater than', - lessThanOrEqual: 'Less than or equal to', - greaterThanOrEqual: 'Greater than or equal to', - inRange: 'Between', - inRangeStart: 'From', - inRangeEnd: 'To', - - // Text Filter - contains: 'Contains', - notContains: 'Does not contain', - startsWith: 'Begins with', - endsWith: 'Ends with', - - // Date Filter - dateFormatOoo: 'yyyy-mm-dd', - before: 'Before', - after: 'After', - - // Filter Conditions - andCondition: 'AND', - orCondition: 'OR', - - // Filter Buttons - applyFilter: 'Apply', - resetFilter: 'Reset', - clearFilter: 'Clear', - cancelFilter: 'Cancel', - - // Filter Titles - textFilter: 'Text Filter', - numberFilter: 'Number Filter', - dateFilter: 'Date Filter', - setFilter: 'Set Filter', - - // Group Column Filter - groupFilterSelect: 'Select field:', - - // Advanced Filter - advancedFilterContains: 'contains', - advancedFilterNotContains: 'does not contain', - advancedFilterTextEquals: 'equals', - advancedFilterTextNotEqual: 'does not equal', - advancedFilterStartsWith: 'begins with', - advancedFilterEndsWith: 'ends with', - advancedFilterBlank: 'is blank', - advancedFilterNotBlank: 'is not blank', - advancedFilterEquals: '=', - advancedFilterNotEqual: '!=', - advancedFilterGreaterThan: '>', - advancedFilterGreaterThanOrEqual: '>=', - advancedFilterLessThan: '<', - advancedFilterLessThanOrEqual: '<=', - advancedFilterTrue: 'is true', - advancedFilterFalse: 'is false', - advancedFilterAnd: 'AND', - advancedFilterOr: 'OR', - advancedFilterApply: 'Apply', - advancedFilterBuilder: 'Builder', - advancedFilterValidationMissingColumn: 'Column is missing', - advancedFilterValidationMissingOption: 'Option is missing', - advancedFilterValidationMissingValue: 'Value is missing', - advancedFilterValidationInvalidColumn: 'Column not found', - advancedFilterValidationInvalidOption: 'Option not found', - advancedFilterValidationMissingQuote: 'Value is missing an end quote', - advancedFilterValidationNotANumber: 'Value is not a number', - advancedFilterValidationInvalidDate: 'Value is not a valid date', - advancedFilterValidationMissingCondition: 'Condition is missing', - advancedFilterValidationJoinOperatorMismatch: - 'Join operators within a condition must be the same', - advancedFilterValidationInvalidJoinOperator: 'Join operator not found', - advancedFilterValidationMissingEndBracket: 'Missing end bracket', - advancedFilterValidationExtraEndBracket: 'Too many end brackets', - advancedFilterValidationMessage: - 'Expression has an error. ${variable} - ${variable}.', - advancedFilterValidationMessageAtEnd: - 'Expression has an error. ${variable} at end of expression.', - advancedFilterBuilderTitle: 'Advanced Filter', - advancedFilterBuilderApply: 'Apply', - advancedFilterBuilderCancel: 'Cancel', - advancedFilterBuilderAddButtonTooltip: 'Add Filter or Group', - advancedFilterBuilderRemoveButtonTooltip: 'Remove', - advancedFilterBuilderMoveUpButtonTooltip: 'Move Up', - advancedFilterBuilderMoveDownButtonTooltip: 'Move Down', - advancedFilterBuilderAddJoin: 'Add Group', - advancedFilterBuilderAddCondition: 'Add Filter', - advancedFilterBuilderSelectColumn: 'Select a column', - advancedFilterBuilderSelectOption: 'Select an option', - advancedFilterBuilderEnterValue: 'Enter a value...', - advancedFilterBuilderValidationAlreadyApplied: - 'Current filter already applied.', - advancedFilterBuilderValidationIncomplete: - 'Not all conditions are complete.', - advancedFilterBuilderValidationSelectColumn: 'Must select a column.', - advancedFilterBuilderValidationSelectOption: 'Must select an option.', - advancedFilterBuilderValidationEnterValue: 'Must enter a value.', - - // Side Bar - columns: 'Columns', - filters: 'Filters', - - // columns tool panel - pivotMode: 'Pivot Mode', - groups: 'Row Groups', - rowGroupColumnsEmptyMessage: 'Drag here to set row groups', - values: 'Values', - valueColumnsEmptyMessage: 'Drag here to aggregate', - pivots: 'Column Labels', - pivotColumnsEmptyMessage: 'Drag here to set column labels', - - // Header of the Default Group Column - group: 'Group', - - // Row Drag - rowDragRow: 'row', - rowDragRows: 'rows', - - // Other - loadingOoo: 'Loading...', - loadingError: 'ERR', - noRowsToShow: 'No Rows To Show', - enabled: 'Enabled', - - // Menu - pinColumn: 'Pin Column', - pinLeft: 'Pin Left', - pinRight: 'Pin Right', - noPin: 'No Pin', - valueAggregation: 'Value Aggregation', - noAggregation: 'None', - autosizeThiscolumn: 'Autosize This Column', - autosizeAllColumns: 'Autosize All Columns', - groupBy: 'Group by', - ungroupBy: 'Un-Group by', - ungroupAll: 'Un-Group All', - addToValues: 'Add ${variable} to values', - removeFromValues: 'Remove ${variable} from values', - addToLabels: 'Add ${variable} to labels', - removeFromLabels: 'Remove ${variable} from labels', - resetColumns: 'Reset Columns', - expandAll: 'Expand All Row Groups', - collapseAll: 'Close All Row Groups', - copy: 'Copy', - ctrlC: 'Ctrl+C', - ctrlX: 'Ctrl+X', - copyWithHeaders: 'Copy With Headers', - copyWithGroupHeaders: 'Copy with Group Headers', - cut: 'Cut', - paste: 'Paste', - ctrlV: 'Ctrl+V', - export: 'Export', - csvExport: 'CSV Export', - excelExport: 'Excel Export', - columnFilter: 'Column Filter', - columnChooser: 'Choose Columns', - sortAscending: 'Sort Ascending', - sortDescending: 'Sort Descending', - sortUnSort: 'Clear Sort', - - // Enterprise Menu Aggregation and Status Bar - sum: 'Sum', - first: 'First', - last: 'Last', - min: 'Min', - max: 'Max', - none: 'None', - count: 'Count', - avg: 'Average', - filteredRows: 'Filtered', - selectedRows: 'Selected', - totalRows: 'Total Rows', - totalAndFilteredRows: 'Rows', - more: 'More', - to: 'to', - of: 'of', - page: 'Page', - pageLastRowUnknown: '?', - nextPage: 'Next Page', - lastPage: 'Last Page', - firstPage: 'First Page', - previousPage: 'Previous Page', - pageSizeSelectorLabel: 'Page Size:', - footerTotal: 'Total', - - // Pivoting - pivotColumnGroupTotals: 'Total', - - // Enterprise Menu (Charts) - pivotChartAndPivotMode: 'Pivot Chart & Pivot Mode', - pivotChart: 'Pivot Chart', - chartRange: 'Chart Range', - - columnChart: 'Column', - groupedColumn: 'Grouped', - stackedColumn: 'Stacked', - normalizedColumn: '100% Stacked', - - barChart: 'Bar', - groupedBar: 'Grouped', - stackedBar: 'Stacked', - normalizedBar: '100% Stacked', - - pieChart: 'Pie', - pie: 'Pie', - donut: 'Donut', - - line: 'Line', - - xyChart: 'X Y (Scatter)', - scatter: 'Scatter', - bubble: 'Bubble', - - areaChart: 'Area', - area: 'Area', - stackedArea: 'Stacked', - normalizedArea: '100% Stacked', - - histogramChart: 'Histogram', - histogramFrequency: 'Frequency', - - polarChart: 'Polar', - radarLine: 'Radar Line', - radarArea: 'Radar Area', - nightingale: 'Nightingale', - radialColumn: 'Radial Column', - radialBar: 'Radial Bar', - - statisticalChart: 'Statistical', - boxPlot: 'Box Plot', - rangeBar: 'Range Bar', - rangeArea: 'Range Area', - - hierarchicalChart: 'Hierarchical', - treemap: 'Treemap', - sunburst: 'Sunburst', - - specializedChart: 'Specialized', - waterfall: 'Waterfall', - heatmap: 'Heatmap', - - combinationChart: 'Combination', - columnLineCombo: 'Column & Line', - AreaColumnCombo: 'Area & Column', - - // Charts - pivotChartTitle: 'Pivot Chart', - rangeChartTitle: 'Range Chart', - settings: 'Settings', - data: 'Data', - format: 'Format', - categories: 'Categories', - defaultCategory: '(None)', - series: 'Series', - xyValues: 'X Y Values', - paired: 'Paired Mode', - axis: 'Axis', - radiusAxis: 'Radius Axis', - navigator: 'Navigator', - color: 'Color', - thickness: 'Thickness', - preferredLength: 'Preferred Length', - xType: 'X Type', - automatic: 'Automatic', - category: 'Category', - number: 'Number', - time: 'Time', - autoRotate: 'Auto Rotate', - xRotation: 'X Rotation', - yRotation: 'Y Rotation', - labelRotation: 'Rotation', - circle: 'Circle', - polygon: 'Polygon', - orientation: 'Orientation', - fixed: 'Fixed', - parallel: 'Parallel', - perpendicular: 'Perpendicular', - radiusAxisPosition: 'Position', - ticks: 'Ticks', - width: 'Width', - height: 'Height', - length: 'Length', - padding: 'Padding', - spacing: 'Spacing', - chart: 'Chart', - title: 'Title', - titlePlaceholder: 'Chart title - double click to edit', - background: 'Background', - font: 'Font', - top: 'Top', - right: 'Right', - bottom: 'Bottom', - left: 'Left', - labels: 'Labels', - calloutLabels: 'Callout Labels', - sectorLabels: 'Sector Labels', - positionRatio: 'Position Ratio', - size: 'Size', - shape: 'Shape', - minSize: 'Minimum Size', - maxSize: 'Maximum Size', - legend: 'Legend', - position: 'Position', - markerSize: 'Marker Size', - markerStroke: 'Marker Stroke', - markerPadding: 'Marker Padding', - itemSpacing: 'Item Spacing', - itemPaddingX: 'Item Padding X', - itemPaddingY: 'Item Padding Y', - layoutHorizontalSpacing: 'Horizontal Spacing', - layoutVerticalSpacing: 'Vertical Spacing', - strokeWidth: 'Stroke Width', - offset: 'Offset', - offsets: 'Offsets', - tooltips: 'Tooltips', - callout: 'Callout', - markers: 'Markers', - shadow: 'Shadow', - blur: 'Blur', - xOffset: 'X Offset', - yOffset: 'Y Offset', - lineWidth: 'Line Width', - lineDash: 'Line Dash', - lineDashOffset: 'Dash Offset', - normal: 'Normal', - bold: 'Bold', - italic: 'Italic', - boldItalic: 'Bold Italic', - predefined: 'Predefined', - fillOpacity: 'Fill Opacity', - strokeColor: 'Line Color', - strokeOpacity: 'Line Opacity', - histogramBinCount: 'Bin count', - connectorLine: 'Connector Line', - seriesItems: 'Series Items', - seriesItemType: 'Item Type', - seriesItemPositive: 'Positive', - seriesItemNegative: 'Negative', - seriesItemLabels: 'Item Labels', - columnGroup: 'Column', - barGroup: 'Bar', - pieGroup: 'Pie', - lineGroup: 'Line', - scatterGroup: 'X Y (Scatter)', - areaGroup: 'Area', - polarGroup: 'Polar', - statisticalGroup: 'Statistical', - hierarchicalGroup: 'Hierarchical', - specializedGroup: 'Specialized', - combinationGroup: 'Combination', - groupedColumnTooltip: 'Grouped', - stackedColumnTooltip: 'Stacked', - normalizedColumnTooltip: '100% Stacked', - groupedBarTooltip: 'Grouped', - stackedBarTooltip: 'Stacked', - normalizedBarTooltip: '100% Stacked', - pieTooltip: 'Pie', - donutTooltip: 'Donut', - lineTooltip: 'Line', - groupedAreaTooltip: 'Area', - stackedAreaTooltip: 'Stacked', - normalizedAreaTooltip: '100% Stacked', - scatterTooltip: 'Scatter', - bubbleTooltip: 'Bubble', - histogramTooltip: 'Histogram', - radialColumnTooltip: 'Radial Column', - radialBarTooltip: 'Radial Bar', - radarLineTooltip: 'Radar Line', - radarAreaTooltip: 'Radar Area', - nightingaleTooltip: 'Nightingale', - rangeBarTooltip: 'Range Bar', - rangeAreaTooltip: 'Range Area', - boxPlotTooltip: 'Box Plot', - treemapTooltip: 'Treemap', - sunburstTooltip: 'Sunburst', - waterfallTooltip: 'Waterfall', - heatmapTooltip: 'Heatmap', - columnLineComboTooltip: 'Column & Line', - areaColumnComboTooltip: 'Area & Column', - customComboTooltip: 'Custom Combination', - innerRadius: 'Inner Radius', - startAngle: 'Start Angle', - endAngle: 'End Angle', - reverseDirection: 'Reverse Direction', - groupPadding: 'Group Padding', - seriesPadding: 'Series Padding', - //group: 'Group', - tile: 'Tile', - whisker: 'Whisker', - cap: 'Cap', - capLengthRatio: 'Length Ratio', - labelPlacement: 'Placement', - inside: 'Inside', - outside: 'Outside', - noDataToChart: 'No data available to be charted.', - pivotChartRequiresPivotMode: 'Pivot Chart requires Pivot Mode enabled.', - chartSettingsToolbarTooltip: 'Menu', - chartLinkToolbarTooltip: 'Linked to Grid', - chartUnlinkToolbarTooltip: 'Unlinked from Grid', - chartDownloadToolbarTooltip: 'Download Chart', - seriesChartType: 'Series Chart Type', - seriesType: 'Series Type', - secondaryAxis: 'Secondary Axis', - - // ARIA - ariaAdvancedFilterBuilderItem: - '${variable}. Level ${variable}. Press ENTER to edit.', - ariaAdvancedFilterBuilderItemValidation: - '${variable}. Level ${variable}. ${variable} Press ENTER to edit.', - ariaAdvancedFilterBuilderList: 'Advanced Filter Builder List', - ariaAdvancedFilterBuilderFilterItem: 'Filter Condition', - ariaAdvancedFilterBuilderGroupItem: 'Filter Group', - ariaAdvancedFilterBuilderColumn: 'Column', - ariaAdvancedFilterBuilderOption: 'Option', - ariaAdvancedFilterBuilderValueP: 'Value', - ariaAdvancedFilterBuilderJoinOperator: 'Join Operator', - ariaAdvancedFilterInput: 'Advanced Filter Input', - ariaChecked: 'checked', - ariaColumn: 'Column', - ariaColumnGroup: 'Column Group', - ariaColumnFiltered: 'Column Filtered', - ariaColumnSelectAll: 'Toggle Select All Columns', - ariaDateFilterInput: 'Date Filter Input', - ariaDefaultListName: 'List', - ariaFilterColumnsInput: 'Filter Columns Input', - ariaFilterFromValue: 'Filter from value', - ariaFilterInput: 'Filter Input', - ariaFilterList: 'Filter List', - ariaFilterToValue: 'Filter to value', - ariaFilterValue: 'Filter Value', - ariaFilterMenuOpen: 'Open Filter Menu', - ariaFilteringOperator: 'Filtering Operator', - ariaHidden: 'hidden', - ariaIndeterminate: 'indeterminate', - ariaInputEditor: 'Input Editor', - ariaMenuColumn: 'Press ALT DOWN to open column menu', - ariaFilterColumn: 'Press CTRL ENTER to open filter', - ariaRowDeselect: 'Press SPACE to deselect this row', - ariaRowSelectAll: 'Press Space to toggle all rows selection', - ariaRowToggleSelection: 'Press Space to toggle row selection', - ariaRowSelect: 'Press SPACE to select this row', - ariaSearch: 'Search', - ariaSortableColumn: 'Press ENTER to sort', - ariaToggleVisibility: 'Press SPACE to toggle visibility', - ariaToggleCellValue: 'Press SPACE to toggle cell value', - ariaUnchecked: 'unchecked', - ariaVisible: 'visible', - ariaSearchFilterValues: 'Search filter values', - ariaPageSizeSelectorLabel: 'Page Size', - - // ARIA Labels for Drop Zones - ariaRowGroupDropZonePanelLabel: 'Row Groups', - ariaValuesDropZonePanelLabel: 'Values', - ariaPivotDropZonePanelLabel: 'Column Labels', - ariaDropZoneColumnComponentDescription: 'Press DELETE to remove', - ariaDropZoneColumnValueItemDescription: - 'Press ENTER to change the aggregation type', - ariaDropZoneColumnGroupItemDescription: 'Press ENTER to sort', - // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} - ariaDropZoneColumnComponentAggFuncSeparator: ' of ', - ariaDropZoneColumnComponentSortAscending: 'ascending', - ariaDropZoneColumnComponentSortDescending: 'descending', - - // ARIA Labels for Dialogs - ariaLabelColumnMenu: 'Column Menu', - ariaLabelColumnFilter: 'Column Filter', - ariaLabelCellEditor: 'Cell Editor', - ariaLabelDialog: 'Dialog', - ariaLabelSelectField: 'Select Field', - ariaLabelRichSelectField: 'Rich Select Field', - ariaLabelTooltip: 'Tooltip', - ariaLabelContextMenu: 'Context Menu', - ariaLabelSubMenu: 'SubMenu', - ariaLabelAggregationFunction: 'Aggregation Function', - ariaLabelAdvancedFilterAutocomplete: 'Advanced Filter Autocomplete', - ariaLabelAdvancedFilterBuilderAddField: 'Advanced Filter Builder Add Field', - ariaLabelAdvancedFilterBuilderColumnSelectField: - 'Advanced Filter Builder Column Select Field', - ariaLabelAdvancedFilterBuilderOptionSelectField: - 'Advanced Filter Builder Option Select Field', - ariaLabelAdvancedFilterBuilderJoinSelectField: - 'Advanced Filter Builder Join Operator Select Field', - - // ARIA Labels for the Side Bar - ariaColumnPanelList: 'List colonne', - ariaFilterPanelList: 'Liste filtre', - - // Number Format (Status Bar, Pagination Panel) - thousandSeparator: '.', - decimalSeparator: ',', - - // Data types - true: 'Vrai', - false: 'Faux', - invalidDate: 'Date invalide', - invalidNumber: 'Nombre invalide', - january: 'Janvier', - february: 'Février', - march: 'Mars', - april: 'Avril', - may: 'Mai', - june: 'Juin', - july: 'Juillet', - august: 'Août', - september: 'Septembre', - october: 'Octobre', - november: 'Novembre', - december: 'Décembre', -}; -export default AG_GRID_LOCALE_FR; diff --git a/src/translations/ag-grid/locales.ts b/src/translations/ag-grid/locales.ts new file mode 100644 index 0000000..9d6f07d --- /dev/null +++ b/src/translations/ag-grid/locales.ts @@ -0,0 +1,198 @@ +// from https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/src/content/docs/localisation/_examples/localisation/locale.en.js +/* eslint-disable no-template-curly-in-string */ + +export type AgGridLocale = Partial>; + +/* eslint-disable prettier/prettier */ +export type AgGridLocaleKeys = + // Set Filter + | 'selectAll' | 'selectAllSearchResults' | 'addCurrentSelectionToFilter' | 'searchOoo' | 'blanks' | 'noMatches' + // Number Filter & Text Filter + | 'filterOoo' | 'equals' | 'notEqual' | 'blank' | 'notBlank' | 'empty' + // Number Filter + | 'lessThan' | 'greaterThan' | 'lessThanOrEqual' | 'greaterThanOrEqual' | 'inRange' | 'inRangeStart' | 'inRangeEnd' + // Text Filter + | 'contains' | 'notContains' | 'startsWith' | 'endsWith' + // Date Filter + | 'dateFormatOoo' | 'before' | 'after' + // Filter Conditions + | 'andCondition' | 'orCondition' + // Filter Buttons + | 'applyFilter' | 'resetFilter' | 'clearFilter' | 'cancelFilter' + // Filter Titles + | 'textFilter' | 'numberFilter' | 'dateFilter' | 'setFilter' + // Group Column Filter + | 'groupFilterSelect' + // Advanced Filter + | 'advancedFilterContains' | 'advancedFilterNotContains' | 'advancedFilterTextEquals' | 'advancedFilterTextNotEqual' | 'advancedFilterStartsWith' | 'advancedFilterEndsWith' | 'advancedFilterBlank' | 'advancedFilterNotBlank' | 'advancedFilterEquals' | 'advancedFilterNotEqual' | 'advancedFilterGreaterThan' | 'advancedFilterGreaterThanOrEqual' | 'advancedFilterLessThan' | 'advancedFilterLessThanOrEqual' | 'advancedFilterTrue' | 'advancedFilterFalse' + | 'advancedFilterAnd' | 'advancedFilterOr' | 'advancedFilterApply' | 'advancedFilterBuilder' | 'advancedFilterValidationMissingColumn' | 'advancedFilterValidationMissingOption' | 'advancedFilterValidationMissingValue' | 'advancedFilterValidationInvalidColumn' | 'advancedFilterValidationInvalidOption' | 'advancedFilterValidationMissingQuote' | 'advancedFilterValidationNotANumber' | 'advancedFilterValidationInvalidDate' | 'advancedFilterValidationMissingCondition' + | 'advancedFilterValidationJoinOperatorMismatch' | 'advancedFilterValidationInvalidJoinOperator' | 'advancedFilterValidationMissingEndBracket' | 'advancedFilterValidationExtraEndBracket' | 'advancedFilterValidationMessage' | 'advancedFilterValidationMessageAtEnd' | 'advancedFilterBuilderTitle' | 'advancedFilterBuilderApply' | 'advancedFilterBuilderCancel' | 'advancedFilterBuilderAddButtonTooltip' | 'advancedFilterBuilderRemoveButtonTooltip' | 'advancedFilterBuilderMoveUpButtonTooltip' + | 'advancedFilterBuilderMoveDownButtonTooltip' | 'advancedFilterBuilderAddJoin' | 'advancedFilterBuilderAddCondition' | 'advancedFilterBuilderSelectColumn' | 'advancedFilterBuilderSelectOption' | 'advancedFilterBuilderEnterValue' | 'advancedFilterBuilderValidationAlreadyApplied' | 'advancedFilterBuilderValidationIncomplete' | 'advancedFilterBuilderValidationSelectColumn' | 'advancedFilterBuilderValidationSelectOption' | 'advancedFilterBuilderValidationEnterValue' + // Side Bar + | 'columns' | 'filters' + // columns tool panel + | 'pivotMode' | 'groups' | 'rowGroupColumnsEmptyMessage' | 'values' | 'valueColumnsEmptyMessage' | 'pivots' | 'pivotColumnsEmptyMessage' + // Header of the Default Group Column + | 'group' + // Row Drag + | 'rowDragRow' | 'rowDragRows' + // Other + | 'loadingOoo' | 'loadingError' | 'noRowsToShow' | 'enabled' + // Menu + | 'pinColumn' | 'pinLeft' | 'pinRight' | 'noPin' | 'valueAggregation' | 'noAggregation' | 'autosizeThiscolumn' | 'autosizeAllColumns' | 'groupBy' | 'ungroupBy' | 'ungroupAll' | 'addToValues' | 'removeFromValues' | 'addToLabels' | 'removeFromLabels' | 'resetColumns' | 'expandAll' | 'collapseAll' | 'copy' | 'ctrlC' | 'ctrlX' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'ctrlV' | 'export' | 'csvExport' | 'excelExport' | 'columnFilter' | 'columnChooser' | 'sortAscending' | 'sortDescending' | 'sortUnSort' + // Enterprise Menu Aggregation and Status Bar + | 'sum' | 'first' | 'last' | 'min' | 'max' | 'none' | 'count' | 'avg' | 'filteredRows' | 'selectedRows' | 'totalRows' | 'totalAndFilteredRows' | 'more' | 'to' | 'of' | 'page' | 'pageLastRowUnknown' | 'nextPage' | 'lastPage' | 'firstPage' | 'previousPage' | 'pageSizeSelectorLabel' | 'footerTotal' + // Pivoting + | 'pivotColumnGroupTotals' + // Enterprise Menu (Charts) + | 'pivotChartAndPivotMode' | 'pivotChart' | 'chartRange' | 'columnChart' | 'groupedColumn' | 'stackedColumn' | 'normalizedColumn' | 'barChart' | 'groupedBar' | 'stackedBar' | 'normalizedBar' | 'pieChart' | 'pie' | 'donut' | 'line' | 'xyChart' | 'scatter' | 'bubble' | 'areaChart' | 'area' | 'stackedArea' | 'normalizedArea' | 'histogramChart' | 'histogramFrequency' | 'polarChart' | 'radarLine' | 'radarArea' | 'nightingale' | 'radialColumn' | 'radialBar' | 'statisticalChart' | 'boxPlot' + | 'rangeBar' | 'rangeArea' | 'hierarchicalChart' | 'treemap' | 'sunburst' | 'specializedChart' | 'waterfall' | 'heatmap' | 'combinationChart' | 'columnLineCombo' | 'AreaColumnCombo' + // Charts + | 'pivotChartTitle' | 'rangeChartTitle' | 'settings' | 'data' | 'format' | 'categories' | 'defaultCategory' | 'series' | 'xyValues' | 'paired' | 'axis' | 'radiusAxis' | 'navigator' | 'color' | 'thickness' | 'preferredLength' | 'xType' | 'automatic' | 'category' | 'number' | 'time' | 'autoRotate' | 'xRotation' | 'yRotation' | 'labelRotation' | 'circle' | 'polygon' | 'orientation' | 'fixed' | 'parallel' | 'perpendicular' | 'radiusAxisPosition' | 'ticks' | 'width' | 'height' | 'length' | 'padding' | 'spacing' + | 'chart' | 'title' | 'titlePlaceholder' | 'background' | 'font' | 'top' | 'right' | 'bottom' | 'left' | 'labels' | 'calloutLabels' | 'sectorLabels' | 'positionRatio' | 'size' | 'shape' | 'minSize' | 'maxSize' | 'legend' | 'position' | 'markerSize' | 'markerStroke' | 'markerPadding' | 'itemSpacing' | 'itemPaddingX' | 'itemPaddingY' | 'layoutHorizontalSpacing' | 'layoutVerticalSpacing' | 'strokeWidth' | 'offset' | 'offsets' | 'tooltips' | 'callout' | 'markers' | 'shadow' | 'blur' | 'xOffset' | 'yOffset' + | 'lineWidth' | 'lineDash' | 'lineDashOffset' | 'normal' | 'bold' | 'italic' | 'boldItalic' | 'predefined' | 'fillOpacity' | 'strokeColor' | 'strokeOpacity' | 'histogramBinCount' | 'connectorLine' | 'seriesItems' | 'seriesItemType' | 'seriesItemPositive' | 'seriesItemNegative' | 'seriesItemLabels' | 'columnGroup' | 'barGroup' | 'pieGroup' | 'lineGroup' | 'scatterGroup' | 'areaGroup' | 'polarGroup' | 'statisticalGroup' | 'hierarchicalGroup' | 'specializedGroup' | 'combinationGroup' | 'groupedColumnTooltip' + | 'stackedColumnTooltip' | 'normalizedColumnTooltip' | 'groupedBarTooltip' | 'stackedBarTooltip' | 'normalizedBarTooltip' | 'pieTooltip' | 'donutTooltip' | 'lineTooltip' | 'groupedAreaTooltip' | 'stackedAreaTooltip' | 'normalizedAreaTooltip' | 'scatterTooltip' | 'bubbleTooltip' | 'histogramTooltip' | 'radialColumnTooltip' | 'radialBarTooltip' | 'radarLineTooltip' | 'radarAreaTooltip' | 'nightingaleTooltip' | 'rangeBarTooltip' | 'rangeAreaTooltip' | 'boxPlotTooltip' | 'treemapTooltip' | 'sunburstTooltip' + | 'waterfallTooltip' | 'heatmapTooltip' | 'columnLineComboTooltip' | 'areaColumnComboTooltip' | 'customComboTooltip' | 'innerRadius' | 'startAngle' | 'endAngle' | 'reverseDirection' | 'groupPadding' | 'seriesPadding' /*| 'group'*/ | 'tile' | 'whisker' | 'cap' | 'capLengthRatio' | 'labelPlacement' | 'inside' | 'outside' | 'noDataToChart' | 'pivotChartRequiresPivotMode' | 'chartSettingsToolbarTooltip' | 'chartLinkToolbarTooltip' | 'chartUnlinkToolbarTooltip' | 'chartDownloadToolbarTooltip' + | 'seriesChartType' | 'seriesType' | 'secondaryAxis' + // ARIA + | 'ariaAdvancedFilterBuilderItem' | 'ariaAdvancedFilterBuilderItemValidation' | 'ariaAdvancedFilterBuilderList' | 'ariaAdvancedFilterBuilderFilterItem' | 'ariaAdvancedFilterBuilderGroupItem' | 'ariaAdvancedFilterBuilderColumn' | 'ariaAdvancedFilterBuilderOption' | 'ariaAdvancedFilterBuilderValueP' | 'ariaAdvancedFilterBuilderJoinOperator' | 'ariaAdvancedFilterInput' | 'ariaChecked' | 'ariaColumn' | 'ariaColumnGroup' | 'ariaColumnFiltered' | 'ariaColumnSelectAll' + | 'ariaDateFilterInput' | 'ariaDefaultListName' | 'ariaFilterColumnsInput' | 'ariaFilterFromValue' | 'ariaFilterInput' | 'ariaFilterList' | 'ariaFilterToValue' | 'ariaFilterValue' | 'ariaFilterMenuOpen' | 'ariaFilteringOperator' | 'ariaHidden' | 'ariaIndeterminate' | 'ariaInputEditor' | 'ariaMenuColumn' | 'ariaFilterColumn' | 'ariaRowDeselect' | 'ariaRowSelectAll' | 'ariaRowToggleSelection' | 'ariaRowSelect' | 'ariaSearch' | 'ariaSortableColumn' | 'ariaToggleVisibility' + | 'ariaToggleCellValue' | 'ariaUnchecked' | 'ariaVisible' | 'ariaSearchFilterValues' | 'ariaPageSizeSelectorLabel' + // ARIA Labels for Drop Zones + | 'ariaRowGroupDropZonePanelLabel' | 'ariaValuesDropZonePanelLabel' | 'ariaPivotDropZonePanelLabel' | 'ariaDropZoneColumnComponentDescription' | 'ariaDropZoneColumnValueItemDescription' | 'ariaDropZoneColumnGroupItemDescription' + // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} + | 'ariaDropZoneColumnComponentAggFuncSeparator' | 'ariaDropZoneColumnComponentSortAscending' | 'ariaDropZoneColumnComponentSortDescending' + // ARIA Labels for Dialogs + | 'ariaLabelColumnMenu' | 'ariaLabelColumnFilter' | 'ariaLabelCellEditor' | 'ariaLabelDialog' | 'ariaLabelSelectField' | 'ariaLabelRichSelectField' | 'ariaLabelTooltip' | 'ariaLabelContextMenu' | 'ariaLabelSubMenu' | 'ariaLabelAggregationFunction' | 'ariaLabelAdvancedFilterAutocomplete' | 'ariaLabelAdvancedFilterBuilderAddField' | 'ariaLabelAdvancedFilterBuilderColumnSelectField' | 'ariaLabelAdvancedFilterBuilderOptionSelectField' | 'ariaLabelAdvancedFilterBuilderJoinSelectField' + // ARIA Labels for the Side Bar + | 'ariaColumnPanelList' | 'ariaFilterPanelList' + // Number Format (Status Bar, Pagination Panel) + | 'thousandSeparator' | 'decimalSeparator' + // Data types + | 'true' | 'false' | 'invalidDate' | 'invalidNumber' | 'january' | 'february' | 'march' | 'april' | 'may' | 'june' | 'july' | 'august' | 'september' | 'october' | 'november' | 'december'; +/* eslint-enable prettier/prettier */ + +export const AG_GRID_LOCALE_FR: AgGridLocale = { + // Set Filter + selectAll: '(Select All)', + selectAllSearchResults: '(Select All Search Results)', + addCurrentSelectionToFilter: 'Add current selection to filter', + searchOoo: 'Search...', + blanks: '(Blanks)', + noMatches: 'No matches', + + // Number Filter & Text Filter + filterOoo: 'Filter...', + equals: 'Equals', + notEqual: 'Does not equal', + blank: 'Blank', + notBlank: 'Not blank', + empty: 'Choose one', + + // Number Filter + lessThan: 'Less than', + greaterThan: 'Greater than', + lessThanOrEqual: 'Less than or equal to', + greaterThanOrEqual: 'Greater than or equal to', + inRange: 'Between', + inRangeStart: 'From', + inRangeEnd: 'To', + + // Text Filter + contains: 'Contains', + notContains: 'Does not contain', + startsWith: 'Begins with', + endsWith: 'Ends with', + + // Date Filter + dateFormatOoo: 'yyyy/mm/dd', + before: 'Avant', + after: 'Après', + + // Filter Conditions + andCondition: 'ET', + orCondition: 'OU', + + // Filter Buttons + applyFilter: 'Appliquer', + resetFilter: 'Réinitialiser', + clearFilter: 'Nettoyer', + cancelFilter: 'Annuler', + + // Header of the Default Group Column + group: 'Groupe', + + // Other + loadingOoo: 'Loading...', + loadingError: 'ERR', + noRowsToShow: 'No Rows To Show', + enabled: 'Enabled', + + // Enterprise Menu Aggregation and Status Bar + to: 'to', + of: 'of', + page: 'Page', + nextPage: 'Next Page', + lastPage: 'Last Page', + firstPage: 'First Page', + previousPage: 'Previous Page', + + // ARIA + ariaChecked: 'coché', + ariaColumn: 'Colonne', + ariaColumnGroup: 'Groupe colonne', + ariaColumnFiltered: 'Colonne Filtrée', + ariaColumnSelectAll: 'Sélectionner toutes les colonnes', + ariaDateFilterInput: 'Champ filtrage de date', + ariaDefaultListName: 'Liste', + ariaFilterFromValue: 'Filter from value', + ariaFilterInput: 'Filtre Champ', + ariaFilterList: 'Filtre Liste', + ariaFilterValue: 'Filtre Valeur', + ariaFilterMenuOpen: 'Ouvrir Menu Filtre', + ariaFilteringOperator: 'Opérateur filtrage', + ariaHidden: 'caché', + ariaIndeterminate: 'indéterminé', + ariaMenuColumn: 'Appuyer sur ALT+BAS pour ouvrir le menu de colonne', + ariaFilterColumn: 'Appuyer sur CTRL+ENTRER pour ouvrir les filtres', + ariaRowDeselect: 'Appuyer sur ESPACE pour désélectionner cette ligne', + ariaRowSelectAll: 'Appuyer sur ESPACE pour sélectionner toutes les lignes', + ariaRowToggleSelection: + 'Appuyer sur Espace pour inverser les lignes sélectionnés', + ariaRowSelect: 'Appuyer sur ESPACE pour sélectionner cette ligne', + ariaSearch: 'Rechercher', + ariaSortableColumn: 'Appuyer sur ENTRER pour trier', + ariaToggleVisibility: 'Appuyer sur ESPACE pour changer la visibilité', + ariaUnchecked: 'désélectionner', + ariaVisible: 'visible', + ariaSearchFilterValues: 'Recherché valeurs filtrées', + + // ARIA Labels for Dialogs + ariaLabelColumnMenu: 'Menu de colonne', + ariaLabelColumnFilter: 'Column Filter', + ariaLabelDialog: 'Dialog', + ariaLabelSelectField: 'Sélectionner Champ', + ariaLabelTooltip: 'Tooltip', + + // Number Format (Status Bar, Pagination Panel) + thousandSeparator: '.', + decimalSeparator: ',', + + // Data types + true: 'Vrai', + false: 'Faux', + invalidDate: 'Date invalide', + invalidNumber: 'Nombre invalide', + january: 'Janvier', + february: 'Février', + march: 'Mars', + april: 'Avril', + may: 'Mai', + june: 'Juin', + july: 'Juillet', + august: 'Août', + september: 'Septembre', + october: 'Octobre', + november: 'Novembre', + december: 'Décembre', +}; From 1681b0261449eee1407c25072e512585d3f70a5e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 11:02:58 +0100 Subject: [PATCH 32/54] remove ag-grid modules --- src/components/Grid/AgGrid/AgGrid.tsx | 100 -------------------------- 1 file changed, 100 deletions(-) diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid/AgGrid.tsx index 9755957..078c502 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid/AgGrid.tsx @@ -23,7 +23,6 @@ import { } from 'react'; import { Box, useTheme } from '@mui/material'; import { AgGridReact } from 'ag-grid-react'; -import { CsvExportModule, ProcessCellForExportParams } from 'ag-grid-community'; import { useIntl } from 'react-intl'; import { AgGridProps } from './AgGrid.type'; import { LANG_FRENCH } from '@gridsuite/commons-ui'; @@ -31,11 +30,6 @@ import { AG_GRID_LOCALE_FR, AgGridLocale, } from '../../../translations/ag-grid/locales'; -import { - ProcessGroupHeaderForExportParams, - ProcessHeaderForExportParams, - ProcessRowGroupForExportParams, -} from 'ag-grid-community/dist/lib/interfaces/exportParams'; import deepmerge from '@mui/utils/deepmerge/deepmerge'; const messages: Record = { @@ -123,10 +117,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< ref={agGridRef} - modules={[ - //ClientSideRowModelModule implicitly recognized? - CsvExportModule, - ]} localeText={ messages[intl.locale] ?? messages[intl.defaultLocale] ?? @@ -136,99 +126,9 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< debug={ process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug } - defaultCsvExportParams={useSecuredCsvExportParams( - props.defaultCsvExportParams - )} reactiveCustomComponents //AG Grid: Using custom components without `reactiveCustomComponents = true` is deprecated. /> ); }); export default AgGrid; - -function counterCsvInjection(value: string): string { - return value ? value.replace(/^[+\-=@\t\r]/, '_') : value; -} - -/* - * https://www.ag-grid.com/react-data-grid/csv-export/#security-concerns - */ -function useSecuredCsvExportParams( - defaultCsvExportParams: AgGridProps< - TData, - TContext - >['defaultCsvExportParams'] -) { - const processCellCallback = defaultCsvExportParams?.processCellCallback; - const customProcessCellCallback = useMemo( - () => - (processCellCallback && - ((params: ProcessCellForExportParams) => { - let result = processCellCallback?.(params); - return result ? counterCsvInjection(result) : result; - })) || - undefined, - [processCellCallback] - ); - - const processHeaderCallback = defaultCsvExportParams?.processHeaderCallback; - const customProcessHeaderCallback = useMemo( - () => - (processHeaderCallback && - ((params: ProcessHeaderForExportParams) => { - let result = processHeaderCallback?.(params); - return result ? counterCsvInjection(result) : result; - })) || - undefined, - [processHeaderCallback] - ); - - const processGroupHeaderCallback = - defaultCsvExportParams?.processGroupHeaderCallback; - const customProcessGroupHeaderCallback = useMemo( - () => - (processGroupHeaderCallback && - (( - params: ProcessGroupHeaderForExportParams - ) => { - let result = processGroupHeaderCallback?.(params); - return result ? counterCsvInjection(result) : result; - })) || - undefined, - [processGroupHeaderCallback] - ); - - const processRowGroupCallback = - defaultCsvExportParams?.processRowGroupCallback; - const customProcessRowGroupCallback = useMemo( - () => - (processRowGroupCallback && - ((params: ProcessRowGroupForExportParams) => { - let result = processRowGroupCallback?.(params); - return result ? counterCsvInjection(result) : result; - })) || - undefined, - [processRowGroupCallback] - ); - - return useMemo( - () => - defaultCsvExportParams === undefined - ? undefined - : { - ...defaultCsvExportParams, - processCellCallback: customProcessCellCallback, - processHeaderCallback: customProcessHeaderCallback, - processGroupHeaderCallback: - customProcessGroupHeaderCallback, - processRowGroupCallback: customProcessRowGroupCallback, - }, - [ - customProcessCellCallback, - customProcessGroupHeaderCallback, - customProcessHeaderCallback, - customProcessRowGroupCallback, - defaultCsvExportParams, - ] - ); -} From 6c86450495b74197a01ed92600b97b5e339fbc37 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 11:27:19 +0100 Subject: [PATCH 33/54] remove typescript overrride for ag-grid --- src/components/Grid/{AgGrid => }/AgGrid.tsx | 30 +- src/components/Grid/AgGrid/AgGrid.type.ts | 732 ------------------ .../Grid/AgGrid/ag-theme-alpine.d.ts | 156 ---- src/components/Grid/DataGrid.tsx | 25 +- src/components/Grid/Grid.tsx | 34 +- src/components/Grid/GridFormat.tsx | 10 +- src/components/Grid/index.ts | 7 +- src/module-mui.d.ts | 5 +- src/pages/connections/ConnectionsPage.tsx | 5 +- src/pages/users/UsersPage.tsx | 10 +- 10 files changed, 41 insertions(+), 973 deletions(-) rename src/components/Grid/{AgGrid => }/AgGrid.tsx (81%) delete mode 100644 src/components/Grid/AgGrid/AgGrid.type.ts delete mode 100644 src/components/Grid/AgGrid/ag-theme-alpine.d.ts diff --git a/src/components/Grid/AgGrid/AgGrid.tsx b/src/components/Grid/AgGrid.tsx similarity index 81% rename from src/components/Grid/AgGrid/AgGrid.tsx rename to src/components/Grid/AgGrid.tsx index 078c502..9067ece 100644 --- a/src/components/Grid/AgGrid/AgGrid.tsx +++ b/src/components/Grid/AgGrid.tsx @@ -13,7 +13,6 @@ import { ForwardedRef, forwardRef, FunctionComponent, - JSXElementConstructor, PropsWithoutRef, ReactNode, RefAttributes, @@ -24,13 +23,13 @@ import { import { Box, useTheme } from '@mui/material'; import { AgGridReact } from 'ag-grid-react'; import { useIntl } from 'react-intl'; -import { AgGridProps } from './AgGrid.type'; import { LANG_FRENCH } from '@gridsuite/commons-ui'; import { AG_GRID_LOCALE_FR, AgGridLocale, -} from '../../../translations/ag-grid/locales'; +} from '../../translations/ag-grid/locales'; import deepmerge from '@mui/utils/deepmerge/deepmerge'; +import { GridOptions } from 'ag-grid-community'; const messages: Record = { [LANG_FRENCH]: AG_GRID_LOCALE_FR, @@ -51,33 +50,20 @@ export type AgGridRef = { */ type ForwardRef = typeof forwardRef; type ForwardRefComponent = ReturnType>; -interface AgGridWithRef - extends FunctionComponent> { - < - TData, - TContext extends {}, - LdgCmpnt extends JSXElementConstructor, - NoCmpnt extends JSXElementConstructor - >( - props: PropsWithoutRef< - AgGridProps - > & +interface AgGridWithRef extends FunctionComponent> { + ( + props: PropsWithoutRef> & RefAttributes> ): ReturnType< - ForwardRefComponent< - AgGridProps, - AgGridRef - > + ForwardRefComponent, AgGridRef> >; } export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< TData, - TContext extends {} = {}, - LdgCmpnt extends JSXElementConstructor = any, - NoCmpnt extends JSXElementConstructor = any + TContext extends {} = {} >( - props: AgGridProps, + props: GridOptions, gridRef?: ForwardedRef> ): ReactNode { const intl = useIntl(); diff --git a/src/components/Grid/AgGrid/AgGrid.type.ts b/src/components/Grid/AgGrid/AgGrid.type.ts deleted file mode 100644 index ddca481..0000000 --- a/src/components/Grid/AgGrid/AgGrid.type.ts +++ /dev/null @@ -1,732 +0,0 @@ -/* - * Copyright (c) 2024, 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 { - ColDef, - GridOptions, - ICellEditorComp, - ICellEditorParams, - ICheckboxCellRendererParams, - IDateCellEditorParams, - IDateFilterParams, - IDateStringCellEditorParams, - IGroupCellRendererParams, - ILargeTextEditorParams, - INumberCellEditorParams, - INumberFilterParams, - INumberFloatingFilterParams, - ISelectCellEditorParams, - ITextCellEditorParams, - ITextFilterParams, - ITextFloatingFilterParams, -} from 'ag-grid-community'; -import { - GetRowIdParams, - IsExternalFilterPresentParams, - IsFullWidthRowParams, - NavigateToNextCellParams, - NavigateToNextHeaderParams, - PaginationNumberFormatterParams, - PostSortRowsParams, - ProcessRowParams, - ProcessUnpinnedColumnsParams, - RowHeightParams, - TabToNextCellParams, - TabToNextHeaderParams, -} from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; -import { Column } from 'ag-grid-community/dist/lib/entities/column'; -import { - LoadingCellRendererSelectorResult, - RowClassParams, - RowStyle, -} from 'ag-grid-community/dist/lib/entities/gridOptions'; -import { HeaderPosition } from 'ag-grid-community/dist/lib/headerRendering/common/headerPosition'; -import { CellPosition } from 'ag-grid-community/dist/lib/entities/cellPositionUtils'; -import { - AsyncTransactionsFlushed, - BodyScrollEndEvent, - BodyScrollEvent, - CellClickedEvent, - CellContextMenuEvent, - CellDoubleClickedEvent, - CellEditingStartedEvent, - CellEditingStoppedEvent, - CellEditRequestEvent, - CellFocusedEvent, - CellKeyDownEvent, - CellMouseDownEvent, - CellMouseOutEvent, - CellMouseOverEvent, - CellValueChangedEvent, - ColumnEverythingChangedEvent, - ColumnGroupOpenedEvent, - ColumnHeaderClickedEvent, - ColumnHeaderContextMenuEvent, - ColumnHeaderMouseLeaveEvent, - ColumnHeaderMouseOverEvent, - ColumnMovedEvent, - ColumnPinnedEvent, - ColumnPivotChangedEvent, - ColumnPivotModeChangedEvent, - ColumnResizedEvent, - ColumnValueChangedEvent, - ColumnVisibleEvent, - ComponentStateChangedEvent, - DisplayedColumnsChangedEvent, - DragStartedEvent, - DragStoppedEvent, - FilterChangedEvent, - FilterModifiedEvent, - FilterOpenedEvent, - FirstDataRenderedEvent, - FullWidthCellKeyDownEvent, - GridColumnsChangedEvent, - GridPreDestroyedEvent, - GridReadyEvent, - GridSizeChangedEvent, - ModelUpdatedEvent, - NewColumnsLoadedEvent, - PaginationChangedEvent, - PinnedRowDataChangedEvent, - RedoEndedEvent, - RedoStartedEvent, - RowClickedEvent, - RowDataUpdatedEvent, - RowDoubleClickedEvent, - RowDragEvent, - RowEditingStartedEvent, - RowEditingStoppedEvent, - RowSelectedEvent, - RowValueChangedEvent, - SelectionChangedEvent, - SortChangedEvent, - StateUpdatedEvent, - TooltipHideEvent, - TooltipShowEvent, - UndoEndedEvent, - UndoStartedEvent, - ViewportChangedEvent, - VirtualColumnsChangedEvent, - VirtualRowRemovedEvent, -} from 'ag-grid-community/dist/lib/events'; -import { ColGroupDef } from 'ag-grid-community/dist/lib/entities/colDef'; -import { RowModelType } from 'ag-grid-community/dist/lib/interfaces/iRowModel'; -import { ILoadingCellRendererParams } from 'ag-grid-community/dist/lib/rendering/cellRenderers/loadingCellRenderer'; -import { JSXElementConstructor } from 'react'; -import { - CustomLoadingOverlayProps, - CustomNoRowsOverlayProps, -} from 'ag-grid-react'; -import { - ICellRenderer, - ICellRendererParams, -} from 'ag-grid-community/dist/lib/rendering/cellRenderers/iCellRenderer'; -import { IComponent } from 'ag-grid-community/dist/lib/interfaces/iComponent'; -import { - IHeader, - IHeaderParams, -} from 'ag-grid-community/dist/lib/headerRendering/cells/column/headerComp'; -import { LiteralUnion } from '../../../utils/types'; -import { - IFilter, - IFilterParams, -} from 'ag-grid-community/dist/lib/interfaces/iFilter'; -import { - IFloatingFilter, - IFloatingFilterParams, -} from 'ag-grid-community/dist/lib/filter/floating/floatingFilter'; -import { ITooltipParams } from 'ag-grid-community/dist/lib/rendering/tooltipComponent'; - -type JsxConstructorParameter> = - Cmpnt extends abstract new (...args: any) => any - ? ConstructorParameters[0] - : Cmpnt extends (...args: any) => any - ? Parameters[0] - : unknown; - -type JsxConstructorReturnType> = - Cmpnt extends abstract new (...args: any) => any - ? InstanceType - : Cmpnt extends (...args: any) => any - ? ReturnType - : unknown; - -/* - * Override implicit "any" generics and remove deprecated & enterprise/paid options - * https://www.ag-grid.com/react-data-grid/grid-options/ - * https://www.ag-grid.com/react-data-grid/grid-events/ - */ -/** - * Filtered & fixed version of GridOptions - * @template TData the datatype of rows - * @template TContext the context content given by user to the grid - * @template LdgCmpnt the component use for the loading overlay - * @template NoCmpnt the component use for the no-row overlay - */ -export interface AgGridProps< - TData, - TContext extends {}, - //TValue = any, - LdgCmpnt extends JSXElementConstructor = any, - NoCmpnt extends JSXElementConstructor = any -> extends Omit< - GridOptions, - // deprecated options - | 'enterMovesDown' - | 'enterMovesDownAfterEdit' - | 'excludeHiddenColumnsFromQuickFilter' - | 'advancedFilterModel' - | 'enableChartToolPanelsButton' - | 'suppressParentsInRowNodes' - | 'suppressAsyncEvents' - | 'suppressAggAtRootLevel' - | 'cellFlashDelay' - | 'cellFadeDelay' - | 'suppressGroupMaintainValueType' - | 'suppressServerSideInfiniteScroll' - | 'serverSideFilterAllLevels' - | 'serverSideSortOnServer' - | 'serverSideFilterOnServer' - | 'functionsPassive' - | 'reactiveCustomComponents' - | 'onColumnRowGroupChangeRequest' - | 'onColumnPivotChangeRequest' - | 'onColumnValueChangeRequest' - | 'onColumnAggFuncChangeRequest' - | 'api' - | 'columnApi' - // enterprise features... - | 'statusBar' - // enterprise features "Tool Panels" - | 'sideBar' - | 'onToolPanelVisibleChanged' - | 'onToolPanelSizeChanged' - // enterprise feature "Tool Panels: Context Menu" - | 'getContextMenuItems' - | 'suppressContextMenu' - //| 'preventDefaultOnContextMenu' - | 'allowContextMenuWithControlKey' - | 'popupParent' - // enterprise feature "Tool Panels: Column Menu" - | 'getMainMenuItems' - | 'columnMenu' - | 'suppressMenuHide' - | 'postProcessPopup' - | 'onColumnMenuVisibleChanged' - // enterprise feature "Clipboard" - | 'copyHeadersToClipboard' - | 'copyGroupHeadersToClipboard' - | 'clipboardDelimiter' - | 'suppressCutToClipboard' - | 'suppressCopyRowsToClipboard' - | 'suppressCopySingleCellRanges' - | 'suppressLastEmptyLineOnPaste' - | 'suppressClipboardPaste' - | 'suppressClipboardApi' - | 'processCellForClipboard' - | 'processHeaderForClipboard' - | 'processGroupHeaderForClipboard' - | 'processCellFromClipboard' - | 'sendToClipboard' - | 'processDataFromClipboard' - | 'enableCellTextSelection' - | 'onCutStart' - | 'onCutEnd' - | 'onPasteStart' - | 'onPasteEnd' - // enterprise feature "Excel Export" - | 'defaultExcelExportParams' - | 'suppressExcelExport' - | 'excelStyles' - // enterprise feature "Tree Data" - | 'excludeChildrenWhenTreeDataFiltering' - // enterprise feature "Advanced Filter" - | 'enableAdvancedFilter' - | 'includeHiddenColumnsInAdvancedFilter' - | 'advancedFilterParent' - | 'advancedFilterBuilderParams' - | 'onAdvancedFilterBuilderVisibleChanged' - // enterprise feature "Integrated Charts" - | 'enableCharts' - | 'suppressChartToolPanelsButton' - | 'getChartToolbarItems' - | 'createChartContainer' - | 'chartThemes' - | 'customChartThemes' - | 'chartThemeOverrides' - | 'chartToolPanelsDef' - | 'onChartCreated' - | 'onChartRangeSelectionChanged' - | 'onChartOptionsChanged' - | 'onChartDestroyed' - // enterprise feature "Master Detail" - | 'masterDetail' - | 'isRowMaster' - | 'detailCellRenderer' - | 'detailCellRendererParams' - | 'detailRowHeight' - | 'detailRowAutoHeight' - | 'embedFullWidthRows' - | 'keepDetailRows' - | 'keepDetailRowsCount' - // enterprise features "Pivot" and "Aggregation" - | 'pivotMode' - | 'pivotPanelShow' - | 'pivotDefaultExpanded' - | 'pivotColumnGroupTotals' - | 'pivotRowTotals' - | 'pivotSuppressAutoColumn' - | 'processPivotResultColDef' - | 'processPivotResultColGroupDef' - | 'suppressExpandablePivotGroups' - | 'functionsReadOnly' - | 'aggFuncs' - | 'getGroupRowAgg' - | 'suppressAggFuncInHeader' - | 'alwaysAggregateAtRootLevel' - | 'aggregateOnlyChangedColumns' - | 'suppressAggFilteredOnly' - | 'groupAggFiltering' - | 'removePivotHeaderRowWhenSingleValueColumn' - // enterprise feature "Row Grouping" - | 'groupDisplayType' - | 'groupDefaultExpanded' - | 'autoGroupColumnDef' - | 'groupMaintainOrder' - | 'groupSelectsChildren' - | 'groupLockGroupColumns' - | 'groupIncludeFooter' - | 'groupIncludeTotalFooter' - | 'groupSuppressBlankHeader' - | 'groupSelectsFiltered' - | 'showOpenedGroup' - | 'isGroupOpenByDefault' - | 'initialGroupOrderComparator' - | 'groupRemoveSingleChildren' - | 'groupRemoveLowestSingleChildren' - | 'groupHideOpenParents' - | 'groupAllowUnbalanced' - | 'rowGroupPanelShow' - | 'rowGroupPanelSuppressSort' - | 'groupRowRenderer' - | 'groupRowRendererParams' - | 'suppressDragLeaveHidesColumns' - | 'suppressGroupRowsSticky' - | 'suppressRowGroupHidesColumns' - | 'suppressMakeColumnVisibleAfterUnGroup' - | 'treeData' - | 'getDataPath' - | 'onColumnRowGroupChanged' - | 'onRowGroupOpened' - | 'onExpandOrCollapseAll' - // enterprise feature "RowModel: Server-Side" - | 'serverSideDatasource' - | 'cacheBlockSize' - | 'maxBlocksInCache' - | 'maxConcurrentDatasourceRequests' - | 'blockLoadDebounceMillis' - | 'purgeClosedRowNodes' - | 'serverSidePivotResultFieldSeparator' - | 'serverSideSortAllLevels' - | 'serverSideEnableClientSideSort' - | 'serverSideOnlyRefreshFilteredGroups' - | 'serverSideInitialRowCount' - | 'getChildCount' - | 'getServerSideGroupLevelParams' - | 'isServerSideGroupOpenByDefault' - | 'isApplyServerSideTransaction' - | 'isServerSideGroup' - | 'getServerSideGroupKey' - | 'onStoreRefreshed' - // enterprise feature "RowModel: Viewport" - | 'viewportDatasource' - | 'viewportRowModelPageSize' - | 'viewportRowModelBufferSize' - // enterprise feature "Range selection" - | 'suppressMultiRangeSelection' - | 'enableRangeSelection' - | 'enableRangeHandle' - | 'enableFillHandle' - | 'fillHandleDirection' - | 'fillOperation' - | 'suppressClearOnFillReduction' - | 'onRangeDeleteStart' - | 'onRangeDeleteEnd' - | 'onRangeSelectionChanged' - // managed by component - | 'localeText' - | 'getLocaleText' - /*| 'overlayLoadingTemplate' - | 'loadingOverlayComponent' - | 'loadingOverlayComponentParams' - | 'suppressLoadingOverlay' - | 'overlayNoRowsTemplate' - | 'noRowsOverlayComponent' - | 'noRowsOverlayComponentParams' - | 'suppressNoRowsOverlay'*/ - > { - context?: TContext; - - loadingOverlayComponent?: ( - props: CustomLoadingOverlayProps & - JsxConstructorParameter - ) => JsxConstructorReturnType; - loadingOverlayComponentParams?: JsxConstructorParameter; - - noRowsOverlayComponent?: ( - props: CustomNoRowsOverlayProps & - JsxConstructorParameter - ) => JsxConstructorReturnType; - noRowsOverlayComponentParams?: JsxConstructorParameter; - - /* - * some modes are for enterprise features - * https://www.ag-grid.com/react-data-grid/row-models/ - */ - rowModelType?: Exclude; - - /* - * add missing - */ - //TODO manage TValue correctly - - columnDefs?: - | ( - | AgColDef - | AgColGroupDef - )[] - | null; - defaultColDef?: AgColDef; - autoGroupColumnDef?: AgColDef; - - columnTypes?: { - [key: string]: AgColTypeDef; - }; - - processPivotResultColDef?: ( - colDef: AgColDef - ) => void; - - /* - * add missing - */ - - loadingCellRendererSelector?: ( - params: ILoadingCellRendererParams - ) => LoadingCellRendererSelectorResult | undefined; - rowClassRules?: { - [cssClassName: string]: - | ((params: RowClassParams) => boolean) - | string; - }; - getRowId?: (params: GetRowIdParams) => string; - - processUnpinnedColumns?: ( - params: ProcessUnpinnedColumnsParams - ) => Column[]; - isExternalFilterPresent?: ( - params: IsExternalFilterPresentParams - ) => boolean; - navigateToNextHeader?: ( - params: NavigateToNextHeaderParams - ) => HeaderPosition | null; - tabToNextHeader?: ( - params: TabToNextHeaderParams - ) => HeaderPosition | null; - navigateToNextCell?: ( - params: NavigateToNextCellParams - ) => CellPosition | null; - tabToNextCell?: ( - params: TabToNextCellParams - ) => CellPosition | null; - paginationNumberFormatter?: ( - params: PaginationNumberFormatterParams - ) => string; - processRowPostCreate?: (params: ProcessRowParams) => void; - postSortRows?: (params: PostSortRowsParams) => void; - getRowStyle?: ( - params: RowClassParams - ) => RowStyle | undefined; - getRowClass?: ( - params: RowClassParams - ) => string | string[] | undefined; - getRowHeight?: ( - params: RowHeightParams - ) => number | undefined | null; - isFullWidthRow?: (params: IsFullWidthRowParams) => boolean; - - // TODO remove enterprise related events - onColumnVisible?(event: ColumnVisibleEvent): void; - onColumnPinned?(event: ColumnPinnedEvent): void; - onColumnResized?(event: ColumnResizedEvent): void; - onColumnMoved?(event: ColumnMovedEvent): void; - onColumnValueChanged?( - event: ColumnValueChangedEvent - ): void; - onColumnPivotModeChanged?( - event: ColumnPivotModeChangedEvent - ): void; - onColumnPivotChanged?( - event: ColumnPivotChangedEvent - ): void; - onColumnGroupOpened?(event: ColumnGroupOpenedEvent): void; - onNewColumnsLoaded?(event: NewColumnsLoadedEvent): void; - onGridColumnsChanged?( - event: GridColumnsChangedEvent - ): void; - onDisplayedColumnsChanged?( - event: DisplayedColumnsChangedEvent - ): void; - onVirtualColumnsChanged?( - event: VirtualColumnsChangedEvent - ): void; - onColumnEverythingChanged?( - event: ColumnEverythingChangedEvent - ): void; - onColumnHeaderMouseOver?( - event: ColumnHeaderMouseOverEvent - ): void; - onColumnHeaderMouseLeave?( - event: ColumnHeaderMouseLeaveEvent - ): void; - onColumnHeaderClicked?( - event: ColumnHeaderClickedEvent - ): void; - onColumnHeaderContextMenu?( - event: ColumnHeaderContextMenuEvent - ): void; - onComponentStateChanged?( - event: ComponentStateChangedEvent - ): void; - onCellValueChanged?(event: CellValueChangedEvent): void; - onCellEditRequest?(event: CellEditRequestEvent): void; - onRowValueChanged?(event: RowValueChangedEvent): void; - onCellEditingStarted?( - event: CellEditingStartedEvent - ): void; - onCellEditingStopped?( - event: CellEditingStoppedEvent - ): void; - onRowEditingStarted?(event: RowEditingStartedEvent): void; - onRowEditingStopped?(event: RowEditingStoppedEvent): void; - onUndoStarted?(event: UndoStartedEvent): void; - onUndoEnded?(event: UndoEndedEvent): void; - onRedoStarted?(event: RedoStartedEvent): void; - onRedoEnded?(event: RedoEndedEvent): void; - onFilterOpened?(event: FilterOpenedEvent): void; - onFilterChanged?(event: FilterChangedEvent): void; - onFilterModified?(event: FilterModifiedEvent): void; - onCellKeyDown?( - event: - | CellKeyDownEvent - | FullWidthCellKeyDownEvent - ): void; - onGridReady?(event: GridReadyEvent): void; - onGridPreDestroyed?(event: GridPreDestroyedEvent): void; - onFirstDataRendered?(event: FirstDataRenderedEvent): void; - onGridSizeChanged?(event: GridSizeChangedEvent): void; - onModelUpdated?(event: ModelUpdatedEvent): void; - onVirtualRowRemoved?(event: VirtualRowRemovedEvent): void; - onViewportChanged?(event: ViewportChangedEvent): void; - onBodyScroll?(event: BodyScrollEvent): void; - onBodyScrollEnd?(event: BodyScrollEndEvent): void; - onDragStarted?(event: DragStartedEvent): void; - onDragStopped?(event: DragStoppedEvent): void; - onStateUpdated?(event: StateUpdatedEvent): void; - onPaginationChanged?(event: PaginationChangedEvent): void; - onRowDragEnter?(event: RowDragEvent): void; - onRowDragMove?(event: RowDragEvent): void; - onRowDragLeave?(event: RowDragEvent): void; - onRowDragEnd?(event: RowDragEvent): void; - onPinnedRowDataChanged?( - event: PinnedRowDataChangedEvent - ): void; - onRowDataUpdated?(event: RowDataUpdatedEvent): void; - onAsyncTransactionsFlushed?(event: AsyncTransactionsFlushed): void; - onCellClicked?(event: CellClickedEvent): void; - onCellDoubleClicked?(event: CellDoubleClickedEvent): void; - onCellFocused?(event: CellFocusedEvent): void; - onCellMouseOver?(event: CellMouseOverEvent): void; - onCellMouseOut?(event: CellMouseOutEvent): void; - onCellMouseDown?(event: CellMouseDownEvent): void; - onRowClicked?(event: RowClickedEvent): void; - onRowDoubleClicked?(event: RowDoubleClickedEvent): void; - onRowSelected?(event: RowSelectedEvent): void; - onSelectionChanged?(event: SelectionChangedEvent): void; - onCellContextMenu?(event: CellContextMenuEvent): void; - onTooltipShow?(event?: TooltipShowEvent): void; - onTooltipHide?(event?: TooltipHideEvent): void; - onSortChanged?(event: SortChangedEvent): void; -} - -export declare type AgColTypeDef = Omit< - AgColDef, - 'type' ->; - -export interface AgColGroupDef extends ColGroupDef { - children: ( - | AgColDef - | AgColGroupDef - )[]; - - tooltipComponent?: string | ITooltipComp; - tooltipComponentParams?: ITooltipParams< - TData, - /*TValue=*/ any, - TContext - > & { - [key: string]: any; - }; -} -export interface ITooltipComp - extends IComponent> {} - -/* - * Remove deprecated & enterprise/paid options - * https://www.ag-grid.com/react-data-grid/column-properties/ - */ -export interface AgColDef - extends Omit< - ColDef, - // deprecated options - | 'columnsMenuParams' - | 'suppressMenu' - // enterprise feature "Range selection" - | 'suppressFillHandle' - // enterprise feature "Context Menu" - | 'contextMenuItems' - | 'menuTabs' - | 'columnChooserParams' - | 'mainMenuItems' - | 'suppressHeaderMenuButton' - | 'suppressHeaderFilterButton' - | 'suppressHeaderContextMenu' - // enterprise feature "Integrated Charts" - | 'chartDataType' - // enterprise features "Pivot" and "Aggregation" - | 'pivot' - | 'pivotIndex' - //| 'pivotKeys' - | 'pivotComparator' - //| 'pivotValueColumn' - //| 'pivotTotalColumnIds' - | 'enablePivot' - | 'initialPivot' - | 'initialPivotIndex' - // enterprise feature "Row Grouping" - | 'rowGroup' - | 'initialRowGroup' - | 'rowGroupIndex' - | 'initialRowGroupIndex' - | 'enableRowGroup' - | 'showRowGroup' - | 'enableValue' - | 'aggFunc' - | 'initialAggFunc' - | 'allowedAggFuncs' - | 'defaultAggFunc' - > { - cellEditor?: - | LiteralUnion< - | 'agTextCellEditor' - | 'agSelectCellEditor' - | 'agLargeTextCellEditor' - | 'agNumberCellEditor' - | 'agDateCellEditor' - | 'agDateStringCellEditor' - | 'agCheckboxCellEditor' - > - | ICellEditorComp; - //TODO discriminative conditional type on cellEditor value - cellEditorParams?: - | (ICellEditorParams & { [key: string]: any }) - | ITextCellEditorParams - | ISelectCellEditorParams - | ILargeTextEditorParams - | INumberCellEditorParams - | IDateCellEditorParams - | IDateStringCellEditorParams - | ICheckboxCellRendererParams; - - headerComponent?: string | IHeaderComp; - headerComponentParams?: IHeaderParams & { - [key: string]: any; - }; - - cellRenderer?: - | LiteralUnion< - | 'agAnimateShowChangeCellRenderer' - | 'agAnimateSlideCellRenderer' - | 'agGroupCellRenderer' - | 'agCheckboxCellRenderer' - > - | ICellRendererComp - | ICellRendererFunc; - //TODO discriminative conditional type on cellRenderer value - cellRendererParams?: - | (Partial> & { - [key: string]: any; - }) - | IGroupCellRendererParams - | ICheckboxCellRendererParams; - - cellDataType?: - | boolean - | LiteralUnion< - 'text' | 'number' | 'boolean' | 'date' | 'dateString' | 'object' - >; - - tooltipComponent?: string | ITooltipComp; - tooltipComponentParams?: ITooltipParams & { - [key: string]: any; - }; - - filter?: - | true - | LiteralUnion< - | 'agNumberColumnFilter' - | 'agTextColumnFilter' - | 'agDateColumnFilter' - > - | IFilterComp; - //TODO discriminative conditional type on filter value - filterParams?: - | (IFilterParams & { [key: string]: any }) - | INumberFilterParams - | ITextFilterParams - | IDateFilterParams; - - floatingFilterComponent?: - | true - | LiteralUnion< - | 'agTextColumnFloatingFilter' - | 'agNumberColumnFloatingFilter' - | 'agDateColumnFloatingFilter' - > - | IFloatingFilterComp; - //TODO discriminative conditional type on floatingFilterComponent value - floatingFilterComponentParams?: - | (IFloatingFilterParams & { [key: string]: any }) - | ITextFloatingFilterParams - | INumberFloatingFilterParams; -} -interface ICellRendererComp - extends IComponent>, - ICellRenderer {} -type ICellRendererFunc = ( - params: ICellRendererParams -) => HTMLElement | string; -interface IHeaderComp - extends IHeader, - IComponent> {} -export interface IFilterComp - extends IComponent>, - IFilter {} -export interface IFloatingFilterComp

- extends IFloatingFilter

, - IComponent> {} diff --git a/src/components/Grid/AgGrid/ag-theme-alpine.d.ts b/src/components/Grid/AgGrid/ag-theme-alpine.d.ts deleted file mode 100644 index a9a4a65..0000000 --- a/src/components/Grid/AgGrid/ag-theme-alpine.d.ts +++ /dev/null @@ -1,156 +0,0 @@ -/* - * Copyright (c) 2024, 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/. - */ - -// list taken from ag-grid-community/styles/ag-theme-alpine-no-font.css -import { PaletteMode } from '@mui/material'; - -type AgGridClassesCommon = - | '.ag-advanced-filter-builder-button' - | '.ag-center-cols-container' - | '.ag-center-cols-viewport' - | '.ag-chart-menu-close' - | '.ag-chart-menu-icon' - | '.ag-chart-mini-thumbnail' - | '.ag-chart-settings-card-item' - | '.ag-chart-settings-nav-bar' - | '.ag-chart-settings-next' - | '.ag-chart-settings-prev' - | '.ag-charts-data-group-title-bar' - | '.ag-charts-format-sub-level-group' - | '.ag-charts-format-sub-level-group-container' - | '.ag-charts-format-sub-level-group-item' - | '.ag-charts-format-sub-level-group-title-bar' - | '.ag-charts-format-top-level-group-title-bar' - | '.ag-charts-format-top-level-group-toolbar' - | '.ag-charts-settings-group-title-bar' - | '.ag-column-drop-cell-button' - | '.ag-column-drop-empty-message' - | '.ag-column-drop-vertical' - | '.ag-column-drop-vertical-empty-message' - | '.ag-column-drop-vertical-title-bar' - | '.ag-column-group-icons' - | '.ag-column-select' - | '.ag-column-select-column-readonly' - | '.ag-column-select-header-icon' - | '.ag-date-time-list-page-entry-is-current' - | '.ag-dnd-ghost' - | '.ag-filter-active' - | '.ag-filter-toolpanel-expand' - | '.ag-filter-toolpanel-group-container' - | '.ag-filter-toolpanel-header' - | '.ag-filter-toolpanel-instance-filter' - | '.ag-filter-toolpanel-search' - | '.ag-floating-filter-button-button' - | '.ag-group-contracted' - | '.ag-group-expanded' - | '.ag-group-title-bar-icon' - | '.ag-header-cell-filter-button' - | '.ag-header-cell-menu-button' - | '.ag-header-expand-icon' - | '.ag-header-row' - | '.ag-icon' - | '.ag-icon-filter' - | '.ag-icon-grip' - | '.ag-layout-auto-height' - | '.ag-layout-print' - | '.ag-ltr' - | '.ag-menu' - | '.ag-menu-header' - | '.ag-multi-filter-group-title-bar' - | '.ag-not-selected' - | '.ag-overlay-no-rows-wrapper' - | '.ag-paging-number' - | '.ag-paging-row-summary-panel-number' - | '.ag-panel-content-wrapper' - | '.ag-panel-title-bar-button' - | '.ag-panel-title-bar-title' - | '.ag-row' - | '.ag-rtl' - | '.ag-set-filter-group-icons' - | '.ag-set-filter-list' - | '.ag-side-button-button' - | '.ag-side-buttons' - | '.ag-standard-button' - | '.ag-status-bar' - | '.ag-status-name-value-value' - | '.ag-tab' - | '.ag-tab-selected' - | '.ag-tabs-header'; -type AgGridClassesLight = '.ag-theme-alpine' | AgGridClassesCommon; -type AgGridClassesDark = '.ag-theme-alpine-dark' | AgGridClassesCommon; -export type AgGridClasses = Theme extends 'dark' - ? AgGridClassesDark - : AgGridClassesLight; - -export type AgGridCss = - | '--ag-advanced-filter-builder-indent-size' - | '--ag-advanced-filter-column-pill-color' - | '--ag-advanced-filter-join-pill-color' - | '--ag-advanced-filter-option-pill-color' - | '--ag-advanced-filter-value-pill-color' - | '--ag-alpine-active-color' - | '--ag-background-color' - | '--ag-border-color' - | '--ag-border-radius' - | '--ag-borders' - | '--ag-borders-side-button' - | '--ag-card-shadow' - | '--ag-cell-horizontal-padding' - | '--ag-cell-widget-spacing' - | '--ag-checkbox-background-color' - | '--ag-checkbox-checked-color' - | '--ag-checkbox-unchecked-color' - | '--ag-chip-background-color' - | '--ag-column-hover-color' - | '--ag-column-select-indent-size' - | '--ag-control-panel-background-color' - | '--ag-disabled-foreground-color' - | '--ag-font-family' - | '--ag-font-size' - | '--ag-foreground-color' - | '--ag-grid-size' - | '--ag-header-background-color' - | '--ag-header-column-resize-handle-display' - | '--ag-header-column-resize-handle-height' - | '--ag-header-column-resize-handle-width' - | '--ag-header-height' - | '--ag-icon-font-family' - | '--ag-icon-size' - | '--ag-input-border-color' - | '--ag-input-border-color-invalid' - | '--ag-input-disabled-background-color' - | '--ag-input-disabled-border-color' - | '--ag-input-focus-border-color' - | '--ag-input-focus-box-shadow' - | '--ag-invalid-color' - | '--ag-list-item-height' - | '--ag-menu-background-color' - | '--ag-modal-overlay-background-color' - | '--ag-odd-row-background-color' - | '--ag-panel-background-color' - | '--ag-popup-shadow' - | '--ag-range-selection-background-color' - | '--ag-range-selection-border-color' - | '--ag-row-height' - | '--ag-row-hover-color' - | '--ag-secondary-border-color' - | '--ag-secondary-foreground-color' - | '--ag-selected-row-background-color' - | '--ag-selected-tab-underline-color' - | '--ag-selected-tab-underline-transition-speed' - | '--ag-selected-tab-underline-width' - | '--ag-set-filter-indent-size' - | '--ag-side-bar-panel-width' - | '--ag-side-button-selected-background-color' - | '--ag-subheader-background-color' - | '--ag-tab-min-width' - | '--ag-toggle-button-height' - | '--ag-toggle-button-width' - | '--ag-tooltip-background-color' - | '--ag-widget-container-horizontal-padding' - | '--ag-widget-container-vertical-padding' - | '--ag-widget-vertical-spacing'; diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 4bf3b2c..9910734 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -16,20 +16,13 @@ import { useState, } from 'react'; import { useSnackMessage } from '@gridsuite/commons-ui'; -import { AgColDef } from './AgGrid/AgGrid.type'; -import { AgGridRef } from './AgGrid/AgGrid'; +import { AgGridRef } from './AgGrid'; import Grid, { GridProps } from './Grid'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonRefresh } from './buttons/ButtonRefresh'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { GridButtonAdd } from './buttons/ButtonAdd'; - -type NoRowOverlay = typeof NoRowsOverlay; -type FullDataGridProps = GridProps< - TData, - TContext, - NoRowOverlay ->; +import { ColDef } from 'ag-grid-community'; type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; @@ -42,7 +35,7 @@ type DataGridExposed = { }; export interface DataGridProps - extends Omit, 'rowData'>, + extends Omit, 'rowData'>, PropsWithChildren<{}> { //context: NonNullable['context']>; //required accessRef: RefObject>; @@ -56,7 +49,7 @@ export type DataGridRef = AgGridRef< TContext & DataGridExposed >; -const defaultColDef: AgColDef = { +const defaultColDef: ColDef = { editable: false, resizable: true, minWidth: 50, @@ -151,15 +144,11 @@ export default function DataGrid( ); return ( - - {...(gridProps as GridProps< - TData, - TContext & DataGridExposed, - NoRowOverlay - >)} + + {...gridProps} ref={props.accessRef} rowData={data} - defaultColDef={defaultColDef as AgColDef} + defaultColDef={defaultColDef as ColDef} alwaysShowVerticalScroll={true} onGridReady={refresh} rowSelection="single" //TODO multiple with delete action diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 5dfb066..1f34cb4 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -9,16 +9,15 @@ import { ForwardedRef, forwardRef, FunctionComponent, - JSXElementConstructor, PropsWithChildren, PropsWithoutRef, ReactNode, RefAttributes, } from 'react'; import { AppBar, Box, LinearProgress, Toolbar } from '@mui/material'; -import { AgGridProps } from './AgGrid/AgGrid.type'; -import AgGrid, { AgGridRef } from './AgGrid/AgGrid'; +import { AgGrid, AgGridRef } from './AgGrid'; import { useColumnTypes } from './GridFormat'; +import { GridOptions } from 'ag-grid-community'; export interface GridProgressProps { /** @@ -27,12 +26,9 @@ export interface GridProgressProps { progress: null | number; } -export interface GridProps< - TData, - TContext extends {}, - NoCmpnt extends JSXElementConstructor -> extends Omit< - AgGridProps, +export interface GridProps + extends Omit< + GridOptions, | 'overlayLoadingTemplate' | 'loadingOverlayComponent' | 'loadingOverlayComponentParams' @@ -46,17 +42,12 @@ export interface GridProps< type ForwardRef = typeof forwardRef; type ForwardRefComponent = ReturnType>; interface GridWithRef - extends FunctionComponent>> { - >( - props: PropsWithoutRef< - PropsWithChildren> - > & + extends FunctionComponent>> { + ( + props: PropsWithoutRef>> & RefAttributes> ): ReturnType< - ForwardRefComponent< - GridProps, - AgGridRef - > + ForwardRefComponent, AgGridRef> >; } @@ -66,10 +57,9 @@ interface GridWithRef */ export const Grid: GridWithRef = forwardRef(function AgGridToolbar< TData, - TContext extends {} = {}, - NoCmpnt extends JSXElementConstructor = any + TContext extends {} = {} >( - props: PropsWithChildren>, + props: PropsWithChildren>, gridRef: ForwardedRef> ): ReactNode { const { children: toolbarContent, progress, ...agGridProps } = props; @@ -95,7 +85,7 @@ export const Grid: GridWithRef = forwardRef(function AgGridToolbar< - + columnTypes={columnTypes} {...agGridProps} ref={gridRef} diff --git a/src/components/Grid/GridFormat.tsx b/src/components/Grid/GridFormat.tsx index 8034ea9..1992344 100644 --- a/src/components/Grid/GridFormat.tsx +++ b/src/components/Grid/GridFormat.tsx @@ -7,14 +7,14 @@ import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; import { + ColTypeDef, ValueFormatterFunc, ValueFormatterParams, } from 'ag-grid-community/dist/lib/entities/colDef'; import { FunctionComponent, useCallback, useMemo } from 'react'; import { Chip, ChipProps } from '@mui/material'; import { Check, Close, QuestionMark } from '@mui/icons-material'; -import { AgColTypeDef } from './AgGrid/AgGrid.type'; -import { IDateFilterParams } from 'ag-grid-community'; +import { ICellRendererFunc, IDateFilterParams } from 'ag-grid-community'; export enum GridColumnTypes { // default of ag-grid @@ -68,7 +68,7 @@ const BoolValue: FunctionComponent<{ export function useColumnTypes(): Record< GridColumnTypes, - AgColTypeDef + ColTypeDef > { const intl = useIntl(); const timestampFormat: ValueFormatterFunc< @@ -83,10 +83,10 @@ export function useColumnTypes(): Record< //TODO //filter: '', //agNumberColumnFilter agTextColumnFilter //align: 'left', - cellRenderer: (params) => + cellRenderer: ((params) => ( - ) as unknown as HTMLElement, + ) as unknown as HTMLElement) as ICellRendererFunc, }, [GridColumnTypes.Timestamp]: { cellDataType: 'dateString', diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts index 7b0ca94..4a5c7e1 100644 --- a/src/components/Grid/index.ts +++ b/src/components/Grid/index.ts @@ -5,11 +5,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export type * from './AgGrid/ag-theme-alpine'; -export type * from './AgGrid/AgGrid.type'; - -/*export { AgGrid } from './AgGrid/AgGrid'; -export type { AgGridRef } from './AgGrid/AgGrid';*/ +/*export { AgGrid } from './AgGrid'; +export type { AgGridRef } from './AgGrid';*/ export { GridButtonAdd } from './buttons/ButtonAdd'; export type { GridButtonAddProps } from './buttons/ButtonAdd'; diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts index 1168546..9f55452 100644 --- a/src/module-mui.d.ts +++ b/src/module-mui.d.ts @@ -4,7 +4,6 @@ import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions, } from '@mui/material/styles/createTheme'; -import { AgGridClasses, AgGridCss } from './components/Grid'; declare module '@mui/material/styles/createTheme' { export * from '@mui/material/styles/createTheme'; @@ -17,9 +16,7 @@ declare module '@mui/material/styles/createTheme' { link: CSSObject; mapboxStyle: string; agGridTheme: 'ag-theme-alpine' | 'ag-theme-alpine-dark'; - agGridThemeOverride?: CSSObject & { - [K in AgGridCss | AgGridClasses]?: CSSObject; - }; + agGridThemeOverride?: CSSObject; }; export interface Theme extends MuiTheme, ThemeExtension {} // allow configuration using `createTheme` diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx index 692232c..a8f3066 100644 --- a/src/pages/connections/ConnectionsPage.tsx +++ b/src/pages/connections/ConnectionsPage.tsx @@ -11,7 +11,8 @@ import { FunctionComponent, useMemo, useRef } from 'react'; import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; import { UserAdminSrv, UserConnection } from '../../services'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; -import { AgColDef, GridColumnTypes } from '../../components/Grid'; +import { GridColumnTypes } from '../../components/Grid'; +import { ColDef } from 'ag-grid-community'; function getRowId(params: GetRowIdParams): string { return params.data.sub; @@ -21,7 +22,7 @@ export const ConnectionsPage: FunctionComponent = () => { const intl = useIntl(); const gridRef = useRef>(null); - const columns: AgColDef[] = useMemo( + const columns: ColDef[] = useMemo( () => [ { field: 'sub', diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 5aee414..112a3fa 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -28,17 +28,13 @@ import { Typography, } from '@mui/material'; import { AccountCircle, PersonAdd } from '@mui/icons-material'; -import { - AgColDef, - DataGrid, - DataGridRef, - GridButtonAdd, -} from '../../components/Grid'; +import { DataGrid, DataGridRef, GridButtonAdd } from '../../components/Grid'; import { UserAdminSrv, UserInfos } from '../../services'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; import { TextFilterParams } from 'ag-grid-community/dist/lib/filter/provided/text/textFilter'; +import { ColDef } from 'ag-grid-community'; function getRowId(params: GetRowIdParams): string { return params.data.sub; @@ -51,7 +47,7 @@ const UsersPage: FunctionComponent = () => { const gridContext = gridRef.current?.context; const columns = useMemo( - (): AgColDef[] => [ + (): ColDef[] => [ { field: 'sub', cellDataType: 'text', From a57adccafbb153a2032ca8c3b080d5dd04ff303e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 11:33:13 +0100 Subject: [PATCH 34/54] remove "connections" page --- src/components/App/app-top-bar.tsx | 12 +-- src/pages/connections/ConnectionsPage.tsx | 107 ---------------------- src/pages/connections/index.ts | 8 -- src/pages/index.ts | 1 - src/routes/router.tsx | 10 +- 5 files changed, 2 insertions(+), 136 deletions(-) delete mode 100644 src/pages/connections/ConnectionsPage.tsx delete mode 100644 src/pages/connections/index.ts diff --git a/src/components/App/app-top-bar.tsx b/src/components/App/app-top-bar.tsx index d4226fc..18ceba3 100644 --- a/src/components/App/app-top-bar.tsx +++ b/src/components/App/app-top-bar.tsx @@ -29,7 +29,7 @@ import AppPackage from '../../../package.json'; import { AppState } from '../../redux/reducer'; import { FormattedMessage } from 'react-intl'; import { Tab, TabProps, Tabs } from '@mui/material'; -import { History, PeopleAlt } from '@mui/icons-material'; +import { PeopleAlt } from '@mui/icons-material'; import { MainPaths } from '../../routes'; const TabNavLink: FunctionComponent = ( @@ -56,16 +56,6 @@ const tabs = new Map([ key={`tab-${MainPaths.users}`} />, ], - [ - MainPaths.connections, - } - label={} - href={`/${MainPaths.connections}`} - value={MainPaths.connections} - key={`tab-${MainPaths.connections}`} - />, - ], ]); const AppTopBar: FunctionComponent = () => { diff --git a/src/pages/connections/ConnectionsPage.tsx b/src/pages/connections/ConnectionsPage.tsx deleted file mode 100644 index a8f3066..0000000 --- a/src/pages/connections/ConnectionsPage.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright (c) 2024, 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 { Grid, Typography } from '@mui/material'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { FunctionComponent, useMemo, useRef } from 'react'; -import DataGrid, { DataGridRef } from '../../components/Grid/DataGrid'; -import { UserAdminSrv, UserConnection } from '../../services'; -import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; -import { GridColumnTypes } from '../../components/Grid'; -import { ColDef } from 'ag-grid-community'; - -function getRowId(params: GetRowIdParams): string { - return params.data.sub; -} - -export const ConnectionsPage: FunctionComponent = () => { - const intl = useIntl(); - const gridRef = useRef>(null); - - const columns: ColDef[] = useMemo( - () => [ - { - field: 'sub', - cellDataType: 'text', - flex: 2, - headerName: intl.formatMessage({ id: 'table.id' }), - headerTooltip: intl.formatMessage({ - id: 'connections.table.id.description', - }), - filter: true, - lockVisible: true, - }, - { - field: 'firstConnection', - type: GridColumnTypes.Timestamp, - flex: 3, - headerName: intl.formatMessage({ - id: 'connections.table.firstConnection', - }), - headerTooltip: intl.formatMessage({ - id: 'connections.table.firstConnection.description', - }), - valueGetter: (params) => - params.data?.firstConnection && - new Date(params.data?.firstConnection), - //filter: true, - //TODO valueFormatter "2023-09-05T21:42:18.100151Z" - }, - { - field: 'lastConnection', - type: GridColumnTypes.Timestamp, - flex: 3, - headerName: intl.formatMessage({ - id: 'connections.table.lastConnection', - }), - headerTooltip: intl.formatMessage({ - id: 'connections.table.lastConnection.description', - }), - valueGetter: (params) => - params.data?.lastConnection && - new Date(params.data?.lastConnection), - //filter: true, - }, - { - field: 'isAccepted', - cellDataType: 'boolean', - flex: 1, - headerName: intl.formatMessage({ - id: 'connections.table.allowed', - }), - headerTooltip: intl.formatMessage({ - id: 'connections.table.allowed.description', - }), - sortable: false, - filter: true, - /*renderCell: (params) => , - headerAlign: 'left', - */ - }, - ], - [intl] - ); - return ( - - - - - - - - - accessRef={gridRef} - dataLoader={UserAdminSrv.fetchUsersConnections} - columnDefs={columns} - gridId="grid-connections" - getRowId={getRowId} - /> - - - ); -}; -export default ConnectionsPage; diff --git a/src/pages/connections/index.ts b/src/pages/connections/index.ts deleted file mode 100644 index 24695ab..0000000 --- a/src/pages/connections/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * Copyright (c) 2024, 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/. - */ - -export { default as Connections } from './ConnectionsPage'; diff --git a/src/pages/index.ts b/src/pages/index.ts index 661a5dd..10001a3 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -5,5 +5,4 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -export * from './connections'; export * from './users'; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 45f646e..5851e5b 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -33,14 +33,13 @@ import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { AppsMetadataSrv, UserAdminSrv } from '../services'; import { App } from '../components/App'; -import { Connections, Users } from '../pages'; +import { Users } from '../pages'; import ErrorPage from './ErrorPage'; import { updateUserManagerDestructured } from '../redux/actions'; import HomePage from './HomePage'; export enum MainPaths { users = 'users', - connections = 'connections', } export function appRoutes(): RouteObject[] { @@ -60,13 +59,6 @@ export function appRoutes(): RouteObject[] { appBar_tab: MainPaths.users, }, }, - { - path: `/${MainPaths.connections}`, - element: , - handle: { - appBar_tab: MainPaths.connections, - }, - }, ], }, { From ec0053845b44e8b6b7ee0f24d72dd83d4586ee6a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 11:50:13 +0100 Subject: [PATCH 35/54] review --- src/components/App/app-top-bar.tsx | 21 ++++++++++----------- src/components/{App => }/app.test.tsx | 6 +++--- src/setupTests.js | 3 +-- 3 files changed, 14 insertions(+), 16 deletions(-) rename src/components/{App => }/app.test.tsx (95%) diff --git a/src/components/App/app-top-bar.tsx b/src/components/App/app-top-bar.tsx index 18ceba3..9f0b391 100644 --- a/src/components/App/app-top-bar.tsx +++ b/src/components/App/app-top-bar.tsx @@ -125,17 +125,16 @@ const AppTopBar: FunctionComponent = () => { onLanguageClick={handleChangeLanguage} language={languageLocal} > -

+ + {[...tabs.values()]} + Date: Thu, 7 Mar 2024 12:07:46 +0100 Subject: [PATCH 36/54] review --- src/components/Grid/DataGrid.tsx | 5 +- src/components/Grid/GridFormat.tsx | 3 +- src/components/Grid/buttons/ButtonRefresh.tsx | 57 ------------------- src/components/app.test.tsx | 3 +- src/pages/users/UsersPage.tsx | 1 + src/utils/functions.ts | 37 ------------ 6 files changed, 6 insertions(+), 100 deletions(-) delete mode 100644 src/components/Grid/buttons/ButtonRefresh.tsx delete mode 100644 src/utils/functions.ts diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 9910734..f1403ad 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -19,7 +19,6 @@ import { useSnackMessage } from '@gridsuite/commons-ui'; import { AgGridRef } from './AgGrid'; import Grid, { GridProps } from './Grid'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; -import { GridButtonRefresh } from './buttons/ButtonRefresh'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { GridButtonAdd } from './buttons/ButtonAdd'; import { ColDef } from 'ag-grid-community'; @@ -70,7 +69,7 @@ const defaultColDef: ColDef = { * Add common buttons in toolbar (with management of states) * Manage also the progressbar animation: */ -//TODO optionally save grid state to just show/hide in tabs without losing grid state +//IDEA: optionally save grid state to just show/hide in tabs without losing grid state export default function DataGrid( props: Readonly> ): ReactElement { @@ -86,6 +85,7 @@ export default function DataGrid( const { snackError } = useSnackMessage(); + //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); const [rowsSelection, setRowsSelection] = useState([]); const [progress, setProgress] = useState(null); @@ -176,7 +176,6 @@ export default function DataGrid( } noRowsOverlayComponentParams={undefined} > - diff --git a/src/components/Grid/GridFormat.tsx b/src/components/Grid/GridFormat.tsx index 1992344..9b73f6c 100644 --- a/src/components/Grid/GridFormat.tsx +++ b/src/components/Grid/GridFormat.tsx @@ -80,8 +80,7 @@ export function useColumnTypes(): Record< return useMemo( () => ({ [GridColumnTypes.BoolIcons]: { - //TODO - //filter: '', //agNumberColumnFilter agTextColumnFilter + //filter: 'agNumberColumnFilter' / 'agTextColumnFilter' //align: 'left', cellRenderer: ((params) => ( diff --git a/src/components/Grid/buttons/ButtonRefresh.tsx b/src/components/Grid/buttons/ButtonRefresh.tsx deleted file mode 100644 index 0b9c886..0000000 --- a/src/components/Grid/buttons/ButtonRefresh.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * Copyright (c) 2024, 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 { forwardRef, useCallback, useMemo, useState } from 'react'; -import { Refresh } from '@mui/icons-material'; -import RotateIcon from '../../RotateIcon'; -import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; -import { FnSyncAsync, runFnWithState } from '../../../utils/functions'; - -function RefreshIconRotate() { - return ; -} - -function RefreshIcon() { - return ; -} - -export type GridButtonRefreshProps = Partial< - Omit -> & { - refresh: FnSyncAsync; // ButtonProps['onClick']; //(event: MouseEvent) => void -}; - -export const GridButtonRefresh = forwardRef< - HTMLButtonElement, - GridButtonRefreshProps ->(function GridButtonRefresh(props, ref) { - const [refreshing, setRefreshing] = useState(false); - const onClick = useCallback( - () => runFnWithState(props.refresh, setRefreshing), - [props.refresh] - ); - const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( - () => ({ - disabled: onClick === undefined || refreshing, - }), - [onClick, refreshing] - ); - - return ( - : } - buttonProps={buttonProps} - ref={ref} - /> - ); -}); -export default GridButtonRefresh; diff --git a/src/components/app.test.tsx b/src/components/app.test.tsx index 6e54d2b..8c97908 100644 --- a/src/components/app.test.tsx +++ b/src/components/app.test.tsx @@ -32,7 +32,8 @@ afterEach(() => { container = null; }); -it('renders', async () => { +//broken test +it.skip('renders', async () => { const root = createRoot(container); const AppWrapperRouterLayout: FunctionComponent< PropsWithChildren<{}> diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 112a3fa..0b74b27 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -116,6 +116,7 @@ const UsersPage: FunctionComponent = () => { }) ) ) + //TODO replace manual refresh by notification in DataGrid component .then(() => gridContext?.refresh?.()); }, [gridContext, snackError] diff --git a/src/utils/functions.ts b/src/utils/functions.ts deleted file mode 100644 index 6d7793f..0000000 --- a/src/utils/functions.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright (c) 2024, 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/. - */ - -export type FnSyncAsync = (() => R) | (() => Promise); -export type Setter = (v: T) => void; - -export function runFnWithState( - fn: FnSyncAsync | null | undefined, - setState: Setter -) { - if (fn !== undefined && fn !== null) { - return new Promise((resolve, reject) => { - try { - setState(true); - resolve(); - } catch (error) { - reject(error); - } - }) - .then(fn) - .finally(() => setState(false)); - } else { - return null; - } -} - -export function isPromise(obj: any): boolean { - return ( - typeof obj?.then === 'function' || //only standard/common thing in implementations - obj instanceof Promise || //native promise - (obj && Object.prototype.toString.call(obj) === '[object Promise]') - ); //ES6 Promise -} From 0ab6a62a9bf4fa981fcfe8dc48311e54f76048f5 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 12:16:25 +0100 Subject: [PATCH 37/54] hide default buttons if not used instead of showing them disabled --- src/components/Grid/DataGrid.tsx | 48 +++++++++++++++++--------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index f1403ad..dd63ee8 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -20,7 +20,6 @@ import { AgGridRef } from './AgGrid'; import Grid, { GridProps } from './Grid'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonDelete } from './buttons/ButtonDelete'; -import { GridButtonAdd } from './buttons/ButtonAdd'; import { ColDef } from 'ag-grid-community'; type FnAction = () => Promise; @@ -143,6 +142,29 @@ export default function DataGrid( [loadDataAndSave, loadingAction] ); + const btnDelete = useMemo( + () => + removeElement ? ( + + queryAction(() => + Promise.all(rowsSelection.map(removeElement)).then( + (values) => {} + ) + ).then(() => loadingAction(loadDataAndSave)) + } + disabled={!removeElement || rowsSelection.length <= 0} + /> + ) : undefined, + [ + loadDataAndSave, + loadingAction, + queryAction, + removeElement, + rowsSelection, + ] + ); + return ( {...gridProps} @@ -176,28 +198,8 @@ export default function DataGrid( } noRowsOverlayComponentParams={undefined} > - - queryAction(() => - Promise.all(rowsSelection.map(removeElement!)).then( - (values) => {} - ) - ).then(() => loadingAction(loadDataAndSave)), - [ - loadDataAndSave, - loadingAction, - queryAction, - removeElement, - rowsSelection, - ] - )} - disabled={useMemo( - () => !removeElement || rowsSelection.length <= 0, - [removeElement, rowsSelection.length] - )} - /> - {addBtn?.() ?? } + {btnDelete} + {addBtn?.()} {children && ( <> From 32e6aad060e8f727de5bc93c20ab9c12eb75677e Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 15:06:31 +0100 Subject: [PATCH 38/54] simplify multiple requests when delete --- src/components/Grid/DataGrid.tsx | 20 +++++++++----------- src/pages/users/UsersPage.tsx | 20 +++++++++++--------- src/services/user-admin.ts | 16 ++++++++++++++++ 3 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index dd63ee8..3ecae97 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -38,7 +38,7 @@ export interface DataGridProps //context: NonNullable['context']>; //required accessRef: RefObject>; dataLoader: () => Promise; - removeElement?: (dataLine: TData) => Promise; + removeElements?: (dataLines: TData[]) => Promise; addBtn?: () => ReactElement; } @@ -76,7 +76,7 @@ export default function DataGrid( context, accessRef, dataLoader, - removeElement, + removeElements, addBtn, children, ...gridProps @@ -144,23 +144,21 @@ export default function DataGrid( const btnDelete = useMemo( () => - removeElement ? ( + removeElements ? ( - queryAction(() => - Promise.all(rowsSelection.map(removeElement)).then( - (values) => {} - ) - ).then(() => loadingAction(loadDataAndSave)) + queryAction(() => removeElements(rowsSelection)) + //TODO replace manual refresh by notifications + .then(() => loadingAction(loadDataAndSave)) } - disabled={!removeElement || rowsSelection.length <= 0} + disabled={!removeElements || rowsSelection.length <= 0} /> ) : undefined, [ loadDataAndSave, loadingAction, queryAction, - removeElement, + removeElements, rowsSelection, ] ); @@ -173,7 +171,7 @@ export default function DataGrid( defaultColDef={defaultColDef as ColDef} alwaysShowVerticalScroll={true} onGridReady={refresh} - rowSelection="single" //TODO multiple with delete action + rowSelection="multiple" onSelectionChanged={useCallback( (event: SelectionChangedEvent) => setRowsSelection(event.api.getSelectedRows() ?? []), diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 0b74b27..d5ba1d6 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -58,7 +58,7 @@ const UsersPage: FunctionComponent = () => { headerTooltip: intl.formatMessage({ id: 'users.table.id.description', }), - //TODO headerCheckboxSelection: true, + headerCheckboxSelection: true, //initialSortIndex: 2, filterParams: { caseSensitive: false, @@ -89,16 +89,18 @@ const UsersPage: FunctionComponent = () => { [intl] ); - const deleteUser = useCallback( - (dataLine: UserInfos): Promise => - UserAdminSrv.deleteUser(dataLine.sub).catch((error) => + const deleteUsers = useCallback( + (dataLines: UserInfos[]): Promise => { + let subs = dataLines.map((user) => user.sub); + return UserAdminSrv.deleteUsers(subs).catch((error) => snackError({ - messageTxt: `Error while deleting user "${dataLine.sub}"${ - error.message && ':\n' + error.message - }`, + messageTxt: `Error while deleting user "${JSON.stringify( + subs + )}"${error.message && ':\n' + error.message}`, headerId: 'users.table.error.delete', }) - ), + ); + }, [snackError] ); @@ -166,7 +168,7 @@ const UsersPage: FunctionComponent = () => { accessRef={gridRef} dataLoader={UserAdminSrv.fetchUsers} addBtn={buttonAdd} - removeElement={deleteUser} + removeElements={deleteUsers} columnDefs={columns} gridId="table-users" getRowId={getRowId} diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index ff78fd2..723cbd4 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -69,6 +69,22 @@ export function deleteUser(sub: string): Promise { }); } +export function deleteUsers(subs: string[]): Promise { + console.debug(`Deleting sub users "${JSON.stringify(subs)}"...`); + return backendFetch(`${USER_ADMIN_URL}/users`, { + method: 'delete', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(subs), + }) + .then((response: ReqResponse) => undefined) + .catch((reason) => { + console.error(`Error while deleting the servers data : ${reason}`); + throw reason; + }); +} + export function addUser(sub: string): Promise { console.debug(`Creating sub user "${sub}"...`); return backendFetch(`${USER_ADMIN_URL}/users/${sub}`, { method: 'post' }) From 37dd15bd5edd9faed3a97ffcbb71508338eb7ffa Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 15:39:58 +0100 Subject: [PATCH 39/54] fix css --- src/components/Grid/DataGrid.tsx | 8 +- .../Grid/{Grid.tsx => GridTable.tsx} | 79 +++++++++++-------- src/components/Grid/index.ts | 4 +- src/pages/users/UsersPage.tsx | 2 +- 4 files changed, 52 insertions(+), 41 deletions(-) rename src/components/Grid/{Grid.tsx => GridTable.tsx} (58%) diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 3ecae97..4860742 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -17,7 +17,7 @@ import { } from 'react'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { AgGridRef } from './AgGrid'; -import Grid, { GridProps } from './Grid'; +import { GridTable, GridTableProps } from './GridTable'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { ColDef } from 'ag-grid-community'; @@ -33,7 +33,7 @@ type DataGridExposed = { }; export interface DataGridProps - extends Omit, 'rowData'>, + extends Omit, 'rowData'>, PropsWithChildren<{}> { //context: NonNullable['context']>; //required accessRef: RefObject>; @@ -164,7 +164,7 @@ export default function DataGrid( ); return ( - + {...gridProps} ref={props.accessRef} rowData={data} @@ -204,6 +204,6 @@ export default function DataGrid( {children} )} - + ); } diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/GridTable.tsx similarity index 58% rename from src/components/Grid/Grid.tsx rename to src/components/Grid/GridTable.tsx index 1f34cb4..eb360b5 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/GridTable.tsx @@ -14,7 +14,7 @@ import { ReactNode, RefAttributes, } from 'react'; -import { AppBar, Box, LinearProgress, Toolbar } from '@mui/material'; +import { AppBar, Box, Grid, LinearProgress, Toolbar } from '@mui/material'; import { AgGrid, AgGridRef } from './AgGrid'; import { useColumnTypes } from './GridFormat'; import { GridOptions } from 'ag-grid-community'; @@ -26,7 +26,7 @@ export interface GridProgressProps { progress: null | number; } -export interface GridProps +export interface GridTableProps extends Omit< GridOptions, | 'overlayLoadingTemplate' @@ -41,13 +41,13 @@ export interface GridProps */ type ForwardRef = typeof forwardRef; type ForwardRefComponent = ReturnType>; -interface GridWithRef - extends FunctionComponent>> { +interface GridTableWithRef + extends FunctionComponent>> { ( - props: PropsWithoutRef>> & + props: PropsWithoutRef>> & RefAttributes> ): ReturnType< - ForwardRefComponent, AgGridRef> + ForwardRefComponent, AgGridRef> >; } @@ -55,45 +55,56 @@ interface GridWithRef * Common part for a Grid with toolbar * @param props */ -export const Grid: GridWithRef = forwardRef(function AgGridToolbar< +export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< TData, TContext extends {} = {} >( - props: PropsWithChildren>, + props: PropsWithChildren>, gridRef: ForwardedRef> ): ReactNode { const { children: toolbarContent, progress, ...agGridProps } = props; const columnTypes = useColumnTypes(); return ( - - - *': { - marginRight: '0.2em', - '&:last-child': { - marginRight: 0, + + + + *': { + marginRight: '0.2em', + '&:last-child': { + marginRight: 0, + }, }, - }, - }} - > - {/*TODO button reset grid filter/sort/column-hide/rows-selection ...*/} - {/**/} - {toolbarContent} - - - - - - columnTypes={columnTypes} - {...agGridProps} - ref={gridRef} - /> - + }} + > + {/*TODO button reset grid filter/sort/column-hide/rows-selection ...*/} + {/**/} + {toolbarContent} + + + + + + + + + + columnTypes={columnTypes} + {...agGridProps} + ref={gridRef} + /> + + ); }); -export default Grid; +export default GridTable; const GridProgress: FunctionComponent = (props, context) => { if (props.progress === null || props.progress === undefined) { diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts index 4a5c7e1..b595adf 100644 --- a/src/components/Grid/index.ts +++ b/src/components/Grid/index.ts @@ -15,8 +15,8 @@ export type { GridButtonAddProps } from './buttons/ButtonAdd'; export { default as NoRowsOverlay } from './NoRowsOverlay'; export { GridColumnTypes } from './GridFormat'; -export { Grid } from './Grid'; -export type { GridProps } from './Grid'; +export { GridTable } from './GridTable'; +export type { GridTableProps } from './GridTable'; export { default as DataGrid } from './DataGrid'; export type { DataGridProps, DataGridRef } from './DataGrid'; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index d5ba1d6..d0553bf 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -163,7 +163,7 @@ const UsersPage: FunctionComponent = () => { - + accessRef={gridRef} dataLoader={UserAdminSrv.fetchUsers} From 24eff8001307546c9948e0a597b4f965cc072ade Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 15:46:14 +0100 Subject: [PATCH 40/54] fix translations --- src/routes/router.tsx | 2 +- src/translations/en.json | 4 +--- src/translations/fr.json | 10 ++++------ 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 5851e5b..4527abf 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -71,7 +71,7 @@ export function appRoutes(): RouteObject[] { }, { path: '*', - element: , + element: , errorElement: , }, ]; diff --git a/src/translations/en.json b/src/translations/en.json index f9661e6..30a5d6f 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1,5 +1,6 @@ { "logoutFailed": "Error: logout failed; you are still logged in.", + "pageNotFound": "Page not found", "connected": "Connected", "close": "Close", "ok": "OK", @@ -14,9 +15,6 @@ "table.noRows": "No data", "table.id": "ID", "table.error.retrieve": "Error while retrieving data", - "table.toolbar.refresh": "Refresh", - "table.toolbar.refresh.label": "Refresh data", - "table.toolbar.refresh.tooltip": "Refresh table data", "table.toolbar.add": "Add", "table.toolbar.add.label": "Add element", "table.toolbar.add.tooltip": "Add an element", diff --git a/src/translations/fr.json b/src/translations/fr.json index b78165d..355fa76 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -1,5 +1,6 @@ { "logoutFailed": "Erreur: échec de la déconnexion\u00a0; vous êtes toujours connecté(e).", + "pageNotFound": "Page introuvable", "connected": "Connecté(e)", "close": "Fermer", "ok": "OK", @@ -14,11 +15,8 @@ "table.noRows": "No data", "table.id": "ID", "table.error.retrieve": "Erreur pendant la récupération des données", - "table.toolbar.refresh": "Rafraîchir", - "table.toolbar.refresh.label": "Refresh data", - "table.toolbar.refresh.tooltip": "Actualiser les données du tableau", "table.toolbar.add": "Ajouter", - "table.toolbar.add.label": "Add element", + "table.toolbar.add.label": "Ajouter élément", "table.toolbar.add.tooltip": "Ajouter un élément", "table.toolbar.delete": "Supprimer", "table.toolbar.delete.label": "Supprimer sélection", @@ -42,8 +40,8 @@ "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite", "users.table.error.delete": "Erreur pendant la suppression de l'utilisateur", "users.table.error.add": "Erreur pendant l'ajout de l'utilisateur", - "users.table.toolbar.add": "Add user", - "users.table.toolbar.add.label": "Add user", + "users.table.toolbar.add": "Ajouter utilisateur", + "users.table.toolbar.add.label": "Ajout utilisateur", "users.table.toolbar.add.tooltip": "Ajouter un utilisateur", "users.form.title": "Ajouter un utilisateur", "users.form.content": "Veuillez renseigner les informations de l'utilisateur.", From bb796ed37e034381dd3d3b0f683b686b75f5a23a Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 23:41:28 +0100 Subject: [PATCH 41/54] minimize changes PR --- src/components/App/index.ts | 11 ----------- src/components/{App => }/app-top-bar.tsx | 20 ++++++++------------ src/components/{App => }/app-wrapper.tsx | 16 ++++++++-------- src/components/app.test.tsx | 2 +- src/components/{App => }/app.tsx | 10 +++++----- src/components/parameters.tsx | 4 ++-- src/index.tsx | 2 +- src/plugins/README.md | 7 +++---- src/plugins/translations/en.json | 3 ++- src/plugins/translations/fr.json | 3 ++- src/routes/router.tsx | 4 +++- src/services/index.ts | 7 ------- src/utils/api-ws.ts | 7 ------- 13 files changed, 35 insertions(+), 61 deletions(-) delete mode 100644 src/components/App/index.ts rename src/components/{App => }/app-top-bar.tsx (89%) rename src/components/{App => }/app-wrapper.tsx (90%) rename src/components/{App => }/app.tsx (95%) diff --git a/src/components/App/index.ts b/src/components/App/index.ts deleted file mode 100644 index 8353c88..0000000 --- a/src/components/App/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * Copyright (c) 2024, 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 AppComponent from './app'; -export type App = typeof AppComponent; - -export { AppWrapper } from './app-wrapper'; diff --git a/src/components/App/app-top-bar.tsx b/src/components/app-top-bar.tsx similarity index 89% rename from src/components/App/app-top-bar.tsx rename to src/components/app-top-bar.tsx index 9f0b391..31bdf58 100644 --- a/src/components/App/app-top-bar.tsx +++ b/src/components/app-top-bar.tsx @@ -14,23 +14,19 @@ import { 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 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, StudySrv } from '../services'; import { NavLink, useMatches, useNavigate } from 'react-router-dom'; -import { ReactComponent as GridAdminLogoLight } from '../../images/GridAdmin_logo_light.svg'; -import { ReactComponent as GridAdminLogoDark } from '../../images/GridAdmin_logo_dark.svg'; -import AppPackage from '../../../package.json'; -import { AppState } from '../../redux/reducer'; +import { ReactComponent as GridAdminLogoLight } from '../images/GridAdmin_logo_light.svg'; +import { ReactComponent as GridAdminLogoDark } from '../images/GridAdmin_logo_dark.svg'; +import AppPackage from '../../package.json'; +import { AppState } from '../redux/reducer'; import { FormattedMessage } from 'react-intl'; import { Tab, TabProps, Tabs } from '@mui/material'; import { PeopleAlt } from '@mui/icons-material'; -import { MainPaths } from '../../routes'; +import { MainPaths } from '../routes'; const TabNavLink: FunctionComponent = ( props, diff --git a/src/components/App/app-wrapper.tsx b/src/components/app-wrapper.tsx similarity index 90% rename from src/components/App/app-wrapper.tsx rename to src/components/app-wrapper.tsx index 87d0d67..2ebfdb1 100644 --- a/src/components/App/app-wrapper.tsx +++ b/src/components/app-wrapper.tsx @@ -31,15 +31,15 @@ import { } from '@gridsuite/commons-ui'; import { IntlProvider } from 'react-intl'; import { Provider, useSelector } from 'react-redux'; -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 { PARAM_THEME } from '../../utils/config-params'; +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 { PARAM_THEME } from '../utils/config-params'; import { IntlConfig } from 'react-intl/src/types'; -import { AppState } from '../../redux/reducer'; -import { AppWithAuthRouter } from '../../routes'; +import { AppState } from '../redux/reducer'; +import { AppWithAuthRouter } from '../routes'; const lightTheme: ThemeOptions = { palette: { diff --git a/src/components/app.test.tsx b/src/components/app.test.tsx index 8c97908..1a66977 100644 --- a/src/components/app.test.tsx +++ b/src/components/app.test.tsx @@ -6,7 +6,7 @@ import { act } from 'react-dom/test-utils'; import { IntlProvider } from 'react-intl'; import { Provider } from 'react-redux'; import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom'; -import App from './App/app'; +import App from './app'; import { store } from '../redux/store'; import { createTheme, diff --git a/src/components/App/app.tsx b/src/components/app.tsx similarity index 95% rename from src/components/App/app.tsx rename to src/components/app.tsx index 306e0f1..38e0b99 100644 --- a/src/components/App/app.tsx +++ b/src/components/app.tsx @@ -17,21 +17,21 @@ import { selectComputedLanguage, selectLanguage, selectTheme, -} from '../../redux/actions'; -import { AppState } from '../../redux/reducer'; +} from '../redux/actions'; +import { AppState } from '../redux/reducer'; import { ConfigNotif, ConfigParameter, ConfigParameters, ConfigSrv, -} from '../../services'; +} from '../services'; import { APP_NAME, COMMON_APP_NAME, PARAM_LANGUAGE, PARAM_THEME, -} from '../../utils/config-params'; -import { getComputedLanguage } from '../../utils/language'; +} from '../utils/config-params'; +import { getComputedLanguage } from '../utils/language'; import AppTopBar from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; import { Grid } from '@mui/material'; diff --git a/src/components/parameters.tsx b/src/components/parameters.tsx index d8b0021..f5f5b68 100644 --- a/src/components/parameters.tsx +++ b/src/components/parameters.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { +import React, { FunctionComponent, PropsWithChildren, ReactElement, @@ -116,7 +116,7 @@ const Parameters: FunctionComponent< open={props.showParameters} onClose={props.hideParameters} aria-labelledby="form-dialog-title" - maxWidth="md" + maxWidth={'md'} fullWidth={true} > diff --git a/src/index.tsx b/src/index.tsx index c75356e..52782d3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,7 +10,7 @@ import 'typeface-roboto'; import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; -import { AppWrapper } from './components/App'; +import { AppWrapper } from './components/app-wrapper'; const container = document.getElementById('root'); if (container) { diff --git a/src/plugins/README.md b/src/plugins/README.md index 3650fb0..fd2ae97 100644 --- a/src/plugins/README.md +++ b/src/plugins/README.md @@ -1,3 +1,4 @@ + # How to add plugins Add a plugin component or object in the corresponding group represented as folders. @@ -11,7 +12,6 @@ export default MyNewPlugin; ``` Edit `index.ts` to export your new plugin in the corresponding group - ```ts import MyNewPlugin from './myPluginGroup/myNewPlugin'; ... @@ -48,6 +48,5 @@ const MyPluggableComponent: FunctionComponent = () => { # How to overwrite translations Add your private translations to the following files to complete or overwrite existing translations - -- `src/plugins/translations/en.json` -- `src/plugins/translations/fr.json` +* `src/plugins/translations/en.json` +* `src/plugins/translations/fr.json` diff --git a/src/plugins/translations/en.json b/src/plugins/translations/en.json index 0967ef4..2c63c08 100644 --- a/src/plugins/translations/en.json +++ b/src/plugins/translations/en.json @@ -1 +1,2 @@ -{} +{ +} diff --git a/src/plugins/translations/fr.json b/src/plugins/translations/fr.json index 0967ef4..2c63c08 100644 --- a/src/plugins/translations/fr.json +++ b/src/plugins/translations/fr.json @@ -1 +1,2 @@ -{} +{ +} diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 4527abf..11cb323 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -32,12 +32,14 @@ import { UserManager } from 'oidc-client'; import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../redux/reducer'; import { AppsMetadataSrv, UserAdminSrv } from '../services'; -import { App } from '../components/App'; +import AppComponent from '../components/app'; import { Users } from '../pages'; import ErrorPage from './ErrorPage'; import { updateUserManagerDestructured } from '../redux/actions'; import HomePage from './HomePage'; +type App = typeof AppComponent; + export enum MainPaths { users = 'users', } diff --git a/src/services/index.ts b/src/services/index.ts index 17c26e6..c9ef2ba 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1,10 +1,3 @@ -/* - * Copyright (c) 2024, 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 * as Config from './config'; import * as ConfigNotif from './config-notification'; import * as AppsMetadata from './apps-metadata'; diff --git a/src/utils/api-ws.ts b/src/utils/api-ws.ts index b8272eb..1083770 100644 --- a/src/utils/api-ws.ts +++ b/src/utils/api-ws.ts @@ -1,10 +1,3 @@ -/* - * Copyright (c) 2024, 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 { getToken } from './api'; export type * from './api'; From db46d55999a7b9d102f8e0822b234e73a6104067 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 23:04:21 +0100 Subject: [PATCH 42/54] fix progress-bar css --- src/components/Grid/DataGrid.tsx | 21 +++++++++++++++++---- src/components/Grid/GridTable.tsx | 28 ++++++++++++++++++++++++---- src/utils/react.ts | 24 ++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 src/utils/react.ts diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 4860742..474bcc6 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -21,6 +21,7 @@ import { GridTable, GridTableProps } from './GridTable'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { ColDef } from 'ag-grid-community'; +import { useStateWithLabel } from '../../utils/react'; type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; @@ -87,7 +88,10 @@ export default function DataGrid( //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); const [rowsSelection, setRowsSelection] = useState([]); - const [progress, setProgress] = useState(null); + const [progress, setProgress] = useStateWithLabel( + 'progress', + null + ); const loadDataAndSave = useCallback( function loadDataAndSave(): Promise { @@ -103,9 +107,18 @@ export default function DataGrid( [dataLoader, snackError] ); - const setProgressDisable = useCallback(() => setProgress(null), []); - const setProgressQuery = useCallback(() => setProgress(Number.NaN), []); - const setProgressLoading = useCallback(() => setProgress(-1), []); + const setProgressDisable = useCallback( + () => setProgress(null), + [setProgress] + ); + const setProgressQuery = useCallback( + () => setProgress(Number.NaN), + [setProgress] + ); + const setProgressLoading = useCallback( + () => setProgress(-1), + [setProgress] + ); const loadingAction = useCallback( (action: FnAction, onerror?: CatchError): Promise => diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index eb360b5..845e886 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -18,6 +18,7 @@ import { AppBar, Box, Grid, LinearProgress, Toolbar } from '@mui/material'; import { AgGrid, AgGridRef } from './AgGrid'; import { useColumnTypes } from './GridFormat'; import { GridOptions } from 'ag-grid-community'; +import { Theme } from '@mui/material/styles'; export interface GridProgressProps { /** @@ -72,7 +73,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< alignItems="stretch" > - + = (props, context) => { if (props.progress === null || props.progress === undefined) { // simulate a disabled state //TODO css to match color with AppBar background (.MuiLinearProgress-root, .MuiLinearProgress-determinate) return ( - + ); } else if (Number.isNaN(props.progress)) { // animation from right to left - return ; + return ; } else if (props.progress < 0) { // animation from left to right - return ; + return ( + + ); } /*if (props.progress >= 0)*/ else { // animation dashed return ( ); } diff --git a/src/utils/react.ts b/src/utils/react.ts new file mode 100644 index 0000000..7a50503 --- /dev/null +++ b/src/utils/react.ts @@ -0,0 +1,24 @@ +/* + * Copyright (c) 2024, 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 { Dispatch, SetStateAction, useDebugValue, useState } from 'react'; + +export function useStateWithLabel( + label: string, + initialValue: S | (() => S) +): [S, Dispatch>]; +export function useStateWithLabel( + label: string +): [S | undefined, Dispatch>]; +export function useStateWithLabel( + label: string, + initialValue?: S | (() => S) +): [S, Dispatch>] { + const [value, setValue] = useState(initialValue as S); + useDebugValue(`${label}: ${value}`); + return [value, setValue]; +} From 53f7eb051eabc54b02806426c25a6bac02ae8521 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 22:44:08 +0100 Subject: [PATCH 43/54] use hooks --- src/components/Grid/DataGrid.tsx | 2 +- src/components/app.tsx | 7 +++---- src/utils/{react.ts => hooks.ts} | 8 ++++++++ 3 files changed, 12 insertions(+), 5 deletions(-) rename src/utils/{react.ts => hooks.ts} (80%) diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 474bcc6..20d17b1 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -21,7 +21,7 @@ import { GridTable, GridTableProps } from './GridTable'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; import { GridButtonDelete } from './buttons/ButtonDelete'; import { ColDef } from 'ag-grid-community'; -import { useStateWithLabel } from '../../utils/react'; +import { useStateWithLabel } from '../../utils/hooks'; type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; diff --git a/src/components/app.tsx b/src/components/app.tsx index 38e0b99..71fb561 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -12,6 +12,7 @@ import { useEffect, } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { Grid } from '@mui/material'; import { CardErrorBoundary, useSnackMessage } from '@gridsuite/commons-ui'; import { selectComputedLanguage, @@ -34,12 +35,10 @@ import { import { getComputedLanguage } from '../utils/language'; import AppTopBar from './app-top-bar'; import ReconnectingWebSocket from 'reconnecting-websocket'; -import { Grid } from '@mui/material'; +import { useDebugRender } from '../utils/hooks'; const App: FunctionComponent> = (props, context) => { - console.count('app render'); - console?.timeStamp('app render'); - + useDebugRender('app'); const { snackError } = useSnackMessage(); const dispatch = useDispatch(); const user = useSelector((state: AppState) => state.user); diff --git a/src/utils/react.ts b/src/utils/hooks.ts similarity index 80% rename from src/utils/react.ts rename to src/utils/hooks.ts index 7a50503..066d64a 100644 --- a/src/utils/react.ts +++ b/src/utils/hooks.ts @@ -22,3 +22,11 @@ export function useStateWithLabel( useDebugValue(`${label}: ${value}`); return [value, setValue]; } + +export function useDebugRender(label: string) { + if (process.env.NODE_ENV !== 'production') { + label = `${label} render`; + console.count?.(label); + console.timeStamp?.(label); + } +} From d6c9da5a17e8d902a49d88deefc1306a730c45fb Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Thu, 7 Mar 2024 23:03:16 +0100 Subject: [PATCH 44/54] review --- src/components/Grid/AgGrid.tsx | 6 +++++- src/components/Grid/DataGrid.tsx | 1 - src/components/RotateIcon.tsx | 36 -------------------------------- src/pages/users/UsersPage.tsx | 9 +------- src/services/user-admin.ts | 20 ------------------ src/translations/en.json | 9 -------- src/translations/fr.json | 9 -------- 7 files changed, 6 insertions(+), 84 deletions(-) delete mode 100644 src/components/RotateIcon.tsx diff --git a/src/components/Grid/AgGrid.tsx b/src/components/Grid/AgGrid.tsx index 9067ece..d12e40a 100644 --- a/src/components/Grid/AgGrid.tsx +++ b/src/components/Grid/AgGrid.tsx @@ -84,11 +84,15 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< () => deepmerge( { + // default overridable style width: '100%', height: '100%', - //@media print -> page-break-inside: avoid + '@media print': { + pageBreakInside: 'avoid', + }, }, deepmerge(theme.agGridThemeOverride ?? {}, { + // not overridable important fix on theme '--ag-icon-font-family': 'agGridMaterial !important', '& *': { '--ag-icon-font-family': 'agGridMaterial !important', diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx index 20d17b1..c2643df 100644 --- a/src/components/Grid/DataGrid.tsx +++ b/src/components/Grid/DataGrid.tsx @@ -36,7 +36,6 @@ type DataGridExposed = { export interface DataGridProps extends Omit, 'rowData'>, PropsWithChildren<{}> { - //context: NonNullable['context']>; //required accessRef: RefObject>; dataLoader: () => Promise; removeElements?: (dataLines: TData[]) => Promise; diff --git a/src/components/RotateIcon.tsx b/src/components/RotateIcon.tsx deleted file mode 100644 index 01790d1..0000000 --- a/src/components/RotateIcon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright (c) 2024, 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 { SvgIconComponent } from '@mui/icons-material'; -import { SvgIconProps } from '@mui/material'; -import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon'; -import { CSSObject } from '@emotion/react'; - -type ExtendIconProps = SvgIconProps< - SvgIconTypeMap['defaultComponent'], - { component: I } ->; - -const style: CSSObject = { - animation: 'spin 2s linear infinite', - '@keyframes spin': { - '0%': { - transform: 'rotate(0deg)', - }, - '100%': { - transform: 'rotate(360deg)', - }, - }, -}; - -export default function RotateIcon( - props: ExtendIconProps -) { - const { component, ...restProps } = props; - const Cmpnt = component as SvgIconComponent; - return ; -} diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index d0553bf..8cc13de 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -59,7 +59,6 @@ const UsersPage: FunctionComponent = () => { id: 'users.table.id.description', }), headerCheckboxSelection: true, - //initialSortIndex: 2, filterParams: { caseSensitive: false, trimInput: true, @@ -68,8 +67,6 @@ const UsersPage: FunctionComponent = () => { { field: 'isAdmin', cellDataType: 'boolean', - //checkboxSelection: true, - //cellRenderer: 'agCheckboxCellRenderer', cellRendererParams: { disabled: true, }, @@ -106,7 +103,6 @@ const UsersPage: FunctionComponent = () => { const addUser = useCallback( (id: string) => { - console.log(gridRef); gridContext ?.queryAction(() => UserAdminSrv.addUser(id).catch((error) => @@ -114,7 +110,7 @@ const UsersPage: FunctionComponent = () => { messageTxt: `Error while adding user "${id}"${ error.message && ':\n' + error.message }`, - headerId: 'users.table.error.delete', + headerId: 'users.table.error.add', }) ) ) @@ -135,9 +131,6 @@ const UsersPage: FunctionComponent = () => { clearErrors(); }; const onSubmit: SubmitHandler<{ user: string }> = (data) => { - console.groupCollapsed('onSubmit(...)'); - console.dir(data); - console.groupEnd(); addUser(data.user.trim()); handleClose(); }; diff --git a/src/services/user-admin.ts b/src/services/user-admin.ts index 723cbd4..91872d5 100644 --- a/src/services/user-admin.ts +++ b/src/services/user-admin.ts @@ -94,23 +94,3 @@ export function addUser(sub: string): Promise { throw reason; }); } - -export type UserConnection = { - sub: string; - firstConnection: string; //$date-time - lastConnection: string; //$date-time - isAccepted: boolean; -}; - -export function fetchUsersConnections(): Promise { - console.debug(`Fetching users connections...`); - return backendFetchJson(`${USER_ADMIN_URL}/connections`, { - headers: { - Accept: 'application/json', - }, - cache: 'default', - }).catch((reason) => { - console.error(`Error while fetching the servers data : ${reason}`); - throw reason; - }); -} diff --git a/src/translations/en.json b/src/translations/en.json index 30a5d6f..e25fe11 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -25,15 +25,6 @@ "table.bool.no": "No", "table.bool.unknown": "Unknown", - "connections.title": "Connections history", - "connections.table.id.description": "User login", - "connections.table.firstConnection": "First see", - "connections.table.firstConnection.description": "The first time the user try to connect", - "connections.table.lastConnection": "Last see", - "connections.table.lastConnection.description": "The last time the user try to connect", - "connections.table.allowed": "Allowed", - "connections.table.allowed.description": "Is the user as authorized last time?", - "users.title": "List of GridSuite users", "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", diff --git a/src/translations/fr.json b/src/translations/fr.json index 355fa76..0f95526 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -25,15 +25,6 @@ "table.bool.no": "No", "table.bool.unknown": "Inconnu", - "connections.title": "Historique des connexions", - "connections.table.id.description": "Identifiant de l'utilisateur", - "connections.table.firstConnection": "1ᵉʳᵉ connexion", - "connections.table.firstConnection.description": "La première tentative de connexion de l'utilisateur", - "connections.table.lastConnection": "Dernière conn.", - "connections.table.lastConnection.description": "La dernière tentative de connexion de l'utilisateur", - "connections.table.allowed": "Autorisé", - "connections.table.allowed.description": "Si l'utilisateur fût autorisé lors de sa dernière tentative de connexion", - "users.title": "Liste des utilisateurs", "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", From 3eaa8ca83f52cb156f27a940f0d97e39948c9983 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 03:06:21 +0100 Subject: [PATCH 45/54] review: clean & merge files related to grid --- src/components/Grid/AgGrid.tsx | 12 +- src/components/Grid/DataGrid.tsx | 221 -------------- src/components/Grid/GridFormat.tsx | 101 ------- src/components/Grid/GridTable.tsx | 290 +++++++++++++++++-- src/components/Grid/buttons/BaseButton.tsx | 89 ------ src/components/Grid/buttons/ButtonAdd.tsx | 48 --- src/components/Grid/buttons/ButtonDelete.tsx | 50 ---- src/components/Grid/index.ts | 22 +- src/pages/users/UsersPage.tsx | 95 ++++-- src/translations/en.json | 9 +- src/translations/fr.json | 11 +- 11 files changed, 365 insertions(+), 583 deletions(-) delete mode 100644 src/components/Grid/DataGrid.tsx delete mode 100644 src/components/Grid/GridFormat.tsx delete mode 100644 src/components/Grid/buttons/BaseButton.tsx delete mode 100644 src/components/Grid/buttons/ButtonAdd.tsx delete mode 100644 src/components/Grid/buttons/ButtonDelete.tsx diff --git a/src/components/Grid/AgGrid.tsx b/src/components/Grid/AgGrid.tsx index d12e40a..5bb4ee1 100644 --- a/src/components/Grid/AgGrid.tsx +++ b/src/components/Grid/AgGrid.tsx @@ -29,7 +29,7 @@ import { AgGridLocale, } from '../../translations/ag-grid/locales'; import deepmerge from '@mui/utils/deepmerge/deepmerge'; -import { GridOptions } from 'ag-grid-community'; +import { ColDef, GridOptions } from 'ag-grid-community'; const messages: Record = { [LANG_FRENCH]: AG_GRID_LOCALE_FR, @@ -102,6 +102,15 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< [theme.agGridThemeOverride] ); + const defaultColDef = useMemo>( + () => ({ + ...props.defaultColDef, + enableCellChangeFlash: + process.env.REACT_APP_DEBUG_AGGRID === 'true', + }), + [props.defaultColDef] + ); + return ( // wrapping container with theme & size @@ -116,6 +125,7 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< debug={ process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug } + defaultColDef={defaultColDef} reactiveCustomComponents //AG Grid: Using custom components without `reactiveCustomComponents = true` is deprecated. /> diff --git a/src/components/Grid/DataGrid.tsx b/src/components/Grid/DataGrid.tsx deleted file mode 100644 index c2643df..0000000 --- a/src/components/Grid/DataGrid.tsx +++ /dev/null @@ -1,221 +0,0 @@ -/* - * Copyright (c) 2024, 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 { Divider } from '@mui/material'; -import NoRowsOverlay from './NoRowsOverlay'; -import { - PropsWithChildren, - ReactElement, - RefObject, - useCallback, - useMemo, - useState, -} from 'react'; -import { useSnackMessage } from '@gridsuite/commons-ui'; -import { AgGridRef } from './AgGrid'; -import { GridTable, GridTableProps } from './GridTable'; -import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; -import { GridButtonDelete } from './buttons/ButtonDelete'; -import { ColDef } from 'ag-grid-community'; -import { useStateWithLabel } from '../../utils/hooks'; - -type FnAction = () => Promise; -type CatchError = (reason: E) => R | PromiseLike; -type DataGridExposed = { - refresh: () => Promise; - queryAction: ( - action: FnAction, - onerror?: CatchError - ) => Promise; -}; - -export interface DataGridProps - extends Omit, 'rowData'>, - PropsWithChildren<{}> { - accessRef: RefObject>; - dataLoader: () => Promise; - removeElements?: (dataLines: TData[]) => Promise; - addBtn?: () => ReactElement; -} - -export type DataGridRef = AgGridRef< - TData, - TContext & DataGridExposed ->; - -const defaultColDef: ColDef = { - editable: false, - resizable: true, - minWidth: 50, - cellRenderer: 'agAnimateSlideCellRenderer', //'agAnimateShowChangeCellRenderer' - showDisabledCheckboxes: true, - rowDrag: false, - sortable: true, - enableCellChangeFlash: process.env.REACT_APP_DEBUG_AGGRID === 'true', -}; - -/** - * Generic near CRUD (no update part) Grid - */ -/* - * Exposed to grid pre-configuration: - * * common columns config - * * configuration with formatter i18n for columns with timestamp - * Add common buttons in toolbar (with management of states) - * Manage also the progressbar animation: - */ -//IDEA: optionally save grid state to just show/hide in tabs without losing grid state -export default function DataGrid( - props: Readonly> -): ReactElement { - const { - context, - accessRef, - dataLoader, - removeElements, - addBtn, - children, - ...gridProps - } = props; - - const { snackError } = useSnackMessage(); - - //TODO refresh on notification change from user-admin-server (add, delete, ...) - const [data, setData] = useState(null); - const [rowsSelection, setRowsSelection] = useState([]); - const [progress, setProgress] = useStateWithLabel( - 'progress', - null - ); - - const loadDataAndSave = useCallback( - function loadDataAndSave(): Promise { - return dataLoader().then(setData, (error) => { - snackError({ - messageTxt: error.message, - headerId: 'table.error.retrieve', - }); - //setData(null); - //TODO what to do with "old" data? - }); - }, - [dataLoader, snackError] - ); - - const setProgressDisable = useCallback( - () => setProgress(null), - [setProgress] - ); - const setProgressQuery = useCallback( - () => setProgress(Number.NaN), - [setProgress] - ); - const setProgressLoading = useCallback( - () => setProgress(-1), - [setProgress] - ); - - const loadingAction = useCallback( - (action: FnAction, onerror?: CatchError): Promise => - new Promise((resolve, reject) => { - try { - setProgressLoading(); - resolve(); - } catch (err) { - reject(err); - } - }) - .then(action, onerror) - .catch(onerror) - .finally(setProgressDisable), - [setProgressDisable, setProgressLoading] - ); - const queryAction: DataGridExposed['queryAction'] = useCallback( - (action, onerror?) => - new Promise((resolve, reject) => { - try { - setProgressQuery(); - resolve(); - } catch (err) { - reject(err); - } - }) - .then(action, onerror) - .catch(onerror) - .finally(setProgressDisable), - [setProgressDisable, setProgressQuery] - ); - const refresh = useCallback( - () => loadingAction(loadDataAndSave), - [loadDataAndSave, loadingAction] - ); - - const btnDelete = useMemo( - () => - removeElements ? ( - - queryAction(() => removeElements(rowsSelection)) - //TODO replace manual refresh by notifications - .then(() => loadingAction(loadDataAndSave)) - } - disabled={!removeElements || rowsSelection.length <= 0} - /> - ) : undefined, - [ - loadDataAndSave, - loadingAction, - queryAction, - removeElements, - rowsSelection, - ] - ); - - return ( - - {...gridProps} - ref={props.accessRef} - rowData={data} - defaultColDef={defaultColDef as ColDef} - alwaysShowVerticalScroll={true} - onGridReady={refresh} - rowSelection="multiple" - onSelectionChanged={useCallback( - (event: SelectionChangedEvent) => - setRowsSelection(event.api.getSelectedRows() ?? []), - [] - )} - context={ - useMemo( - () => ({ - ...(context ?? {}), - refresh: refresh, - queryAction: queryAction, - }), - [context, queryAction, refresh] - ) as TContext & DataGridExposed - } - progress={progress} - noRowsOverlayComponent={ - (!gridProps.overlayNoRowsTemplate && - !gridProps.noRowsOverlayComponent && - NoRowsOverlay) || - undefined - } - noRowsOverlayComponentParams={undefined} - > - {btnDelete} - {addBtn?.()} - {children && ( - <> - - {children} - - )} - - ); -} diff --git a/src/components/Grid/GridFormat.tsx b/src/components/Grid/GridFormat.tsx deleted file mode 100644 index 9b73f6c..0000000 --- a/src/components/Grid/GridFormat.tsx +++ /dev/null @@ -1,101 +0,0 @@ -/* - * Copyright (c) 2024, 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 { FormattedMessage, IntlShape, useIntl } from 'react-intl'; -import { - ColTypeDef, - ValueFormatterFunc, - ValueFormatterParams, -} from 'ag-grid-community/dist/lib/entities/colDef'; -import { FunctionComponent, useCallback, useMemo } from 'react'; -import { Chip, ChipProps } from '@mui/material'; -import { Check, Close, QuestionMark } from '@mui/icons-material'; -import { ICellRendererFunc, IDateFilterParams } from 'ag-grid-community'; - -export enum GridColumnTypes { - // default of ag-grid - // ... - // custom components - Timestamp = 'timestamp', - BoolIcons = 'boolIcons', -} - -function timestampFormatter( - intl: IntlShape, - params: ValueFormatterParams -): string { - if (params.value !== null && params.value !== undefined) { - let val = params.value; - if (!(val instanceof Date)) { - val = new Date(val); - } - return intl.formatDate(val); - } else { - return '∅'; - } -} - -const BoolValue: FunctionComponent<{ - value: boolean | null | undefined; -}> = (props, context) => { - const conf = ((value: unknown): Partial => { - switch (value) { - case true: - return { - label: , - icon: , - color: 'success', - }; - case false: - return { - label: , - icon: , - color: 'error', - }; - default: - return { - label: , - icon: , - }; - } - })(props.value); - return ; -}; - -export function useColumnTypes(): Record< - GridColumnTypes, - ColTypeDef -> { - const intl = useIntl(); - const timestampFormat: ValueFormatterFunc< - TData, - string | number | Date | null | undefined - > = useCallback((params) => timestampFormatter(intl, params), [intl]); - - //https://www.ag-grid.com/react-data-grid/components/ - return useMemo( - () => ({ - [GridColumnTypes.BoolIcons]: { - //filter: 'agNumberColumnFilter' / 'agTextColumnFilter' - //align: 'left', - cellRenderer: ((params) => - ( - - ) as unknown as HTMLElement) as ICellRendererFunc, - }, - [GridColumnTypes.Timestamp]: { - cellDataType: 'dateString', - filter: 'agDateColumnFilter', - filterParams: { - debounceMs: 150, - } as IDateFilterParams, - valueFormatter: timestampFormat, - }, - }), - [timestampFormat] - ); -} diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index 845e886..718c450 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -13,28 +13,65 @@ import { PropsWithoutRef, ReactNode, RefAttributes, + useCallback, + useId, + useMemo, + useState, } from 'react'; -import { AppBar, Box, Grid, LinearProgress, Toolbar } from '@mui/material'; +import { + AppBar, + Box, + Button as MuiButton, + ButtonProps, + Chip, + ChipProps, + Grid, + LinearProgress, + Toolbar, +} from '@mui/material'; import { AgGrid, AgGridRef } from './AgGrid'; -import { useColumnTypes } from './GridFormat'; -import { GridOptions } from 'ag-grid-community'; +import { GridOptions, ICellRendererFunc } from 'ag-grid-community'; import { Theme } from '@mui/material/styles'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { Check, Close, Delete, QuestionMark } from '@mui/icons-material'; +import { useSnackMessage } from '@gridsuite/commons-ui'; +import { useStateWithLabel } from '../../utils/hooks'; +import NoRowsOverlay from './NoRowsOverlay'; +import { + OverridableComponent, + OverridableTypeMap, + OverrideProps, +} from '@mui/material/OverridableComponent'; +import { ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase/ButtonBase'; +import { ButtonTypeMap } from '@mui/material/Button/Button'; -export interface GridProgressProps { - /** - * intended to be a percent number in range [0;1] or null or NaN - */ - progress: null | number; -} +type FnAction = () => Promise; +type CatchError = (reason: E) => R | PromiseLike; +type GridTableExposed = { + refresh: () => Promise; + queryAction: ( + action: FnAction, + onerror?: CatchError + ) => Promise; +}; + +export type GridTableRef = AgGridRef< + TData, + TContext & GridTableExposed +>; export interface GridTableProps extends Omit< GridOptions, + | 'rowData' | 'overlayLoadingTemplate' | 'loadingOverlayComponent' | 'loadingOverlayComponentParams' >, - Partial {} + PropsWithChildren<{}> { + //accessRef: RefObject>; + dataLoader: () => Promise; +} /* * Restore lost generics from `forwardRef()`
@@ -46,9 +83,12 @@ interface GridTableWithRef extends FunctionComponent>> { ( props: PropsWithoutRef>> & - RefAttributes> + RefAttributes> ): ReturnType< - ForwardRefComponent, AgGridRef> + ForwardRefComponent< + GridTableProps, + GridTableRef + > >; } @@ -61,10 +101,86 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< TContext extends {} = {} >( props: PropsWithChildren>, - gridRef: ForwardedRef> + gridRef: ForwardedRef> ): ReactNode { - const { children: toolbarContent, progress, ...agGridProps } = props; - const columnTypes = useColumnTypes(); + const { + children: toolbarContent, + context, + dataLoader, + ...agGridProps + } = props; + const columnTypes = useColumnTypes(props.columnTypes); + const { snackError } = useSnackMessage(); + + //TODO refresh on notification change from user-admin-server (add, delete, ...) + const [data, setData] = useState(null); + const [progress, setProgress] = useStateWithLabel( + 'progress', + null + ); + + const loadDataAndSave = useCallback( + function loadDataAndSave(): Promise { + return dataLoader().then(setData, (error) => { + snackError({ + messageTxt: error.message, + headerId: 'table.error.retrieve', + }); + //setData(null); + //TODO what to do with "old" data? + }); + }, + [dataLoader, snackError] + ); + + const setProgressDisable = useCallback( + () => setProgress(null), + [setProgress] + ); + const setProgressQuery = useCallback( + () => setProgress(Number.NaN), + [setProgress] + ); + const setProgressLoading = useCallback( + () => setProgress(-1), + [setProgress] + ); + + const loadingAction = useCallback( + (action: FnAction, onerror?: CatchError): Promise => + new Promise((resolve, reject) => { + try { + setProgressLoading(); + resolve(); + } catch (err) { + reject(err); + } + }) + .then(action, onerror) + .catch(onerror) + .finally(setProgressDisable), + [setProgressDisable, setProgressLoading] + ); + const queryAction: GridTableExposed['queryAction'] = useCallback( + (action, onerror?) => + new Promise((resolve, reject) => { + try { + setProgressQuery(); + resolve(); + } catch (err) { + reject(err); + } + }) + .then(action, onerror) + .catch(onerror) + .finally(setProgressDisable), + [setProgressDisable, setProgressQuery] + ); + const refresh = useCallback( + () => loadingAction(loadDataAndSave), + [loadDataAndSave, loadingAction] + ); + return ( - + - + columnTypes={columnTypes} {...agGridProps} ref={gridRef} + rowData={data} + alwaysShowVerticalScroll={true} + onGridReady={refresh} + context={useMemo( + () => + ({ + ...((context ?? {}) as TContext), + refresh: refresh, + queryAction: queryAction, + } as TContext & GridTableExposed), + [context, queryAction, refresh] + )} + noRowsOverlayComponent={ + (!agGridProps.overlayNoRowsTemplate && + !agGridProps.noRowsOverlayComponent && + NoRowsOverlay) || + undefined + } + noRowsOverlayComponentParams={undefined} /> @@ -107,6 +242,13 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< }); export default GridTable; +interface GridProgressProps { + /** + * intended to be a percent number in range [0;1] or null or NaN + */ + progress: null | number; +} + function GridProgressStyle(theme: Theme) { // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/AppBar/AppBar.js#L39-L40 const backgroundColorDefault = @@ -149,3 +291,117 @@ const GridProgress: FunctionComponent = (props, context) => { ); } }; + +export enum GridColumnTypes { + // default of ag-grid + // ... + // custom components + BoolIcons = 'boolIcons', +} + +function useColumnTypes( + childColumnTypes: GridOptions['columnTypes'] +): Required['columnTypes']> { + //https://www.ag-grid.com/react-data-grid/components/ + return useMemo( + () => ({ + [GridColumnTypes.BoolIcons]: { + //filter: 'agNumberColumnFilter' / 'agTextColumnFilter' + //align: 'left', + cellRenderer: ((params) => + ( + + ) as unknown as HTMLElement) as ICellRendererFunc, + }, + ...(childColumnTypes ?? {}), + }), + [childColumnTypes] + ); +} + +const BoolValue: FunctionComponent<{ + value: boolean | null | undefined; +}> = (props, context) => { + const conf = ((value: unknown): Partial => { + switch (value) { + case true: + return { + label: , + icon: , + color: 'success', + }; + case false: + return { + label: , + icon: , + color: 'error', + }; + default: + return { + label: , + icon: , + }; + } + })(props.value); + return ; +}; + +export type GridButtonProps = Omit< + ButtonProps, + 'children' | 'aria-label' | 'aria-disabled' | 'variant' | 'id' | 'size' +> & { + textId: string; + labelId: string; +}; + +/* Taken from MUI/materials-ui codebase + * Mui expose button's defaultComponent as "button" and button component as "a"... but generate in reality a + ); + } +); + +function noClickProps() { + console.error('GridButtonDelete.onClick not defined'); +} + +export const GridButtonDelete = forwardRef< + HTMLButtonElement, + Partial> +>(function GridButtonDelete(props, ref) { + return ( + } + {...props} + ref={ref} + color="error" + /> + ); +}); diff --git a/src/components/Grid/buttons/BaseButton.tsx b/src/components/Grid/buttons/BaseButton.tsx deleted file mode 100644 index 7ea4678..0000000 --- a/src/components/Grid/buttons/BaseButton.tsx +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright (c) 2024, 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 { - Button as MuiButton, - ButtonProps, - Tooltip, - TooltipProps, - useForkRef, -} from '@mui/material'; -import { - OverridableComponent, - OverridableTypeMap, - OverrideProps, -} from '@mui/material/OverridableComponent'; -import { ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase/ButtonBase'; -import { ButtonTypeMap } from '@mui/material/Button/Button'; -import { forwardRef, useId, useRef } from 'react'; -import { useIntl } from 'react-intl'; - -type PropsWithoutChildren

= P extends any - ? 'children' extends keyof P - ? Omit - : P - : P; - -export type GridBaseButtonProps = { - tooltipTextId: string; - textId: string; - labelId: string; - color?: ButtonProps['color']; - startIcon: ButtonProps['startIcon']; - onClick: ButtonProps['onClick']; - - buttonProps?: PropsWithoutChildren; - tooltipProps?: PropsWithoutChildren; -}; - -/* Taken from MUI/materials-ui codebase - * Mui expose button's defaultComponent as "button" and button component as "a"... but generate in reality a - - - ); -}); diff --git a/src/components/Grid/buttons/ButtonAdd.tsx b/src/components/Grid/buttons/ButtonAdd.tsx deleted file mode 100644 index 2bbb646..0000000 --- a/src/components/Grid/buttons/ButtonAdd.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright (c) 2024, 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 { forwardRef, useMemo } from 'react'; -import { AddCircleOutline, SvgIconComponent } from '@mui/icons-material'; -import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; - -export type GridButtonAddProps = Partial & { - icon?: SvgIconComponent; -}; - -function noClickProps() { - console.error('GridButtonDelete.onClick not defined'); -} - -export const GridButtonAdd = forwardRef( - function GridButtonAdd(props, ref) { - const AddIcon = useMemo(() => { - const IcnCmpnt: SvgIconComponent = props.icon ?? AddCircleOutline; - return ; - }, [props.icon]); - const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( - () => ({ - disabled: props.onClick === undefined, - }), - [props.onClick] - ); - - return ( - - ); - } -); -export default GridButtonAdd; diff --git a/src/components/Grid/buttons/ButtonDelete.tsx b/src/components/Grid/buttons/ButtonDelete.tsx deleted file mode 100644 index 4d2b638..0000000 --- a/src/components/Grid/buttons/ButtonDelete.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Copyright (c) 2024, 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 { forwardRef, useMemo } from 'react'; -import { Delete, SvgIconComponent } from '@mui/icons-material'; -import { GridBaseButton, GridBaseButtonProps } from './BaseButton'; - -export type GridButtonDeleteProps = Partial & { - icon?: SvgIconComponent; - disabled?: boolean; -}; - -function noClickProps() { - console.error('GridButtonDelete.onClick not defined'); -} - -export const GridButtonDelete = forwardRef< - HTMLButtonElement, - GridButtonDeleteProps ->(function GridButtonDelete(props, ref) { - const AddIcon = useMemo(() => { - const IcnCmpnt: SvgIconComponent = props.icon ?? Delete; - return ; - }, [props.icon]); - const buttonProps: GridBaseButtonProps['buttonProps'] = useMemo( - () => ({ - disabled: props.disabled || props.onClick === undefined, - }), - [props.disabled, props.onClick] - ); - - return ( - - ); -}); -export default GridButtonDelete; diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts index b595adf..9071edd 100644 --- a/src/components/Grid/index.ts +++ b/src/components/Grid/index.ts @@ -8,15 +8,15 @@ /*export { AgGrid } from './AgGrid'; export type { AgGridRef } from './AgGrid';*/ -export { GridButtonAdd } from './buttons/ButtonAdd'; -export type { GridButtonAddProps } from './buttons/ButtonAdd'; -//export { GridButtonDelete, GridButtonDeleteProps } from './buttons/ButtonDelete'; -//export { GridButtonRefresh, GridButtonRefreshProps } from './buttons/ButtonRefresh'; - export { default as NoRowsOverlay } from './NoRowsOverlay'; -export { GridColumnTypes } from './GridFormat'; -export { GridTable } from './GridTable'; -export type { GridTableProps } from './GridTable'; - -export { default as DataGrid } from './DataGrid'; -export type { DataGridProps, DataGridRef } from './DataGrid'; +export { + GridTable, + GridColumnTypes, + GridButton, + GridButtonDelete, +} from './GridTable'; +export type { + GridTableProps, + GridTableRef, + GridButtonProps, +} from './GridTable'; diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 8cc13de..ea46dbc 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -28,13 +28,30 @@ import { Typography, } from '@mui/material'; import { AccountCircle, PersonAdd } from '@mui/icons-material'; -import { DataGrid, DataGridRef, GridButtonAdd } from '../../components/Grid'; +import { + GridButton, + GridButtonDelete, + GridColumnTypes, + GridTable, + GridTableRef, +} from '../../components/Grid'; import { UserAdminSrv, UserInfos } from '../../services'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; import { TextFilterParams } from 'ag-grid-community/dist/lib/filter/provided/text/textFilter'; import { ColDef } from 'ag-grid-community'; +import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; + +const defaultColDef: ColDef = { + editable: false, + resizable: true, + minWidth: 50, + cellRenderer: 'agAnimateSlideCellRenderer', //'agAnimateShowChangeCellRenderer' + showDisabledCheckboxes: true, + rowDrag: false, + sortable: true, +}; function getRowId(params: GetRowIdParams): string { return params.data.sub; @@ -43,7 +60,7 @@ function getRowId(params: GetRowIdParams): string { const UsersPage: FunctionComponent = () => { const intl = useIntl(); const { snackError } = useSnackMessage(); - const gridRef = useRef>(null); + const gridRef = useRef>(null); const gridContext = gridRef.current?.context; const columns = useMemo( @@ -66,6 +83,7 @@ const UsersPage: FunctionComponent = () => { }, { field: 'isAdmin', + type: GridColumnTypes.BoolIcons, cellDataType: 'boolean', cellRendererParams: { disabled: true, @@ -86,19 +104,28 @@ const UsersPage: FunctionComponent = () => { [intl] ); + const [rowsSelection, setRowsSelection] = useState([]); const deleteUsers = useCallback( - (dataLines: UserInfos[]): Promise => { - let subs = dataLines.map((user) => user.sub); - return UserAdminSrv.deleteUsers(subs).catch((error) => - snackError({ - messageTxt: `Error while deleting user "${JSON.stringify( - subs - )}"${error.message && ':\n' + error.message}`, - headerId: 'users.table.error.delete', + (): Promise | undefined => + gridContext + ?.queryAction(() => { + let subs = rowsSelection.map((user) => user.sub); + return UserAdminSrv.deleteUsers(subs).catch((error) => + snackError({ + messageTxt: `Error while deleting user "${JSON.stringify( + subs + )}"${error.message && ':\n' + error.message}`, + headerId: 'users.table.error.delete', + }) + ); }) - ); - }, - [snackError] + //TODO replace manual refresh by notification in GridTable component + .then(() => gridContext?.refresh?.()), + [gridContext, rowsSelection, snackError] + ); + const deleteUsersDisabled = useMemo( + () => rowsSelection.length <= 0, + [rowsSelection.length] ); const addUser = useCallback( @@ -114,7 +141,7 @@ const UsersPage: FunctionComponent = () => { }) ) ) - //TODO replace manual refresh by notification in DataGrid component + //TODO replace manual refresh by notification in GridTable component .then(() => gridContext?.refresh?.()); }, [gridContext, snackError] @@ -136,19 +163,6 @@ const UsersPage: FunctionComponent = () => { }; const onSubmitForm = handleSubmit(onSubmit); - const buttonAdd = useCallback( - () => ( - setOpen(true)} - icon={PersonAdd} - /> - ), - [] - ); - return ( @@ -157,15 +171,32 @@ const UsersPage: FunctionComponent = () => { - - accessRef={gridRef} + + ref={gridRef} dataLoader={UserAdminSrv.fetchUsers} - addBtn={buttonAdd} - removeElements={deleteUsers} columnDefs={columns} + defaultColDef={defaultColDef} gridId="table-users" getRowId={getRowId} - /> + rowSelection="multiple" + onSelectionChanged={useCallback( + (event: SelectionChangedEvent) => + setRowsSelection(event.api.getSelectedRows() ?? []), + [] + )} + > + } + color="primary" + onClick={useCallback(() => setOpen(true), [])} + /> + +

Date: Fri, 8 Mar 2024 10:10:56 +0100 Subject: [PATCH 46/54] can now reset grid & fix toolbar css --- src/components/Grid/GridTable.tsx | 61 +++++++++++++++++++++++-------- src/translations/en.json | 2 + src/translations/fr.json | 2 + 3 files changed, 49 insertions(+), 16 deletions(-) diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index 718c450..9bd2465 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -16,6 +16,7 @@ import { useCallback, useId, useMemo, + useRef, useState, } from 'react'; import { @@ -23,27 +24,29 @@ import { Box, Button as MuiButton, ButtonProps, + ButtonTypeMap, Chip, ChipProps, + Divider, + ExtendButtonBaseTypeMap, Grid, LinearProgress, + Theme, Toolbar, + useForkRef, } from '@mui/material'; +import { + OverridableComponent, + OverridableTypeMap, + OverrideProps, +} from '@mui/material/OverridableComponent'; +import { Check, Clear, Close, Delete, QuestionMark } from '@mui/icons-material'; import { AgGrid, AgGridRef } from './AgGrid'; import { GridOptions, ICellRendererFunc } from 'ag-grid-community'; -import { Theme } from '@mui/material/styles'; import { FormattedMessage, useIntl } from 'react-intl'; -import { Check, Close, Delete, QuestionMark } from '@mui/icons-material'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { useStateWithLabel } from '../../utils/hooks'; import NoRowsOverlay from './NoRowsOverlay'; -import { - OverridableComponent, - OverridableTypeMap, - OverrideProps, -} from '@mui/material/OverridableComponent'; -import { ExtendButtonBaseTypeMap } from '@mui/material/ButtonBase/ButtonBase'; -import { ButtonTypeMap } from '@mui/material/Button/Button'; type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; @@ -109,9 +112,21 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< dataLoader, ...agGridProps } = props; - const columnTypes = useColumnTypes(props.columnTypes); const { snackError } = useSnackMessage(); + const agGridRef = useRef>(); + const handleRef = useForkRef(gridRef, agGridRef); + const onReset = useCallback(() => { + agGridRef.current?.aggrid?.api?.resetColumnState?.(); + agGridRef.current?.aggrid?.api?.resetColumnGroupState?.(); + agGridRef.current?.aggrid?.api?.resetQuickFilter?.(); + agGridRef.current?.aggrid?.api?.setFilterModel?.(null); + agGridRef.current?.aggrid?.api?.deselectAll?.(); + agGridRef.current?.aggrid?.api?.resetRowHeights?.(); + agGridRef.current?.aggrid?.api?.clearFocusedCell?.(); + }, []); + + const columnTypes = useColumnTypes(props.columnTypes); //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); const [progress, setProgress] = useStateWithLabel( @@ -192,18 +207,33 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< *': { - marginRight: '0.2em', + marginRight: 1, '&:last-child': { marginRight: 0, }, }, }} > - {/*TODO button reset grid filter/sort/column-hide/rows-selection ...*/} - {/**/} - {toolbarContent} + } + /> + {toolbarContent && ( + <> + + {toolbarContent} + + )} @@ -215,7 +245,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< columnTypes={columnTypes} {...agGridProps} - ref={gridRef} + ref={handleRef} rowData={data} alwaysShowVerticalScroll={true} onGridReady={refresh} @@ -264,7 +294,6 @@ function GridProgressStyle(theme: Theme) { const GridProgress: FunctionComponent = (props, context) => { if (props.progress === null || props.progress === undefined) { // simulate a disabled state - //TODO css to match color with AppBar background (.MuiLinearProgress-root, .MuiLinearProgress-determinate) return ( Date: Fri, 8 Mar 2024 16:07:38 +0100 Subject: [PATCH 47/54] review --- src/module-commons-ui.d.ts | 1 - src/routes/router.tsx | 4 +- src/translations/ag-grid/locales.ts | 66 ++++++++++++++--------------- src/utils/types.d.ts | 6 --- 4 files changed, 36 insertions(+), 41 deletions(-) delete mode 100644 src/utils/types.d.ts diff --git a/src/module-commons-ui.d.ts b/src/module-commons-ui.d.ts index d66fdf7..a85426f 100644 --- a/src/module-commons-ui.d.ts +++ b/src/module-commons-ui.d.ts @@ -1,4 +1,3 @@ //TODO: remove when commons-ui will include typescript definitions declare module '@gridsuite/commons-ui'; declare module '@gridsuite/commons-ui/es/utils/UserManagerMock'; -declare module '@gridsuite/commons-ui/es/utils/styles'; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 0b4836b..f86f420 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -147,7 +147,9 @@ const AppAuthStateWithRouterLayer: FunctionComponent< ); }) .catch((error: any) => { - dispatch(updateUserManagerDestructured(null, getErrorMessage(error))); + dispatch( + updateUserManagerDestructured(null, getErrorMessage(error)) + ); }); // Note: initialize and initialMatchSilentRenewCallbackUrl & initialMatchSignInCallbackUrl won't change }, [ diff --git a/src/translations/ag-grid/locales.ts b/src/translations/ag-grid/locales.ts index 9d6f07d..e12bb96 100644 --- a/src/translations/ag-grid/locales.ts +++ b/src/translations/ag-grid/locales.ts @@ -74,35 +74,35 @@ export type AgGridLocaleKeys = export const AG_GRID_LOCALE_FR: AgGridLocale = { // Set Filter - selectAll: '(Select All)', - selectAllSearchResults: '(Select All Search Results)', - addCurrentSelectionToFilter: 'Add current selection to filter', - searchOoo: 'Search...', - blanks: '(Blanks)', - noMatches: 'No matches', + selectAll: '(Tout sélectionner)', + selectAllSearchResults: '(Sélectionner tout les résultats)', + addCurrentSelectionToFilter: 'Ajouter la sélection au filtre', + searchOoo: 'Rechercher ...', + blanks: '(Vide)', + noMatches: 'Pas de correspondance', // Number Filter & Text Filter - filterOoo: 'Filter...', - equals: 'Equals', - notEqual: 'Does not equal', - blank: 'Blank', - notBlank: 'Not blank', - empty: 'Choose one', + filterOoo: 'Filtre...', + equals: 'Égal', + notEqual: 'Pas égal à', + blank: 'Vide', + notBlank: 'Non vide', + empty: 'Choix ...', // Number Filter - lessThan: 'Less than', - greaterThan: 'Greater than', - lessThanOrEqual: 'Less than or equal to', - greaterThanOrEqual: 'Greater than or equal to', - inRange: 'Between', - inRangeStart: 'From', - inRangeEnd: 'To', + lessThan: 'Moins que', + greaterThan: 'Plus que', + lessThanOrEqual: 'Moins ou égal à', + greaterThanOrEqual: 'Plus ou égal à', + inRange: 'Entre', + inRangeStart: 'De', + inRangeEnd: 'À', // Text Filter - contains: 'Contains', - notContains: 'Does not contain', - startsWith: 'Begins with', - endsWith: 'Ends with', + contains: 'Contiens', + notContains: 'Ne contiens pas', + startsWith: 'Commence par', + endsWith: 'Se termine par', // Date Filter dateFormatOoo: 'yyyy/mm/dd', @@ -123,19 +123,19 @@ export const AG_GRID_LOCALE_FR: AgGridLocale = { group: 'Groupe', // Other - loadingOoo: 'Loading...', + loadingOoo: 'Chargement ...', loadingError: 'ERR', - noRowsToShow: 'No Rows To Show', - enabled: 'Enabled', + noRowsToShow: 'Pas de lignes à montrer', + enabled: 'Activer', // Enterprise Menu Aggregation and Status Bar - to: 'to', - of: 'of', + to: 'à', + of: 'de', page: 'Page', - nextPage: 'Next Page', - lastPage: 'Last Page', - firstPage: 'First Page', - previousPage: 'Previous Page', + nextPage: 'Page suivante', + lastPage: 'Dernière Page', + firstPage: 'Première Page', + previousPage: 'Page précédente', // ARIA ariaChecked: 'coché', @@ -170,7 +170,7 @@ export const AG_GRID_LOCALE_FR: AgGridLocale = { // ARIA Labels for Dialogs ariaLabelColumnMenu: 'Menu de colonne', ariaLabelColumnFilter: 'Column Filter', - ariaLabelDialog: 'Dialog', + ariaLabelDialog: 'Dialogue', ariaLabelSelectField: 'Sélectionner Champ', ariaLabelTooltip: 'Tooltip', diff --git a/src/utils/types.d.ts b/src/utils/types.d.ts deleted file mode 100644 index b3a6ddc..0000000 --- a/src/utils/types.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -// https://github.com/microsoft/TypeScript/issues/29729#issuecomment-505826972 -//TODO use version of type-fest instead? -export type LiteralUnion< - Literals, - Base extends string | number | boolean | bigint = string -> = Literals | (Base & Record); From 36a437c37cc50d925de218e968144e35d7f0e2eb Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 16:06:24 +0100 Subject: [PATCH 48/54] review: remove no-rows overlay --- src/components/Grid/GridTable.tsx | 8 --- src/components/Grid/NoRowsOverlay.tsx | 91 --------------------------- src/components/Grid/index.ts | 1 - 3 files changed, 100 deletions(-) delete mode 100644 src/components/Grid/NoRowsOverlay.tsx diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index 9bd2465..ca53a16 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -46,7 +46,6 @@ import { GridOptions, ICellRendererFunc } from 'ag-grid-community'; import { FormattedMessage, useIntl } from 'react-intl'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { useStateWithLabel } from '../../utils/hooks'; -import NoRowsOverlay from './NoRowsOverlay'; type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; @@ -258,13 +257,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< } as TContext & GridTableExposed), [context, queryAction, refresh] )} - noRowsOverlayComponent={ - (!agGridProps.overlayNoRowsTemplate && - !agGridProps.noRowsOverlayComponent && - NoRowsOverlay) || - undefined - } - noRowsOverlayComponentParams={undefined} /> diff --git a/src/components/Grid/NoRowsOverlay.tsx b/src/components/Grid/NoRowsOverlay.tsx deleted file mode 100644 index 708ab85..0000000 --- a/src/components/Grid/NoRowsOverlay.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * Copyright (c) 2024, 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/. - */ - -/* - * from https://mui.com/x/react-data-grid/components/#no-rows-overlay - */ -import { Box } from '@mui/material'; -import { SxProps } from '@mui/system/styleFunctionSx'; -import { Theme } from '@emotion/react'; -import { FormattedMessage } from 'react-intl'; - -const style: SxProps = (theme) => ({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - height: '100%', - '& .ant-empty-img-1': { - fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626', - }, - '& .ant-empty-img-2': { - fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959', - }, - '& .ant-empty-img-3': { - fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343', - }, - '& .ant-empty-img-4': { - fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c', - }, - '& .ant-empty-img-5': { - fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08', - fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff', - }, -}); - -const NoRowsSvg = ( - - - - - - - - - - - - - - - -); - -export default function NoRowsOverlay() { - return ( - - {NoRowsSvg} - - - - - ); -} diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts index 9071edd..c842b64 100644 --- a/src/components/Grid/index.ts +++ b/src/components/Grid/index.ts @@ -8,7 +8,6 @@ /*export { AgGrid } from './AgGrid'; export type { AgGridRef } from './AgGrid';*/ -export { default as NoRowsOverlay } from './NoRowsOverlay'; export { GridTable, GridColumnTypes, From 690dcdf0af980ad44ebc2d1fc7677cd10daddda9 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 16:19:09 +0100 Subject: [PATCH 49/54] review: remove boolean cell render --- src/components/Grid/GridTable.tsx | 64 ++----------------------------- src/components/Grid/index.ts | 7 +--- src/pages/users/UsersPage.tsx | 7 ++-- 3 files changed, 7 insertions(+), 71 deletions(-) diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index ca53a16..29bd874 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -25,8 +25,6 @@ import { Button as MuiButton, ButtonProps, ButtonTypeMap, - Chip, - ChipProps, Divider, ExtendButtonBaseTypeMap, Grid, @@ -40,10 +38,10 @@ import { OverridableTypeMap, OverrideProps, } from '@mui/material/OverridableComponent'; -import { Check, Clear, Close, Delete, QuestionMark } from '@mui/icons-material'; +import { Clear, Delete } from '@mui/icons-material'; import { AgGrid, AgGridRef } from './AgGrid'; -import { GridOptions, ICellRendererFunc } from 'ag-grid-community'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { GridOptions } from 'ag-grid-community'; +import { useIntl } from 'react-intl'; import { useSnackMessage } from '@gridsuite/commons-ui'; import { useStateWithLabel } from '../../utils/hooks'; @@ -125,7 +123,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< agGridRef.current?.aggrid?.api?.clearFocusedCell?.(); }, []); - const columnTypes = useColumnTypes(props.columnTypes); //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); const [progress, setProgress] = useStateWithLabel( @@ -242,7 +239,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< - columnTypes={columnTypes} {...agGridProps} ref={handleRef} rowData={data} @@ -313,60 +309,6 @@ const GridProgress: FunctionComponent = (props, context) => { } }; -export enum GridColumnTypes { - // default of ag-grid - // ... - // custom components - BoolIcons = 'boolIcons', -} - -function useColumnTypes( - childColumnTypes: GridOptions['columnTypes'] -): Required['columnTypes']> { - //https://www.ag-grid.com/react-data-grid/components/ - return useMemo( - () => ({ - [GridColumnTypes.BoolIcons]: { - //filter: 'agNumberColumnFilter' / 'agTextColumnFilter' - //align: 'left', - cellRenderer: ((params) => - ( - - ) as unknown as HTMLElement) as ICellRendererFunc, - }, - ...(childColumnTypes ?? {}), - }), - [childColumnTypes] - ); -} - -const BoolValue: FunctionComponent<{ - value: boolean | null | undefined; -}> = (props, context) => { - const conf = ((value: unknown): Partial => { - switch (value) { - case true: - return { - label: , - icon: , - color: 'success', - }; - case false: - return { - label: , - icon: , - color: 'error', - }; - default: - return { - label: , - icon: , - }; - } - })(props.value); - return ; -}; - export type GridButtonProps = Omit< ButtonProps, 'children' | 'aria-label' | 'aria-disabled' | 'variant' | 'id' | 'size' diff --git a/src/components/Grid/index.ts b/src/components/Grid/index.ts index c842b64..56adbb9 100644 --- a/src/components/Grid/index.ts +++ b/src/components/Grid/index.ts @@ -8,12 +8,7 @@ /*export { AgGrid } from './AgGrid'; export type { AgGridRef } from './AgGrid';*/ -export { - GridTable, - GridColumnTypes, - GridButton, - GridButtonDelete, -} from './GridTable'; +export { GridTable, GridButton, GridButtonDelete } from './GridTable'; export type { GridTableProps, GridTableRef, diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index ea46dbc..93a1eec 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -31,7 +31,6 @@ import { AccountCircle, PersonAdd } from '@mui/icons-material'; import { GridButton, GridButtonDelete, - GridColumnTypes, GridTable, GridTableRef, } from '../../components/Grid'; @@ -40,7 +39,7 @@ import { useSnackMessage } from '@gridsuite/commons-ui'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { GetRowIdParams } from 'ag-grid-community/dist/lib/interfaces/iCallbackParams'; import { TextFilterParams } from 'ag-grid-community/dist/lib/filter/provided/text/textFilter'; -import { ColDef } from 'ag-grid-community'; +import { ColDef, ICheckboxCellRendererParams } from 'ag-grid-community'; import { SelectionChangedEvent } from 'ag-grid-community/dist/lib/events'; const defaultColDef: ColDef = { @@ -83,11 +82,11 @@ const UsersPage: FunctionComponent = () => { }, { field: 'isAdmin', - type: GridColumnTypes.BoolIcons, cellDataType: 'boolean', + //detected as cellRenderer: 'agCheckboxCellRenderer', cellRendererParams: { disabled: true, - }, + } as ICheckboxCellRendererParams, flex: 1, headerName: intl.formatMessage({ id: 'users.table.isAdmin', From e3d14b98e7b95fac34f9778c368ad7b94e9dc9cf Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 16:22:04 +0100 Subject: [PATCH 50/54] review: remove grid reset button --- src/components/Grid/GridTable.tsx | 36 +++---------------------------- 1 file changed, 3 insertions(+), 33 deletions(-) diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index 29bd874..3807e53 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -16,7 +16,6 @@ import { useCallback, useId, useMemo, - useRef, useState, } from 'react'; import { @@ -25,20 +24,18 @@ import { Button as MuiButton, ButtonProps, ButtonTypeMap, - Divider, ExtendButtonBaseTypeMap, Grid, LinearProgress, Theme, Toolbar, - useForkRef, } from '@mui/material'; import { OverridableComponent, OverridableTypeMap, OverrideProps, } from '@mui/material/OverridableComponent'; -import { Clear, Delete } from '@mui/icons-material'; +import { Delete } from '@mui/icons-material'; import { AgGrid, AgGridRef } from './AgGrid'; import { GridOptions } from 'ag-grid-community'; import { useIntl } from 'react-intl'; @@ -111,18 +108,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< } = props; const { snackError } = useSnackMessage(); - const agGridRef = useRef>(); - const handleRef = useForkRef(gridRef, agGridRef); - const onReset = useCallback(() => { - agGridRef.current?.aggrid?.api?.resetColumnState?.(); - agGridRef.current?.aggrid?.api?.resetColumnGroupState?.(); - agGridRef.current?.aggrid?.api?.resetQuickFilter?.(); - agGridRef.current?.aggrid?.api?.setFilterModel?.(null); - agGridRef.current?.aggrid?.api?.deselectAll?.(); - agGridRef.current?.aggrid?.api?.resetRowHeights?.(); - agGridRef.current?.aggrid?.api?.clearFocusedCell?.(); - }, []); - //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); const [progress, setProgress] = useStateWithLabel( @@ -214,22 +199,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< }, }} > - } - /> - {toolbarContent && ( - <> - - {toolbarContent} - - )} + {toolbarContent} @@ -240,7 +210,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< {...agGridProps} - ref={handleRef} + ref={gridRef} rowData={data} alwaysShowVerticalScroll={true} onGridReady={refresh} From 94abd858d750fbae9a597e3adbba99dc194015c5 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 16:38:08 +0100 Subject: [PATCH 51/54] review: remove grid action progress feedback --- src/components/Grid/GridTable.tsx | 121 +++++------------------------- src/pages/users/UsersPage.tsx | 4 +- 2 files changed, 22 insertions(+), 103 deletions(-) diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index 3807e53..e1b669e 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -26,8 +26,6 @@ import { ButtonTypeMap, ExtendButtonBaseTypeMap, Grid, - LinearProgress, - Theme, Toolbar, } from '@mui/material'; import { @@ -46,7 +44,7 @@ type FnAction = () => Promise; type CatchError = (reason: E) => R | PromiseLike; type GridTableExposed = { refresh: () => Promise; - queryAction: ( + runningAction: ( action: FnAction, onerror?: CatchError ) => Promise; @@ -58,13 +56,7 @@ export type GridTableRef = AgGridRef< >; export interface GridTableProps - extends Omit< - GridOptions, - | 'rowData' - | 'overlayLoadingTemplate' - | 'loadingOverlayComponent' - | 'loadingOverlayComponentParams' - >, + extends Omit, 'rowData'>, PropsWithChildren<{}> { //accessRef: RefObject>; dataLoader: () => Promise; @@ -110,9 +102,9 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); - const [progress, setProgress] = useStateWithLabel( - 'progress', - null + const [doingAction, setDoingAction] = useStateWithLabel( + 'doing action', + false ); const loadDataAndSave = useCallback( @@ -129,24 +121,11 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< [dataLoader, snackError] ); - const setProgressDisable = useCallback( - () => setProgress(null), - [setProgress] - ); - const setProgressQuery = useCallback( - () => setProgress(Number.NaN), - [setProgress] - ); - const setProgressLoading = useCallback( - () => setProgress(-1), - [setProgress] - ); - - const loadingAction = useCallback( + const runningAction = useCallback( (action: FnAction, onerror?: CatchError): Promise => new Promise((resolve, reject) => { try { - setProgressLoading(); + setDoingAction(true); resolve(); } catch (err) { reject(err); @@ -154,27 +133,12 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< }) .then(action, onerror) .catch(onerror) - .finally(setProgressDisable), - [setProgressDisable, setProgressLoading] - ); - const queryAction: GridTableExposed['queryAction'] = useCallback( - (action, onerror?) => - new Promise((resolve, reject) => { - try { - setProgressQuery(); - resolve(); - } catch (err) { - reject(err); - } - }) - .then(action, onerror) - .catch(onerror) - .finally(setProgressDisable), - [setProgressDisable, setProgressQuery] + .finally(() => setDoingAction(false)), + [setDoingAction] ); const refresh = useCallback( - () => loadingAction(loadDataAndSave), - [loadDataAndSave, loadingAction] + () => runningAction(loadDataAndSave), + [loadDataAndSave, runningAction] ); return ( @@ -183,6 +147,13 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< direction="column" justifyContent="flex-start" alignItems="stretch" + sx={ + doingAction + ? { + '& *': { cursor: 'wait' }, + } + : undefined + } > @@ -204,9 +175,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< - - - {...agGridProps} @@ -219,9 +187,9 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< ({ ...((context ?? {}) as TContext), refresh: refresh, - queryAction: queryAction, + runningAction: runningAction, } as TContext & GridTableExposed), - [context, queryAction, refresh] + [context, runningAction, refresh] )} /> @@ -230,55 +198,6 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< }); export default GridTable; -interface GridProgressProps { - /** - * intended to be a percent number in range [0;1] or null or NaN - */ - progress: null | number; -} - -function GridProgressStyle(theme: Theme) { - // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/AppBar/AppBar.js#L39-L40 - const backgroundColorDefault = - theme.palette.mode === 'light' - ? theme.palette.grey[100] - : theme.palette.grey[900]; - return { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), - }; -} - -const GridProgress: FunctionComponent = (props, context) => { - if (props.progress === null || props.progress === undefined) { - // simulate a disabled state - return ( - - ); - } else if (Number.isNaN(props.progress)) { - // animation from right to left - return ; - } else if (props.progress < 0) { - // animation from left to right - return ( - - ); - } /*if (props.progress >= 0)*/ else { - // animation dashed - return ( - - ); - } -}; - export type GridButtonProps = Omit< ButtonProps, 'children' | 'aria-label' | 'aria-disabled' | 'variant' | 'id' | 'size' diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 93a1eec..f25e2d9 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -107,7 +107,7 @@ const UsersPage: FunctionComponent = () => { const deleteUsers = useCallback( (): Promise | undefined => gridContext - ?.queryAction(() => { + ?.runningAction(() => { let subs = rowsSelection.map((user) => user.sub); return UserAdminSrv.deleteUsers(subs).catch((error) => snackError({ @@ -130,7 +130,7 @@ const UsersPage: FunctionComponent = () => { const addUser = useCallback( (id: string) => { gridContext - ?.queryAction(() => + ?.runningAction(() => UserAdminSrv.addUser(id).catch((error) => snackError({ messageTxt: `Error while adding user "${id}"${ From a1d73f19bdbf75c18231338232b10b0e0adbaed9 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 17:03:53 +0100 Subject: [PATCH 52/54] fixing css --- src/components/Grid/AgGrid.tsx | 5 +++++ src/components/Grid/GridTable.tsx | 9 +++++---- src/pages/users/UsersPage.tsx | 5 ----- src/utils/hooks.ts | 10 ++++++++-- 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/Grid/AgGrid.tsx b/src/components/Grid/AgGrid.tsx index 4ba1464..b2b9ca1 100644 --- a/src/components/Grid/AgGrid.tsx +++ b/src/components/Grid/AgGrid.tsx @@ -16,6 +16,7 @@ import { PropsWithoutRef, ReactNode, RefAttributes, + useId, useImperativeHandle, useMemo, useRef, @@ -30,6 +31,7 @@ import { } from '../../translations/ag-grid/locales'; import deepmerge from '@mui/utils/deepmerge'; import { ColDef, GridOptions } from 'ag-grid-community'; +import { useDebugRender } from '../../utils/hooks'; const messages: Record = { [LANG_FRENCH]: AG_GRID_LOCALE_FR, @@ -69,6 +71,9 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< const intl = useIntl(); const theme = useTheme(); + const id = useId(); + useDebugRender(`ag-grid(${id}) ${props.gridId}`); + const agGridRef = useRef>(null); const agGridRefContent = agGridRef.current; useImperativeHandle( diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index e1b669e..ad65a56 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -160,15 +160,16 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< ({ marginLeft: 1, '& > *': { - marginRight: 1, + // mui's button set it own margin on itself... + marginRight: `${theme.spacing(1)} !important`, '&:last-child': { - marginRight: 0, + marginRight: '0 !important', }, }, - }} + })} > {toolbarContent} diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index f25e2d9..489a2c5 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -164,11 +164,6 @@ const UsersPage: FunctionComponent = () => { return ( - - - - - ref={gridRef} diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index 066d64a..53d9936 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -7,6 +7,11 @@ import { Dispatch, SetStateAction, useDebugValue, useState } from 'react'; +/** + * State with a lebel in DevTools + * @param label + * @param initialValue + */ export function useStateWithLabel( label: string, initialValue: S | (() => S) @@ -24,9 +29,10 @@ export function useStateWithLabel( } export function useDebugRender(label: string) { - if (process.env.NODE_ENV !== 'production') { + // uncomment when you want the output in the console + /*if (process.env.NODE_ENV !== 'production') { label = `${label} render`; console.count?.(label); console.timeStamp?.(label); - } + }*/ } From 22b8e1adb13d0f03e60380de42916967293e2883 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 17:10:50 +0100 Subject: [PATCH 53/54] review --- src/components/App/app-wrapper.tsx | 2 -- src/components/Grid/GridTable.tsx | 50 +++--------------------------- src/pages/users/UsersPage.tsx | 49 ++++++++++++----------------- src/translations/en.json | 1 - src/translations/fr.json | 1 - src/utils/hooks.ts | 23 -------------- 6 files changed, 24 insertions(+), 102 deletions(-) diff --git a/src/components/App/app-wrapper.tsx b/src/components/App/app-wrapper.tsx index 5a02563..a550978 100644 --- a/src/components/App/app-wrapper.tsx +++ b/src/components/App/app-wrapper.tsx @@ -62,7 +62,6 @@ const lightTheme: ThemeOptions = { link: { color: 'blue', }, - mapboxStyle: 'mapbox://styles/mapbox/light-v9', agGridTheme: 'ag-theme-alpine', }; @@ -89,7 +88,6 @@ const darkTheme: ThemeOptions = { link: { color: 'green', }, - mapboxStyle: 'mapbox://styles/mapbox/dark-v9', agGridTheme: 'ag-theme-alpine-dark', }; diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx index ad65a56..02f8347 100644 --- a/src/components/Grid/GridTable.tsx +++ b/src/components/Grid/GridTable.tsx @@ -38,16 +38,9 @@ import { AgGrid, AgGridRef } from './AgGrid'; import { GridOptions } from 'ag-grid-community'; import { useIntl } from 'react-intl'; import { useSnackMessage } from '@gridsuite/commons-ui'; -import { useStateWithLabel } from '../../utils/hooks'; -type FnAction = () => Promise; -type CatchError = (reason: E) => R | PromiseLike; type GridTableExposed = { refresh: () => Promise; - runningAction: ( - action: FnAction, - onerror?: CatchError - ) => Promise; }; export type GridTableRef = AgGridRef< @@ -100,12 +93,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< } = props; const { snackError } = useSnackMessage(); - //TODO refresh on notification change from user-admin-server (add, delete, ...) const [data, setData] = useState(null); - const [doingAction, setDoingAction] = useStateWithLabel( - 'doing action', - false - ); const loadDataAndSave = useCallback( function loadDataAndSave(): Promise { @@ -114,46 +102,17 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< messageTxt: error.message, headerId: 'table.error.retrieve', }); - //setData(null); - //TODO what to do with "old" data? }); }, [dataLoader, snackError] ); - const runningAction = useCallback( - (action: FnAction, onerror?: CatchError): Promise => - new Promise((resolve, reject) => { - try { - setDoingAction(true); - resolve(); - } catch (err) { - reject(err); - } - }) - .then(action, onerror) - .catch(onerror) - .finally(() => setDoingAction(false)), - [setDoingAction] - ); - const refresh = useCallback( - () => runningAction(loadDataAndSave), - [loadDataAndSave, runningAction] - ); - return ( @@ -163,7 +122,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< sx={(theme) => ({ marginLeft: 1, '& > *': { - // mui's button set it own margin on itself... + // mui's button set it own margin on itself... marginRight: `${theme.spacing(1)} !important`, '&:last-child': { marginRight: '0 !important', @@ -182,15 +141,14 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar< ref={gridRef} rowData={data} alwaysShowVerticalScroll={true} - onGridReady={refresh} + onGridReady={loadDataAndSave} context={useMemo( () => ({ ...((context ?? {}) as TContext), - refresh: refresh, - runningAction: runningAction, + refresh: loadDataAndSave, } as TContext & GridTableExposed), - [context, runningAction, refresh] + [context, loadDataAndSave] )} /> diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx index 489a2c5..0d1074f 100644 --- a/src/pages/users/UsersPage.tsx +++ b/src/pages/users/UsersPage.tsx @@ -25,7 +25,6 @@ import { Paper, PaperProps, TextField, - Typography, } from '@mui/material'; import { AccountCircle, PersonAdd } from '@mui/icons-material'; import { @@ -104,24 +103,19 @@ const UsersPage: FunctionComponent = () => { ); const [rowsSelection, setRowsSelection] = useState([]); - const deleteUsers = useCallback( - (): Promise | undefined => - gridContext - ?.runningAction(() => { - let subs = rowsSelection.map((user) => user.sub); - return UserAdminSrv.deleteUsers(subs).catch((error) => - snackError({ - messageTxt: `Error while deleting user "${JSON.stringify( - subs - )}"${error.message && ':\n' + error.message}`, - headerId: 'users.table.error.delete', - }) - ); + const deleteUsers = useCallback((): Promise | undefined => { + let subs = rowsSelection.map((user) => user.sub); + return UserAdminSrv.deleteUsers(subs) + .catch((error) => + snackError({ + messageTxt: `Error while deleting user "${JSON.stringify( + subs + )}"${error.message && ':\n' + error.message}`, + headerId: 'users.table.error.delete', }) - //TODO replace manual refresh by notification in GridTable component - .then(() => gridContext?.refresh?.()), - [gridContext, rowsSelection, snackError] - ); + ) + .then(() => gridContext?.refresh?.()); + }, [gridContext, rowsSelection, snackError]); const deleteUsersDisabled = useMemo( () => rowsSelection.length <= 0, [rowsSelection.length] @@ -129,18 +123,15 @@ const UsersPage: FunctionComponent = () => { const addUser = useCallback( (id: string) => { - gridContext - ?.runningAction(() => - UserAdminSrv.addUser(id).catch((error) => - snackError({ - messageTxt: `Error while adding user "${id}"${ - error.message && ':\n' + error.message - }`, - headerId: 'users.table.error.add', - }) - ) + UserAdminSrv.addUser(id) + .catch((error) => + snackError({ + messageTxt: `Error while adding user "${id}"${ + error.message && ':\n' + error.message + }`, + headerId: 'users.table.error.add', + }) ) - //TODO replace manual refresh by notification in GridTable component .then(() => gridContext?.refresh?.()); }, [gridContext, snackError] diff --git a/src/translations/en.json b/src/translations/en.json index 2793bcf..ddc62de 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -25,7 +25,6 @@ "table.bool.no": "No", "table.bool.unknown": "Unknown", - "users.title": "List of GridSuite users", "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", "users.table.isAdmin.description": "The users is an administrator of GridSuite", diff --git a/src/translations/fr.json b/src/translations/fr.json index 97ff412..8f67967 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -25,7 +25,6 @@ "table.bool.no": "Non", "table.bool.unknown": "Inconnu", - "users.title": "Liste des utilisateurs", "users.table.id.description": "Identifiant de l'utilisateur", "users.table.isAdmin": "Admin", "users.table.isAdmin.description": "L'utilisateur est administrateur de GridSuite", diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index 53d9936..602aa95 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -5,29 +5,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Dispatch, SetStateAction, useDebugValue, useState } from 'react'; - -/** - * State with a lebel in DevTools - * @param label - * @param initialValue - */ -export function useStateWithLabel( - label: string, - initialValue: S | (() => S) -): [S, Dispatch>]; -export function useStateWithLabel( - label: string -): [S | undefined, Dispatch>]; -export function useStateWithLabel( - label: string, - initialValue?: S | (() => S) -): [S, Dispatch>] { - const [value, setValue] = useState(initialValue as S); - useDebugValue(`${label}: ${value}`); - return [value, setValue]; -} - export function useDebugRender(label: string) { // uncomment when you want the output in the console /*if (process.env.NODE_ENV !== 'production') { From 08de67f62d3e1fc91b68198dccedc32d81f55ec3 Mon Sep 17 00:00:00 2001 From: Tristan Chuine Date: Fri, 8 Mar 2024 17:33:52 +0100 Subject: [PATCH 54/54] review --- src/components/Grid/AgGrid.tsx | 19 ++----- src/translations/ag-grid/locales.ts | 77 ++--------------------------- 2 files changed, 6 insertions(+), 90 deletions(-) diff --git a/src/components/Grid/AgGrid.tsx b/src/components/Grid/AgGrid.tsx index b2b9ca1..53c68f5 100644 --- a/src/components/Grid/AgGrid.tsx +++ b/src/components/Grid/AgGrid.tsx @@ -25,15 +25,12 @@ import { Box, useTheme } from '@mui/material'; import { AgGridReact } from 'ag-grid-react'; import { useIntl } from 'react-intl'; import { LANG_FRENCH } from '@gridsuite/commons-ui'; -import { - AG_GRID_LOCALE_FR, - AgGridLocale, -} from '../../translations/ag-grid/locales'; +import { AG_GRID_LOCALE_FR } from '../../translations/ag-grid/locales'; import deepmerge from '@mui/utils/deepmerge'; -import { ColDef, GridOptions } from 'ag-grid-community'; +import { GridOptions } from 'ag-grid-community'; import { useDebugRender } from '../../utils/hooks'; -const messages: Record = { +const messages: Record> = { [LANG_FRENCH]: AG_GRID_LOCALE_FR, }; @@ -107,15 +104,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< [theme.agGridThemeOverride] ); - const defaultColDef = useMemo>( - () => ({ - ...props.defaultColDef, - enableCellChangeFlash: - process.env.REACT_APP_DEBUG_AGGRID === 'true', - }), - [props.defaultColDef] - ); - return ( // wrapping container with theme & size @@ -130,7 +118,6 @@ export const AgGrid: AgGridWithRef = forwardRef(function AgGrid< debug={ process.env.REACT_APP_DEBUG_AGGRID === 'true' || props.debug } - defaultColDef={defaultColDef} reactiveCustomComponents //AG Grid: Using custom components without `reactiveCustomComponents = true` is deprecated. /> diff --git a/src/translations/ag-grid/locales.ts b/src/translations/ag-grid/locales.ts index e12bb96..3ca9139 100644 --- a/src/translations/ag-grid/locales.ts +++ b/src/translations/ag-grid/locales.ts @@ -1,78 +1,7 @@ // from https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/src/content/docs/localisation/_examples/localisation/locale.en.js /* eslint-disable no-template-curly-in-string */ -export type AgGridLocale = Partial>; - -/* eslint-disable prettier/prettier */ -export type AgGridLocaleKeys = - // Set Filter - | 'selectAll' | 'selectAllSearchResults' | 'addCurrentSelectionToFilter' | 'searchOoo' | 'blanks' | 'noMatches' - // Number Filter & Text Filter - | 'filterOoo' | 'equals' | 'notEqual' | 'blank' | 'notBlank' | 'empty' - // Number Filter - | 'lessThan' | 'greaterThan' | 'lessThanOrEqual' | 'greaterThanOrEqual' | 'inRange' | 'inRangeStart' | 'inRangeEnd' - // Text Filter - | 'contains' | 'notContains' | 'startsWith' | 'endsWith' - // Date Filter - | 'dateFormatOoo' | 'before' | 'after' - // Filter Conditions - | 'andCondition' | 'orCondition' - // Filter Buttons - | 'applyFilter' | 'resetFilter' | 'clearFilter' | 'cancelFilter' - // Filter Titles - | 'textFilter' | 'numberFilter' | 'dateFilter' | 'setFilter' - // Group Column Filter - | 'groupFilterSelect' - // Advanced Filter - | 'advancedFilterContains' | 'advancedFilterNotContains' | 'advancedFilterTextEquals' | 'advancedFilterTextNotEqual' | 'advancedFilterStartsWith' | 'advancedFilterEndsWith' | 'advancedFilterBlank' | 'advancedFilterNotBlank' | 'advancedFilterEquals' | 'advancedFilterNotEqual' | 'advancedFilterGreaterThan' | 'advancedFilterGreaterThanOrEqual' | 'advancedFilterLessThan' | 'advancedFilterLessThanOrEqual' | 'advancedFilterTrue' | 'advancedFilterFalse' - | 'advancedFilterAnd' | 'advancedFilterOr' | 'advancedFilterApply' | 'advancedFilterBuilder' | 'advancedFilterValidationMissingColumn' | 'advancedFilterValidationMissingOption' | 'advancedFilterValidationMissingValue' | 'advancedFilterValidationInvalidColumn' | 'advancedFilterValidationInvalidOption' | 'advancedFilterValidationMissingQuote' | 'advancedFilterValidationNotANumber' | 'advancedFilterValidationInvalidDate' | 'advancedFilterValidationMissingCondition' - | 'advancedFilterValidationJoinOperatorMismatch' | 'advancedFilterValidationInvalidJoinOperator' | 'advancedFilterValidationMissingEndBracket' | 'advancedFilterValidationExtraEndBracket' | 'advancedFilterValidationMessage' | 'advancedFilterValidationMessageAtEnd' | 'advancedFilterBuilderTitle' | 'advancedFilterBuilderApply' | 'advancedFilterBuilderCancel' | 'advancedFilterBuilderAddButtonTooltip' | 'advancedFilterBuilderRemoveButtonTooltip' | 'advancedFilterBuilderMoveUpButtonTooltip' - | 'advancedFilterBuilderMoveDownButtonTooltip' | 'advancedFilterBuilderAddJoin' | 'advancedFilterBuilderAddCondition' | 'advancedFilterBuilderSelectColumn' | 'advancedFilterBuilderSelectOption' | 'advancedFilterBuilderEnterValue' | 'advancedFilterBuilderValidationAlreadyApplied' | 'advancedFilterBuilderValidationIncomplete' | 'advancedFilterBuilderValidationSelectColumn' | 'advancedFilterBuilderValidationSelectOption' | 'advancedFilterBuilderValidationEnterValue' - // Side Bar - | 'columns' | 'filters' - // columns tool panel - | 'pivotMode' | 'groups' | 'rowGroupColumnsEmptyMessage' | 'values' | 'valueColumnsEmptyMessage' | 'pivots' | 'pivotColumnsEmptyMessage' - // Header of the Default Group Column - | 'group' - // Row Drag - | 'rowDragRow' | 'rowDragRows' - // Other - | 'loadingOoo' | 'loadingError' | 'noRowsToShow' | 'enabled' - // Menu - | 'pinColumn' | 'pinLeft' | 'pinRight' | 'noPin' | 'valueAggregation' | 'noAggregation' | 'autosizeThiscolumn' | 'autosizeAllColumns' | 'groupBy' | 'ungroupBy' | 'ungroupAll' | 'addToValues' | 'removeFromValues' | 'addToLabels' | 'removeFromLabels' | 'resetColumns' | 'expandAll' | 'collapseAll' | 'copy' | 'ctrlC' | 'ctrlX' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'ctrlV' | 'export' | 'csvExport' | 'excelExport' | 'columnFilter' | 'columnChooser' | 'sortAscending' | 'sortDescending' | 'sortUnSort' - // Enterprise Menu Aggregation and Status Bar - | 'sum' | 'first' | 'last' | 'min' | 'max' | 'none' | 'count' | 'avg' | 'filteredRows' | 'selectedRows' | 'totalRows' | 'totalAndFilteredRows' | 'more' | 'to' | 'of' | 'page' | 'pageLastRowUnknown' | 'nextPage' | 'lastPage' | 'firstPage' | 'previousPage' | 'pageSizeSelectorLabel' | 'footerTotal' - // Pivoting - | 'pivotColumnGroupTotals' - // Enterprise Menu (Charts) - | 'pivotChartAndPivotMode' | 'pivotChart' | 'chartRange' | 'columnChart' | 'groupedColumn' | 'stackedColumn' | 'normalizedColumn' | 'barChart' | 'groupedBar' | 'stackedBar' | 'normalizedBar' | 'pieChart' | 'pie' | 'donut' | 'line' | 'xyChart' | 'scatter' | 'bubble' | 'areaChart' | 'area' | 'stackedArea' | 'normalizedArea' | 'histogramChart' | 'histogramFrequency' | 'polarChart' | 'radarLine' | 'radarArea' | 'nightingale' | 'radialColumn' | 'radialBar' | 'statisticalChart' | 'boxPlot' - | 'rangeBar' | 'rangeArea' | 'hierarchicalChart' | 'treemap' | 'sunburst' | 'specializedChart' | 'waterfall' | 'heatmap' | 'combinationChart' | 'columnLineCombo' | 'AreaColumnCombo' - // Charts - | 'pivotChartTitle' | 'rangeChartTitle' | 'settings' | 'data' | 'format' | 'categories' | 'defaultCategory' | 'series' | 'xyValues' | 'paired' | 'axis' | 'radiusAxis' | 'navigator' | 'color' | 'thickness' | 'preferredLength' | 'xType' | 'automatic' | 'category' | 'number' | 'time' | 'autoRotate' | 'xRotation' | 'yRotation' | 'labelRotation' | 'circle' | 'polygon' | 'orientation' | 'fixed' | 'parallel' | 'perpendicular' | 'radiusAxisPosition' | 'ticks' | 'width' | 'height' | 'length' | 'padding' | 'spacing' - | 'chart' | 'title' | 'titlePlaceholder' | 'background' | 'font' | 'top' | 'right' | 'bottom' | 'left' | 'labels' | 'calloutLabels' | 'sectorLabels' | 'positionRatio' | 'size' | 'shape' | 'minSize' | 'maxSize' | 'legend' | 'position' | 'markerSize' | 'markerStroke' | 'markerPadding' | 'itemSpacing' | 'itemPaddingX' | 'itemPaddingY' | 'layoutHorizontalSpacing' | 'layoutVerticalSpacing' | 'strokeWidth' | 'offset' | 'offsets' | 'tooltips' | 'callout' | 'markers' | 'shadow' | 'blur' | 'xOffset' | 'yOffset' - | 'lineWidth' | 'lineDash' | 'lineDashOffset' | 'normal' | 'bold' | 'italic' | 'boldItalic' | 'predefined' | 'fillOpacity' | 'strokeColor' | 'strokeOpacity' | 'histogramBinCount' | 'connectorLine' | 'seriesItems' | 'seriesItemType' | 'seriesItemPositive' | 'seriesItemNegative' | 'seriesItemLabels' | 'columnGroup' | 'barGroup' | 'pieGroup' | 'lineGroup' | 'scatterGroup' | 'areaGroup' | 'polarGroup' | 'statisticalGroup' | 'hierarchicalGroup' | 'specializedGroup' | 'combinationGroup' | 'groupedColumnTooltip' - | 'stackedColumnTooltip' | 'normalizedColumnTooltip' | 'groupedBarTooltip' | 'stackedBarTooltip' | 'normalizedBarTooltip' | 'pieTooltip' | 'donutTooltip' | 'lineTooltip' | 'groupedAreaTooltip' | 'stackedAreaTooltip' | 'normalizedAreaTooltip' | 'scatterTooltip' | 'bubbleTooltip' | 'histogramTooltip' | 'radialColumnTooltip' | 'radialBarTooltip' | 'radarLineTooltip' | 'radarAreaTooltip' | 'nightingaleTooltip' | 'rangeBarTooltip' | 'rangeAreaTooltip' | 'boxPlotTooltip' | 'treemapTooltip' | 'sunburstTooltip' - | 'waterfallTooltip' | 'heatmapTooltip' | 'columnLineComboTooltip' | 'areaColumnComboTooltip' | 'customComboTooltip' | 'innerRadius' | 'startAngle' | 'endAngle' | 'reverseDirection' | 'groupPadding' | 'seriesPadding' /*| 'group'*/ | 'tile' | 'whisker' | 'cap' | 'capLengthRatio' | 'labelPlacement' | 'inside' | 'outside' | 'noDataToChart' | 'pivotChartRequiresPivotMode' | 'chartSettingsToolbarTooltip' | 'chartLinkToolbarTooltip' | 'chartUnlinkToolbarTooltip' | 'chartDownloadToolbarTooltip' - | 'seriesChartType' | 'seriesType' | 'secondaryAxis' - // ARIA - | 'ariaAdvancedFilterBuilderItem' | 'ariaAdvancedFilterBuilderItemValidation' | 'ariaAdvancedFilterBuilderList' | 'ariaAdvancedFilterBuilderFilterItem' | 'ariaAdvancedFilterBuilderGroupItem' | 'ariaAdvancedFilterBuilderColumn' | 'ariaAdvancedFilterBuilderOption' | 'ariaAdvancedFilterBuilderValueP' | 'ariaAdvancedFilterBuilderJoinOperator' | 'ariaAdvancedFilterInput' | 'ariaChecked' | 'ariaColumn' | 'ariaColumnGroup' | 'ariaColumnFiltered' | 'ariaColumnSelectAll' - | 'ariaDateFilterInput' | 'ariaDefaultListName' | 'ariaFilterColumnsInput' | 'ariaFilterFromValue' | 'ariaFilterInput' | 'ariaFilterList' | 'ariaFilterToValue' | 'ariaFilterValue' | 'ariaFilterMenuOpen' | 'ariaFilteringOperator' | 'ariaHidden' | 'ariaIndeterminate' | 'ariaInputEditor' | 'ariaMenuColumn' | 'ariaFilterColumn' | 'ariaRowDeselect' | 'ariaRowSelectAll' | 'ariaRowToggleSelection' | 'ariaRowSelect' | 'ariaSearch' | 'ariaSortableColumn' | 'ariaToggleVisibility' - | 'ariaToggleCellValue' | 'ariaUnchecked' | 'ariaVisible' | 'ariaSearchFilterValues' | 'ariaPageSizeSelectorLabel' - // ARIA Labels for Drop Zones - | 'ariaRowGroupDropZonePanelLabel' | 'ariaValuesDropZonePanelLabel' | 'ariaPivotDropZonePanelLabel' | 'ariaDropZoneColumnComponentDescription' | 'ariaDropZoneColumnValueItemDescription' | 'ariaDropZoneColumnGroupItemDescription' - // used for aggregate drop zone, format: {aggregation}{ariaDropZoneColumnComponentAggFuncSeparator}{column name} - | 'ariaDropZoneColumnComponentAggFuncSeparator' | 'ariaDropZoneColumnComponentSortAscending' | 'ariaDropZoneColumnComponentSortDescending' - // ARIA Labels for Dialogs - | 'ariaLabelColumnMenu' | 'ariaLabelColumnFilter' | 'ariaLabelCellEditor' | 'ariaLabelDialog' | 'ariaLabelSelectField' | 'ariaLabelRichSelectField' | 'ariaLabelTooltip' | 'ariaLabelContextMenu' | 'ariaLabelSubMenu' | 'ariaLabelAggregationFunction' | 'ariaLabelAdvancedFilterAutocomplete' | 'ariaLabelAdvancedFilterBuilderAddField' | 'ariaLabelAdvancedFilterBuilderColumnSelectField' | 'ariaLabelAdvancedFilterBuilderOptionSelectField' | 'ariaLabelAdvancedFilterBuilderJoinSelectField' - // ARIA Labels for the Side Bar - | 'ariaColumnPanelList' | 'ariaFilterPanelList' - // Number Format (Status Bar, Pagination Panel) - | 'thousandSeparator' | 'decimalSeparator' - // Data types - | 'true' | 'false' | 'invalidDate' | 'invalidNumber' | 'january' | 'february' | 'march' | 'april' | 'may' | 'june' | 'july' | 'august' | 'september' | 'october' | 'november' | 'december'; -/* eslint-enable prettier/prettier */ - -export const AG_GRID_LOCALE_FR: AgGridLocale = { +export const AG_GRID_LOCALE_FR: Record = { // Set Filter selectAll: '(Tout sélectionner)', selectAllSearchResults: '(Sélectionner tout les résultats)', @@ -99,8 +28,8 @@ export const AG_GRID_LOCALE_FR: AgGridLocale = { inRangeEnd: 'À', // Text Filter - contains: 'Contiens', - notContains: 'Ne contiens pas', + contains: 'Contient', + notContains: 'Ne contient pas', startsWith: 'Commence par', endsWith: 'Se termine par',