FDG-11841 Mythos findings: FIR-38619

src/components/data-preview/data-preview-data-table/data-preview-data-table.spec.js

@@ -669,7 +669,7 @@ describe('react-table', () => {
       );
       expect(smallTableDownloadData.getState().csv).toEqual([
         ['Record Date', 'String Value', 'String Value with Commas'],
-        ['2023-07-12', 'just a normal string', '"comma, separated, list"'],
+        ['2023-07-12', 'just a normal string', 'comma, separated, list'],
       ]);
     });
   });

src/components/data-preview/data-preview-data-table/data-preview-data-table.tsx

@@ -1,14 +1,15 @@
 import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
 import { IDataTableProps } from '../../../models/IDataTableProps';
 import { smallTableDownloadData } from '../../../recoil/smallTableDownloadData';
-import { constructDateHeader, getSortedColumnsData } from '../../dtg-table/data-table-helper';
+import { getSortedColumnsData } from '../../dtg-table/data-table-helper';
 import { json2xml } from 'xml-js';
 import { overlayContainerNoFooter, rawDataTableContainer } from './data-preview-data-table.module.scss';
 import TableFooter from '../../table-components/table-footer/table-footer';
 import DataPreviewDataTableBody from './data-preview-data-table-body/data-preview-data-table-body';
 import DataPreviewDataTableHeader from './data-preview-data-table-header/data-preview-data-table-header';
 import { DataTableContext } from '../data-preview-context';
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, Table, useReactTable } from '@tanstack/react-table';
+import { setCsvDownload } from '../../table-components/helpers/data-download-helper';
 
 const DataPreviewDataTable: FunctionComponent<IDataTableProps> = ({
   setTableColumnSortData,
@@ -155,7 +156,7 @@ const DataPreviewDataTable: FunctionComponent<IDataTableProps> = ({
     }
 
     if (!table.getSortedRowModel()?.flatRows[0]?.original.columnName) {
-      let downloadData = [];
+      const downloadData = [];
       const downloadHeaders = [];
       const downloadHeaderKeys = [];
       table.getHeaderGroups()[0].headers.forEach(header => {
@@ -181,20 +182,7 @@ const DataPreviewDataTable: FunctionComponent<IDataTableProps> = ({
       };
       setSmallTableJSONData(JSON.stringify({ data: downloadData }));
       setSmallTableXMLData(json2xml(JSON.stringify(xmlData), { compact: true }));
-      downloadData = downloadData.map(entry => {
-        const dataWithTextQualifiers = [];
-        Object.values(entry).forEach(val => {
-          const stringValue = String(val ?? '');
-          dataWithTextQualifiers.push(stringValue.includes(',') ? `"${stringValue}"` : stringValue);
-        });
-        return dataWithTextQualifiers;
-      });
-      downloadData.unshift(downloadHeaders);
-      if (hasDownloadTimestamp) {
-        const dateHeader = constructDateHeader(datasetName, dateRange);
-        downloadData.unshift(dateHeader);
-      }
-      setSmallTableCSVData(downloadData);
+      setCsvDownload(downloadData, downloadHeaders, setSmallTableCSVData, hasDownloadTimestamp, datasetName, dateRange);
     }
   }, [columnVisibility, table.getSortedRowModel(), table.getVisibleFlatColumns()]);
 

src/components/data-preview/data-preview-filter-section/data-preview-download-wrapper/download-button/csv-direct-download/csv-direct-download.spec.js

@@ -9,7 +9,7 @@ describe('CSV Direct Download Button', () => {
   it('renders a download link', () => {
     const { getByRole } = render(<CsvDirectDownload filename="filename" downloadData={mockCSVData} handleClick={jest.fn()} chidren={<>CSV</>} />);
     const downloadLink = getByRole('link', { hidden: true });
-    expect(downloadLink).toHaveAttribute('href', 'data:text/csv;charset=utf-8,header 1,header 2');
+    expect(downloadLink).toHaveAttribute('href', 'data:text/csv;charset=utf-8,\ufeff"header 1","header 2"');
   });
 
   it('direct CSV download with timestamp', () => {

src/components/data-preview/data-preview-filter-section/data-preview-download-wrapper/download-button/csv-direct-download/csv-direct-download.tsx

@@ -40,7 +40,6 @@ const CsvDirectDownload: FunctionComponent = ({ filename, downloadData, handleCl
         onClick={handleClick}
         ref={ref}
         aria-hidden={downloadTimestamp}
-        enclosingCharacter=""
         tabIndex={downloadTimestamp ? -1 : 0}
       >
         {!downloadTimestamp && children}

src/components/download-wrapper/download-item-button/download-item-button.jsx

@@ -104,7 +104,6 @@ const DownloadItemButton = ({
                 onClick={() => clickFunction(true)}
                 ref={ref}
                 aria-hidden={true}
-                enclosingCharacter=""
                 tabIndex={-1}
               />
             </>
@@ -115,7 +114,6 @@ const DownloadItemButton = ({
               data={smallTableCSVData}
               filename={downloadName + '.csv'}
               onClick={() => clickFunction(true)}
-              enclosingCharacter=""
             >
               {children}
             </CSVLink>

src/components/dtg-table/dtg-table.spec.js

@@ -722,7 +722,7 @@ describe('DTG Table Nested Table Detail View', () => {
       );
       expect(smallTableDownloadData.getState().csv).toEqual([
         ['Record Date', 'String Value', 'String Value with Commas'],
-        ['2023-07-12', 'just a normal string', '"comma, separated, list"'],
+        ['2023-07-12', 'just a normal string', 'comma, separated, list'],
       ]);
     });
 

src/components/table-components/helpers/data-download-helper.js

@@ -25,16 +25,20 @@ export const getDownloadData = (tableRowModel, downloadHeaderKeys) => {
   return downloadData;
 };
 
+const csvFormulaaTrigger = /^[=+\-@\t\r]/;
+
+export const escapedCsvCell = value => {
+  let stringValue = String(value ?? '');
+
+  if (csvFormulaaTrigger.test(stringValue) && isNaN(Number(stringValue))) {
+    stringValue = `'${stringValue}`;
+  }
+  return stringValue.replace(/"/g, '""');
+};
+
 export const getDataWithTextQualifiers = downloadData => {
   if (downloadData) {
-    return downloadData.map(entry => {
-      const dataWithTextQualifiers = [];
-      Object.values(entry).forEach(val => {
-        const stringValue = String(val ?? '');
-        dataWithTextQualifiers.push(stringValue.includes(',') ? `"${stringValue}"` : stringValue);
-      });
-      return dataWithTextQualifiers;
-    });
+    return downloadData.map(entry => Object.values(entry).map(escapedCsvCell));
   }
 };