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

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) {