[query-search] fix scrolling on query search and pagination styling (#2646)

* fix scrolling for query search, getHeight was returning NAN

* add styling for query search pagination

* remove console.log

* make pagination buttons match bootstrap theme small buttons

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

@@ -15,7 +15,7 @@ class App extends React.PureComponent {
     super(props);
     this.state = {
       hash: window.location.hash,
-      contentHeight: this.getHeight(),
+      contentHeight: '0px',
     };
   }
   componentDidMount() {
@@ -32,11 +32,16 @@ class App extends React.PureComponent {
     this.setState({ hash: window.location.hash });
   }
   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();
+    const warningEl = $('#navbar-warning');
+    const navTabsEl = $('.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 warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
+    const alertHeight = alertEl.length > 0 ? alertEl.outerHeight() : 0;
     return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
   }
   handleResize() {

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

@@ -11,7 +11,7 @@ const $ = window.$ = require('jquery');
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
-  height: React.PropTypes.integer,
+  height: React.PropTypes.number.isRequired,
 };
 
 class QuerySearch extends React.PureComponent {
@@ -192,11 +192,11 @@ class QuerySearch extends React.PureComponent {
           (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
           :
           (
-            <div
-              style={{ height: this.props.height }}
-              className="scrollbar-container"
-            >
-              <div className="scrollbar-content">
+            <div className="scrollbar-container">
+              <div
+                className="scrollbar-content"
+                style={{ height: this.props.height }}
+              >
                 <QueryTable
                   columns={[
                     'state', 'db', 'user', 'time',

superset/assets/javascripts/SqlLab/index.jsx

@@ -10,8 +10,9 @@ import { initJQueryAjaxCSRF } from '../modules/utils';
 import App from './components/App';
 import { appSetup } from '../common';
 
-require('./main.css');
-require('../components/FilterableTable/FilterableTableStyles.css');
+import './main.css';
+import './reactable-pagination.css';
+import '../components/FilterableTable/FilterableTableStyles.css';
 
 appSetup();
 initJQueryAjaxCSRF();

superset/assets/javascripts/SqlLab/reactable-pagination.css

@@ -0,0 +1,40 @@
+.reactable-pagination td {
+  padding: 15px 0 0 0!important;
+}
+.reactable-pagination a:focus {
+  text-decoration: none;
+  color: #555555;
+  outline: 1;
+}
+.reactable-page-button,
+.reactable-next-page,
+.reactable-previous-page {
+  background: #fff;
+  border-radius: 2px;
+  border: 1px solid #b3b3b3;
+  color: #555555;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-right: 5px;
+  padding: 5px 10px;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.reactable-current-page {
+  border: 1px solid #b3b3b3;
+  color: #555555;
+  font-weight: bold;
+  pointer-events: none;
+  opacity: 0.65;
+}
+.reactable-page-button:hover,
+.reactable-next-page:hover,
+.reactable-previous-page:hover {
+  background-color: #efefef;
+  border-color: #949494;
+  color: #555555;
+  text-decoration: none;
+}