Calculate height dynamically using jquery for scrollable sqllab (#1611)

* Calculate height dynamically using jquery for scrollable sqllab components

* Move editorHeight to App.jsx

* Calculate height dynamically for query search

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

@@ -1,3 +1,4 @@
+const $ = window.$ = require('jquery');
 import * as Actions from '../actions';
 import React from 'react';
 
@@ -14,13 +15,29 @@ class App extends React.PureComponent {
     super(props);
     this.state = {
       hash: window.location.hash,
+      contentHeight: this.getHeight(),
     };
   }
   componentDidMount() {
+    /* eslint-disable react/no-did-mount-set-state */
+    this.setState({ contentHeight: this.getHeight() });
     window.addEventListener('hashchange', this.onHashChanged.bind(this));
+    window.addEventListener('resize', this.handleResize.bind(this));
   }
   componentWillUnmount() {
     window.removeEventListener('hashchange', this.onHashChanged.bind(this));
+    window.removeEventListener('resize', this.handleResize.bind(this));
+  }
+  getHeight() {
+    const navHeight = 90;
+    const headerHeight = $('.nav-tabs').outerHeight() ?
+      $('.nav-tabs').outerHeight() : $('#search-header').outerHeight();
+    const warningHeight = $('#navbar-warning').outerHeight();
+    const alertHeight = $('#sqllab-alerts').outerHeight();
+    return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
+  }
+  handleResize() {
+    this.setState({ contentHeight: this.getHeight() });
   }
   onHashChanged() {
     this.setState({ hash: window.location.hash });
@@ -32,7 +49,7 @@ class App extends React.PureComponent {
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-12">
-              <QuerySearch />
+              <QuerySearch height={this.state.contentHeight} />
             </div>
           </div>
         </div>
@@ -41,13 +58,13 @@ class App extends React.PureComponent {
       content = (
         <div>
           <QueryAutoRefresh />
-          <TabbedSqlEditors />
+          <TabbedSqlEditors editorHeight={this.state.contentHeight} />
         </div>
       );
     }
     return (
       <div className="App SqlLab">
-        <Alerts alerts={this.props.alerts} actions={this.props.actions} />
+        <Alerts id="sqllab-alerts" alerts={this.props.alerts} actions={this.props.actions} />
         <div className="container-fluid">
           {content}
         </div>