Track i_testing_web_performance_widget_total

When the web performance widget is expanded
Increment unique users count per instance
So we can use it to track PGMAU

config/feature_flags/development/usage_data_i_testing_web_performance_widget_total.yml

+---
+name: usage_data_i_testing_web_performance_widget_total
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46746
+rollout_issue_url:
+milestone: '13.8'
+type: development
+group: group::testing
+default_enabled: true

ee/app/assets/javascripts/reports/browser_performance_report/grouped_browser_performance_reports_app.vue

+<script>
+import { once } from 'lodash';
+import { componentNames } from '~/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: 'GroupedBrowserPerformanceReportsApp',
+  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: {
+    handleBrowserPerformanceToggleEvent() {
+      return once(() => {
+        if (this.glFeatures.usageDataITestingWebPerformanceWidgetTotal) {
+          api.trackRedisHllUserEvent(this.$options.expandEvent);
+        }
+      });
+    },
+  },
+  expandEvent: 'i_testing_web_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="true"
+    class="js-browser-performance-widget mr-widget-border-top mr-report"
+    @toggleEvent="handleBrowserPerformanceToggleEvent"
+  />
+</template>

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

 <script>
 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 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';
@@ -20,6 +21,7 @@ export default {
     GroupedSecurityReportsApp: () =>
       import('ee/vue_shared/security_reports/grouped_security_reports_app.vue'),
     GroupedMetricsReportsApp,
+    GroupedBrowserPerformanceReportsApp,
     ReportSection,
   },
   directives: {
@@ -159,6 +161,7 @@ export default {
         this.loadingLoadPerformanceFailed,
       );
     },
+
     licensesApiPath() {
       return gl?.mrWidgetData?.license_scanning_comparison_path || null;
     },
@@ -277,7 +280,7 @@ export default {
         :base-blob-path="mr.baseBlobPath"
         :codequality-help-path="mr.codequalityHelpPath"
       />
-      <report-section
+      <grouped-browser-performance-reports-app
         v-if="shouldRenderBrowserPerformance"
         :status="browserPerformanceStatus"
         :loading-text="translateText('browser-performance').loading"
@@ -287,8 +290,6 @@ export default {
         :resolved-issues="mr.browserPerformanceMetrics.improved"
         :neutral-issues="mr.browserPerformanceMetrics.same"
         :has-issues="hasBrowserPerformanceMetrics"
-        :component="$options.componentNames.PerformanceIssueBody"
-        class="js-browser-performance-widget mr-widget-border-top mr-report"
       />
       <report-section
         v-if="hasLoadPerformancePaths"

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

@@ -12,6 +12,7 @@ module EE
           push_frontend_feature_flag(:anonymous_visual_review_feedback)
           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)
         end
 
         before_action :whitelist_query_limiting_ee_merge, only: [:merge]

ee/changelogs/unreleased/224603-track-browser-performance-widget-expansions.yml

+---
+title: Track web performance widget expansions via usage ping
+merge_request: 46746
+author:
+type: added

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

+import { mount, createLocalVue } from '@vue/test-utils';
+import GroupedBrowserPerformanceReportsApp from 'ee/reports/browser_performance_report/grouped_browser_performance_reports_app.vue';
+import Api from '~/api';
+
+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, {
+      localVue,
+      propsData: {
+        status: '',
+        loadingText: '',
+        errorText: '',
+        successText: '',
+        unresolvedIssues: [{}, {}],
+        resolvedIssues: [],
+        neutralIssues: [],
+        hasIssues: true,
+      },
+      provide: {
+        glFeatures: {
+          usageDataITestingWebPerformanceWidgetTotal,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('usage ping events', () => {
+    describe('when feature flag is enabled', () => {
+      beforeEach(() => {
+        mountComponent({ usageDataITestingWebPerformanceWidgetTotal: 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({ usageDataITestingWebPerformanceWidgetTotal: 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();
+      });
+    });
+  });
+});

lib/gitlab/usage_data_counters/known_events/common.yml

@@ -263,6 +263,11 @@
   redis_slot: testing
   aggregation: weekly
   feature_flag: usage_data_i_testing_full_code_quality_report_total
+- name: i_testing_web_performance_widget_total
+  category: testing
+  redis_slot: testing
+  aggregation: weekly
+  feature_flag: usage_data_i_testing_web_performance_widget_total
 # Project Management group
 - name: g_project_management_issue_title_changed
   category: issues_edit