Merge branch '296717-move-alert-details-to-shared' into 'master'

Move alert_details components to vue_shared

See merge request gitlab-org/gitlab!51508

app/assets/javascripts/alert_management/components/alert_management_table.vue

@@ -23,14 +23,10 @@ import {
 } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
+import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import getAlertsQuery from '~/graphql_shared/queries/get_alerts.query.graphql';
 import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
-import {
-  ALERTS_STATUS_TABS,
-  ALERTS_SEVERITY_LABELS,
-  trackAlertListViewsOptions,
-} from '../constants';
-import AlertStatus from './alert_status.vue';
+import { ALERTS_STATUS_TABS, SEVERITY_LEVELS, trackAlertListViewsOptions } from '../constants';
 
 const TH_TEST_ID = { 'data-testid': 'alert-management-severity-sort' };
 
@@ -96,7 +92,7 @@ export default {
       sortable: true,
     },
   ],
-  severityLabels: ALERTS_SEVERITY_LABELS,
+  severityLabels: SEVERITY_LEVELS,
   statusTabs: ALERTS_STATUS_TABS,
   components: {
     GlAlert,

app/assets/javascripts/alert_management/constants.js

 import { s__ } from '~/locale';
 
-export const ALERTS_SEVERITY_LABELS = {
-  CRITICAL: s__('AlertManagement|Critical'),
-  HIGH: s__('AlertManagement|High'),
-  MEDIUM: s__('AlertManagement|Medium'),
-  LOW: s__('AlertManagement|Low'),
-  INFO: s__('AlertManagement|Info'),
-  UNKNOWN: s__('AlertManagement|Unknown'),
+export const SEVERITY_LEVELS = {
+  CRITICAL: s__('severity|Critical'),
+  HIGH: s__('severity|High'),
+  MEDIUM: s__('severity|Medium'),
+  LOW: s__('severity|Low'),
+  INFO: s__('severity|Info'),
+  UNKNOWN: s__('severity|Unknown'),
 };
 
 export const ALERTS_STATUS_TABS = [
@@ -46,20 +46,3 @@ export const trackAlertListViewsOptions = {
   category: 'Alert Management',
   action: 'view_alerts_list',
 };
-
-/**
- * Tracks snowplow event when user views alert details
- */
-export const trackAlertsDetailsViewsOptions = {
-  category: 'Alert Management',
-  action: 'view_alert_details',
-};
-
-/**
- * Tracks snowplow event when alert status is updated
- */
-export const trackAlertStatusUpdateOptions = {
-  category: 'Alert Management',
-  action: 'update_alert_status',
-  label: 'Status',
-};

app/assets/javascripts/alert_management/list.js

@@ -3,6 +3,7 @@ import VueApollo from 'vue-apollo';
 import { defaultDataIdFromObject } from 'apollo-cache-inmemory';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { PAGE_CONFIG } from '~/vue_shared/alert_details/constants';
 import AlertManagementList from './components/alert_management_list_wrapper.vue';
 
 Vue.use(VueApollo);
@@ -59,6 +60,7 @@ export default () => {
       populatingAlertsHelpUrl,
       emptyAlertSvgPath,
       alertManagementEnabled: parseBoolean(alertManagementEnabled),
+      trackAlertStatusUpdateOptions: PAGE_CONFIG.OPERATIONS.TRACK_ALERT_STATUS_UPDATE_OPTIONS,
       userCanEnableAlertManagement: parseBoolean(userCanEnableAlertManagement),
     },
     apolloProvider,

app/assets/javascripts/graphql_shared/fragments/alert_note.fragment.graphql

-#import "~/graphql_shared/fragments/author.fragment.graphql"
+#import "./author.fragment.graphql"
 
 fragment AlertNote on Note {
   id

app/assets/javascripts/graphql_shared/mutations/update_alert_status.mutation.graphql → app/assets/javascripts/graphql_shared/mutations/alert_status_update.mutation.graphql

-#import "~/graphql_shared/fragments/alert_note.fragment.graphql"
+#import "../fragments/alert_note.fragment.graphql"
 
 mutation updateAlertStatus($projectPath: ID!, $status: AlertManagementStatus!, $iid: String!) {
   updateAlertStatus(input: { iid: $iid, status: $status, projectPath: $projectPath }) {

app/assets/javascripts/pages/projects/alert_management/details/index.js

-import AlertDetails from '~/alert_management/details';
+import AlertDetails from '~/vue_shared/alert_details';
 
 AlertDetails('#js-alert_details');

app/assets/javascripts/alert_management/components/alert_details.vue → app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue

@@ -21,11 +21,11 @@ import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
 import { toggleContainerClasses } from '~/lib/utils/dom_utils';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
-import alertQuery from '../graphql/queries/details.query.graphql';
-import sidebarStatusQuery from '../graphql/queries/sidebar_status.query.graphql';
-import { ALERTS_SEVERITY_LABELS, trackAlertsDetailsViewsOptions } from '../constants';
-import createIssueMutation from '../graphql/mutations/create_issue_from_alert.mutation.graphql';
-import toggleSidebarStatusMutation from '../graphql/mutations/toggle_sidebar_status.mutation.graphql';
+import alertQuery from '../graphql/queries/alert_details.query.graphql';
+import sidebarStatusQuery from '../graphql/queries/alert_sidebar_status.query.graphql';
+import { SEVERITY_LEVELS } from '../constants';
+import createIssueMutation from '../graphql/mutations/alert_issue_create.mutation.graphql';
+import toggleSidebarStatusMutation from '../graphql/mutations/alert_sidebar_status.mutation.graphql';
 import SystemNote from './system_notes/system_note.vue';
 import AlertSidebar from './alert_sidebar.vue';
 import AlertMetrics from './alert_metrics.vue';
@@ -44,7 +44,7 @@ export default {
   directives: {
     SafeHtml: GlSafeHtmlDirective,
   },
-  severityLabels: ALERTS_SEVERITY_LABELS,
+  severityLabels: SEVERITY_LEVELS,
   tabsConfig: [
     {
       id: 'overview',
@@ -89,6 +89,9 @@ export default {
     projectIssuesPath: {
       default: '',
     },
+    trackAlertsDetailsViewsOptions: {
+      default: null,
+    },
   },
   apollo: {
     alert: {
@@ -155,7 +158,9 @@ export default {
     },
   },
   mounted() {
-    this.trackPageViews();
+    if (this.trackAlertsDetailsViewsOptions) {
+      this.trackPageViews();
+    }
     toggleContainerClasses(containerEl, {
       'issuable-bulk-update-sidebar': true,
       'right-sidebar-expanded': true,
@@ -217,7 +222,7 @@ export default {
       return joinPaths(this.projectIssuesPath, issueId);
     },
     trackPageViews() {
-      const { category, action } = trackAlertsDetailsViewsOptions;
+      const { category, action } = this.trackAlertsDetailsViewsOptions;
       Tracking.event(category, action);
     },
   },

app/assets/javascripts/alert_management/components/alert_sidebar.vue → app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue

 <script>
-import sidebarStatusQuery from '../graphql/queries/sidebar_status.query.graphql';
+import sidebarStatusQuery from '../graphql/queries/alert_sidebar_status.query.graphql';
 import SidebarHeader from './sidebar/sidebar_header.vue';
 import SidebarTodo from './sidebar/sidebar_todo.vue';
 import SidebarStatus from './sidebar/sidebar_status.vue';

app/assets/javascripts/alert_management/components/alert_status.vue → app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue

@@ -2,8 +2,7 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql';
-import { trackAlertStatusUpdateOptions } from '../constants';
+import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 
 export default {
   i18n: {
@@ -21,6 +20,11 @@ export default {
     GlDropdown,
     GlDropdownItem,
   },
+  inject: {
+    trackAlertStatusUpdateOptions: {
+      default: null,
+    },
+  },
   props: {
     projectPath: {
       type: String,
@@ -58,7 +62,9 @@ export default {
           },
         })
         .then((resp) => {
-          this.trackStatusUpdate(status);
+          if (this.trackAlertStatusUpdateOptions) {
+            this.trackStatusUpdate(status);
+          }
           const errors = resp.data?.updateAlertStatus?.errors || [];
 
           if (errors[0]) {
@@ -81,7 +87,7 @@ export default {
         });
     },
     trackStatusUpdate(status) {
-      const { category, action, label } = trackAlertStatusUpdateOptions;
+      const { category, action, label } = this.trackAlertStatusUpdateOptions;
       Tracking.event(category, action, { label, property: status });
     },
   },

app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue → app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue

@@ -4,7 +4,7 @@ import { s__ } from '~/locale';
 import Todo from '~/sidebar/components/todo_toggle/todo.vue';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import createAlertTodoMutation from '../../graphql/mutations/alert_todo_create.mutation.graphql';
-import alertQuery from '../../graphql/queries/details.query.graphql';
+import alertQuery from '../../graphql/queries/alert_details.query.graphql';
 
 export default {
   i18n: {

app/assets/javascripts/vue_shared/alert_details/constants.js

+import { s__ } from '~/locale';
+
+export const SEVERITY_LEVELS = {
+  CRITICAL: s__('severity|Critical'),
+  HIGH: s__('severity|High'),
+  MEDIUM: s__('severity|Medium'),
+  LOW: s__('severity|Low'),
+  INFO: s__('severity|Info'),
+  UNKNOWN: s__('severity|Unknown'),
+};
+
+export const DEFAULT_PAGE = 'OPERATIONS';
+
+/* eslint-disable @gitlab/require-i18n-strings */
+export const PAGE_CONFIG = {
+  OPERATIONS: {
+    // Tracks snowplow event when user views alert details
+    TRACK_ALERTS_DETAILS_VIEWS_OPTIONS: {
+      category: 'Alert Management',
+      action: 'view_alert_details',
+    },
+    // Tracks snowplow event when alert status is updated
+    TRACK_ALERT_STATUS_UPDATE_OPTIONS: {
+      category: 'Alert Management',
+      action: 'update_alert_status',
+      label: 'Status',
+    },
+  },
+};

app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.mutation.graphql → app/assets/javascripts/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql

-#import "../fragments/detail_item.fragment.graphql"
+#import "../fragments/alert_detail_item.fragment.graphql"
 
 mutation alertTodoCreate($projectPath: ID!, $iid: String!) {
   alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {

app/assets/javascripts/alert_management/graphql/queries/details.query.graphql → app/assets/javascripts/vue_shared/alert_details/graphql/queries/alert_details.query.graphql

-#import "../fragments/detail_item.fragment.graphql"
+#import "../fragments/alert_detail_item.fragment.graphql"
 
 query alertDetails($fullPath: ID!, $alertId: String) {
   project(fullPath: $fullPath) {

app/assets/javascripts/alert_management/details.js → app/assets/javascripts/vue_shared/alert_details/index.js

@@ -4,14 +4,15 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import AlertDetails from './components/alert_details.vue';
-import sidebarStatusQuery from './graphql/queries/sidebar_status.query.graphql';
+import sidebarStatusQuery from './graphql/queries/alert_sidebar_status.query.graphql';
 import createRouter from './router';
+import { DEFAULT_PAGE, PAGE_CONFIG } from './constants';
 
 Vue.use(VueApollo);
 
 export default (selector) => {
   const domEl = document.querySelector(selector);
-  const { alertId, projectPath, projectIssuesPath, projectId } = domEl.dataset;
+  const { alertId, projectPath, projectIssuesPath, projectId, page = DEFAULT_PAGE } = domEl.dataset;
   const router = createRouter();
 
   const resolvers = {
@@ -48,18 +49,28 @@ export default (selector) => {
     },
   });
 
+  const provide = {
+    projectPath,
+    alertId,
+    projectIssuesPath,
+    projectId,
+  };
+
+  if (page === DEFAULT_PAGE) {
+    const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[
+      page
+    ];
+    provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS;
+    provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS;
+  }
+
   // eslint-disable-next-line no-new
   new Vue({
     el: selector,
     components: {
       AlertDetails,
     },
-    provide: {
-      projectPath,
-      alertId,
-      projectIssuesPath,
-      projectId,
-    },
+    provide,
     apolloProvider,
     router,
     render(createElement) {

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_status.vue

 <script>
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql';
+import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import { MESSAGES, STATUSES } from './constants';
 
 export default {

ee/spec/frontend/threat_monitoring/components/alerts/alert_status_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql';
+import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import { mockAlerts } from '../../mock_data';
 
 const mockAlert = mockAlerts[0];

locale/gitlab.pot

@@ -2483,9 +2483,6 @@ msgstr ""
 msgid "AlertManagement|Create incident"
 msgstr ""
 
-msgid "AlertManagement|Critical"
-msgstr ""
-
 msgid "AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents."
 msgstr ""
 
@@ -2498,24 +2495,12 @@ msgstr ""
 msgid "AlertManagement|Events"
 msgstr ""
 
-msgid "AlertManagement|High"
-msgstr ""
-
 msgid "AlertManagement|Incident"
 msgstr ""
 
-msgid "AlertManagement|Info"
-msgstr ""
-
 msgid "AlertManagement|Key"
 msgstr ""
 
-msgid "AlertManagement|Low"
-msgstr ""
-
-msgid "AlertManagement|Medium"
-msgstr ""
-
 msgid "AlertManagement|Metrics"
 msgstr ""
 
@@ -2597,9 +2582,6 @@ msgstr ""
 msgid "AlertManagement|Triggered"
 msgstr ""
 
-msgid "AlertManagement|Unknown"
-msgstr ""
-
 msgid "AlertManagement|Value"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -2,11 +2,11 @@ import { mount } from '@vue/test-utils';
 import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import AlertManagementTable from '~/alert_management/components/alert_management_table.vue';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import mockAlerts from '../mocks/alerts.json';
 import defaultProvideValues from '../mocks/alerts_provide_config.json';
 
 jest.mock('~/lib/utils/url_utility', () => ({

spec/frontend/alert_management/components/alert_details_spec.js → spec/frontend/vue_shared/alert_details/alert_details_spec.js

@@ -4,17 +4,14 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import AlertDetails from '~/alert_management/components/alert_details.vue';
-import AlertSummaryRow from '~/alert_management/components/alert_summary_row.vue';
-import {
-  ALERTS_SEVERITY_LABELS,
-  trackAlertsDetailsViewsOptions,
-} from '~/alert_management/constants';
-import createIssueMutation from '~/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql';
+import AlertDetails from '~/vue_shared/alert_details/components/alert_details.vue';
+import AlertSummaryRow from '~/vue_shared/alert_details/components/alert_summary_row.vue';
+import { SEVERITY_LEVELS } from '~/vue_shared/alert_details/constants';
+import createIssueMutation from '~/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql';
 import { joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from './mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 const environmentName = 'Production';
@@ -29,7 +26,13 @@ describe('AlertDetails', () => {
   const projectId = '1';
   const $router = { replace: jest.fn() };
 
-  function mountComponent({ data, loading = false, mountMethod = shallowMount, stubs = {} } = {}) {
+  function mountComponent({
+    data,
+    loading = false,
+    mountMethod = shallowMount,
+    provide = {},
+    stubs = {},
+  } = {}) {
     wrapper = extendedWrapper(
       mountMethod(AlertDetails, {
         provide: {
@@ -37,6 +40,7 @@ describe('AlertDetails', () => {
           projectPath,
           projectIssuesPath,
           projectId,
+          ...provide,
         },
         data() {
           return {
@@ -112,9 +116,7 @@ describe('AlertDetails', () => {
       });
 
       it('renders severity', () => {
-        expect(wrapper.findByTestId('severity').text()).toBe(
-          ALERTS_SEVERITY_LABELS[mockAlert.severity],
-        );
+        expect(wrapper.findByTestId('severity').text()).toBe(SEVERITY_LEVELS[mockAlert.severity]);
       });
 
       it('renders a title', () => {
@@ -321,16 +323,27 @@ describe('AlertDetails', () => {
   });
 
   describe('Snowplow tracking', () => {
+    const mountOptions = {
+      props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+      data: { alert: mockAlert },
+      loading: false,
+    };
+
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
-      mountComponent({
-        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alert: mockAlert },
-        loading: false,
-      });
     });
 
-    it('should track alert details page views', () => {
+    it('should not track alert details page views when the tracking options do not exist', () => {
+      mountComponent(mountOptions);
+      expect(Tracking.event).not.toHaveBeenCalled();
+    });
+
+    it('should track alert details page views when the tracking options exist', () => {
+      const trackAlertsDetailsViewsOptions = {
+        category: 'Alert Management',
+        action: 'view_alert_details',
+      };
+      mountComponent({ ...mountOptions, provide: { trackAlertsDetailsViewsOptions } });
       const { category, action } = trackAlertsDetailsViewsOptions;
       expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });

spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js → spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js

 import { mount } from '@vue/test-utils';
-import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue';
-import createAlertTodoMutation from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
+import SidebarTodo from '~/vue_shared/alert_details/components/sidebar/sidebar_todo.vue';
+import createAlertTodoMutation from '~/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from './mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 

spec/frontend/alert_management/components/alert_metrics_spec.js → spec/frontend/vue_shared/alert_details/alert_metrics_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import waitForPromises from 'helpers/wait_for_promises';
-import AlertMetrics from '~/alert_management/components/alert_metrics.vue';
+import AlertMetrics from '~/vue_shared/alert_details/components/alert_metrics.vue';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 
 jest.mock('~/monitoring/stores', () => ({

spec/frontend/alert_management/components/alert_status_spec.js → spec/frontend/vue_shared/alert_details/alert_status_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
-import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
-import AlertManagementStatus from '~/alert_management/components/alert_status.vue';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql';
+import AlertManagementStatus from '~/vue_shared/alert_details/components/alert_status.vue';
+import updateAlertStatusMutation from '~/graphql_shared//mutations/alert_status_update.mutation.graphql';
 import Tracking from '~/tracking';
-import mockAlerts from '../mocks/alerts.json';
+import mockAlerts from './mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 
@@ -20,7 +19,7 @@ describe('AlertManagementStatus', () => {
     return waitForPromises();
   };
 
-  function mountComponent({ props = {}, loading = false, stubs = {} } = {}) {
+  function mountComponent({ props = {}, provide = {}, loading = false, stubs = {} } = {}) {
     wrapper = shallowMount(AlertManagementStatus, {
       propsData: {
         alert: { ...mockAlert },
@@ -28,6 +27,7 @@ describe('AlertManagementStatus', () => {
         isSidebar: false,
         ...props,
       },
+      provide,
       mocks: {
         $apollo: {
           mutate: jest.fn(),
@@ -134,10 +134,25 @@ describe('AlertManagementStatus', () => {
   describe('Snowplow tracking', () => {
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
+    });
+
+    it('should not track alert status updates when the tracking options do not exist', () => {
       mountComponent({});
+      Tracking.event.mockClear();
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
+      findFirstStatusOption().vm.$emit('click');
+      setImmediate(() => {
+        expect(Tracking.event).not.toHaveBeenCalled();
+      });
     });
 
-    it('should track alert status updates', () => {
+    it('should track alert status updates when the tracking options exist', () => {
+      const trackAlertStatusUpdateOptions = {
+        category: 'Alert Management',
+        action: 'update_alert_status',
+        label: 'Status',
+      };
+      mountComponent({ provide: { trackAlertStatusUpdateOptions } });
       Tracking.event.mockClear();
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
       findFirstStatusOption().vm.$emit('click');

spec/frontend/alert_management/components/alert_summary_row_spec.js → spec/frontend/vue_shared/alert_details/alert_summary_row_spec.js

 import { shallowMount } from '@vue/test-utils';
-import AlertSummaryRow from '~/alert_management/components/alert_summary_row.vue';
+import AlertSummaryRow from '~/vue_shared/alert_details/components/alert_summary_row.vue';
 
 const label = 'a label';
 const value = 'a value';

spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js → spec/frontend/vue_shared/alert_details/sidebar/alert_managment_sidebar_assignees_spec.js

@@ -2,10 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { GlDropdownItem } from '@gitlab/ui';
-import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue';
-import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
-import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql';
-import mockAlerts from '../../mocks/alerts.json';
+import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
+import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
+import AlertSetAssignees from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql';
+import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 

spec/frontend/alert_management/components/sidebar/alert_sidebar_spec.js → spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import AlertSidebar from '~/alert_management/components/alert_sidebar.vue';
-import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
-import mockAlerts from '../../mocks/alerts.json';
+import AlertSidebar from '~/vue_shared/alert_details/components/alert_sidebar.vue';
+import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
+import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 

spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js → spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

 import { mount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
-import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue';
-import updateAlertStatusMutation from '~/graphql_shared/mutations/update_alert_status.mutation.graphql';
-import Tracking from '~/tracking';
-import mockAlerts from '../../mocks/alerts.json';
+import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
+import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
+import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 
@@ -101,30 +99,5 @@ describe('Alert Details Sidebar Status', () => {
         expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered');
       });
     });
-
-    describe('Snowplow tracking', () => {
-      beforeEach(() => {
-        jest.spyOn(Tracking, 'event');
-        mountComponent({
-          props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-          data: { alert: mockAlert },
-          loading: false,
-        });
-      });
-
-      it('should track alert status updates', () => {
-        Tracking.event.mockClear();
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
-        findStatusDropdownItem().vm.$emit('click');
-        const status = findStatusDropdownItem().text();
-        setImmediate(() => {
-          const { category, action, label } = trackAlertStatusUpdateOptions;
-          expect(Tracking.event).toHaveBeenCalledWith(category, action, {
-            label,
-            property: status,
-          });
-        });
-      });
-    });
   });
 });

spec/frontend/alert_management/components/system_notes/alert_management_system_note_spec.js → spec/frontend/vue_shared/alert_details/system_notes/alert_management_system_note_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
-import SystemNote from '~/alert_management/components/system_notes/system_note.vue';
-import mockAlerts from '../../mocks/alerts.json';
+import SystemNote from '~/vue_shared/alert_details/components/system_notes/system_note.vue';
+import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[1];