From 468c5ca29a42a1b602de75eb4a2f0aed70dfdf2e Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Wed, 23 Mar 2022 10:02:52 -0400
Subject: [PATCH] fix(explore): make to convert null to N/A in view results
 (#19316)

* fix(explore): make to convert null to N/A in view results

* fix(explore): make to null formatter move before timeFormatter
---
 superset-frontend/src/constants.ts                        | 5 +++++
 .../src/explore/components/DataTableControl/index.tsx     | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
index 2ef1bc793..8377c5b5f 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -102,3 +102,8 @@ export const FAST_DEBOUNCE = 250;
  * Slower debounce delay for inputs with expensive API calls.
  */
 export const SLOW_DEBOUNCE = 500;
+
+/**
+ * Display null as `N/A`
+ */
+export const NULL_DISPLAY = 'N/A';
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index d2befa7b0..c94c07cb7 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -36,6 +36,7 @@ import {
   BOOL_FALSE_DISPLAY,
   BOOL_TRUE_DISPLAY,
   SLOW_DEBOUNCE,
+  NULL_DISPLAY,
 } from 'src/constants';
 import { Radio } from 'src/components/Radio';
 import Icons from 'src/components/Icons';
@@ -49,6 +50,10 @@ import {
   unsetTimeFormattedColumn,
 } from 'src/explore/actions/exploreActions';
 
+export const CellNull = styled('span')`
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+`;
+
 export const CopyButton = styled(Button)`
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
 
@@ -303,6 +308,9 @@ export const useTableColumns = (
                   if (value === false) {
                     return BOOL_FALSE_DISPLAY;
                   }
+                  if (value === null) {
+                    return <CellNull>{NULL_DISPLAY}</CellNull>;
+                  }
                   if (timeFormattedColumnIndex > -1) {
                     return timeFormatter(value);
                   }