From 4d6a41842dcaaa26c1d097f3360b0fe7a9442afc Mon Sep 17 00:00:00 2001
From: Erik Ritter <erik.ritter@airbnb.com>
Date: Mon, 10 Jan 2022 10:07:59 -0800
Subject: [PATCH] fix: null dates in table chart (#17974)

---
 .../plugins/plugin-chart-table/src/utils/formatValue.ts   | 8 +++++++-
 .../plugins/plugin-chart-table/test/TableChart.test.tsx   | 3 ++-
 .../plugins/plugin-chart-table/test/testData.ts           | 7 +++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
index c5b9b519f471b..327e48ab3d89c 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
@@ -23,6 +23,7 @@ import {
   getNumberFormatter,
 } from '@superset-ui/core';
 import { DataColumnMeta } from '../types';
+import DateWithFormatter from './DateWithFormatter';
 
 const xss = new FilterXSS({
   whiteList: {
@@ -62,7 +63,12 @@ function formatValue(
     return [false, ''];
   }
   // render null as `N/A`
-  if (value === null) {
+  if (
+    value === null ||
+    // null values in temporal columns are wrapped in a Date object, so make sure we
+    // handle them here too
+    (value instanceof DateWithFormatter && value.input === null)
+  ) {
     return [false, 'N/A'];
   }
   if (formatter) {
diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
index 3d4042b991ce7..bcca124a50c9c 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
@@ -76,7 +76,7 @@ describe('plugin-chart-table', () => {
       );
       tree = wrap.render(); // returns a CheerioWrapper with jQuery-like API
       const cells = tree.find('td');
-      expect(cells).toHaveLength(8);
+      expect(cells).toHaveLength(12);
       expect(cells.eq(0).text()).toEqual('2020-01-01 12:34:56');
       expect(cells.eq(1).text()).toEqual('Michael');
       // number is not in `metrics` list, so it should output raw value
@@ -85,6 +85,7 @@ describe('plugin-chart-table', () => {
       // should not render column with `.` in name as `undefined`
       expect(cells.eq(3).text()).toEqual('foo');
       expect(cells.eq(6).text()).toEqual('2467');
+      expect(cells.eq(8).text()).toEqual('N/A');
     });
 
     it('render advanced data', () => {
diff --git a/superset-frontend/plugins/plugin-chart-table/test/testData.ts b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
index dd411c932f073..127ac08a3f4c1 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/testData.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
@@ -111,6 +111,13 @@ const basic: TableChartProps = {
           '%pct_nice': 0.00001,
           'abc.com': 'bar',
         },
+        {
+          __timestamp: null,
+          name: 'Maria',
+          sum__num: 12342,
+          '%pct_nice': 0.341,
+          'abc.com': 'baz',
+        },
       ],
     },
   ],