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>

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

@@ -127,7 +127,7 @@ class QuerySearch extends React.PureComponent {
   render() {
     return (
       <div>
-        <div className="row space-1">
+        <div id="search-header" className="row space-1">
           <div className="col-sm-2">
             <Select
               name="select-user"
@@ -193,7 +193,10 @@ class QuerySearch extends React.PureComponent {
           (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
           :
           (
-          <div className="scrollbar-container">
+          <div
+            style={{ height: this.props.height }}
+            className="scrollbar-container"
+          >
             <div className="scrollbar-content">
               <QueryTable
                 columns={[

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

@@ -22,6 +22,7 @@ import AceEditorWrapper from './AceEditorWrapper';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
+  height: React.PropTypes.string.isRequired,
   database: React.PropTypes.object,
   latestQuery: React.PropTypes.object,
   networkOn: React.PropTypes.bool,
@@ -212,13 +213,20 @@ class SqlEditor extends React.PureComponent {
       </div>
     );
     return (
-      <div className="SqlEditor" style={{ minHeight: this.sqlEditorHeight() }}>
+      <div
+        className="SqlEditor"
+        style={{
+          minHeight: this.sqlEditorHeight(),
+          height: this.props.height,
+        }}
+      >
         <Row>
           <Collapse
             in={!this.props.hideLeftBar}
           >
             <Col md={3}>
               <SqlEditorLeftBar
+                style={{ height: this.props.height }}
                 queryEditor={this.props.queryEditor}
                 tables={this.props.tables}
                 networkOn={this.props.networkOn}

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

@@ -16,6 +16,7 @@ const propTypes = {
   tabHistory: React.PropTypes.array.isRequired,
   tables: React.PropTypes.array.isRequired,
   networkOn: React.PropTypes.bool,
+  editorHeight: React.PropTypes.string.isRequired,
 };
 const defaultProps = {
   queryEditors: [],
@@ -168,6 +169,7 @@ class TabbedSqlEditors extends React.PureComponent {
             <div className="panel-body">
               {isSelected &&
                 <SqlEditor
+                  height={this.props.editorHeight}
                   tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
                   queryEditor={qe}
                   editorQueries={this.state.queriesArray}

superset/assets/javascripts/SqlLab/main.css

@@ -36,7 +36,7 @@ body {
   position: relative;
   overflow: hidden;
   width: 100%;
-  height: 95%;
+  height: 100%;
 }
 
 .scrollbar-content {
@@ -47,7 +47,7 @@ body {
   bottom: 0px;
   overflow: scroll;
   margin-right: 0px;
-  margin-bottom: 100px;
+  margin-bottom: 0px;
 }
 
 .Workspace .btn-sm {

superset/templates/appbuilder/navbar.html

@@ -33,7 +33,7 @@
 {% set WARNING_MSG = appbuilder.app.config.get('WARNING_MSG') %}
 {% if WARNING_MSG %}
   <div class="container">
-    <div class="alert alert-danger">
+    <div id="navbar-warning" class="alert alert-danger">
       {{ WARNING_MSG | safe }}
     </div>
   </div>