From 6cf09e2f97f6114968ce25de8b4e4a17119cfb07 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Thu, 8 Sep 2016 14:53:16 -0700
Subject: [PATCH] [sql lab] cherry pick ui polish from master (#1082)

* only show the reset state button if location param (#1075)

* cherry pick commits from master
---
 .../SqlLab/components/SqlEditorLeft.jsx       |  9 +-
 .../SqlLab/components/TableElement.jsx        | 95 +++++++++++--------
 caravel/assets/javascripts/SqlLab/main.css    | 15 +--
 .../stylesheets/less/cosmo/variables.less     |  2 +-
 caravel/templates/caravel/welcome.html        |  2 +-
 5 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
index e209e9ae5723e..b3c7bdaf1efe7 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
@@ -117,6 +117,7 @@ class SqlEditorTopToolbar extends React.Component {
   }
   render() {
     const tables = this.props.tables.filter((t) => (t.queryEditorId === this.props.queryEditor.id));
+    const shouldShowReset = window.location.search === '?reset=1';
     return (
       <div className="clearfix sql-toolbar">
         <div>
@@ -159,9 +160,11 @@ class SqlEditorTopToolbar extends React.Component {
             <TableElement table={table} queryEditor={this.props.queryEditor} />
           ))}
         </div>
-        <Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
-          <i className="fa fa-bomb" /> Reset State
-        </Button>
+        {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/components/TableElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
index d2f74bcc2495b..50a8668ccffeb 100644
--- a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
@@ -10,6 +10,7 @@ class TableElement extends React.Component {
   setSelectStar() {
     this.props.actions.queryEditorSetSql(this.props.queryEditor, this.selectStar());
   }
+
   selectStar() {
     let cols = '';
     this.props.table.columns.forEach((col, i) => {
@@ -20,6 +21,7 @@ class TableElement extends React.Component {
     });
     return `SELECT ${cols}\nFROM ${this.props.table.name}`;
   }
+
   popSelectStar() {
     const qe = {
       id: shortid.generate(),
@@ -30,26 +32,40 @@ class TableElement extends React.Component {
     };
     this.props.actions.addQueryEditor(qe);
   }
+
+  collapseTable(e) {
+    e.preventDefault();
+    this.props.actions.collapseTable.bind(this, this.props.table)();
+  }
+
+  expandTable(e) {
+    e.preventDefault();
+    this.props.actions.expandTable.bind(this, this.props.table)();
+  }
+
   render() {
     let metadata = null;
     let buttonToggle;
     if (this.props.table.expanded) {
       buttonToggle = (
-        <Link
+        <a
           href="#"
-          onClick={this.props.actions.collapseTable.bind(this, this.props.table)}
-          placement="right"
-          tooltip="Collapse the table's structure information"
+          onClick={(e) => { this.collapseTable(e); }}
         >
-          {this.props.table.name} <i className="fa fa-caret-up" />
-        </Link>
+          <strong>{this.props.table.name}</strong>
+          <small className="m-l-5"><i className="fa fa-minus" /></small>
+        </a>
       );
       metadata = (
         <div>
           {this.props.table.columns.map((col) => (
-            <div className="clearfix">
-              <span className="pull-left m-l-5">{col.name}</span>
-              <span className="pull-right text-muted">{col.type}</span>
+            <div className="row">
+              <div className="col-sm-8">
+                <div className="m-l-5">{col.name}</div>
+              </div>
+              <div className="col-sm-4">
+                <div className="pull-right text-muted"><small>{col.type}</small></div>
+              </div>
             </div>
           ))}
           <hr />
@@ -57,39 +73,44 @@ class TableElement extends React.Component {
       );
     } else {
       buttonToggle = (
-        <Link
+        <a
           href="#"
-          onClick={this.props.actions.expandTable.bind(this, this.props.table)}
-          placement="right"
-          tooltip="Expand the table's structure information"
+          onClick={(e) => { this.expandTable(e); }}
         >
-          {this.props.table.name} <i className="fa fa-caret-down" />
-        </Link>
+          {this.props.table.name}
+          <small className="m-l-5"><i className="fa fa-plus" /></small>
+        </a>
       );
     }
     return (
-      <div className="ws-el">
-        {buttonToggle}
-        <ButtonGroup className="ws-el-controls pull-right">
-          <Link
-            className="fa fa-pencil m-l-2"
-            onClick={this.setSelectStar.bind(this)}
-            tooltip="Run query in a new tab"
-            href="#"
-          />
-          <Link
-            className="fa fa-plus-circle m-l-2"
-            onClick={this.popSelectStar.bind(this)}
-            tooltip="Run query in a new tab"
-            href="#"
-          />
-          <Link
-            className="fa fa-trash m-l-2"
-            onClick={this.props.actions.removeTable.bind(this, this.props.table)}
-            tooltip="Remove from workspace"
-            href="#"
-          />
-        </ButtonGroup>
+      <div>
+        <div className="row">
+          <div className="col-sm-9 m-b-10">
+            {buttonToggle}
+          </div>
+          <div className="col-sm-3">
+            <ButtonGroup className="ws-el-controls pull-right">
+              <Link
+                className="fa fa-pencil pull-left m-l-2"
+                onClick={this.setSelectStar.bind(this)}
+                tooltip="Run query in this tab"
+                href="#"
+              />
+              <Link
+                className="fa fa-plus-circle pull-left  m-l-2"
+                onClick={this.popSelectStar.bind(this)}
+                tooltip="Run query in a new tab"
+                href="#"
+              />
+              <Link
+                className="fa fa-trash pull-left m-l-2"
+                onClick={this.props.actions.removeTable.bind(this, this.props.table)}
+                tooltip="Remove from workspace"
+                href="#"
+              />
+            </ButtonGroup>
+          </div>
+        </div>
         {metadata}
       </div>
     );
diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css
index 0f637781746c1..f130a162b43b3 100644
--- a/caravel/assets/javascripts/SqlLab/main.css
+++ b/caravel/assets/javascripts/SqlLab/main.css
@@ -141,15 +141,12 @@ div.Workspace {
     max-height: 600px;
     box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
 }
-.SqlLab {
-    font-size: 12px;
-}
 .SqlLab pre {
     padding: 0px !important;
     margin: 0px;
     border: none;
-    font-size: 11px;
-    line-height: 125%;
+    font-size: 12px;
+    line-height: @line-height-base;
     background-color: transparent !important;
 }
 
@@ -238,14 +235,6 @@ div.tablePopover:hover {
 .ace_content {
     background-color: #f4f4f4;
 }
-.ws-el > .ws-el-controls {
-    opacity: 0;
-    transition: visibility 0s, opacity 0.3s linear;
-}
-.ws-el:hover > .ws-el-controls {
-    opacity: 1;
-    transition: visibility 0s, opacity 0.3s linear;
-}
 
 .SouthPane .tab-content {
     padding-top: 10px;
diff --git a/caravel/assets/stylesheets/less/cosmo/variables.less b/caravel/assets/stylesheets/less/cosmo/variables.less
index 56ac8416fa1b8..a90a65362e10c 100644
--- a/caravel/assets/stylesheets/less/cosmo/variables.less
+++ b/caravel/assets/stylesheets/less/cosmo/variables.less
@@ -48,7 +48,7 @@
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          15px;
+@font-size-base:          14px;
 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
diff --git a/caravel/templates/caravel/welcome.html b/caravel/templates/caravel/welcome.html
index 80c8c05eaae49..bdc8f92a46b1e 100644
--- a/caravel/templates/caravel/welcome.html
+++ b/caravel/templates/caravel/welcome.html
@@ -34,7 +34,7 @@ <h2>{{ _("Dashboards") }}</h2>
         </div>
         <div class="panel-body">
           <img class="loading" src="/static/assets/images/loading.gif"/>
-          <table id="dash_table" class="table table-condensed" width="100%"></table>
+          <table id="dash_table" class="table" width="100%"></table>
         </div>
       </div>
     </div>