From 8e625e0a6490e1433e9d8e001b05c43e000f8ded Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 18 Dec 2020 10:40:56 -0800
Subject: [PATCH] fix: properly render booleans in FilterBox and explore page
 data preview (#12116)

---
 superset-frontend/src/constants.ts            |  3 ++
 .../explore/components/DataTableControl.tsx   | 28 +++++++++++--
 .../explore/components/ExploreChartPanel.jsx  | 40 +++++++++++--------
 .../visualizations/FilterBox/FilterBox.jsx    | 10 ++++-
 4 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
index a1ce0ae4f4..ab19f14334 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -19,3 +19,6 @@
 export const DATETIME_WITH_TIME_ZONE = 'YYYY-MM-DD HH:mm:ssZ';
 
 export const TIME_WITH_MS = 'HH:mm:ss.SSS';
+
+export const BOOL_TRUE_DISPLAY = 'True';
+export const BOOL_FALSE_DISPLAY = 'False';
diff --git a/superset-frontend/src/explore/components/DataTableControl.tsx b/superset-frontend/src/explore/components/DataTableControl.tsx
index 52619f37d7..cae88b0a27 100644
--- a/superset-frontend/src/explore/components/DataTableControl.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl.tsx
@@ -19,7 +19,10 @@
 import React, { useMemo } from 'react';
 import { styled, t } from '@superset-ui/core';
 import { FormControl } from 'react-bootstrap';
+import { Column } from 'react-table';
 import debounce from 'lodash/debounce';
+
+import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
 import Button from 'src/components/Button';
 import {
   applyFormattingToTabularData,
@@ -95,11 +98,30 @@ export const useFilteredTableData = (
     );
   }, [data, filterText]);
 
-export const useTableColumns = (data?: Record<string, any>[]) =>
+export const useTableColumns = (
+  data?: Record<string, any>[],
+  moreConfigs?: { [key: string]: Partial<Column> },
+) =>
   useMemo(
     () =>
       data?.length
-        ? Object.keys(data[0]).map(key => ({ accessor: key, Header: key }))
+        ? Object.keys(data[0]).map(
+            key =>
+              ({
+                accessor: key,
+                Header: key,
+                Cell: ({ value }) => {
+                  if (value === true) {
+                    return BOOL_TRUE_DISPLAY;
+                  }
+                  if (value === false) {
+                    return BOOL_FALSE_DISPLAY;
+                  }
+                  return String(value);
+                },
+                ...moreConfigs?.[key],
+              } as Column),
+          )
         : [],
-    [data],
+    [data, moreConfigs],
   );
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 0c608ea921..088ee1a0fb 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -235,28 +235,34 @@ const ExploreChartPanel = props => {
     };
   };
 
+  const panelBody = <div className="panel-body">{renderChart()}</div>;
+
   return (
     <Styles className="panel panel-default chart-container">
       <div className="panel-heading" ref={panelHeadingRef}>
         {header}
       </div>
-      <Split
-        sizes={splitSizes}
-        minSize={MIN_SIZES}
-        direction="vertical"
-        gutterSize={gutterHeight}
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
-        elementStyle={elementStyle}
-      >
-        <div className="panel-body">{renderChart()}</div>
-        <DataTablesPane
-          queryFormData={props.chart.latestQueryFormData}
-          tableSectionHeight={tableSectionHeight}
-          onCollapseChange={onCollapseChange}
-          displayBackground={displaySouthPaneBackground}
-        />
-      </Split>
+      {props.vizType === 'filter_box' ? (
+        panelBody
+      ) : (
+        <Split
+          sizes={splitSizes}
+          minSize={MIN_SIZES}
+          direction="vertical"
+          gutterSize={gutterHeight}
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd}
+          elementStyle={elementStyle}
+        >
+          {panelBody}
+          <DataTablesPane
+            queryFormData={props.chart.latestQueryFormData}
+            tableSectionHeight={tableSectionHeight}
+            onCollapseChange={onCollapseChange}
+            displayBackground={displaySouthPaneBackground}
+          />
+        </Split>
+      )}
     </Styles>
   );
 };
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
index 08e315598d..0a382c5003 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -24,8 +24,8 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
 import Button from 'src/components/Button';
 import { t, styled, SupersetClient } from '@superset-ui/core';
 
+import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
 import FormLabel from 'src/components/FormLabel';
-
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlRow from 'src/explore/components/ControlRow';
 import Control from 'src/explore/components/Control';
@@ -216,7 +216,13 @@ class FilterBox extends React.PureComponent {
       const color = 'lightgrey';
       const backgroundImage = `linear-gradient(to right, ${color}, ${color} ${perc}%, rgba(0,0,0,0) ${perc}%`;
       const style = { backgroundImage };
-      return { value: opt.id, label: opt.id, style };
+      let label = opt.id;
+      if (label === true) {
+        label = BOOL_TRUE_DISPLAY;
+      } else if (label === false) {
+        label = BOOL_FALSE_DISPLAY;
+      }
+      return { value: opt.id, label, style };
     });
   }