feat: add csv export components (#802)

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

Author: AbdelHedhili

src/components/csvDownloader/csv-export.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 { useCallback } from 'react';
+import { CsvExportProps } from './csv-export.type';
+import { useCsvExport } from './use-csv-export';
+import { ExportCsvButton } from './export-csv-button';
+
+export function CsvExport({
+    gridRef,
+    columns,
+    tableNamePrefix = '',
+    tableName,
+    disabled,
+    skipColumnHeaders = false,
+    language,
+    exportDataAsCsv,
+}: CsvExportProps): JSX.Element {
+    const { downloadCSVData } = useCsvExport();
+    const download = useCallback(() => {
+        downloadCSVData({ gridRef, columns, tableName, tableNamePrefix, skipColumnHeaders, language, exportDataAsCsv });
+    }, [downloadCSVData, gridRef, columns, tableName, tableNamePrefix, skipColumnHeaders, language, exportDataAsCsv]);
+
+    return <ExportCsvButton disabled={disabled} onClick={download} />;
+}

src/components/csvDownloader/csv-export.type.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { RefObject } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import { ColDef, CsvExportParams } from 'ag-grid-community';
+import { GsLang } from '../../utils';
+
+export type CsvDownloadProps = {
+    gridRef: RefObject<AgGridReact>;
+    columns: ColDef[];
+    tableName: string;
+    tableNamePrefix?: string;
+    skipColumnHeaders?: boolean;
+    language: GsLang;
+    exportDataAsCsv: (params?: CsvExportParams) => void;
+};
+
+export type CsvExportProps = CsvDownloadProps & {
+    disabled: boolean;
+};

src/components/csvDownloader/export-csv-button.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { Box, CircularProgress, IconButton } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { GetApp as GetAppIcon, Check as CheckIcon } from '@mui/icons-material';
+
+export interface ExportButtonProps {
+    disabled?: boolean;
+    onClick: () => void;
+    isDownloadLoading?: boolean; // used mostly for previous Edge versions where download from backend file takes some time to begin
+    isDownloadSuccessful?: boolean;
+}
+
+export function ExportCsvButton({
+    onClick,
+    disabled = false,
+    isDownloadLoading: isCsvLoading = false,
+    isDownloadSuccessful = false,
+}: Readonly<ExportButtonProps>) {
+    return (
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <FormattedMessage id="MuiVirtualizedTable/exportCSV" />
+            <Box sx={{ position: 'relative' }}>
+                <IconButton disabled={disabled} aria-label="exportCSVButton" onClick={onClick}>
+                    {isDownloadSuccessful ? <CheckIcon /> : <GetAppIcon />}
+                </IconButton>
+                {isCsvLoading && (
+                    <CircularProgress
+                        size={30}
+                        // style from MUI documentation to wrap icon with circular progress
+                        sx={{
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            marginTop: '-15px',
+                            marginLeft: '-15px',
+                        }}
+                    />
+                )}
+            </Box>
+        </Box>
+    );
+}

src/components/csvDownloader/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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/.
+ */
+
+export * from './csv-export';
+export * from './csv-export.type';
+export * from './export-csv-button';
+export * from './use-csv-export';

src/components/csvDownloader/use-csv-export.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 { useCallback } from 'react';
+import { ProcessCellForExportParams, ProcessHeaderForExportParams } from 'ag-grid-community';
+import { useIntl, IntlShape } from 'react-intl';
+import { CsvDownloadProps } from './csv-export.type';
+import { LANG_FRENCH } from '../../utils';
+
+const NA_VALUE = 'N/A';
+
+const formatNAValue = (value: string, intl: IntlShape): string => {
+    return value === NA_VALUE ? intl.formatMessage({ id: 'export/undefined' }) : value;
+};
+
+export const useCsvExport = () => {
+    const intl = useIntl();
+
+    const getCSVFilename = useCallback((tableName: string) => {
+        return tableName
+            .trim()
+            .replace(/[\\/:"*?<>|\s]/g, '-') // Removes the filesystem sensible characters
+            .substring(0, 27); // Best practice : limits the filename size to 31 characters (27+'.csv')
+    }, []);
+
+    const downloadCSVData = useCallback(
+        (props: CsvDownloadProps) => {
+            const hasColId = (colId: string | undefined): colId is string => {
+                return colId !== undefined;
+            };
+
+            const processCell = (params: ProcessCellForExportParams): string => {
+                if (params.column.getColId() === 'limitName') {
+                    return formatNAValue(params.value, intl);
+                }
+
+                // If the language is in French, we change the decimal separator
+                if (props.language === LANG_FRENCH && typeof params.value === 'number') {
+                    return params.value.toString().replace('.', ',');
+                }
+                return params.value;
+            };
+            const prefix = props.tableNamePrefix ?? '';
+
+            props.exportDataAsCsv({
+                suppressQuotes: false,
+                columnSeparator: props.language === LANG_FRENCH ? ';' : ',',
+                columnKeys: props.columns.map((col) => col.colId).filter(hasColId),
+                skipColumnHeaders: props.skipColumnHeaders,
+                processHeaderCallback: (params: ProcessHeaderForExportParams) =>
+                    params.column.getColDef().headerComponentParams?.displayName ??
+                    params.column.getColDef().headerName ??
+                    params.column.getColId(),
+                fileName: prefix.concat(getCSVFilename(props.tableName)),
+                processCellCallback: processCell,
+            });
+        },
+        [getCSVFilename, intl]
+    );
+
+    return { downloadCSVData };
+};

src/components/index.ts

@@ -8,6 +8,7 @@ export * from './announcement';
 export * from './authentication';
 export * from './cardErrorBoundary';
 export * from './checkBoxList';
+export * from './csvDownloader';
 export * from './customAGGrid';
 export * from './dialogs';
 export * from './directoryItemSelector/DirectoryItemSelector';

src/translations/en/tableEn.ts

@@ -7,4 +7,5 @@
 
 export const tableEn = {
     'MuiVirtualizedTable/exportCSV': 'Download CSV',
+    'export/undefined': 'Undefined',
 };

src/translations/fr/tableFr.ts

@@ -7,4 +7,5 @@
 
 export const tableFr = {
     'MuiVirtualizedTable/exportCSV': 'Télécharger un CSV',
+    'export/undefined': 'Non défini',
 };