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

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

* Load state when switching tabs

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -60,6 +60,7 @@ export const QUERY_EDITOR_SET_SELECTED_TEXT = 'QUERY_EDITOR_SET_SELECTED_TEXT';
 export const QUERY_EDITOR_SET_FUNCTION_NAMES =
   'QUERY_EDITOR_SET_FUNCTION_NAMES';
 export const QUERY_EDITOR_PERSIST_HEIGHT = 'QUERY_EDITOR_PERSIST_HEIGHT';
+export const QUERY_EDITOR_TOGGLE_LEFT_BAR = 'QUERY_EDITOR_TOGGLE_LEFT_BAR';
 export const MIGRATE_QUERY_EDITOR = 'MIGRATE_QUERY_EDITOR';
 export const MIGRATE_TAB_HISTORY = 'MIGRATE_TAB_HISTORY';
 export const MIGRATE_TABLE = 'MIGRATE_TABLE';
@@ -637,6 +638,7 @@ export function switchQueryEditor(queryEditor, displayLimit) {
               errors: [],
               completed: false,
             },
+            hideLeftBar: json.hide_left_bar,
           };
           dispatch(loadQueryEditor(loadedQueryEditor));
           dispatch(setTables(json.table_schemas || []));
@@ -663,6 +665,36 @@ export function setActiveSouthPaneTab(tabId) {
   return { type: SET_ACTIVE_SOUTHPANE_TAB, tabId };
 }
 
+export function toggleLeftBar(queryEditor) {
+  const hideLeftBar = !queryEditor.hideLeftBar;
+  return function (dispatch) {
+    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+      ? SupersetClient.put({
+          endpoint: encodeURI(`/tabstateview/${queryEditor.id}`),
+          postPayload: { hide_left_bar: hideLeftBar },
+        })
+      : Promise.resolve();
+
+    return sync
+      .then(() =>
+        dispatch({
+          type: QUERY_EDITOR_TOGGLE_LEFT_BAR,
+          queryEditor,
+          hideLeftBar,
+        }),
+      )
+      .catch(() =>
+        dispatch(
+          addDangerToast(
+            t(
+              'An error occurred while hiding the left bar. Please contact your administrator.',
+            ),
+          ),
+        ),
+      );
+  };
+}
+
 export function removeQueryEditor(queryEditor) {
   return function (dispatch) {
     const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -688,14 +688,17 @@ 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
           classNames="schemaPane"
           in={!this.props.hideLeftBar}
           timeout={300}
         >
-          <div className="schemaPane">
+          <div className={`schemaPane ${leftBarStateClass}`}>
             <SqlEditorLeftBar
               database={this.props.database}
               queryEditor={this.props.queryEditor}

superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -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}

superset-frontend/src/SqlLab/reducers/getInitialState.js

@@ -60,6 +60,7 @@ export default function getInitialState({
       completed: false,
       error: null,
     },
+    hideLeftBar: false,
   };
 
   /**
@@ -89,6 +90,7 @@ export default function getInitialState({
           errors: [],
           completed: false,
         },
+        hideLeftBar: activeTab.hide_left_bar,
       };
     } else {
       // dummy state, actual state will be loaded on tab switch

superset-frontend/src/SqlLab/reducers/sqlLab.js

@@ -490,6 +490,11 @@ export default function sqlLabReducer(state = {}, action) {
         southPercent: action.southPercent,
       });
     },
+    [actions.QUERY_EDITOR_TOGGLE_LEFT_BAR]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, {
+        hideLeftBar: action.hideLeftBar,
+      });
+    },
     [actions.SET_DATABASES]() {
       const databases = {};
       action.databases.forEach(db => {

superset-frontend/src/SqlLab/utils/reduxStateToLocalStorageHelper.js

@@ -33,6 +33,7 @@ const PERSISTENT_QUERY_EDITOR_KEYS = new Set([
   'sql',
   'templateParams',
   'title',
+  'hideLeftBar',
 ]);
 
 export function emptyQueryResults(queries) {

superset/migrations/versions/67da9ef1ef9c_add_hide_left_bar_to_tabstate.py

@@ -0,0 +1,43 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+"""add hide_left_bar to tabstate
+
+Revision ID: 67da9ef1ef9c
+Revises: c501b7c653a3
+Create Date: 2021-02-22 11:22:10.156942
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = "67da9ef1ef9c"
+down_revision = "c501b7c653a3"
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.dialects import mysql
+
+
+def upgrade():
+    with op.batch_alter_table("tab_state") as batch_op:
+        batch_op.add_column(
+            sa.Column("hide_left_bar", sa.Boolean(), nullable=False, default=False)
+        )
+
+
+def downgrade():
+    with op.batch_alter_table("tab_state") as batch_op:
+        batch_op.drop_column("hide_left_bar")

superset/models/sql_lab.py

@@ -277,6 +277,7 @@ class TabState(Model, AuditMixinNullable, ExtraJSONMixin):
     # other properties
     autorun = Column(Boolean, default=False)
     template_params = Column(Text)
+    hide_left_bar = Column(Boolean, default=False)
 
     def to_dict(self) -> Dict[str, Any]:
         return {
@@ -292,6 +293,7 @@ def to_dict(self) -> Dict[str, Any]:
             "latest_query": self.latest_query.to_dict() if self.latest_query else None,
             "autorun": self.autorun,
             "template_params": self.template_params,
+            "hide_left_bar": self.hide_left_bar,
         }
 
 

superset/views/sql_lab.py

@@ -141,6 +141,7 @@ def post(self) -> FlaskResponse:  # pylint: disable=no-self-use
             schema=query_editor.get("schema"),
             sql=query_editor.get("sql", "SELECT ..."),
             query_limit=query_editor.get("queryLimit"),
+            hide_left_bar=query_editor.get("hideLeftBar"),
         )
         (
             db.session.query(TabState)