Merge pull request #3848 from simson1/fix-table-card

fix(tablecard): file download timestamp mismatch from ui
carbon-design-system · Mar 18, 2024 · edec480 · edec480
2 parents 04e4965 + b45d2b2
commit edec480
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/packages/react/src/components/TableCard/TableCard.jsx b/packages/react/src/components/TableCard/TableCard.jsx
@@ -300,6 +300,24 @@ const TableCard = ({
         .filter((i) => !isNil(i)),
     [columns]
   );
+
+  const updatedTableData = useMemo(() => {
+    return tableData.map((row) => {
+      const { values } = row;
+      Object.keys(values).forEach((column) => {
+        if (filteredTimestampColumns.includes(column) && !isEditable) {
+          values[column] = values[column]
+            ? dayjs(values[column]).format(defaultDateFormatPattern)
+            : '';
+        }
+      });
+      return {
+        ...row,
+        values,
+      };
+    });
+  }, [defaultDateFormatPattern, filteredTimestampColumns, isEditable, tableData]);
+
   const columnsToRender = useMemo(
     () =>
       newColumns
@@ -320,19 +338,13 @@ const TableCard = ({
                 { value } // default render function is to handle timestamp
               ) =>
                 // if it's a timestamp column type make sure to format it
-                filteredTimestampColumns.includes(i.dataSourceId) && !isEditable
-                  ? dayjs(value).format(defaultDateFormatPattern)
-                  : isNil(value)
-                  ? ''
-                  : value.toString(),
+                isNil(value) ? '' : value.toString(),
         }))
         .concat(hasActionColumn ? actionColumn : []),
     [
       actionColumn,
       defaultDateFormatPattern,
-      filteredTimestampColumns,
       hasActionColumn,
-      isEditable,
       mergedI18n.defaultFilterStringPlaceholdText,
       newColumns,
       newSize,
@@ -377,7 +389,7 @@ const TableCard = ({
       isEditable
         ? generateTableSampleValues(id, columns)
         : hasActionColumn || filteredPrecisionColumns.length || thresholds
-        ? tableData.map((i) => {
+        ? updatedTableData.map((i) => {
             // if has custom action
             const action = hasActionColumn ? { actionColumn: i.actions || [] } : null;
 
@@ -426,15 +438,15 @@ const TableCard = ({
               isSelectable: false,
             };
           })
-        : tableData,
+        : updatedTableData,
     [
       isEditable,
       id,
       columns,
       hasActionColumn,
       filteredPrecisionColumns,
       thresholds,
-      tableData,
+      updatedTableData,
       thresholdSeverityLabelsMap,
       locale,
     ]
@@ -444,7 +456,7 @@ const TableCard = ({
   const expandedRowsFormatted = useMemo(
     () =>
       expandedRows && expandedRows.length
-        ? tableData.map((dataItem) => {
+        ? updatedTableData.map((dataItem) => {
             // filter the data keys and find the expandaded row exist for that key
             const expandedItem = Object.keys(dataItem.values)
               .map((value) => expandedRows.filter((item) => item.id === value)[0])
@@ -489,11 +501,7 @@ const TableCard = ({
                               {item?.label ? item.label : '--'}
                             </p>
                             <span key={`${item.id}-value`}>
-                              {item
-                                ? item.type === 'TIMESTAMP'
-                                  ? dayjs(dataItem.values[item.id]).format(defaultDateFormatPattern)
-                                  : dataItem.values[item.id]
-                                : null}
+                              {item ? dataItem.values[item.id] : null}
                             </span>
                           </>
                         )}
@@ -513,7 +521,7 @@ const TableCard = ({
             };
           })
         : [],
-    [defaultDateFormatPattern, expandedRows, others.cardVariables, tableData]
+    [expandedRows, others.cardVariables, updatedTableData]
   );
 
   // is columns recieved is different from the columnsToRender show card expand

diff --git a/packages/react/src/components/TableCard/TableCard.test.jsx b/packages/react/src/components/TableCard/TableCard.test.jsx
@@ -241,7 +241,7 @@ describe('TableCard', () => {
       row: {
         alert: 'AHI005 Asset failure',
         count: 1.2039201932,
-        hour: 1563877570000,
+        hour: '07/23/2019 05:26',
         long_description: 'long description for a given event payload',
         pressure: 0,
       },
@@ -1008,7 +1008,7 @@ describe('TableCard', () => {
 
     userEvent.click(screen.getByRole('button', { name: /download/i }));
     expect(fileDownload).toHaveBeenCalledWith(
-      `alert,count,hour,long_description,pressure\nAHI005 Asset failure,1.2039201932,1563877570000,long description for a given event payload,0\nAHI003 process need to optimize adjust X variables,1.10329291,1563873970000,long description for a given event payload,2\n`,
+      `alert,count,hour,long_description,pressure\nAHI005 Asset failure,1.2039201932,07/23/2019 05:26,long description for a given event payload,0\nAHI003 process need to optimize adjust X variables,1.10329291,07/23/2019 04:26,long description for a given event payload,2\n`,
       'Open Alerts.csv'
     );
   });