From 77bc36ffbaf180d88c46a24188c88b3705c2c96a Mon Sep 17 00:00:00 2001
From: Michelle Thomas <michelle.q.thomas@gmail.com>
Date: Mon, 29 Oct 2018 15:20:39 -0700
Subject: [PATCH 1/2] Fix date filter control dropdown default state

---
 .../components/controls/DateFilterControl.jsx       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/superset/assets/src/explore/components/controls/DateFilterControl.jsx b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
index 2c19b830b7848..eb5214e0ccae2 100644
--- a/superset/assets/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
@@ -157,17 +157,22 @@ export default class DateFilterControl extends React.Component {
     this.setTypeCustomStartEnd = this.setTypeCustomStartEnd.bind(this);
     this.toggleCalendar = this.toggleCalendar.bind(this);
   }
-  componentDidMount() {
+
+  componentWillMount() {
     const value = this.props.value;
     if (value.indexOf(SEPARATOR) >= 0) {
-      this.state = { ...this.state, ...getStateFromSeparator(value) };
+      this.setState({ ...this.state, ...getStateFromSeparator(value) });
     } else if (COMMON_TIME_FRAMES.indexOf(value) >= 0) {
-      this.state = { ...this.state, ...getStateFromCommonTimeFrame(value) };
+      this.setState({ ...this.state, ...getStateFromCommonTimeFrame(value) });
     } else {
-      this.state = { ...this.state, ...getStateFromCustomRange(value) };
+      this.setState({ ...this.state, ...getStateFromCustomRange(value) });
     }
+  }
+
+  componentDidMount() {
     document.addEventListener('click', this.handleClick);
   }
+
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClick);
   }

From 3fb0f658f14942eac17e2bac37721f6eedb3f357 Mon Sep 17 00:00:00 2001
From: Michelle Thomas <michelle.q.thomas@gmail.com>
Date: Mon, 29 Oct 2018 17:07:06 -0700
Subject: [PATCH 2/2] Keep track of selected tab

---
 .../components/controls/DateFilterControl.jsx | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/superset/assets/src/explore/components/controls/DateFilterControl.jsx b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
index eb5214e0ccae2..c0729463359d6 100644
--- a/superset/assets/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
@@ -29,6 +29,10 @@ const TYPES = Object.freeze({
   CUSTOM_START_END: 'custom_start_end',
   CUSTOM_RANGE: 'custom_range',
 });
+const TABS = Object.freeze({
+  DEFAULTS: 'defaults',
+  CUSTOM: 'custom',
+});
 const RELATIVE_TIME_OPTIONS = Object.freeze({
   LAST: 'Last',
   NEXT: 'Next',
@@ -78,12 +82,13 @@ function isValidMoment(s) {
 
 function getStateFromSeparator(value) {
   const [since, until] = value.split(SEPARATOR, 2);
-  return { since, until, type: TYPES.CUSTOM_START_END };
+  return { since, until, type: TYPES.CUSTOM_START_END, tab: TABS.CUSTOM };
 }
 
 function getStateFromCommonTimeFrame(value) {
   const units = value.split(' ')[1] + 's';
   return {
+    tab: TABS.DEFAULTS,
     type: TYPES.DEFAULTS,
     common: value,
     since: moment().startOf('day').subtract(1, units).format(MOMENT_FORMAT),
@@ -109,6 +114,7 @@ function getStateFromCustomRange(value) {
     since = moment().startOf('day').format(MOMENT_FORMAT);
   }
   return {
+    tab: TABS.CUSTOM,
     type: TYPES.CUSTOM_RANGE,
     common: null,
     rel,
@@ -124,6 +130,7 @@ export default class DateFilterControl extends React.Component {
     super(props);
     this.state = {
       type: TYPES.DEFAULTS,
+      tab: TABS.DEFAULTS,
 
       // default time frames, for convenience
       common: COMMON_TIME_FRAMES[0],
@@ -145,6 +152,15 @@ export default class DateFilterControl extends React.Component {
       untilViewMode: 'days',
     };
 
+    const value = props.value;
+    if (value.indexOf(SEPARATOR) >= 0) {
+      this.state = { ...this.state, ...getStateFromSeparator(value) };
+    } else if (COMMON_TIME_FRAMES.indexOf(value) >= 0) {
+      this.state = { ...this.state, ...getStateFromCommonTimeFrame(value) };
+    } else {
+      this.state = { ...this.state, ...getStateFromCustomRange(value) };
+    }
+
     this.close = this.close.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.isValidSince = this.isValidSince.bind(this);
@@ -156,17 +172,7 @@ export default class DateFilterControl extends React.Component {
     this.setTypeCustomRange = this.setTypeCustomRange.bind(this);
     this.setTypeCustomStartEnd = this.setTypeCustomStartEnd.bind(this);
     this.toggleCalendar = this.toggleCalendar.bind(this);
-  }
-
-  componentWillMount() {
-    const value = this.props.value;
-    if (value.indexOf(SEPARATOR) >= 0) {
-      this.setState({ ...this.state, ...getStateFromSeparator(value) });
-    } else if (COMMON_TIME_FRAMES.indexOf(value) >= 0) {
-      this.setState({ ...this.state, ...getStateFromCommonTimeFrame(value) });
-    } else {
-      this.setState({ ...this.state, ...getStateFromCustomRange(value) });
-    }
+    this.changeTab = this.changeTab.bind(this);
   }
 
   componentDidMount() {
@@ -206,6 +212,16 @@ export default class DateFilterControl extends React.Component {
   setTypeCustomStartEnd() {
     this.setState({ type: TYPES.CUSTOM_START_END });
   }
+
+  changeTab() {
+    const { tab } = this.state;
+    if (tab === TABS.CUSTOM) {
+      this.setState({ tab: TABS.DEFAULTS });
+    } else if (tab === TABS.DEFAULTS) {
+      this.setState({ tab: TABS.CUSTOM });
+    }
+  }
+
   handleClick(e) {
     // switch to `TYPES.CUSTOM_START_END` when the calendar is clicked
     if (this.startEndSectionRef && this.startEndSectionRef.contains(e.target)) {
@@ -214,7 +230,7 @@ export default class DateFilterControl extends React.Component {
   }
   close() {
     let val;
-    if (this.state.type === TYPES.DEFAULTS) {
+    if (this.state.type === TYPES.DEFAULTS || this.state.tab === TABS.DEFAULTS) {
       val = this.state.common;
     } else if (this.state.type === TYPES.CUSTOM_RANGE) {
       val = `${this.state.rel} ${this.state.num} ${this.state.grain}`;
@@ -290,9 +306,10 @@ export default class DateFilterControl extends React.Component {
       <Popover id="filter-popover" placement="top" positionTop={0}>
         <div style={{ width: '250px' }}>
           <Tabs
-            defaultActiveKey={this.state.type === TYPES.DEFAULTS ? 1 : 2}
+            defaultActiveKey={this.state.tab === TABS.DEFAULTS ? 1 : 2}
             id="type"
             className="time-filter-tabs"
+            onSelect={this.changeTab}
           >
             <Tab eventKey={1} title="Defaults">
               <FormGroup>{timeFrames}</FormGroup>