pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[sqllab] call out transient state of tabs to users (#5652)

This commit is contained in:
Chris Williams 2018-08-17 17:44:56 -07:00 committed by GitHub
parent 0a1aa6dd50
commit 3d15d910af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
View File

@ -126,12 +126,15 @@ class TabbedSqlEditors extends React.PureComponent {
const activeQueryEditor = this.activeQueryEditor(); const activeQueryEditor = this.activeQueryEditor();
const qe = { const qe = {
title: t('Untitled Query %s', queryCount), title: t('Untitled Query %s', queryCount),
dbId: (activeQueryEditor && activeQueryEditor.dbId) ? dbId:
activeQueryEditor.dbId : activeQueryEditor && activeQueryEditor.dbId
this.props.defaultDbId, ? activeQueryEditor.dbId
schema: (activeQueryEditor) ? activeQueryEditor.schema : null, : this.props.defaultDbId,
schema: activeQueryEditor ? activeQueryEditor.schema : null,
autorun: false, 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); this.props.actions.addQueryEditor(qe);
} }
@ -150,7 +153,7 @@ class TabbedSqlEditors extends React.PureComponent {
} }
render() { render() {
const editors = this.props.queryEditors.map((qe, i) => { const editors = this.props.queryEditors.map((qe, i) => {
const isSelected = (qe.id === this.activeQueryEditor().id); const isSelected = qe.id === this.activeQueryEditor().id;
let latestQuery; let latestQuery;
if (qe.latestQueryId) { if (qe.latestQueryId) {
@ -160,25 +163,20 @@ class TabbedSqlEditors extends React.PureComponent {
if (qe.dbId) { if (qe.dbId) {
database = this.props.databases[qe.dbId]; database = this.props.databases[qe.dbId];
} }
const state = (latestQuery) ? latestQuery.state : ''; const state = latestQuery ? latestQuery.state : '';
const tabTitle = ( const tabTitle = (
<div> <div>
<TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} /> {qe.title} {' '} <TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} />{' '}
<DropdownButton {qe.title}{' '}
bsSize="small" <DropdownButton bsSize="small" id={'ddbtn-tab-' + i} title="">
id={'ddbtn-tab-' + i}
title=""
>
<MenuItem eventKey="1" onClick={this.removeQueryEditor.bind(this, qe)}> <MenuItem eventKey="1" onClick={this.removeQueryEditor.bind(this, qe)}>
<i className="fa fa-close" /> {t('close tab')} <i className="fa fa-close" /> {t('close tab')}
</MenuItem> </MenuItem>
<MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}> <MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
<i className="fa fa-i-cursor" /> {t('rename tab')} <i className="fa fa-i-cursor" /> {t('rename tab')}
</MenuItem> </MenuItem>
{qe && {qe && <CopyQueryTabUrl queryEditor={qe} />}
<CopyQueryTabUrl queryEditor={qe} />
}
<MenuItem eventKey="4" onClick={this.toggleLeftBar.bind(this)}> <MenuItem eventKey="4" onClick={this.toggleLeftBar.bind(this)}>
<i className="fa fa-cogs" /> <i className="fa fa-cogs" />
&nbsp; &nbsp;
@ -188,17 +186,13 @@ class TabbedSqlEditors extends React.PureComponent {
</div> </div>
); );
return ( return (
<Tab <Tab key={qe.id} title={tabTitle} eventKey={qe.id}>
key={qe.id}
title={tabTitle}
eventKey={qe.id}
>
<div className="panel panel-default"> <div className="panel panel-default">
<div className="panel-body"> <div className="panel-body">
{isSelected && {isSelected && (
<SqlEditor <SqlEditor
getHeight={this.props.getHeight} 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} queryEditor={qe}
editorQueries={this.state.queriesArray} editorQueries={this.state.queriesArray}
dataPreviewQueries={this.state.dataPreviewQueries} dataPreviewQueries={this.state.dataPreviewQueries}
@ -207,10 +201,11 @@ class TabbedSqlEditors extends React.PureComponent {
actions={this.props.actions} actions={this.props.actions}
hideLeftBar={this.state.hideLeftBar} hideLeftBar={this.state.hideLeftBar}
/> />
} )}
</div> </div>
</div> </div>
</Tab>); </Tab>
);
}); });
return ( return (
<Tabs <Tabs
@ -224,7 +219,8 @@ class TabbedSqlEditors extends React.PureComponent {
title={ title={
<div> <div>
<i className="fa fa-plus-circle" />&nbsp; <i className="fa fa-plus-circle" />&nbsp;
</div>} </div>
}
eventKey="add_tab" eventKey="add_tab"
/> />
</Tabs> </Tabs>
@ -251,4 +247,8 @@ function mapDispatchToProps(dispatch) {
} }
export { TabbedSqlEditors }; export { TabbedSqlEditors };
export default connect(mapStateToProps, mapDispatchToProps)(TabbedSqlEditors);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(TabbedSqlEditors);