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

Add Snowplow to Toggles on Edit Feature Flag

See merge request gitlab-org/gitlab!40023

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

@@ -125,13 +125,20 @@ export default {
       <gl-alert v-if="deprecatedAndReadOnly" variant="warning" :dismissible="false" class="gl-my-5">
         {{ $options.translations.legacyReadOnlyFlagAlert }}
       </gl-alert>
-      <div class="d-flex align-items-center mb-3 mt-3">
-        <gl-toggle :value="active" class="m-0 mr-3 js-feature-flag-status" @change="toggleActive" />
-        <h3 class="page-title m-0">{{ title }}</h3>
+      <div class="gl-display-flex gl-align-items-center gl-mb-4 gl-mt-4">
+        <gl-toggle
+          :value="active"
+          data-track-event="click_button"
+          data-track-label="feature_flag_toggle"
+          data-track-context="feature_flag_activity"
+          class="gl-mr-4 js-feature-flag-status"
+          @change="toggleActive"
+        />
+        <h3 class="page-title gl-m-0">{{ title }}</h3>
       </div>
 
       <div v-if="error.length" class="alert alert-danger">
-        <p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>
+        <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p>
       </div>
 
       <feature-flag-form

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

+---
+title: Add Snowplow to Toggles on Edit Feature Flag
+merge_request: 40023
+author:
+type: other

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

@@ -7,6 +7,7 @@ import Form from 'ee/feature_flags/components/form.vue';
 import editModule from 'ee/feature_flags/store/modules/edit';
 import EditFeatureFlag from 'ee/feature_flags/components/edit_feature_flag.vue';
 import { TEST_HOST } from 'spec/test_constants';
+import { mockTracking } from 'helpers/tracking_helper';
 import axios from '~/lib/utils/axios_utils';
 
 const localVue = createLocalVue();
@@ -148,6 +149,18 @@ describe('Edit feature flag form', () => {
 
       expect(wrapper.find(Form).props('featureFlagIssuesEndpoint')).toBe(expected);
     });
+
+    it('should track when the toggle is clicked', () => {
+      const toggle = wrapper.find(GlToggle);
+      const spy = mockTracking('_category_', toggle.element, jest.spyOn);
+
+      toggle.trigger('click');
+
+      expect(spy).toHaveBeenCalledWith('_category_', 'click_button', {
+        label: 'feature_flag_toggle',
+        context: 'feature_flag_activity',
+      });
+    });
   });
 
   describe('without new version flags', () => {