[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/AceEditorWrapper.jsx

@@ -32,6 +32,7 @@ const propTypes = {
   sql: PropTypes.string.isRequired,
   tables: PropTypes.array,
   queryEditor: PropTypes.object.isRequired,
+  height: PropTypes.string,
 };
 
 const defaultProps = {
@@ -119,14 +120,15 @@ class AceEditorWrapper extends React.PureComponent {
     this.setState({ sql: text });
   }
   render() {
+    const { height } = this.props;
     return (
       <AceEditor
+        ref="editor"
         mode="sql"
         theme="github"
         onLoad={this.onEditorLoad.bind(this)}
         onBlur={this.onBlur.bind(this)}
-        minLines={12}
-        maxLines={12}
+        height={height}
         onChange={this.textChange.bind(this)}
         width="100%"
         editorProps={{ $blockScrolling: true }}