From 88af85ac53b62cef9b95fb2f7a069bd460d19c29 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Mon, 12 Oct 2020 21:43:30 -0700
Subject: [PATCH] fix: show TIME COLUMN options in dashboard (#11210)

* fix: show TIME COLUMN options in dashboard

* add unit test
---
 .../explore/components/FilterBox_spec.jsx     | 29 ++++++++++++++++++-
 superset-frontend/src/explore/controls.jsx    |  6 ++--
 .../visualizations/FilterBox/FilterBox.jsx    |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx b/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx
index bc3362e8dd..5ee68e79a5 100644
--- a/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/FilterBox_spec.jsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import FilterBox from 'src/visualizations/FilterBox/FilterBox';
+import SelectControl from 'src/explore/components/controls/SelectControl';
 
 describe('FilterBox', () => {
   it('should only add defined non-predefined options to filtersChoices', () => {
@@ -58,4 +59,30 @@ describe('FilterBox', () => {
     inst.setState({ selectedValues: { name: 'James' } });
     expect(inst.props.filtersChoices.name.length).toEqual(3);
   });
+
+  it('should support granularity_sqla options', () => {
+    const wrapper = mount(
+      <FilterBox
+        chartId={1001}
+        datasource={{
+          id: 1,
+          columns: [],
+          databases: {},
+          granularity_sqla: [
+            ['created_on', 'created_on'],
+            ['changed_on', 'changed_on'],
+          ],
+        }}
+        showSqlaTimeColumn
+        instantFiltering
+      />,
+    );
+
+    expect(wrapper.find(SelectControl).props().choices).toEqual(
+      expect.arrayContaining([
+        ['created_on', 'created_on'],
+        ['changed_on', 'changed_on'],
+      ]),
+    );
+  });
 });
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index 0358161442..2b7b9a57a1 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -316,12 +316,12 @@ export const controls = {
     mapStateToProps: state => {
       const props = {};
       if (state.datasource) {
-        props.options = state.datasource.columns.filter(c => c.is_dttm);
+        props.choices = state.datasource.granularity_sqla;
         props.default = null;
         if (state.datasource.main_dttm_col) {
           props.default = state.datasource.main_dttm_col;
-        } else if (props.options && props.options.length > 0) {
-          props.default = props.options[0].column_name;
+        } else if (props.choices && props.choices.length > 0) {
+          props.default = props.choices[0].column_name;
         }
       }
       return props;
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
index a5d33f93a4..7c315cb730 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -406,7 +406,7 @@ class FilterBox extends React.Component {
   }
 
   renderFilters() {
-    const { filtersFields, chartId } = this.props;
+    const { filtersFields = [], chartId } = this.props;
     return filtersFields.map(filterConfig => {
       const { label, key } = filterConfig;
       return (