From 54760980bcb9c0ad2d543cdda93e1f9ca13eea52 Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Tue, 18 Apr 2017 16:38:44 -0700
Subject: [PATCH 1/3] fix scrolling in left hand panel for table meta data

---
 .../SqlLab/components/SqlEditor.jsx           |   1 +
 .../SqlLab/components/SqlEditorLeftBar.jsx    | 156 +++++++++---------
 2 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
index f1af66653fcf3..4e3e3e49f8f5c 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -194,6 +194,7 @@ class SqlEditor extends React.PureComponent {
           >
             <Col md={3}>
               <SqlEditorLeftBar
+                height={this.sqlEditorHeight()}
                 style={{ height: this.props.height }}
                 queryEditor={this.props.queryEditor}
                 tables={this.props.tables}
diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 81461a135a35a..5632f00c7dc37 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -128,91 +128,95 @@ class SqlEditorLeftBar extends React.PureComponent {
   closePopover(ref) {
     this.refs[ref].hide();
   }
+
   render() {
     const shouldShowReset = window.location.search === '?reset=1';
+    const tableMetaDataHeight = this.props.height - 130; // 130 is the height of the selects above
     return (
-      <div className="scrollbar-container">
-        <div className="clearfix sql-toolbar scrollbar-content">
-          <div>
-            <AsyncSelect
-              dataEndpoint={
-                '/databaseasync/api/' +
-                'read?_flt_0_expose_in_sqllab=1&' +
-                '_oc_DatabaseView=database_name&' +
-                '_od_DatabaseView=asc'
-              }
-              onChange={this.onChange.bind(this)}
-              value={this.props.queryEditor.dbId}
-              databaseId={this.props.queryEditor.dbId}
-              actions={this.props.actions}
-              valueRenderer={o => (
-                <div>
-                  <span className="text-muted">Database:</span> {o.label}
-                </div>
-              )}
-              mutator={this.dbMutator.bind(this)}
-              placeholder="Select a database"
+      <div className="clearfix sql-toolbar">
+        <div>
+          <AsyncSelect
+            dataEndpoint={
+              '/databaseasync/api/' +
+              'read?_flt_0_expose_in_sqllab=1&' +
+              '_oc_DatabaseView=database_name&' +
+              '_od_DatabaseView=asc'
+            }
+            onChange={this.onChange.bind(this)}
+            value={this.props.queryEditor.dbId}
+            databaseId={this.props.queryEditor.dbId}
+            actions={this.props.actions}
+            valueRenderer={o => (
+              <div>
+                <span className="text-muted">Database:</span> {o.label}
+              </div>
+            )}
+            mutator={this.dbMutator.bind(this)}
+            placeholder="Select a database"
+          />
+        </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">
+          {this.props.queryEditor.schema &&
+            <Select
+              name="select-table"
+              ref="selectTable"
+              isLoading={this.state.tableLoading}
+              value={this.state.tableName}
+              placeholder={`Add a table (${this.state.tableOptions.length})`}
+              autosize={false}
+              onChange={this.changeTable.bind(this)}
+              filterOptions={this.state.filterOptions}
+              options={this.state.tableOptions}
             />
-          </div>
-          <div className="m-t-5">
+          }
+          {!this.props.queryEditor.schema &&
             <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}
+              async
+              name="async-select-table"
+              ref="selectTable"
+              value={this.state.tableName}
+              placeholder={'Type to search ...'}
               autosize={false}
-              onChange={this.changeSchema.bind(this)}
+              onChange={this.changeTable.bind(this)}
+              loadOptions={this.getTableNamesBySubStr.bind(this)}
             />
-          </div>
-          <div className="m-t-5">
-            {this.props.queryEditor.schema &&
-              <Select
-                name="select-table"
-                ref="selectTable"
-                isLoading={this.state.tableLoading}
-                value={this.state.tableName}
-                placeholder={`Add a table (${this.state.tableOptions.length})`}
-                autosize={false}
-                onChange={this.changeTable.bind(this)}
-                filterOptions={this.state.filterOptions}
-                options={this.state.tableOptions}
-              />
-            }
-            {!this.props.queryEditor.schema &&
-              <Select
-                async
-                name="async-select-table"
-                ref="selectTable"
-                value={this.state.tableName}
-                placeholder={'Type to search ...'}
-                autosize={false}
-                onChange={this.changeTable.bind(this)}
-                loadOptions={this.getTableNamesBySubStr.bind(this)}
-              />
-            }
-          </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>
+        <hr />
+        <div className="m-t-5">
+          <div className="scrollbar-container">
+            <div className="scrollbar-content" style={{ height: tableMetaDataHeight }}>
+              {this.props.tables.map(table => (
+                <TableElement
+                  table={table}
+                  key={table.id}
+                  actions={this.props.actions}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        {shouldShowReset &&
+          <Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
+            <i className="fa fa-bomb" /> Reset State
+          </Button>
+        }
       </div>
     );
   }

From 032c37a2787bd4cdb835a8bb1d9b2715d6111ba4 Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Tue, 18 Apr 2017 16:42:09 -0700
Subject: [PATCH 2/3] add height prop

---
 .../assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 5632f00c7dc37..e7f7d89b694de 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -10,6 +10,7 @@ const $ = window.$ = require('jquery');
 
 const propTypes = {
   queryEditor: React.PropTypes.object.isRequired,
+  height: React.PropTypes.number.isRequired,
   tables: React.PropTypes.array,
   actions: React.PropTypes.object,
 };

From fc0084f7091a1e566986a51e687fa886650acd0c Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Tue, 18 Apr 2017 16:43:10 -0700
Subject: [PATCH 3/3] this prop is not used

---
 superset/assets/javascripts/SqlLab/components/SqlEditor.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
index 4e3e3e49f8f5c..4c32afabb0c21 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -195,7 +195,6 @@ class SqlEditor extends React.PureComponent {
             <Col md={3}>
               <SqlEditorLeftBar
                 height={this.sqlEditorHeight()}
-                style={{ height: this.props.height }}
                 queryEditor={this.props.queryEditor}
                 tables={this.props.tables}
                 actions={this.props.actions}