Keep tabs on switch and set event binder for shortcut

superset-frontend/src/SqlLab/components/App/App.test.tsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import { AnyAction, combineReducers } from 'redux';
+import Mousetrap from 'mousetrap';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { render } from 'spec/helpers/testing-library';
@@ -37,6 +38,9 @@ jest.mock('src/SqlLab/components/TabbedSqlEditors', () => () => (
 jest.mock('src/SqlLab/components/QueryAutoRefresh', () => () => (
   <div data-test="mock-query-auto-refresh" />
 ));
+jest.mock('mousetrap', () => ({
+  reset: jest.fn(),
+}));
 
 const sqlLabReducer = combineReducers({
   localStorageUsageInKilobytes: reducers.localStorageUsageInKilobytes,
@@ -48,6 +52,14 @@ describe('SqlLab App', () => {
   const mockStore = configureStore(middlewares);
   const store = mockStore(sqlLabReducer(undefined, mockAction));
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('is valid', () => {
     expect(React.isValidElement(<App />)).toBe(true);
   });
@@ -58,7 +70,13 @@ describe('SqlLab App', () => {
     expect(getByTestId('mock-tabbed-sql-editors')).toBeInTheDocument();
   });
 
-  it('logs current usage warning', async () => {
+  it('reset hotkey events on unmount', () => {
+    const { unmount } = render(<App />, { useRedux: true, store });
+    unmount();
+    expect(Mousetrap.reset).toHaveBeenCalled();
+  });
+
+  it('logs current usage warning', () => {
     const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB + 10;
     const initialState = {
       localStorageUsageInKilobytes,

superset-frontend/src/SqlLab/components/App/index.tsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
+import Mousetrap from 'mousetrap';
 import { css, styled, t } from '@superset-ui/core';
 import { throttle } from 'lodash';
 import {
@@ -165,6 +166,8 @@ class App extends React.PureComponent<AppProps, AppState> {
 
     // And now we need to reset the overscroll behavior back to the default.
     document.body.style.overscrollBehaviorX = 'auto';
+
+    Mousetrap.reset();
   }
 
   onHashChanged() {

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -244,29 +244,33 @@ const SqlEditor: React.FC<Props> = ({
   const theme = useTheme();
   const dispatch = useDispatch();
 
-  const { database, latestQuery, hideLeftBar } = useSelector<
-    SqlLabRootState,
-    {
-      database?: DatabaseObject;
-      latestQuery?: QueryResponse;
-      hideLeftBar?: boolean;
-    }
-  >(({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
-    let { dbId, latestQueryId, hideLeftBar } = queryEditor;
-    if (unsavedQueryEditor?.id === queryEditor.id) {
-      dbId = unsavedQueryEditor.dbId || dbId;
-      latestQueryId = unsavedQueryEditor.latestQueryId || latestQueryId;
-      hideLeftBar = isBoolean(unsavedQueryEditor.hideLeftBar)
-        ? unsavedQueryEditor.hideLeftBar
-        : hideLeftBar;
-    }
-    return {
-      database: databases[dbId || ''],
-      latestQuery: queries[latestQueryId || ''],
-      hideLeftBar,
-    };
-  }, shallowEqual);
-
+  const { database, latestQuery, hideLeftBar, currentQueryEditorId } =
+    useSelector<
+      SqlLabRootState,
+      {
+        database?: DatabaseObject;
+        latestQuery?: QueryResponse;
+        hideLeftBar?: boolean;
+        currentQueryEditorId: QueryEditor['id'];
+      }
+    >(({ sqlLab: { unsavedQueryEditor, databases, queries, tabHistory } }) => {
+      let { dbId, latestQueryId, hideLeftBar } = queryEditor;
+      if (unsavedQueryEditor?.id === queryEditor.id) {
+        dbId = unsavedQueryEditor.dbId || dbId;
+        latestQueryId = unsavedQueryEditor.latestQueryId || latestQueryId;
+        hideLeftBar = isBoolean(unsavedQueryEditor.hideLeftBar)
+          ? unsavedQueryEditor.hideLeftBar
+          : hideLeftBar;
+      }
+      return {
+        database: databases[dbId || ''],
+        latestQuery: queries[latestQueryId || ''],
+        hideLeftBar,
+        currentQueryEditorId: tabHistory.slice(-1)[0],
+      };
+    }, shallowEqual);
+
+  const isActive = currentQueryEditorId === queryEditor.id;
   const [height, setHeight] = useState(0);
   const [autorun, setAutorun] = useState(queryEditor.autorun);
   const [ctas, setCtas] = useState('');
@@ -498,16 +502,17 @@ const SqlEditor: React.FC<Props> = ({
       () => setHeight(getSqlEditorHeight()),
       WINDOW_RESIZE_THROTTLE_MS,
     );
-
-    window.addEventListener('resize', handleWindowResizeWithThrottle);
-    window.addEventListener('beforeunload', onBeforeUnload);
+    if (isActive) {
+      window.addEventListener('resize', handleWindowResizeWithThrottle);
+      window.addEventListener('beforeunload', onBeforeUnload);
+    }
 
     return () => {
       window.removeEventListener('resize', handleWindowResizeWithThrottle);
       window.removeEventListener('beforeunload', onBeforeUnload);
     };
     // TODO: Remove useEffectEvent deps once https://github.com/facebook/react/pull/25881 is released
-  }, [onBeforeUnload]);
+  }, [onBeforeUnload, isActive]);
 
   useEffect(() => {
     if (!database || isEmpty(database)) {
@@ -518,15 +523,14 @@ const SqlEditor: React.FC<Props> = ({
   useEffect(() => {
     // setup hotkeys
     const hotkeys = getHotkeyConfig();
-    hotkeys.forEach(keyConfig => {
-      Mousetrap.bind([keyConfig.key], keyConfig.func);
-    });
-    return () => {
+    if (isActive) {
+      // MouseTrap always override the same key
+      // Unbind (reset) will be called when App component unmount
       hotkeys.forEach(keyConfig => {
-        Mousetrap.unbind(keyConfig.key);
+        Mousetrap.bind([keyConfig.key], keyConfig.func);
       });
-    };
-  }, [getHotkeyConfig, latestQuery]);
+    }
+  }, [getHotkeyConfig, latestQuery, isActive]);
 
   const onResizeStart = () => {
     // Set the heights on the ace editor and the ace content area after drag starts

superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx

@@ -281,7 +281,6 @@ class TabbedSqlEditors extends React.PureComponent<TabbedSqlEditorsProps> {
 
     return (
       <StyledEditableTabs
-        destroyInactiveTabPane
         activeKey={this.props.tabHistory[this.props.tabHistory.length - 1]}
         id="a11y-query-editor-tabs"
         className="SqlEditorTabs"