[sql-lab] make query history scrollable (#2499)

* make query history scrollable

* not around results

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

@@ -6,6 +6,8 @@ import shortid from 'shortid';
 import VisualizeModal from './VisualizeModal';
 import HighlightedSql from './HighlightedSql';
 
+const RESULTS_CONTROLS_HEIGHT = 36;
+
 const propTypes = {
   actions: React.PropTypes.object,
   csv: React.PropTypes.bool,
@@ -52,36 +54,6 @@ class ResultSet extends React.PureComponent {
       this.fetchResults(nextProps.query);
     }
   }
-  componentWillMount() {
-    // hack to get height of result set table so it can be fixed and scroll in place
-    if (this.state.resultSetHeight === '0') {
-      // calculate result set table height
-
-      // document.getElementById('brace-editor').getBoundingClientRect().height;
-      const sqlEditorHeight = 192;
-
-      // document.getElementById('js-sql-toolbar').getBoundingClientRect().height;
-      const sqlToolbar = 30;
-
-      // document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2;
-      const tabsHeight = 88;
-
-      // document.getElementsByTagName('header')[0].getBoundingClientRect().height;
-      const headerHeight = 59;
-
-      // this needs to be hardcoded since this element is in this component and has not mounted yet
-      const resultsControlsHeight = 30;
-
-      const sum =
-        sqlEditorHeight +
-        sqlToolbar +
-        tabsHeight +
-        resultsControlsHeight +
-        headerHeight;
-
-      this.setState({ resultSetHeight: window.innerHeight - sum - 95 });
-    }
-  }
   getControls() {
     if (this.props.search || this.props.visualize || this.props.csv) {
       let csvButton;
@@ -223,7 +195,10 @@ class ResultSet extends React.PureComponent {
             />
             {this.getControls.bind(this)()}
             {sql}
-            <div className="ResultSet" style={{ height: `${this.state.resultSetHeight}px` }}>
+            <div
+              className="ResultSet"
+              style={{ height: `${this.props.resultSetHeight - RESULTS_CONTROLS_HEIGHT}px` }}
+            >
               <Table
                 data={data.map(function (row) {
                   const newRow = {};

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

@@ -24,6 +24,36 @@ const defaultProps = {
 };
 
 class SouthPane extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      innerTabHeight: this.getInnerTabHeight(),
+    };
+  }
+  getInnerTabHeight() {
+    // hack to get height the tab container so it can be fixed and scroll in place
+    // calculate inner tab height
+
+    // document.getElementById('brace-editor').getBoundingClientRect().height;
+    const sqlEditorHeight = 192;
+
+    // document.getElementById('js-sql-toolbar').getBoundingClientRect().height;
+    const sqlToolbar = 30;
+
+    // document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2;
+    const tabsHeight = 88;
+
+    // document.getElementsByTagName('header')[0].getBoundingClientRect().height;
+    const headerHeight = 59;
+
+    const sum =
+      sqlEditorHeight +
+      sqlToolbar +
+      tabsHeight +
+      headerHeight;
+
+    return window.innerHeight - sum - 95;
+  }
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
@@ -36,7 +66,13 @@ class SouthPane extends React.PureComponent {
     let results;
     if (latestQuery) {
       results = (
-        <ResultSet showControls search query={latestQuery} actions={props.actions} />
+        <ResultSet
+          showControls
+          search
+          query={latestQuery}
+          actions={props.actions}
+          resultSetHeight={this.state.innerTabHeight}
+        />
       );
     } else {
       results = <Alert bsStyle="info">Run a query to display results here</Alert>;
@@ -48,7 +84,14 @@ class SouthPane extends React.PureComponent {
         eventKey={query.id}
         key={query.id}
       >
-        <ResultSet query={query} visualize={false} csv={false} actions={props.actions} cache />
+        <ResultSet
+          query={query}
+          visualize={false}
+          csv={false}
+          actions={props.actions}
+          cache
+          resultSetHeight={this.state.innerTabHeight}
+        />
       </Tab>
     ));
 
@@ -70,7 +113,9 @@ class SouthPane extends React.PureComponent {
             title="Query History"
             eventKey="History"
           >
-            <QueryHistory queries={props.editorQueries} actions={props.actions} />
+            <div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
+              <QueryHistory queries={props.editorQueries} actions={props.actions} />
+            </div>
           </Tab>
           {dataPreviewTabs}
         </Tabs>