Optimize trackRedisHllUserEvent calls on MRs

app/assets/javascripts/diffs/components/app.vue

@@ -46,6 +46,7 @@ import diffsEventHub from '../event_hub';
 import { reviewStatuses } from '../utils/file_reviews';
 import { diffsApp } from '../utils/performance';
 import { fileByFile } from '../utils/preferences';
+import { queueRedisHllEvents } from '../utils/queue_events';
 import CollapsedFilesWarning from './collapsed_files_warning.vue';
 import CommitWidget from './commit_widget.vue';
 import CompareVersions from './compare_versions.vue';
@@ -337,29 +338,33 @@ export default {
     }
 
     if (window.gon?.features?.diffSettingsUsageData) {
+      const events = [];
+
       if (this.renderTreeList) {
-        api.trackRedisHllUserEvent(TRACKING_FILE_BROWSER_TREE);
+        events.push(TRACKING_FILE_BROWSER_TREE);
       } else {
-        api.trackRedisHllUserEvent(TRACKING_FILE_BROWSER_LIST);
+        events.push(TRACKING_FILE_BROWSER_LIST);
       }
 
       if (this.diffViewType === INLINE_DIFF_VIEW_TYPE) {
-        api.trackRedisHllUserEvent(TRACKING_DIFF_VIEW_INLINE);
+        events.push(TRACKING_DIFF_VIEW_INLINE);
       } else {
-        api.trackRedisHllUserEvent(TRACKING_DIFF_VIEW_PARALLEL);
+        events.push(TRACKING_DIFF_VIEW_PARALLEL);
       }
 
       if (this.showWhitespace) {
-        api.trackRedisHllUserEvent(TRACKING_WHITESPACE_SHOW);
+        events.push(TRACKING_WHITESPACE_SHOW);
       } else {
-        api.trackRedisHllUserEvent(TRACKING_WHITESPACE_HIDE);
+        events.push(TRACKING_WHITESPACE_HIDE);
       }
 
       if (this.viewDiffsFileByFile) {
-        api.trackRedisHllUserEvent(TRACKING_SINGLE_FILE_MODE);
+        events.push(TRACKING_SINGLE_FILE_MODE);
       } else {
-        api.trackRedisHllUserEvent(TRACKING_MULTIPLE_FILES_MODE);
+        events.push(TRACKING_MULTIPLE_FILES_MODE);
       }
+
+      queueRedisHllEvents(events);
     }
   },
   beforeCreate() {

app/assets/javascripts/diffs/constants.js

@@ -111,6 +111,8 @@ export const CONFLICT_MARKER_OUR = 'conflict_marker_our';
 export const CONFLICT_MARKER_THEIR = 'conflict_marker_their';
 
 // Tracking events
+export const DEFER_DURATION = 750;
+
 export const TRACKING_CLICK_DIFF_VIEW_SETTING = 'i_code_review_click_diff_view_setting';
 export const TRACKING_DIFF_VIEW_INLINE = 'i_code_review_diff_view_inline';
 export const TRACKING_DIFF_VIEW_PARALLEL = 'i_code_review_diff_view_parallel';

app/assets/javascripts/diffs/store/actions.js

 import Cookies from 'js-cookie';
 import Vue from 'vue';
-import api from '~/api';
 import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
@@ -50,6 +49,7 @@ import eventHub from '../event_hub';
 import { isCollapsed } from '../utils/diff_file';
 import { markFileReview, setReviewsForMergeRequest } from '../utils/file_reviews';
 import { getDerivedMergeRequestInformation } from '../utils/merge_request';
+import { queueRedisHllEvents } from '../utils/queue_events';
 import TreeWorker from '../workers/tree_worker';
 import * as types from './mutation_types';
 import {
@@ -368,8 +368,7 @@ export const setInlineDiffViewType = ({ commit }) => {
   historyPushState(url);
 
   if (window.gon?.features?.diffSettingsUsageData) {
-    api.trackRedisHllUserEvent(TRACKING_CLICK_DIFF_VIEW_SETTING);
-    api.trackRedisHllUserEvent(TRACKING_DIFF_VIEW_INLINE);
+    queueRedisHllEvents([TRACKING_CLICK_DIFF_VIEW_SETTING, TRACKING_DIFF_VIEW_INLINE]);
   }
 };
 
@@ -381,8 +380,7 @@ export const setParallelDiffViewType = ({ commit }) => {
   historyPushState(url);
 
   if (window.gon?.features?.diffSettingsUsageData) {
-    api.trackRedisHllUserEvent(TRACKING_CLICK_DIFF_VIEW_SETTING);
-    api.trackRedisHllUserEvent(TRACKING_DIFF_VIEW_PARALLEL);
+    queueRedisHllEvents([TRACKING_CLICK_DIFF_VIEW_SETTING, TRACKING_DIFF_VIEW_PARALLEL]);
   }
 };
 
@@ -566,13 +564,15 @@ export const setRenderTreeList = ({ commit }, { renderTreeList, trackClick = tru
   localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
 
   if (window.gon?.features?.diffSettingsUsageData && trackClick) {
-    api.trackRedisHllUserEvent(TRACKING_CLICK_FILE_BROWSER_SETTING);
+    const events = [TRACKING_CLICK_FILE_BROWSER_SETTING];
 
     if (renderTreeList) {
-      api.trackRedisHllUserEvent(TRACKING_FILE_BROWSER_TREE);
+      events.push(TRACKING_FILE_BROWSER_TREE);
     } else {
-      api.trackRedisHllUserEvent(TRACKING_FILE_BROWSER_LIST);
+      events.push(TRACKING_FILE_BROWSER_LIST);
     }
+
+    queueRedisHllEvents(events);
   }
 };
 
@@ -588,13 +588,15 @@ export const setShowWhitespace = async (
   notesEventHub.$emit('refetchDiffData');
 
   if (window.gon?.features?.diffSettingsUsageData && trackClick) {
-    api.trackRedisHllUserEvent(TRACKING_CLICK_WHITESPACE_SETTING);
+    const events = [TRACKING_CLICK_WHITESPACE_SETTING];
 
     if (showWhitespace) {
-      api.trackRedisHllUserEvent(TRACKING_WHITESPACE_SHOW);
+      events.push(TRACKING_WHITESPACE_SHOW);
     } else {
-      api.trackRedisHllUserEvent(TRACKING_WHITESPACE_HIDE);
+      events.push(TRACKING_WHITESPACE_HIDE);
     }
+
+    queueRedisHllEvents(events);
   }
 };
 
@@ -815,13 +817,15 @@ export const setFileByFile = ({ state, commit }, { fileByFile }) => {
   Cookies.set(DIFF_FILE_BY_FILE_COOKIE_NAME, fileViewMode);
 
   if (window.gon?.features?.diffSettingsUsageData) {
-    api.trackRedisHllUserEvent(TRACKING_CLICK_SINGLE_FILE_SETTING);
+    const events = [TRACKING_CLICK_SINGLE_FILE_SETTING];
 
     if (fileByFile) {
-      api.trackRedisHllUserEvent(TRACKING_SINGLE_FILE_MODE);
+      events.push(TRACKING_SINGLE_FILE_MODE);
     } else {
-      api.trackRedisHllUserEvent(TRACKING_MULTIPLE_FILES_MODE);
+      events.push(TRACKING_MULTIPLE_FILES_MODE);
     }
+
+    queueRedisHllEvents(events);
   }
 
   return axios

app/assets/javascripts/diffs/utils/queue_events.js

+import { delay } from 'lodash';
+import api from '~/api';
+import { DEFER_DURATION } from '../constants';
+
+function trackRedisHllUserEvent(event, deferDuration = 0) {
+  delay(() => api.trackRedisHllUserEvent(event), deferDuration);
+}
+
+export function queueRedisHllEvents(events) {
+  events.forEach((event, index) => {
+    trackRedisHllUserEvent(event, DEFER_DURATION * (index + 1));
+  });
+}

spec/frontend/diffs/utils/queue_events_spec.js

+import api from '~/api';
+import { DEFER_DURATION } from '~/diffs/constants';
+import { queueRedisHllEvents } from '~/diffs/utils/queue_events';
+
+jest.mock('~/api', () => ({
+  trackRedisHllUserEvent: jest.fn(),
+}));
+
+describe('diffs events queue', () => {
+  describe('queueRedisHllEvents', () => {
+    it('does not dispatch the event immediately', () => {
+      queueRedisHllEvents(['know_event']);
+      expect(api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+    });
+
+    it('does dispatch the event after the defer duration', () => {
+      queueRedisHllEvents(['know_event']);
+      jest.advanceTimersByTime(DEFER_DURATION + 1);
+      expect(api.trackRedisHllUserEvent).toHaveBeenCalled();
+    });
+
+    it('increase defer duration based on the provided events count', () => {
+      let deferDuration = DEFER_DURATION + 1;
+      const events = ['know_event_a', 'know_event_b', 'know_event_c'];
+      queueRedisHllEvents(events);
+
+      expect(api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+
+      events.forEach((event, index) => {
+        jest.advanceTimersByTime(deferDuration);
+        expect(api.trackRedisHllUserEvent).toHaveBeenLastCalledWith(event);
+        deferDuration *= index + 1;
+      });
+    });
+  });
+});