[sql lab] using react-split-pane (#3363)

* [sql lab] using react-split-pane

* padding

superset/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -12,9 +12,9 @@ import {
   Tooltip,
   Collapse,
 } from 'react-bootstrap';
+import SplitPane from 'react-split-pane';
 
 import Button from '../../components/Button';
-
 import SouthPane from './SouthPane';
 import SaveQuery from './SaveQuery';
 import Timer from '../../components/Timer';
@@ -50,16 +50,24 @@ class SqlEditor extends React.PureComponent {
       ctas: '',
     };
   }
-  componentDidMount() {
-    this.onMount();
-  }
-  onMount() {
+  componentWillMount() {
     if (this.state.autorun) {
       this.setState({ autorun: false });
       this.props.actions.queryEditorSetAutorun(this.props.queryEditor, false);
       this.startQuery();
     }
   }
+  componentDidMount() {
+    this.onResize();
+  }
+  onResize() {
+    const height = this.sqlEditorHeight();
+    this.setState({
+      editorPaneHeight: this.refs.ace.clientHeight,
+      southPaneHeight: height - this.refs.ace.clientHeight,
+      height,
+    });
+  }
   setQueryEditorSql(sql) {
     this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
   }
@@ -101,24 +109,7 @@ class SqlEditor extends React.PureComponent {
     const mysteryVerticalHeight = 50;
     return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight;
   }
-
-  render() {
-    const qe = this.props.queryEditor;
-    let limitWarning = null;
-    if (this.props.latestQuery && this.props.latestQuery.limit_reached) {
-      const tooltip = (
-        <Tooltip id="tooltip">
-          It appears that the number of rows in the query results displayed
-          was limited on the server side to
-          the {this.props.latestQuery.rows} limit.
-        </Tooltip>
-      );
-      limitWarning = (
-        <OverlayTrigger placement="left" overlay={tooltip}>
-          <Label bsStyle="warning" className="m-r-5">LIMIT</Label>
-        </OverlayTrigger>
-      );
-    }
+  renderEditorBottomBar() {
     let ctasControls;
     if (this.props.database && this.props.database.allow_ctas) {
       const ctasToolTip = 'Create table as with query results';
@@ -146,7 +137,23 @@ class SqlEditor extends React.PureComponent {
         </FormGroup>
       );
     }
-    const editorBottomBar = (
+    const qe = this.props.queryEditor;
+    let limitWarning = null;
+    if (this.props.latestQuery && this.props.latestQuery.limit_reached) {
+      const tooltip = (
+        <Tooltip id="tooltip">
+          It appears that the number of rows in the query results displayed
+          was limited on the server side to
+          the {this.props.latestQuery.rows} limit.
+        </Tooltip>
+      );
+      limitWarning = (
+        <OverlayTrigger placement="left" overlay={tooltip}>
+          <Label bsStyle="warning" className="m-r-5">LIMIT</Label>
+        </OverlayTrigger>
+      );
+    }
+    return (
       <div className="sql-toolbar clearfix" id="js-sql-toolbar">
         <div className="pull-left">
           <Form inline>
@@ -181,11 +188,15 @@ class SqlEditor extends React.PureComponent {
         </div>
       </div>
     );
+  }
+  render() {
+    const height = this.sqlEditorHeight();
+    const defaultNorthHeight = 200;
     return (
       <div
         className="SqlEditor"
         style={{
-          minHeight: this.sqlEditorHeight(),
+          minHeight: height,
           height: this.props.height,
         }}
       >
@@ -200,7 +211,7 @@ class SqlEditor extends React.PureComponent {
               lg={3}
             >
               <SqlEditorLeftBar
-                height={this.sqlEditorHeight()}
+                height={height}
                 queryEditor={this.props.queryEditor}
                 tables={this.props.tables}
                 actions={this.props.actions}
@@ -212,22 +223,37 @@ class SqlEditor extends React.PureComponent {
             sm={this.props.hideLeftBar ? 12 : 7}
             md={this.props.hideLeftBar ? 12 : 8}
             lg={this.props.hideLeftBar ? 12 : 9}
+            style={{ height: this.state.height }}
           >
-            <AceEditorWrapper
-              actions={this.props.actions}
-              onBlur={this.setQueryEditorSql.bind(this)}
-              queryEditor={this.props.queryEditor}
-              onAltEnter={this.runQuery.bind(this)}
-              sql={this.props.queryEditor.sql}
-              tables={this.props.tables}
-            />
-            {editorBottomBar}
-            <br />
-            <SouthPane
-              editorQueries={this.props.editorQueries}
-              dataPreviewQueries={this.props.dataPreviewQueries}
-              actions={this.props.actions}
-            />
+            <SplitPane
+              split="horizontal"
+              defaultSize={defaultNorthHeight}
+              minSize={100}
+              onChange={this.onResize.bind(this)}
+            >
+              <div ref="ace" style={{ width: '100%' }}>
+                <div>
+                  <AceEditorWrapper
+                    actions={this.props.actions}
+                    onBlur={this.setQueryEditorSql.bind(this)}
+                    queryEditor={this.props.queryEditor}
+                    onAltEnter={this.runQuery.bind(this)}
+                    sql={this.props.queryEditor.sql}
+                    tables={this.props.tables}
+                    height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()}
+                  />
+                  {this.renderEditorBottomBar()}
+                </div>
+              </div>
+              <div ref="south">
+                <SouthPane
+                  editorQueries={this.props.editorQueries}
+                  dataPreviewQueries={this.props.dataPreviewQueries}
+                  actions={this.props.actions}
+                  height={this.state.southPaneHeight}
+                />
+              </div>
+            </SplitPane>
           </Col>
         </Row>
       </div>