You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/08/20 05:43:08 UTC
[incubator-superset] branch master updated: Minor improvements to
SQL Lab UI (#5662)
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 <kr...@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')}
+
+ <small>
+ ({this.state.tableOptions.length}
+ {t('in')}
+ <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" />
-
- {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
<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);
}