Track code quality report views more accurately

Instead of on mount of report component
which happens on pipeline page load, no matter which tab is active
track the view event at the same time when we start loading the data
a.k.a. once the Code Quality tab is the active tab on the pipeline page

ee/app/assets/javascripts/codequality_report/codequality_report.vue

@@ -4,8 +4,6 @@ import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import { componentNames } from 'ee/reports/components/issue_body';
 import ReportSection from '~/reports/components/report_section.vue';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
-import api from '~/api';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { n__, s__, sprintf } from '~/locale';
 
 export default {
@@ -13,7 +11,7 @@ export default {
     ReportSection,
     PaginationLinks,
   },
-  mixins: [reportsMixin, glFeatureFlagsMixin()],
+  mixins: [reportsMixin],
   componentNames,
   computed: {
     ...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'pageInfo']),
@@ -43,11 +41,6 @@ export default {
       return this.checkReportStatus(this.isLoadingCodequality, this.loadingCodequalityFailed);
     },
   },
-  mounted() {
-    if (this.glFeatures.usageDataITestingFullCodeQualityReportTotal) {
-      api.trackRedisHllUserEvent(this.$options.mountEvent);
-    }
-  },
   i18n: {
     subHeading: s__('ciReport|This report contains all Code Quality issues in the source branch.'),
   },
@@ -64,7 +57,6 @@ export default {
       };
     },
   },
-  mountEvent: 'i_testing_full_code_quality_report_total',
 };
 </script>
 

ee/app/assets/javascripts/codequality_report/store/actions.js

@@ -2,12 +2,20 @@ import axios from '~/lib/utils/axios_utils';
 import * as types from './mutation_types';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__ } from '~/locale';
+import { VIEW_EVENT_FEATURE_FLAG, VIEW_EVENT_NAME } from './constants';
+import Api from '~/api';
 
 import { parseCodeclimateMetrics } from '~/reports/codequality_report/store/utils/codequality_comparison';
 
 export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
 
-export const requestReport = ({ commit }) => commit(types.REQUEST_REPORT);
+export const requestReport = ({ commit }) => {
+  commit(types.REQUEST_REPORT);
+
+  if (gon.features[VIEW_EVENT_FEATURE_FLAG]) {
+    Api.trackRedisHllUserEvent(VIEW_EVENT_NAME);
+  }
+};
 export const receiveReportSuccess = ({ state, commit }, data) => {
   const parsedIssues = parseCodeclimateMetrics(data, state.blobPath);
   commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);

ee/app/assets/javascripts/codequality_report/store/constants.js

+export const VIEW_EVENT_FEATURE_FLAG = 'usageDataITestingFullCodeQualityReportTotal';
+export const VIEW_EVENT_NAME = 'i_testing_full_code_quality_report_total';

ee/changelogs/unreleased/276380-track-event-as-store-action-instead.yml

+---
+title: Track code quality view event only once tab is active
+merge_request: 52140
+author:
+type: fixed

ee/spec/frontend/codequality_report/codequality_report_spec.js

@@ -2,9 +2,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
 import { parsedIssues } from './mock_data';
-import Api from '~/api';
 
-jest.mock('~/api.js');
 jest.mock('~/flash');
 
 const localVue = createLocalVue();
@@ -101,22 +99,4 @@ describe('Codequality report app', () => {
       expect(wrapper.findAll('.report-block-list-issue')).toHaveLength(0);
     });
   });
-
-  describe('usage ping tracking', () => {
-    describe('with feature flag enabled', () => {
-      it('tracks an event when mounted', () => {
-        createComponent({}, [], { usageDataITestingFullCodeQualityReportTotal: true });
-
-        expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(wrapper.vm.$options.mountEvent);
-      });
-    });
-
-    describe('with feature flag disabled', () => {
-      it('does not track an event when mounted', () => {
-        createComponent({}, [], { usageDataIFullCodeQualityReportTotal: false });
-
-        expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
-      });
-    });
-  });
 });

ee/spec/frontend/codequality_report/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import * as actions from 'ee/codequality_report/store/actions';
 import * as types from 'ee/codequality_report/store/mutation_types';
+import { VIEW_EVENT_NAME, VIEW_EVENT_FEATURE_FLAG } from 'ee/codequality_report/store/constants';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { unparsedIssues, parsedIssues } from '../mock_data';
+import Api from '~/api';
 
+jest.mock('~/api.js');
 jest.mock('~/flash');
 
 describe('Codequality report actions', () => {
@@ -35,8 +38,26 @@ describe('Codequality report actions', () => {
 
   describe('requestReport', () => {
     it('sets the loading flag', (done) => {
+      window.gon = { features: { [VIEW_EVENT_FEATURE_FLAG]: true } };
+
       testAction(actions.requestReport, null, state, [{ type: types.REQUEST_REPORT }], [], done);
     });
+
+    it('tracks a usage ping event when the feature flag is enabled', () => {
+      window.gon = { features: { [VIEW_EVENT_FEATURE_FLAG]: true } };
+
+      actions.requestReport({ commit: jest.fn() });
+
+      expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(VIEW_EVENT_NAME);
+    });
+
+    it('does not track a usage ping event when the feature flag is disabled', () => {
+      window.gon = { features: { [VIEW_EVENT_FEATURE_FLAG]: false } };
+
+      actions.requestReport({ commit: jest.fn() });
+
+      expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+    });
   });
 
   describe('receiveReportSuccess', () => {