From 0e1fb62db2811545a4220ee9c58432dbf51831ff Mon Sep 17 00:00:00 2001
From: Gabe Lyons <gabe.lyons@airbnb.com>
Date: Mon, 21 May 2018 16:20:46 -0700
Subject: [PATCH] forcing ace editor to refresh when it is shown (#5038)

---
 .../AdhocFilterEditPopoverSqlTabContent.jsx       | 12 ++++++++++++
 .../explore/components/AdhocMetricEditPopover.jsx | 15 +++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
index 8a3a97bd82c06..7e8a6a6a39b57 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopoverSqlTabContent.jsx
@@ -33,6 +33,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     super(props);
     this.onSqlExpressionChange = this.onSqlExpressionChange.bind(this);
     this.onSqlExpressionClauseChange = this.onSqlExpressionClauseChange.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
 
     this.selectProps = {
       multi: false,
@@ -59,6 +60,10 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     }
   }
 
+  componentDidUpdate() {
+    this.aceEditorRef.editor.resize();
+  }
+
   onSqlExpressionClauseChange(clause) {
     this.props.onChange(this.props.adhocFilter.duplicateWith({
       clause: clause && clause.clause,
@@ -73,6 +78,12 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     }));
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
   render() {
     const { adhocFilter, height } = this.props;
 
@@ -101,6 +112,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
         </FormGroup>
         <FormGroup>
           <AceEditor
+            ref={this.handleAceEditorRef}
             mode="sql"
             theme="github"
             height={(height - 100) + 'px'}
diff --git a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
index 24ac5b5fbcd56..5611a32c13660 100644
--- a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
@@ -46,6 +46,8 @@ export default class AdhocMetricEditPopover extends React.Component {
     this.onDragDown = this.onDragDown.bind(this);
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
+    this.handleAceEditorRef = this.handleAceEditorRef.bind(this);
+    this.refreshAceEditor = this.refreshAceEditor.bind(this);
     this.state = {
       adhocMetric: this.props.adhocMetric,
       width: startingWidth,
@@ -137,6 +139,16 @@ export default class AdhocMetricEditPopover extends React.Component {
     document.removeEventListener('mousemove', this.onMouseMove);
   }
 
+  handleAceEditorRef(ref) {
+    if (ref) {
+      this.aceEditorRef = ref;
+    }
+  }
+
+  refreshAceEditor() {
+    setTimeout(() => this.aceEditorRef.editor.resize(), 0);
+  }
+
   render() {
     const {
       adhocMetric: propsAdhocMetric,
@@ -200,6 +212,8 @@ export default class AdhocMetricEditPopover extends React.Component {
           defaultActiveKey={adhocMetric.expressionType}
           className="adhoc-metric-edit-tabs"
           style={{ height: this.state.height, width: this.state.width }}
+          onSelect={this.refreshAceEditor}
+          animation={false}
         >
           <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SIMPLE} title="Simple">
             <FormGroup>
@@ -216,6 +230,7 @@ export default class AdhocMetricEditPopover extends React.Component {
             <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL">
               <FormGroup>
                 <AceEditor
+                  ref={this.handleAceEditorRef}
                   mode="sql"
                   theme="github"
                   height={(this.state.height - 43) + 'px'}