Track event on widget expansion

Push feature flag to frontend
Peel report section out into its own component
Add the trigger to track the event
Add specs to test the event tracking

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

+<script>
+import { once } from 'lodash';
+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,
+  computed: {
+    handleLoadPerformanceToggleEvent() {
+      return once(() => {
+        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="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/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', () => {
+  const Component = localVue.extend(GroupedLoadPerformanceReportsApp);
+  let wrapper;
+
+  const mountComponent = ({ usageDataITestingLoadPerformanceWidgetTotal = false } = {}) => {
+    wrapper = mount(Component, {
+      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();
+      });
+    });
+  });
+});