feat(sqllab): Add event logger (#23040)

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

@@ -19,21 +19,29 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-
-import { shallow } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 
 import App from 'src/SqlLab/components/App';
-import TabbedSqlEditors from 'src/SqlLab/components/TabbedSqlEditors';
 import sqlLabReducer from 'src/SqlLab/reducers/index';
+import { LOCALSTORAGE_MAX_USAGE_KB } from 'src/SqlLab/constants';
+import { LOG_EVENT } from 'src/logger/actions';
+
+jest.mock('src/SqlLab/components/TabbedSqlEditors', () => () => (
+  <div data-test="mock-tabbed-sql-editors" />
+));
+jest.mock('src/SqlLab/components/QueryAutoRefresh', () => () => (
+  <div data-test="mock-query-auto-refresh" />
+));
 
 describe('SqlLab App', () => {
   const middlewares = [thunk];
   const mockStore = configureStore(middlewares);
   const store = mockStore(sqlLabReducer(undefined, {}), {});
-  let wrapper;
-
   beforeEach(() => {
-    wrapper = shallow(<App store={store} />).dive();
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
   });
 
   it('is valid', () => {
@@ -41,8 +49,31 @@ describe('SqlLab App', () => {
   });
 
   it('should render', () => {
-    const inner = wrapper.dive();
-    expect(inner.find('.SqlLab')).toHaveLength(1);
-    expect(inner.find(TabbedSqlEditors)).toHaveLength(1);
+    const { getByTestId } = render(<App />, { useRedux: true, store });
+    expect(getByTestId('SqlLabApp')).toBeInTheDocument();
+    expect(getByTestId('mock-tabbed-sql-editors')).toBeInTheDocument();
+  });
+
+  it('logs current usage warning', async () => {
+    const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB + 10;
+    const storeExceedLocalStorage = mockStore(
+      sqlLabReducer(
+        {
+          localStorageUsageInKilobytes,
+        },
+        {},
+      ),
+    );
+
+    const { rerender } = render(<App />, {
+      useRedux: true,
+      store: storeExceedLocalStorage,
+    });
+    rerender(<App updated />);
+    expect(storeExceedLocalStorage.getActions()).toContainEqual(
+      expect.objectContaining({
+        type: LOG_EVENT,
+      }),
+    );
   });
 });

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

@@ -29,6 +29,8 @@ import {
   LOCALSTORAGE_WARNING_MESSAGE_THROTTLE_MS,
 } from 'src/SqlLab/constants';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
+import { logEvent } from 'src/logger/actions';
+import { LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE } from 'src/logger/LogUtils';
 import TabbedSqlEditors from '../TabbedSqlEditors';
 import QueryAutoRefresh from '../QueryAutoRefresh';
 
@@ -125,6 +127,7 @@ class App extends React.PureComponent {
     ) {
       this.showLocalStorageUsageWarning(
         this.props.localStorageUsageInKilobytes,
+        this.props.queries?.lenghth || 0,
       );
     }
   }
@@ -140,7 +143,7 @@ class App extends React.PureComponent {
     this.setState({ hash: window.location.hash });
   }
 
-  showLocalStorageUsageWarning(currentUsage) {
+  showLocalStorageUsageWarning(currentUsage, queryCount) {
     this.props.actions.addDangerToast(
       t(
         "SQL Lab uses your browser's local storage to store queries and results." +
@@ -154,6 +157,14 @@ class App extends React.PureComponent {
         },
       ),
     );
+    const eventData = {
+      current_usage: currentUsage,
+      query_count: queryCount,
+    };
+    this.props.actions.logEvent(
+      LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
+      eventData,
+    );
   }
 
   render() {
@@ -162,7 +173,7 @@ class App extends React.PureComponent {
       return window.location.replace('/superset/sqllab/history/');
     }
     return (
-      <SqlLabStyles className="App SqlLab">
+      <SqlLabStyles data-test="SqlLabApp" className="App SqlLab">
         <QueryAutoRefresh
           queries={queries}
           refreshQueries={actions?.refreshQueries}
@@ -193,7 +204,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(Actions, dispatch),
+    actions: bindActionCreators({ ...Actions, logEvent }, dispatch),
   };
 }