chore(sqllab): add logging for switching south panel tabs (#36168) (#36369)

Author: justinpark

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

@@ -29,6 +29,8 @@ import Icons from 'src/components/Icons';
 import { SqlLabRootState } from 'src/SqlLab/types';
 import { useExtensionsContext } from 'src/extensions/ExtensionsContext';
 import ExtensionsManager from 'src/extensions/ExtensionsManager';
+import useLogAction from 'src/logger/useLogAction';
+import { LOG_ACTIONS_SQLLAB_SWITCH_SOUTH_PANE_TAB } from 'src/logger/LogUtils';
 import QueryHistory from '../QueryHistory';
 import {
   STATUS_OPTIONS,
@@ -128,8 +130,10 @@ const SouthPane = ({
   );
   const innerTabContentHeight = height - TAB_HEIGHT;
   const southPaneRef = createRef<HTMLDivElement>();
+  const logAction = useLogAction({ sqlEditorId: queryEditorId });
   const switchTab = (id: string) => {
     dispatch(setActiveSouthPaneTab(id));
+    logAction(LOG_ACTIONS_SQLLAB_SWITCH_SOUTH_PANE_TAB, { tab: id });
   };
   const removeTable = useCallback(
     (key, action) => {

superset-frontend/src/logger/LogUtils.ts

@@ -85,6 +85,8 @@ export const LOG_ACTIONS_SQLLAB_COPY_RESULT_TO_CLIPBOARD =
   'sqllab_copy_result_to_clipboard';
 export const LOG_ACTIONS_SQLLAB_CREATE_CHART = 'sqllab_create_chart';
 export const LOG_ACTIONS_SQLLAB_LOAD_TAB_STATE = 'sqllab_load_tab_state';
+export const LOG_ACTIONS_SQLLAB_SWITCH_SOUTH_PANE_TAB =
+  'sqllab_switch_south_pane_tab';
 
 // Log event types --------------------------------------------------------------
 export const LOG_EVENT_TYPE_TIMING = new Set([