Update from feedback

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -16,6 +16,7 @@ import {
   GlEmptyState,
 } from '@gitlab/ui';
 import Api from '~/api';
+import Tracking from '~/tracking';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
@@ -41,6 +42,7 @@ import {
   TH_SEVERITY_TEST_ID,
   TH_PUBLISHED_TEST_ID,
   INCIDENT_DETAILS_PATH,
+  trackIncidentCreateNewOptions,
 } from '../constants';
 
 const tdClass =
@@ -58,6 +60,7 @@ const initialPaginationState = {
 };
 
 export default {
+  trackIncidentCreateNewOptions,
   i18n: I18N,
   statusTabs: INCIDENT_STATUS_TABS,
   fields: [
@@ -335,6 +338,11 @@ export default {
     navigateToIncidentDetails({ iid }) {
       return visitUrl(joinPaths(this.issuePath, INCIDENT_DETAILS_PATH, iid));
     },
+    navigateToCreateNewIncident() {
+      const { category, action } = this.$options.trackIncidentCreateNewOptions;
+      Tracking.event(category, action);
+      this.redirecting = true;
+    },
     handlePageChange(page) {
       const { startCursor, endCursor } = this.incidents.pageInfo;
 
@@ -458,7 +466,7 @@ export default {
         category="primary"
         variant="success"
         :href="newIncidentPath"
-        @click="redirecting = true"
+        @click="navigateToCreateNewIncident"
       >
         {{ $options.i18n.createIncidentBtnLabel }}
       </gl-button>

app/assets/javascripts/incidents/constants.js

+/* eslint-disable @gitlab/require-i18n-strings */
 import { s__, __ } from '~/locale';
 
 export const I18N = {
@@ -34,6 +35,14 @@ export const INCIDENT_STATUS_TABS = [
   },
 ];
 
+/**
+ * Tracks snowplow event when user clicks create new incident
+ */
+export const trackIncidentCreateNewOptions = {
+  category: 'Incident Management',
+  action: 'create_incident_button_clicks',
+};
+
 export const DEFAULT_PAGE_SIZE = 20;
 export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
 export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };

spec/frontend/incidents/components/incidents_list_spec.js

@@ -10,6 +10,7 @@ import {
   GlBadge,
   GlEmptyState,
 } from '@gitlab/ui';
+import Tracking from '~/tracking';
 import { visitUrl, joinPaths, mergeUrlParams } from '~/lib/utils/url_utility';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
@@ -22,6 +23,7 @@ import {
   TH_CREATED_AT_TEST_ID,
   TH_SEVERITY_TEST_ID,
   TH_PUBLISHED_TEST_ID,
+  trackIncidentCreateNewOptions,
 } from '~/incidents/constants';
 import mockIncidents from '../mocks/incidents.json';
 import mockFilters from '../mocks/incidents_filter.json';
@@ -33,6 +35,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
   setUrlParams: jest.fn(),
   updateHistory: jest.fn(),
 }));
+jest.mock('~/tracking');
 
 describe('Incidents List', () => {
   let wrapper;
@@ -52,7 +55,7 @@ describe('Incidents List', () => {
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
   const findSearch = () => wrapper.find(FilteredSearchBar);
-  const findAssingees = () => wrapper.findAll('[data-testid="incident-assignees"]');
+  const findAssignees = () => wrapper.findAll('[data-testid="incident-assignees"]');
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
   const findClosedIcon = () => wrapper.findAll("[data-testid='incident-closed']");
   const findPagination = () => wrapper.find(GlPagination);
@@ -164,14 +167,14 @@ describe('Incidents List', () => {
     describe('Assignees', () => {
       it('shows Unassigned when there are no assignees', () => {
         expect(
-          findAssingees()
+          findAssignees()
             .at(0)
             .text(),
         ).toBe(I18N.unassigned);
       });
 
       it('renders an avatar component when there is an assignee', () => {
-        const avatar = findAssingees()
+        const avatar = findAssignees()
           .at(1)
           .find(GlAvatar);
         const { src, label } = avatar.attributes();
@@ -211,7 +214,7 @@ describe('Incidents List', () => {
       });
     });
 
-    it('shows the button linking to new incidents page with prefilled incident template when clicked', () => {
+    it('shows the button linking to new incidents page with pre-filled incident template when clicked', () => {
       expect(findCreateIncidentBtn().exists()).toBe(true);
       findCreateIncidentBtn().trigger('click');
       expect(mergeUrlParams).toHaveBeenCalledWith(
@@ -233,6 +236,13 @@ describe('Incidents List', () => {
       });
       expect(findCreateIncidentBtn().exists()).toBe(false);
     });
+
+    it('should track alert list page views', async () => {
+      findCreateIncidentBtn().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+      const { category, action } = trackIncidentCreateNewOptions;
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
   });
 
   describe('Pagination', () => {