feat: add csv export to users and group tables (#124)

Signed-off-by: Abdelsalem <[email protected]>

Author: AbdelHedhili

package-lock.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.106.0",
+        "@gridsuite/commons-ui": "0.112.0",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",

package.json

@@ -25,6 +25,8 @@ import {
     LIGHT_THEME,
     loginEn,
     loginFr,
+    tableEn,
+    tableFr,
     NotificationsProvider,
     SnackbarProvider,
     topBarEn,
@@ -119,12 +121,14 @@ const messages: Record<GsLangUser, IntlConfig['messages']> = {
         ...loginEn,
         ...topBarEn,
         ...cardErrorBoundaryEn,
+        ...tableEn,
     },
     fr: {
         ...messages_fr,
         ...loginFr,
         ...topBarFr,
         ...cardErrorBoundaryFr,
+        ...tableFr,
     },
 };
 

src/components/App/app-wrapper.tsx

@@ -36,6 +36,7 @@ export interface GridTableProps<TData>
         PropsWithChildren<{}> {
     //accessRef: RefObject<GridTableRef<TData, TContext>>;
     dataLoader: () => Promise<TData[]>;
+    alignedRightToolbarContent?: ReactNode;
 }
 
 /*
@@ -58,7 +59,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     props: PropsWithChildren<GridTableProps<TData>>,
     gridRef: ForwardedRef<GridTableRef<TData, TContext>>
 ): ReactNode {
-    const { children: toolbarContent, context, dataLoader, ...agGridProps } = props;
+    const { children: toolbarContent, alignedRightToolbarContent, context, dataLoader, ...agGridProps } = props;
     const { snackError } = useSnackMessage();
 
     const [data, setData] = useState<TData[] | null>(null);
@@ -95,6 +96,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                     >
                         {toolbarContent}
                         <Box sx={{ flexGrow: 1 }} />
+                        {alignedRightToolbarContent}
                     </Toolbar>
                 </AppBar>
             </Grid>

src/components/Grid/GridTable.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025, 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 { useMemo, RefObject } from 'react';
+import { CsvExport, GsLang } from '@gridsuite/commons-ui';
+import { IntlShape } from 'react-intl';
+import { GridTableRef } from '../../components/Grid';
+import { ColDef } from 'ag-grid-community';
+
+export function useCsvExport<TData>({
+    gridRef,
+    columns,
+    tableNameId,
+    intl,
+    language,
+}: {
+    gridRef: RefObject<GridTableRef<TData>>;
+    columns: ColDef[];
+    tableNameId: string;
+    intl: IntlShape;
+    language: GsLang;
+}) {
+    return useMemo(
+        () => (
+            <CsvExport
+                columns={columns}
+                tableName={intl.formatMessage({ id: tableNameId })}
+                disabled={false}
+                skipColumnHeaders={false}
+                language={language}
+                exportDataAsCsv={(params) => gridRef?.current?.aggrid?.api?.exportDataAsCsv(params)}
+            />
+        ),
+        [gridRef, columns, intl, language, tableNameId]
+    );
+}

src/pages/common/use-csv-export.tsx

@@ -12,10 +12,13 @@ import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../com
 import { GroupInfos, UserAdminSrv, UserInfos } from '../../services';
 import { ColDef, GetRowIdParams, RowClickedEvent, TextFilterParams } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
+import { useCsvExport } from '../common/use-csv-export';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import MultiChipCellRenderer from '../common/multi-chip-cell-renderer';
 import { useTableSelection } from '../../utils/hooks';
+import { useSelector } from 'react-redux';
+import { AppState } from '../../redux/reducer';
 
 export interface GroupsTableProps {
     gridRef: RefObject<GridTableRef<GroupInfos>>;
@@ -29,6 +32,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
 
     const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection<GroupInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
+    const language = useSelector((state: AppState) => state.computedLanguage);
 
     function getRowId(params: GetRowIdParams<GroupInfos>): string {
         return params.data.name;
@@ -97,6 +101,14 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
         [intl]
     );
 
+    const csvExportComponent = useCsvExport<GroupInfos>({
+        gridRef: props.gridRef,
+        columns,
+        tableNameId: 'appBar.tabs.groups',
+        intl,
+        language,
+    });
+
     return (
         <>
             <GridTable<GroupInfos, {}>
@@ -111,6 +123,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                 onRowClicked={props.onRowClicked}
                 onSelectionChanged={onSelectionChanged}
                 onFilterChanged={onFilterChanged}
+                alignedRightToolbarContent={csvExportComponent}
             >
                 <GridButton
                     labelId="groups.table.toolbar.add.label"

src/pages/groups/groups-table.tsx

@@ -16,6 +16,9 @@ import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import MultiChipCellRenderer from '../common/multi-chip-cell-renderer';
 import { useTableSelection } from '../../utils/hooks';
+import { useSelector } from 'react-redux';
+import { AppState } from '../../redux/reducer';
+import { useCsvExport } from '../common/use-csv-export';
 
 export interface UsersTableProps {
     gridRef: RefObject<GridTableRef<UserInfos>>;
@@ -29,6 +32,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
 
     const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection<UserInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
+    const language = useSelector((state: AppState) => state.computedLanguage);
 
     function getRowId(params: GetRowIdParams<UserInfos>): string {
         return params.data.sub ?? '';
@@ -98,6 +102,14 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
         [intl]
     );
 
+    const csvExportComponent = useCsvExport<UserInfos>({
+        gridRef: props.gridRef,
+        columns,
+        tableNameId: 'appBar.tabs.users',
+        intl,
+        language,
+    });
+
     return (
         <>
             <GridTable<UserInfos, {}>
@@ -112,6 +124,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                 onSelectionChanged={onSelectionChanged}
                 onFilterChanged={onFilterChanged}
                 tooltipShowDelay={1000}
+                alignedRightToolbarContent={csvExportComponent}
             >
                 <GridButton
                     labelId="users.table.toolbar.add.label"