fix: properly render booleans in FilterBox and explore page data preview (#12116)

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],
   );

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>
   );
 };