[SqlLab] Fix a few UI issues (#4401)

1. tab alignment css
2. if tabs are more than 1 row, need to calculate content area height
3. clean up height calculation.

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

@@ -34,16 +34,17 @@ class App extends React.PureComponent {
   }
   getHeight() {
     const warningEl = $('#navbar-warning');
-    const navTabsEl = $('.nav-tabs');
+    const tabsEl = $('.nav-tabs');
     const searchHeaderEl = $('#search-header');
     const alertEl = $('#sqllab-alerts');
-    const headerNavEl = $('header .navbar');
-    const navHeight = headerNavEl.outerHeight() + parseInt(headerNavEl.css('marginBottom'), 10);
-    const searchHeaderHeight = searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10);
-    const headerHeight = navTabsEl.outerHeight() ? navTabsEl.outerHeight() : searchHeaderHeight;
+    const headerEl = $('header .navbar');
+    const headerHeight = headerEl.outerHeight() + parseInt(headerEl.css('marginBottom'), 10);
+    const searchHeaderHeight = searchHeaderEl.length > 0 ?
+      searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10) : 0;
+    const tabsHeight = tabsEl.length > 0 ? tabsEl.outerHeight() : searchHeaderHeight;
     const warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
     const alertHeight = alertEl.length > 0 ? alertEl.outerHeight() : 0;
-    return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
+    return `${window.innerHeight - headerHeight - tabsHeight - warningHeight - alertHeight}px`;
   }
   handleResize() {
     this.setState({ contentHeight: this.getHeight() });
@@ -64,7 +65,7 @@ class App extends React.PureComponent {
       content = (
         <div>
           <QueryAutoRefresh />
-          <TabbedSqlEditors editorHeight={this.state.contentHeight} />
+          <TabbedSqlEditors getHeight={this.getHeight} />
         </div>
       );
     }

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

@@ -29,7 +29,7 @@ import { t } from '../../locales';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
-  height: PropTypes.string.isRequired,
+  getHeight: PropTypes.func.isRequired,
   database: PropTypes.object,
   latestQuery: PropTypes.object,
   tables: PropTypes.array.isRequired,
@@ -73,9 +73,11 @@ class SqlEditor extends React.PureComponent {
   }
   onResize() {
     const height = this.sqlEditorHeight();
+    const editorPaneHeight = this.props.queryEditor.height || 200;
+    const splitPaneHandlerHeight = 15;
     this.setState({
-      editorPaneHeight: this.props.queryEditor.height,
-      southPaneHeight: height - this.props.queryEditor.height,
+      editorPaneHeight,
+      southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight,
       height,
     });
 
@@ -122,11 +124,8 @@ class SqlEditor extends React.PureComponent {
     this.setState({ ctas: event.target.value });
   }
   sqlEditorHeight() {
-    // quick hack to make the white bg of the tab stretch full height.
-    const tabNavHeight = 40;
-    const navBarHeight = 56;
-    const mysteryVerticalHeight = 50;
-    return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight;
+    const horizontalScrollbarHeight = 25;
+    return parseInt(this.props.getHeight(), 10) - horizontalScrollbarHeight;
   }
   renderEditorBottomBar() {
     let ctasControls;
@@ -227,8 +226,7 @@ class SqlEditor extends React.PureComponent {
       <div
         className="SqlEditor"
         style={{
-          minHeight: height,
-          height: this.props.height,
+          height: height + 'px',
         }}
       >
         <Row>
@@ -271,7 +269,7 @@ class SqlEditor extends React.PureComponent {
                     onAltEnter={this.runQuery.bind(this)}
                     sql={this.props.queryEditor.sql}
                     tables={this.props.tables}
-                    height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()}
+                    height={((this.state.editorPaneHeight || defaultNorthHeight) - 50) + 'px'}
                   />
                   {this.renderEditorBottomBar()}
                 </div>

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

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

superset/assets/javascripts/SqlLab/main.less

@@ -298,6 +298,11 @@ a.Link {
     width: 100%;
     overflow: scroll;
 }
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+    padding-bottom: 8px;
+}
 .search-date-filter-container {
     display: flex;
 

superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx

@@ -15,7 +15,7 @@ describe('SqlEditor', () => {
     latestQuery: queries[0],
     tables: [table],
     queries,
-    height: '',
+    getHeight: () => ('100px'),
     editorQueries: [],
     dataPreviewQueries: [],
   };

superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx

@@ -50,6 +50,7 @@ describe('TabbedSqlEditors', () => {
     queryEditors: initialState.queryEditors,
     tabHistory: initialState.tabHistory,
     editorHeight: '',
+    getHeight: () => ('100px'),
   };
   const getWrapper = () => (
     shallow(<TabbedSqlEditors {...mockedProps} />, {