Merge branch '255987-snowplow-alert-intergration-list' into 'master'

Instrument snowplow count of integrations list

See merge request gitlab-org/gitlab!44549

app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

 <script>
 import { GlTable, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import Tracking from '~/tracking';
+import { trackAlertIntergrationsViewsOptions } from '../constants';
 
 export const i18n = {
   title: s__('AlertsIntegrations|Current integrations'),
@@ -57,6 +59,15 @@ export default {
       };
     },
   },
+  mounted() {
+    this.trackPageViews();
+  },
+  methods: {
+    trackPageViews() {
+      const { category, action } = trackAlertIntergrationsViewsOptions;
+      Tracking.event(category, action);
+    },
+  },
 };
 </script>
 

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -16,7 +16,6 @@ import {
 import { debounce } from 'lodash';
 import { s__ } from '~/locale';
 import { doesHashExistInUrl } from '~/lib/utils/url_utility';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import IntegrationsList from './alerts_integrations_list.vue';
@@ -56,7 +55,6 @@ export default {
   directives: {
     'gl-modal': GlModalDirective,
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: ['prometheus', 'generic', 'opsgenie'],
   data() {
     return {

app/assets/javascripts/alerts_settings/constants.js

@@ -51,3 +51,13 @@ export const targetPrometheusUrlPlaceholder = 'http://prometheus.example.com/';
 export const targetOpsgenieUrlPlaceholder = 'https://app.opsgenie.com/alert/list/';
 
 export const sectionHash = 'js-alert-management-settings';
+
+/* eslint-disable @gitlab/require-i18n-strings */
+
+/**
+ * Tracks snowplow event when user views alerts intergration list
+ */
+export const trackAlertIntergrationsViewsOptions = {
+  category: 'Alert Intergrations',
+  action: 'view_alert_integrations_list',
+};

spec/frontend/alert_settings/alerts_integrations_list_spec.js

 import { GlTable, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import Tracking from '~/tracking';
 import AlertIntegrationsList, {
   i18n,
 } from '~/alerts_settings/components/alerts_integrations_list.vue';
+import { trackAlertIntergrationsViewsOptions } from '~/alerts_settings/constants';
 
 const mockIntegrations = [
   {
@@ -72,4 +74,16 @@ describe('AlertIntegrationsList', () => {
       expect(notActivatedIcon.attributes('title')).toBe(i18n.status.disabled.tooltip);
     });
   });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      mountComponent();
+    });
+
+    it('should track alert list page views', () => {
+      const { category, action } = trackAlertIntergrationsViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+  });
 });