mirror of https://github.com/apache/superset.git
[sqllab] call out transient state of tabs to users (#5652)
This commit is contained in:
parent
0a1aa6dd50
commit
3d15d910af
|
@ -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" />
|
||||||
|
|
||||||
|
@ -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" />
|
<i className="fa fa-plus-circle" />
|
||||||
</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);
|
||||||
|
|
Loading…
Reference in New Issue