Merge branch 'count-feature-flag-toggles-table' into 'master'

Add Snowplow to Toggles on Feature Flag Table

See merge request gitlab-org/gitlab!39995

ee/app/assets/javascripts/feature_flags/components/feature_flags_table.vue

@@ -155,6 +155,9 @@ export default {
               v-if="featureFlag.update_path"
               :value="featureFlag.active"
               :disabled="statusToggleDisabled(featureFlag)"
+              data-track-event="click_button"
+              data-track-label="feature_flag_toggle"
+              data-track-context="feature_flag_activity"
               @change="toggleFeatureFlag(featureFlag)"
             />
             <gl-badge v-else-if="featureFlag.active" variant="success">

ee/changelogs/unreleased/count-feature-flag-toggles-table.yml

+---
+title: Add Snowplow to Toggles on Feature Flag Table
+merge_request: 39995
+author:
+type: other

ee/spec/frontend/feature_flags/components/feature_flags_table_spec.js

@@ -11,6 +11,7 @@ import {
   LEGACY_FLAG,
   DEFAULT_PERCENT_ROLLOUT,
 } from 'ee/feature_flags/constants';
+import { mockTracking } from 'helpers/tracking_helper';
 
 const getDefaultProps = () => ({
   featureFlags: [
@@ -115,11 +116,13 @@ describe('Feature flag table', () => {
 
   describe('when active and with an update toggle', () => {
     let toggle;
+    let spy;
 
     beforeEach(() => {
       props.featureFlags[0].update_path = props.featureFlags[0].destroy_path;
       createWrapper(props);
       toggle = wrapper.find(GlToggle);
+      spy = mockTracking('_category_', toggle.element, jest.spyOn);
     });
 
     it('should have a toggle', () => {
@@ -135,6 +138,15 @@ describe('Feature flag table', () => {
         expect(wrapper.emitted('toggle-flag')).toEqual([[flag]]);
       });
     });
+
+    it('should track a click', () => {
+      toggle.trigger('click');
+
+      expect(spy).toHaveBeenCalledWith('_category_', 'click_button', {
+        context: 'feature_flag_activity',
+        label: 'feature_flag_toggle',
+      });
+    });
   });
 
   describe('with an active scope and a percentage rollout strategy', () => {