Merge branch '10687-track-load-performance-widget-expansions' into 'master'

Track load performance widget expansions via usage ping

See merge request gitlab-org/gitlab!52688

config/feature_flags/development/usage_data_i_testing_load_performance_widget_total.yml

+---
+name: usage_data_i_testing_load_performance_widget_total
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52688
+rollout_issue_url:
+milestone: '13.9'
+type: development
+group: group::testing
+default_enabled: true

ee/app/assets/javascripts/reports/load_performance_report/grouped_load_performance_reports_app.vue

+<script>
+import { componentNames } from 'ee/reports/components/issue_body';
+import ReportSection from '~/reports/components/report_section.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import api from '~/api';
+
+export default {
+  name: 'GroupedLoadPerformanceReportsApp',
+  components: {
+    ReportSection,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  props: {
+    status: {
+      type: String,
+      required: true,
+    },
+    loadingText: {
+      type: String,
+      required: true,
+    },
+    errorText: {
+      type: String,
+      required: true,
+    },
+    successText: {
+      type: String,
+      required: true,
+    },
+    unresolvedIssues: {
+      type: Array,
+      required: true,
+    },
+    resolvedIssues: {
+      type: Array,
+      required: true,
+    },
+    neutralIssues: {
+      type: Array,
+      required: true,
+    },
+    hasIssues: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  componentNames,
+  methods: {
+    handleLoadPerformanceToggleEvent() {
+      if (this.glFeatures.usageDataITestingLoadPerformanceWidgetTotal) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
+    },
+  },
+  expandEvent: 'i_testing_load_performance_widget_total',
+};
+</script>
+<template>
+  <report-section
+    :status="status"
+    :loading-text="loadingText"
+    :error-text="errorText"
+    :success-text="successText"
+    :unresolved-issues="unresolvedIssues"
+    :resolved-issues="resolvedIssues"
+    :neutral-issues="neutralIssues"
+    :has-issues="hasIssues"
+    :component="$options.componentNames.PerformanceIssueBody"
+    should-emit-toggle-event
+    class="js-load-performance-widget mr-widget-border-top mr-report"
+    @toggleEvent.once="handleLoadPerformanceToggleEvent"
+  />
+</template>

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -2,6 +2,7 @@
 import { GlSafeHtmlDirective } from '@gitlab/ui';
 import GroupedMetricsReportsApp from 'ee/vue_shared/metrics_reports/grouped_metrics_reports_app.vue';
 import GroupedBrowserPerformanceReportsApp from 'ee/reports/browser_performance_report/grouped_browser_performance_reports_app.vue';
+import GroupedLoadPerformanceReportsApp from 'ee/reports/load_performance_report/grouped_load_performance_reports_app.vue';
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import { componentNames } from 'ee/reports/components/issue_body';
 import MrWidgetLicenses from 'ee/vue_shared/license_compliance/mr_widget_license_report.vue';
@@ -22,6 +23,7 @@ export default {
       import('ee/vue_shared/security_reports/grouped_security_reports_app.vue'),
     GroupedMetricsReportsApp,
     GroupedBrowserPerformanceReportsApp,
+    GroupedLoadPerformanceReportsApp,
     ReportSection,
   },
   directives: {
@@ -292,7 +294,7 @@ export default {
         :neutral-issues="mr.browserPerformanceMetrics.same"
         :has-issues="hasBrowserPerformanceMetrics"
       />
-      <report-section
+      <grouped-load-performance-reports-app
         v-if="hasLoadPerformancePaths"
         :status="loadPerformanceStatus"
         :loading-text="translateText('load-performance').loading"
@@ -302,8 +304,6 @@ export default {
         :resolved-issues="mr.loadPerformanceMetrics.improved"
         :neutral-issues="mr.loadPerformanceMetrics.same"
         :has-issues="hasLoadPerformanceMetrics"
-        :component="$options.componentNames.PerformanceIssueBody"
-        class="js-load-performance-widget mr-widget-border-top mr-report"
       />
       <grouped-metrics-reports-app
         v-if="mr.metricsReportsPath"

ee/app/controllers/ee/projects/merge_requests_controller.rb

@@ -13,6 +13,7 @@ module EE
           push_frontend_feature_flag(:missing_mr_security_scan_types, @project)
           push_frontend_feature_flag(:usage_data_i_testing_metrics_report_widget_total, @project, default_enabled: true)
           push_frontend_feature_flag(:usage_data_i_testing_web_performance_widget_total, @project, default_enabled: true)
+          push_frontend_feature_flag(:usage_data_i_testing_load_performance_widget_total, @project, default_enabled: true)
         end
 
         before_action :whitelist_query_limiting_ee_merge, only: [:merge]

ee/changelogs/unreleased/10687-track-load-performance-widget-expansions.yml

+---
+title: Track load performance widget expansions via usage ping
+merge_request: 52688
+author:
+type: added

ee/spec/frontend/reports/browser_performance_report/grouped_browser_performance_reports_app_spec.js

@@ -7,11 +7,10 @@ jest.mock('~/api.js');
 const localVue = createLocalVue();
 
 describe('Grouped test reports app', () => {
-  const Component = localVue.extend(GroupedBrowserPerformanceReportsApp);
   let wrapper;
 
   const mountComponent = ({ usageDataITestingWebPerformanceWidgetTotal = false } = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedBrowserPerformanceReportsApp, {
       localVue,
       propsData: {
         status: '',

ee/spec/frontend/reports/load_performance_report/grouped_load_performance_reports_app_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import GroupedLoadPerformanceReportsApp from 'ee/reports/load_performance_report/grouped_load_performance_reports_app.vue';
+import Api from '~/api';
+
+jest.mock('~/api.js');
+
+const localVue = createLocalVue();
+
+describe('Grouped load performance reports app', () => {
+  let wrapper;
+
+  const mountComponent = ({ usageDataITestingLoadPerformanceWidgetTotal = false } = {}) => {
+    wrapper = mount(GroupedLoadPerformanceReportsApp, {
+      localVue,
+      propsData: {
+        status: '',
+        loadingText: '',
+        errorText: '',
+        successText: '',
+        unresolvedIssues: [{}, {}],
+        resolvedIssues: [],
+        neutralIssues: [],
+        hasIssues: true,
+      },
+      provide: {
+        glFeatures: {
+          usageDataITestingLoadPerformanceWidgetTotal,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('usage ping events', () => {
+    describe('when feature flag is enabled', () => {
+      beforeEach(() => {
+        mountComponent({ usageDataITestingLoadPerformanceWidgetTotal: true });
+      });
+
+      it('tracks an event when the widget is expanded', () => {
+        wrapper.find('[data-testid="report-section-expand-button"]').trigger('click');
+
+        expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(wrapper.vm.$options.expandEvent);
+      });
+    });
+
+    describe('when feature flag is disabled', () => {
+      beforeEach(() => {
+        mountComponent({ usageDataITestingLoadPerformanceWidgetTotal: false });
+      });
+
+      it('tracks an event when the widget is expanded', () => {
+        wrapper.find('[data-testid="report-section-expand-button"]').trigger('click');
+
+        expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -3,6 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import MrWidgetOptions from 'ee/vue_merge_request_widget/mr_widget_options.vue';
+import PerformanceIssueBody from 'ee/vue_merge_request_widget/components/performance_issue_body.vue';
 import {
   sastDiffSuccessMock,
   dastDiffSuccessMock,
@@ -370,6 +371,13 @@ describe('ee merge request widget options', () => {
           });
         });
 
+        it('should render performance issue body component', (done) => {
+          setImmediate(() => {
+            expect(wrapper.find(PerformanceIssueBody).exists()).toBe(true);
+            done();
+          });
+        });
+
         describe('text connector', () => {
           it('should only render information about fixed issues', (done) => {
             setImmediate(() => {
@@ -527,6 +535,10 @@ describe('ee merge request widget options', () => {
           );
         });
 
+        it('should render performance issue body component', () => {
+          expect(wrapper.find(PerformanceIssueBody).exists()).toBe(true);
+        });
+
         describe('text connector', () => {
           it('should only render information about fixed issues', (done) => {
             wrapper.vm.mr.loadPerformanceMetrics.degraded = [];

lib/gitlab/usage_data_counters/known_events/common.yml

@@ -273,6 +273,11 @@
   redis_slot: testing
   aggregation: weekly
   feature_flag: usage_data_i_testing_group_code_coverage_project_click_total
+- name: i_testing_load_performance_widget_total
+  category: testing
+  redis_slot: testing
+  aggregation: weekly
+  feature_flag: usage_data_i_testing_load_performance_widget_total
 # Project Management group
 - name: g_project_management_issue_title_changed
   category: issues_edit

spec/frontend/reports/codequality_report/grouped_codequality_reports_app_spec.js

@@ -9,7 +9,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('Grouped code quality reports app', () => {
-  const Component = localVue.extend(GroupedCodequalityReportsApp);
   let wrapper;
   let mockStore;
 
@@ -22,7 +21,7 @@ describe('Grouped code quality reports app', () => {
   };
 
   const mountComponent = (props = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedCodequalityReportsApp, {
       store: mockStore,
       localVue,
       propsData: {

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -18,12 +18,11 @@ localVue.use(Vuex);
 describe('Grouped test reports app', () => {
   const endpoint = 'endpoint.json';
   const pipelinePath = '/path/to/pipeline';
-  const Component = localVue.extend(GroupedTestReportsApp);
   let wrapper;
   let mockStore;
 
   const mountComponent = ({ props = { pipelinePath } } = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedTestReportsApp, {
       store: mockStore,
       localVue,
       propsData: {