Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Aug 18, 2018
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,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(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the only functional change

'-- 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);
}
Expand All @@ -150,7 +153,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) {
Expand All @@ -160,25 +163,20 @@ 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} {' '}
<DropdownButton
bsSize="small"
id={'ddbtn-tab-' + i}
title=""
>
<TabStatusIcon onClose={this.removeQueryEditor.bind(this, qe)} tabState={state} />{' '}
{qe.title}{' '}
<DropdownButton bsSize="small" id={'ddbtn-tab-' + i} title="">
<MenuItem eventKey="1" onClick={this.removeQueryEditor.bind(this, qe)}>
<i className="fa fa-close" /> {t('close tab')}
</MenuItem>
<MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
<i className="fa fa-i-cursor" /> {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;
Expand All @@ -188,17 +186,13 @@ class TabbedSqlEditors extends React.PureComponent {
</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}
Expand All @@ -207,10 +201,11 @@ class TabbedSqlEditors extends React.PureComponent {
actions={this.props.actions}
hideLeftBar={this.state.hideLeftBar}
/>
}
)}
</div>
</div>
</Tab>);
</Tab>
);
});
return (
<Tabs
Expand All @@ -224,7 +219,8 @@ class TabbedSqlEditors extends React.PureComponent {
title={
<div>
<i className="fa fa-plus-circle" />&nbsp;
</div>}
</div>
}
eventKey="add_tab"
/>
</Tabs>
Expand All @@ -251,4 +247,8 @@ function mapDispatchToProps(dispatch) {
}

export { TabbedSqlEditors };
export default connect(mapStateToProps, mapDispatchToProps)(TabbedSqlEditors);

export default connect(
mapStateToProps,
mapDispatchToProps,
)(TabbedSqlEditors);