[sql lab] Make sql editor resizable (#3242)

* Update to the version of react-ace with the fixed sizing issues

* Make ace editor resizable

* Use small util method for offset calculation instead of $

* Test ResizableAceEditor

* Make the right pane of the Sql Lab scrollable

* Add default and min height to the ResizableAceEditor

* Implement SplitPane

* Make Splitter fullscreen

* React on resize of the window

* Implement min and max

* Get rid of a magic number + add margin

* Handle resize event with delay + cleanup the code

* Make ResultSet adjustable

* Make QueryHistory adjustable

* Remove ResizableAceEditor

* Make linter happy

* Test SplitPane

* Init sizes properly

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

@@ -4,6 +4,7 @@ import shortid from 'shortid';
 import { Alert, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { AutoSizer } from 'react-virtualized';
 
 import * as Actions from '../actions';
 import QueryHistory from './QueryHistory';
@@ -55,6 +56,7 @@ class SouthPane extends React.PureComponent {
 
     return window.innerHeight - sum - 95;
   }
+
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
@@ -67,13 +69,28 @@ class SouthPane extends React.PureComponent {
     let results;
     if (latestQuery) {
       results = (
-        <ResultSet
-          showControls
-          search
-          query={latestQuery}
-          actions={props.actions}
-          height={this.state.innerTabHeight}
-        />
+        <AutoSizer
+          disableWidth
+        >
+          {({ height }) => {
+            /*
+             checking of the height probably won't be necessary
+             after release of react-virtualized v10
+            */
+            if (height !== 0) {
+              return (
+                <ResultSet
+                  showControls
+                  search
+                  query={latestQuery}
+                  actions={props.actions}
+                  height={height}
+                />
+              );
+            }
+            return <div />;
+          }}
+        </AutoSizer>
       );
     } else {
       results = <Alert bsStyle="info">Run a query to display results here</Alert>;
@@ -85,20 +102,36 @@ class SouthPane extends React.PureComponent {
         eventKey={query.id}
         key={query.id}
       >
-        <ResultSet
-          query={query}
-          visualize={false}
-          csv={false}
-          actions={props.actions}
-          cache
-          height={this.state.innerTabHeight}
-        />
+        <AutoSizer
+          disableWidth
+        >
+          {({ height }) => {
+            /*
+             checking of the height probably won't be necessary
+             after release of react-virtualized v10
+            */
+            if (height !== 0) {
+              return (
+                <ResultSet
+                  query={query}
+                  visualize={false}
+                  csv={false}
+                  actions={props.actions}
+                  cache
+                  height={height}
+                />
+              );
+            }
+            return <div />;
+          }}
+        </AutoSizer>
       </Tab>
     ));
 
     return (
       <div className="SouthPane">
         <Tabs
+          className="Tabs"
           bsStyle="tabs"
           id={shortid.generate()}
           activeKey={this.props.activeSouthPaneTab}
@@ -114,7 +147,7 @@ class SouthPane extends React.PureComponent {
             title="Query History"
             eventKey="History"
           >
-            <div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
+            <div className="QueryHistoryWrapper">
               <QueryHistory queries={props.editorQueries} actions={props.actions} />
             </div>
           </Tab>