Cherry-picks: Update SQL Lab

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

@@ -54,7 +54,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

@@ -123,12 +123,15 @@ class TabbedSqlEditors extends React.PureComponent {
     const activeQueryEditor = this.activeQueryEditor();
     const qe = {
       title: t('Untitled Query %s', queryCount),
-      dbId: (activeQueryEditor && activeQueryEditor.dbId) ?
-        activeQueryEditor.dbId :
-        this.props.defaultDbId,
-      schema: (activeQueryEditor) ? activeQueryEditor.schema : null,
+      dbId:
+        activeQueryEditor && activeQueryEditor.dbId
+          ? activeQueryEditor.dbId
+          : this.props.defaultDbId,
+      schema: activeQueryEditor ? activeQueryEditor.schema : null,
       autorun: false,
-      sql: 'SELECT ...',
+      sql: `${t(
+        '-- Note: Unless you save your query, these tabs will NOT persist if you clear your cookies or change browsers.',
+      )}\n\nSELECT ...`,
     };
     this.props.actions.addQueryEditor(qe);
   }
@@ -147,7 +150,7 @@ class TabbedSqlEditors extends React.PureComponent {
   }
   render() {
     const editors = this.props.queryEditors.map((qe, i) => {
-      const isSelected = (qe.id === this.activeQueryEditor().id);
+      const isSelected = qe.id === this.activeQueryEditor().id;
 
       let latestQuery;
       if (qe.latestQueryId) {
@@ -157,45 +160,48 @@ class TabbedSqlEditors extends React.PureComponent {
       if (qe.dbId) {
         database = this.props.databases[qe.dbId];
       }
-      const state = (latestQuery) ? latestQuery.state : '';
+      const state = latestQuery ? latestQuery.state : '';
 
       const tabTitle = (
         <div>
-          <TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} /> {qe.title} {' '}
+          <TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} />{' '}
+          {qe.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} />
-            }
+            {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>
       );
       return (
-        <Tab
-          key={qe.id}
-          title={tabTitle}
-          eventKey={qe.id}
-        >
+        <Tab key={qe.id} title={tabTitle} eventKey={qe.id}>
           <div className="panel panel-default">
             <div className="panel-body">
-              {isSelected &&
+              {isSelected && (
                 <SqlEditor
                   getHeight={this.props.getHeight}
-                  tables={this.props.tables.filter(xt => (xt.queryEditorId === qe.id))}
+                  tables={this.props.tables.filter(xt => xt.queryEditorId === qe.id)}
                   queryEditor={qe}
                   editorQueries={this.state.queriesArray}
                   dataPreviewQueries={this.state.dataPreviewQueries}
@@ -204,10 +210,11 @@ class TabbedSqlEditors extends React.PureComponent {
                   actions={this.props.actions}
                   hideLeftBar={this.state.hideLeftBar}
                 />
-              }
+              )}
             </div>
           </div>
-        </Tab>);
+        </Tab>
+      );
     });
     return (
       <Tabs
@@ -221,7 +228,8 @@ class TabbedSqlEditors extends React.PureComponent {
           title={
             <div>
               <i className="fa fa-plus-circle" />&nbsp;
-            </div>}
+            </div>
+          }
           eventKey="add_tab"
         />
       </Tabs>
@@ -248,4 +256,8 @@ function mapDispatchToProps(dispatch) {
 }
 
 export { TabbedSqlEditors };
-export default connect(mapStateToProps, mapDispatchToProps)(TabbedSqlEditors);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(TabbedSqlEditors);

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);
 }