Minor improvements to SQL Lab UI (#5662)

* Remove "for"

* add space

* Separate control to select table from database and schema.

* Adjust schema displays

* Fix caret and arrow position in Select and Tab

* Reduce space after caret in tab header

* Use translator

* Align icons in the pop-up menu in Sql Lab

* Add new table in front of the list (so it will appear on top)

* shorten message

* reduce line

superset/assets/src/SqlLab/components/CopyQueryTabUrl.jsx

@@ -27,10 +27,13 @@ export default class CopyQueryTabUrl extends React.PureComponent {
         inMenu
         copyNode={(
           <div>
-            <i className="fa fa-clipboard" /> <span>{t('share query')}</span>
+            <div className="icon-container">
+              <i className="fa fa-clipboard" />
+            </div>
+            <span>{t('Share query')}</span>
           </div>
         )}
-        tooltipText={t('copy URL to clipboard')}
+        tooltipText={t('Copy URL to clipboard')}
         shouldShowText={false}
         getText={this.getUrl.bind(this)}
       />

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

@@ -55,7 +55,7 @@ class SouthPane extends React.PureComponent {
     }
     const dataPreviewTabs = props.dataPreviewQueries.map(query => (
       <Tab
-        title={t('Preview for %s', query.tableName)}
+        title={t('Preview: `%s`', query.tableName)}
         eventKey={query.id}
         key={query.id}
       >

superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx

@@ -2,7 +2,7 @@
 /* eslint no-undef: 2 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import { ControlLabel, Button } from 'react-bootstrap';
 import Select from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
 
@@ -189,13 +189,25 @@ class SqlEditorLeftBar extends React.PureComponent {
             onChange={this.changeSchema.bind(this)}
           />
         </div>
+        <hr />
         <div className="m-t-5">
+          <ControlLabel>
+            {t('See table schema')}
+            &nbsp;
+            <small>
+              ({this.state.tableOptions.length}
+              &nbsp;{t('in')}&nbsp;
+              <i>
+                {this.props.queryEditor.schema}
+              </i>)
+            </small>
+          </ControlLabel>
           {this.props.queryEditor.schema &&
             <Select
               name="select-table"
               ref="selectTable"
               isLoading={this.state.tableLoading}
-              placeholder={t('Add a table (%s)', this.state.tableOptions.length)}
+              placeholder={t('Select table or type table name')}
               autosize={false}
               onChange={this.changeTable.bind(this)}
               filterOptions={this.state.filterOptions}

superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -169,18 +169,30 @@ class TabbedSqlEditors extends React.PureComponent {
         <div>
           <TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} />{' '}
           {qe.title}{' '}
-          <DropdownButton bsSize="small" id={'ddbtn-tab-' + i} title="">
+          <DropdownButton
+            bsSize="small"
+            id={'ddbtn-tab-' + i}
+            className="ddbtn-tab"
+            title=""
+          >
             <MenuItem eventKey="1" onClick={this.removeQueryEditor.bind(this, qe)}>
-              <i className="fa fa-close" /> {t('close tab')}
+              <div className="icon-container">
+                <i className="fa fa-close" />
+              </div>
+              {t('Close tab')}
             </MenuItem>
             <MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
-              <i className="fa fa-i-cursor" /> {t('rename tab')}
+              <div className="icon-container">
+                <i className="fa fa-i-cursor" />
+              </div>
+              {t('Rename tab')}
             </MenuItem>
             {qe && <CopyQueryTabUrl queryEditor={qe} />}
             <MenuItem eventKey="4" onClick={this.toggleLeftBar.bind(this)}>
-              <i className="fa fa-cogs" />
-              &nbsp;
-              {this.state.hideLeftBar ? t('expand tool bar') : t('hide tool bar')}
+              <div className="icon-container">
+                <i className="fa fa-cogs" />
+              </div>
+              {this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
             </MenuItem>
           </DropdownButton>
         </div>

superset/assets/src/SqlLab/components/TableElement.jsx

@@ -165,10 +165,10 @@ class TableElement extends React.PureComponent {
             className="table-name"
             onClick={(e) => { this.toggleTable(e); }}
           >
-            <strong>{table.name}</strong>
-            <small className="m-l-5">
+            <small className="m-r-5">
               <i className={`fa fa-${table.expanded ? 'minus' : 'plus'}-square-o`} />
             </small>
+            <strong>`{table.name}`</strong>
           </a>
         </div>
         <div className="pull-right">
@@ -197,11 +197,10 @@ class TableElement extends React.PureComponent {
       >
         <div>
           {this.renderWell()}
-          <div className="table-columns">
+          <div className="table-columns m-t-5">
             {cols && cols.map(col => (
               <ColumnElement column={col} key={col.name} />
             ))}
-            <hr />
           </div>
         </div>
       </Collapse>
@@ -217,7 +216,7 @@ class TableElement extends React.PureComponent {
         transitionAppear
         onExited={this.removeFromStore.bind(this)}
       >
-        <div className="TableElement">
+        <div className="TableElement m-b-10">
           {this.renderHeader()}
           <div>
             {this.renderBody()}

superset/assets/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -65,7 +65,7 @@ export default class TemplateParamsEditor extends React.Component {
         (example: <code>{'{"my_table": "foo"}'}</code>),
         and they become available
         in your SQL (example: <code>SELECT * FROM {'{{ my_table }}'} </code>)
-        by using
+        by using&nbsp;
         <a
           href="http://superset.apache.org/sqllab.html#templating-with-jinja"
           target="_blank"

superset/assets/src/SqlLab/main.less

@@ -248,6 +248,13 @@ div.tablePopover:hover {
     min-width: 100%;
     width: inherit;
 }
+.Select-clear {
+    margin-top: -2px;
+}
+.Select-arrow {
+    margin-top: 5px;
+}
+
 .ace_content {
     background-color: #f4f4f4;
 }
@@ -266,6 +273,10 @@ div.tablePopover:hover {
     padding: 5px 10px;
 }
 
+.TableElement .ws-el-controls  {
+    margin-right: -.3em;
+}
+
 .QueryTable .label {
     display: inline-block;
 }
@@ -309,6 +320,18 @@ a.Link {
 .nav-tabs > li.active > a:focus {
     padding-bottom: 8px;
 }
+.nav-tabs .dropdown-toggle.btn .caret {
+    margin-top: -12px;
+}
+.nav-tabs .ddbtn-tab {
+    margin-left: 5px;
+    padding-right: 0;
+}
+.icon-container {
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+}
 .search-date-filter-container {
     display: flex;
 

superset/assets/src/SqlLab/reducers.js

@@ -81,7 +81,7 @@ export const sqlLabReducer = function (state = {}, action) {
       at.id = shortid.generate();
       // for new table, associate Id of query for data preview
       at.dataPreviewQueryId = null;
-      let newState = addToArr(state, 'tables', at);
+      let newState = addToArr(state, 'tables', at, true);
       if (action.query) {
         newState = alterInArr(newState, 'tables', at, { dataPreviewQueryId: action.query.id });
       }

superset/assets/src/reduxUtils.js

@@ -54,13 +54,17 @@ export function getFromArr(arr, id) {
   return obj;
 }
 
-export function addToArr(state, arrKey, obj) {
+export function addToArr(state, arrKey, obj, prepend = false) {
   const newObj = Object.assign({}, obj);
   if (!newObj.id) {
     newObj.id = shortid.generate();
   }
   const newState = {};
-  newState[arrKey] = [...state[arrKey], newObj];
+  if (prepend) {
+    newState[arrKey] = [newObj, ...state[arrKey]];
+  } else {
+    newState[arrKey] = [...state[arrKey], newObj];
+  }
   return Object.assign({}, state, newState);
 }