fix(sqllab): per-tab hide left bar (#13288)

* fix (sqllab): per-tab hide left bar

* Load state when switching tabs
This commit is contained in:
Beto Dealmeida
2021-03-05 11:16:11 -08:00
committed by GitHub
parent 491fbd16f7
commit 8d48d2e37b
9 changed files with 95 additions and 7 deletions

View File

@@ -688,6 +688,9 @@ class SqlEditor extends React.PureComponent {
? 'Specify name to CREATE VIEW AS schema in: public'
: 'Specify name to CREATE TABLE AS schema in: public';
const leftBarStateClass = this.props.hideLeftBar
? 'schemaPane-exit-done'
: 'schemaPane-enter-done';
return (
<div ref={this.sqlEditorRef} className="SqlEditor">
<CSSTransition
@@ -695,7 +698,7 @@ class SqlEditor extends React.PureComponent {
in={!this.props.hideLeftBar}
timeout={300}
>
<div className="schemaPane">
<div className={`schemaPane ${leftBarStateClass}`}>
<SqlEditorLeftBar
database={this.props.database}
queryEditor={this.props.queryEditor}

View File

@@ -81,7 +81,6 @@ class TabbedSqlEditors extends React.PureComponent {
sqlLabUrl,
queriesArray: [],
dataPreviewQueries: [],
hideLeftBar: false,
};
this.removeQueryEditor = this.removeQueryEditor.bind(this);
this.renameTab = this.renameTab.bind(this);
@@ -312,8 +311,8 @@ class TabbedSqlEditors extends React.PureComponent {
this.props.actions.cloneQueryToNewTab(qe, false);
}
toggleLeftBar() {
this.setState(prevState => ({ hideLeftBar: !prevState.hideLeftBar }));
toggleLeftBar(qe) {
this.props.actions.toggleLeftBar(qe);
}
render() {
@@ -347,11 +346,11 @@ class TabbedSqlEditors extends React.PureComponent {
</div>
{t('Rename tab')}
</Menu.Item>
<Menu.Item key="3" onClick={this.toggleLeftBar}>
<Menu.Item key="3" onClick={() => this.toggleLeftBar(qe)}>
<div className="icon-container">
<i className="fa fa-cogs" />
</div>
{this.state.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</Menu.Item>
<Menu.Item
key="4"
@@ -393,7 +392,7 @@ class TabbedSqlEditors extends React.PureComponent {
latestQuery={latestQuery}
database={database}
actions={this.props.actions}
hideLeftBar={this.state.hideLeftBar}
hideLeftBar={qe.hideLeftBar}
defaultQueryLimit={this.props.defaultQueryLimit}
maxRow={this.props.maxRow}
displayLimit={this.props.displayLimit}