Merge branch '276380-track-event-as-store-action-instead' into 'master'

Track code quality report views more accurately

See merge request gitlab-org/gitlab!52140

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', () => {