From 852e840575cf5ec6e1ad2780c986972619c8666f Mon Sep 17 00:00:00 2001
From: Yaozong Liu <750188453@qq.com>
Date: Wed, 21 Apr 2021 14:30:18 +0800
Subject: [PATCH] fix(explore): CUSTOM SQL tab should automatically update
 (#14194)

* fix(explore): CUSTOM SQL tab should automatically update

* fix(explore): CUSTOM SQL tab should automatically update

* fix: lint

* fix(explore): default value

Co-authored-by: Yongjie Zhao <yongjiezhao@apache.org>

Co-authored-by: liuyaozong <liuyaozong@baijiahulian.com>
Co-authored-by: stephenLYZ <vueact@gmail.com>
Co-authored-by: Yongjie Zhao <yongjiezhao@apache.org>
---
 .../FilterControl/AdhocFilterEditPopover/index.jsx     | 10 ++++++++++
 .../AdhocFilterEditPopoverSqlTabContent/index.jsx      |  1 +
 2 files changed, 11 insertions(+)

diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
index b44131d8db..ae5e95e218 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
@@ -64,11 +64,13 @@ export default class AdhocFilterEditPopover extends React.Component {
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onAdhocFilterChange = this.onAdhocFilterChange.bind(this);
     this.adjustHeight = this.adjustHeight.bind(this);
+    this.onTabChange = this.onTabChange.bind(this);
 
     this.state = {
       adhocFilter: this.props.adhocFilter,
       width: startingWidth,
       height: startingHeight,
+      activeKey: this.props?.adhocFilter?.expressionType || 'SIMPLE',
     };
 
     this.popoverContentRef = React.createRef();
@@ -118,6 +120,12 @@ export default class AdhocFilterEditPopover extends React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  onTabChange(activeKey) {
+    this.setState({
+      activeKey,
+    });
+  }
+
   adjustHeight(heightDifference) {
     this.setState(state => ({ height: state.height + heightDifference }));
   }
@@ -154,6 +162,7 @@ export default class AdhocFilterEditPopover extends React.Component {
           data-test="adhoc-filter-edit-tabs"
           style={{ minHeight: this.state.height, width: this.state.width }}
           allowOverflow
+          onChange={this.onTabChange}
         >
           <Tabs.TabPane
             className="adhoc-filter-edit-tab"
@@ -185,6 +194,7 @@ export default class AdhocFilterEditPopover extends React.Component {
                   onChange={this.onAdhocFilterChange}
                   options={this.props.options}
                   height={this.state.height}
+                  activeKey={this.state.activeKey}
                 />
               ) : (
                 <div className="custom-sql-disabled-message">
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
index 3c06a5b7ac..6599e85058 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
@@ -42,6 +42,7 @@ const propTypes = {
     ]),
   ).isRequired,
   height: PropTypes.number.isRequired,
+  activeKey: PropTypes.string.isRequired,
 };
 
 export default class AdhocFilterEditPopoverSqlTabContent extends React.Component {