From d70a74479df87908de7a7b4df7c24c6b267bf9e3 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Wed, 9 Nov 2016 14:21:43 -0800
Subject: [PATCH] Make Sqllab a one-page app -- body not scrollable (#1551)

* Make Sqllab a one-page app -- body not scrollable

* Add scroll-container and scroll-content in main.css
---
 .../SqlLab/components/SqlEditor.jsx           |  34 +++---
 .../SqlLab/components/SqlEditorLeftBar.jsx    | 108 +++++++++---------
 caravel/assets/javascripts/SqlLab/main.css    |  24 +++-
 3 files changed, 92 insertions(+), 74 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
index 231a146f1d..db77ed7d3b 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -227,22 +227,24 @@ class SqlEditor extends React.PureComponent {
             </Col>
           </Collapse>
           <Col md={this.props.hideLeftBar ? 12 : 9}>
-            <div className="scrollbar">
-              <AceEditorWrapper
-                actions={this.props.actions}
-                onBlur={this.setQueryEditorSql.bind(this)}
-                queryEditor={this.props.queryEditor}
-                onAltEnter={this.runQuery.bind(this)}
-                sql={this.props.queryEditor.sql}
-                tables={this.props.tables}
-              />
-              {editorBottomBar}
-              <br />
-              <SouthPane
-                editorQueries={this.props.editorQueries}
-                dataPreviewQueries={this.props.dataPreviewQueries}
-                actions={this.props.actions}
-              />
+            <div className="scrollbar-container">
+              <div className="scrollbar-content">
+                <AceEditorWrapper
+                  actions={this.props.actions}
+                  onBlur={this.setQueryEditorSql.bind(this)}
+                  queryEditor={this.props.queryEditor}
+                  onAltEnter={this.runQuery.bind(this)}
+                  sql={this.props.queryEditor.sql}
+                  tables={this.props.tables}
+                />
+                {editorBottomBar}
+                <br />
+                <SouthPane
+                  editorQueries={this.props.editorQueries}
+                  dataPreviewQueries={this.props.dataPreviewQueries}
+                  actions={this.props.actions}
+                />
+              </div>
             </div>
           </Col>
         </Row>
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 24afa279f0..420b2c80c1 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -99,62 +99,64 @@ class SqlEditorLeftBar extends React.PureComponent {
     }
     const shouldShowReset = window.location.search === '?reset=1';
     return (
-      <div className="clearfix sql-toolbar scrollbar">
-        {networkAlert}
-        <div>
-          <DatabaseSelect
-            onChange={this.onChange.bind(this)}
-            databaseId={this.props.queryEditor.dbId}
-            actions={this.props.actions}
-            valueRenderer={(o) => (
-              <div>
-                <span className="text-muted">Database:</span> {o.label}
-              </div>
-            )}
-          />
-        </div>
-        <div className="m-t-5">
-          <Select
-            name="select-schema"
-            placeholder={`Select a schema (${this.state.schemaOptions.length})`}
-            options={this.state.schemaOptions}
-            value={this.props.queryEditor.schema}
-            valueRenderer={(o) => (
-              <div>
-                <span className="text-muted">Schema:</span> {o.label}
-              </div>
-            )}
-            isLoading={this.state.schemaLoading}
-            autosize={false}
-            onChange={this.changeSchema.bind(this)}
-          />
-        </div>
-        <div className="m-t-5">
-          <Select
-            name="select-table"
-            ref="selectTable"
-            isLoading={this.state.tableLoading}
-            placeholder={`Add a table (${this.state.tableOptions.length})`}
-            autosize={false}
-            onChange={this.changeTable.bind(this)}
-            options={this.state.tableOptions}
-          />
-        </div>
-        <hr />
-        <div className="m-t-5">
-          {this.props.tables.map((table) => (
-            <TableElement
-              table={table}
-              key={table.id}
+      <div className="scrollbar-container">
+        <div className="clearfix sql-toolbar scrollbar-content">
+          {networkAlert}
+          <div>
+            <DatabaseSelect
+              onChange={this.onChange.bind(this)}
+              databaseId={this.props.queryEditor.dbId}
               actions={this.props.actions}
+              valueRenderer={(o) => (
+                <div>
+                  <span className="text-muted">Database:</span> {o.label}
+                </div>
+              )}
             />
-          ))}
+          </div>
+          <div className="m-t-5">
+            <Select
+              name="select-schema"
+              placeholder={`Select a schema (${this.state.schemaOptions.length})`}
+              options={this.state.schemaOptions}
+              value={this.props.queryEditor.schema}
+              valueRenderer={(o) => (
+                <div>
+                  <span className="text-muted">Schema:</span> {o.label}
+                </div>
+              )}
+              isLoading={this.state.schemaLoading}
+              autosize={false}
+              onChange={this.changeSchema.bind(this)}
+            />
+          </div>
+          <div className="m-t-5">
+            <Select
+              name="select-table"
+              ref="selectTable"
+              isLoading={this.state.tableLoading}
+              placeholder={`Add a table (${this.state.tableOptions.length})`}
+              autosize={false}
+              onChange={this.changeTable.bind(this)}
+              options={this.state.tableOptions}
+            />
+          </div>
+          <hr />
+          <div className="m-t-5">
+            {this.props.tables.map((table) => (
+              <TableElement
+                table={table}
+                key={table.id}
+                actions={this.props.actions}
+              />
+            ))}
+          </div>
+          {shouldShowReset &&
+            <Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
+              <i className="fa fa-bomb" /> Reset State
+            </Button>
+          }
         </div>
-        {shouldShowReset &&
-          <Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
-            <i className="fa fa-bomb" /> Reset State
-          </Button>
-        }
       </div>
     );
   }
diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css
index 2cee79c75b..ae7d3e8232 100644
--- a/caravel/assets/javascripts/SqlLab/main.css
+++ b/caravel/assets/javascripts/SqlLab/main.css
@@ -1,3 +1,6 @@
+body {
+    overflow: hidden;
+}
 .inlineBlock {
     display: inline-block;
 }
@@ -29,11 +32,22 @@
     padding-bottom: 5px;
 }
 
-.scrollbar {
-    position: relative;
-    width: 100%;
-    overflow-y: auto;
-    height: 100%;
+.scrollbar-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 95%;
+}
+
+.scrollbar-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow: scroll;
+  margin-right: 0px;
+  margin-bottom: 100px;
 }
 
 .Workspace .btn-sm {