superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch master updated: Minor improvements to SQL Lab UI (#5662)
Date Mon, 20 Aug 2018 05:43:08 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new cdd348a  Minor improvements to SQL Lab UI (#5662)
cdd348a is described below

commit cdd348ab94b075cf3505b7e2dd84206dc3aede82
Author: Krist Wongsuphasawat <krist.wongz@gmail.com>
AuthorDate: Sun Aug 19 22:43:00 2018 -0700

    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
---
 .../src/SqlLab/components/CopyQueryTabUrl.jsx      |  7 +++++--
 .../assets/src/SqlLab/components/SouthPane.jsx     |  2 +-
 .../src/SqlLab/components/SqlEditorLeftBar.jsx     | 16 +++++++++++++--
 .../src/SqlLab/components/TabbedSqlEditors.jsx     | 24 ++++++++++++++++------
 .../assets/src/SqlLab/components/TableElement.jsx  |  9 ++++----
 .../src/SqlLab/components/TemplateParamsEditor.jsx |  2 +-
 superset/assets/src/SqlLab/main.less               | 23 +++++++++++++++++++++
 superset/assets/src/SqlLab/reducers.js             |  2 +-
 superset/assets/src/reduxUtils.js                  |  8 ++++++--
 9 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/superset/assets/src/SqlLab/components/CopyQueryTabUrl.jsx b/superset/assets/src/SqlLab/components/CopyQueryTabUrl.jsx
index fed7c28..e48fe1b 100644
--- a/superset/assets/src/SqlLab/components/CopyQueryTabUrl.jsx
+++ b/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)}
       />
diff --git a/superset/assets/src/SqlLab/components/SouthPane.jsx b/superset/assets/src/SqlLab/components/SouthPane.jsx
index b55fdda..65d17f7 100644
--- a/superset/assets/src/SqlLab/components/SouthPane.jsx
+++ b/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}
       >
diff --git a/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx
index a255ca6..d20d494 100644
--- a/superset/assets/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/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}
diff --git a/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
index 3325afe..cf94b5f 100644
--- a/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
+++ b/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>
diff --git a/superset/assets/src/SqlLab/components/TableElement.jsx b/superset/assets/src/SqlLab/components/TableElement.jsx
index 624a0ed..b1e53a9 100644
--- a/superset/assets/src/SqlLab/components/TableElement.jsx
+++ b/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()}
diff --git a/superset/assets/src/SqlLab/components/TemplateParamsEditor.jsx b/superset/assets/src/SqlLab/components/TemplateParamsEditor.jsx
index d22b9ab..8a3387a 100644
--- a/superset/assets/src/SqlLab/components/TemplateParamsEditor.jsx
+++ b/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"
diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
index be6d364..9ed25be 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/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;
 
diff --git a/superset/assets/src/SqlLab/reducers.js b/superset/assets/src/SqlLab/reducers.js
index a55a022..ec88027 100644
--- a/superset/assets/src/SqlLab/reducers.js
+++ b/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
});
       }
diff --git a/superset/assets/src/reduxUtils.js b/superset/assets/src/reduxUtils.js
index 8b1062a..4a8d944 100644
--- a/superset/assets/src/reduxUtils.js
+++ b/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);
 }
 


Mime
View raw message