Added support for redis tracking to widget extensions

This adds an extra option to the merge request widgets
extensions that allow for the expansion event to be tracked.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/340528

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -8,6 +8,8 @@ import {
   GlTooltipDirective,
   GlIntersectionObserver,
 } from '@gitlab/ui';
+import { once } from 'lodash';
+import api from '~/api';
 import { sprintf, s__, __ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
@@ -102,8 +104,15 @@ export default {
       });
   },
   methods: {
+    triggerRedisTracking: once(function triggerRedisTracking() {
+      if (this.$options.expandEvent) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
+    }),
     toggleCollapsed() {
       this.isCollapsed = !this.isCollapsed;
+
+      this.triggerRedisTracking();
     },
     loadAllData() {
       if (this.fullData) return;

app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js

@@ -12,6 +12,7 @@ export const registerExtension = (extension) => {
     name: extension.name,
     props: extension.props,
     i18n: extension.i18n,
+    expandEvent: extension.expandEvent,
     computed: {
       ...Object.keys(extension.computed).reduce(
         (acc, computedKey) => ({

app/assets/javascripts/vue_merge_request_widget/extensions/issues.js

@@ -11,6 +11,7 @@ export default {
     label: 'Issues',
     loading: 'Loading issues...',
   },
+  expandEvent: 'i_testing_load_performance_widget_total',
   // Add an array of props
   // These then get mapped to values stored in the MR Widget store
   props: ['targetProjectFullPath', 'conflictsDocsPath'],

ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js

@@ -10,6 +10,7 @@ export default {
     label: s__('ciReport|Browser Performance'),
     loading: s__('ciReport|Browser performance test metrics results are being parsed'),
   },
+  expandEvent: 'i_testing_web_performance_widget_total',
   computed: {
     summary() {
       const { improved, degraded, same } = this.collapsedData;

ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js

@@ -9,6 +9,7 @@ export default {
     label: s__('ciReport|Load Performance'),
     loading: s__('ciReport|Load performance test metrics results are being parsed'),
   },
+  expandEvent: 'i_testing_load_performance_widget_total',
   props: ['loadPerformance'],
   computed: {
     summary() {

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -6,6 +6,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { securityReportMergeRequestDownloadPathsQueryResponse } from 'jest/vue_shared/security_reports/mock_data';
+import api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import { setFaviconOverlay } from '~/lib/utils/favicon';
 import notify from '~/lib/utils/notify';
@@ -23,6 +24,8 @@ import { faviconDataUrl, overlayDataUrl } from '../lib/utils/mock_data';
 import mockData from './mock_data';
 import testExtension from './test_extension';
 
+jest.mock('~/api.js');
+
 jest.mock('~/smart_interval');
 
 jest.mock('~/lib/utils/favicon');
@@ -904,6 +907,18 @@ describe('MrWidgetOptions', () => {
       expect(wrapper.text()).toContain('Test extension summary count: 1');
     });
 
+    it('triggers trackRedisHllUserEvent API call', async () => {
+      await waitForPromises();
+
+      wrapper
+        .find('[data-testid="widget-extension"] [data-testid="toggle-button"]')
+        .trigger('click');
+
+      await Vue.nextTick();
+
+      expect(api.trackRedisHllUserEvent).toHaveBeenCalledWith('test_expand_event');
+    });
+
     it('renders full data', async () => {
       await waitForPromises();
 

spec/frontend/vue_mr_widget/test_extension.js

@@ -3,6 +3,7 @@ import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
 export default {
   name: 'WidgetTestExtension',
   props: ['targetProjectFullPath'],
+  expandEvent: 'test_expand_event',
   computed: {
     summary({ count, targetProjectFullPath }) {
       return `Test extension summary count: ${count} & ${targetProjectFullPath}`;