Add latest changes from gitlab-org/gitlab@13-3-stable-ee

8 files changed, 150 insertions, 76 deletions

diff --git a/spec/frontend/alert_management/components/alert_management_detail_spec.js b/spec/frontend/alert_management/components/alert_details_spec.js
index daa730d3b9f..2c4ed100a56 100644
--- a/spec/frontend/alert_management/components/alert_management_detail_spec.js
+++ b/spec/frontend/alert_management/components/alert_details_spec.js
@@ -20,6 +20,7 @@ describe('AlertDetails', () => {
   const projectPath = 'root/alerts';
   const projectIssuesPath = 'root/alerts/-/issues';
   const projectId = '1';
+  const $router = { replace: jest.fn() };
 
   const findDetailsTable = () => wrapper.find(GlTable);
 
@@ -44,6 +45,8 @@ describe('AlertDetails', () => {
             sidebarStatus: {},
           },
         },
+        $router,
+        $route: { params: {} },
       },
       stubs,
     });
@@ -60,9 +63,9 @@ describe('AlertDetails', () => {
     mock.restore();
   });
 
-  const findCreateIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]');
-  const findViewIssueBtn = () => wrapper.find('[data-testid="viewIssueBtn"]');
-  const findIssueCreationAlert = () => wrapper.find('[data-testid="issueCreationError"]');
+  const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
+  const findViewIncidentBtn = () => wrapper.find('[data-testid="viewIncidentBtn"]');
+  const findIncidentCreationAlert = () => wrapper.find('[data-testid="incidentCreationError"]');
 
   describe('Alert details', () => {
     describe('when alert is null', () => {
@@ -81,11 +84,11 @@ describe('AlertDetails', () => {
       });
 
       it('renders a tab with overview information', () => {
-        expect(wrapper.find('[data-testid="overviewTab"]').exists()).toBe(true);
+        expect(wrapper.find('[data-testid="overview"]').exists()).toBe(true);
       });
 
       it('renders a tab with full alert information', () => {
-        expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true);
+        expect(wrapper.find('[data-testid="fullDetails"]').exists()).toBe(true);
       });
 
       it('renders severity', () => {
@@ -115,6 +118,8 @@ describe('AlertDetails', () => {
         ${'monitoringTool'} | ${undefined}    | ${false}
         ${'service'}        | ${'Prometheus'} | ${true}
         ${'service'}        | ${undefined}    | ${false}
+        ${'runbook'}        | ${undefined}    | ${false}
+        ${'runbook'}        | ${'run.com'}    | ${true}
       `(`$desc`, ({ field, data, isShown }) => {
         beforeEach(() => {
           mountComponent({ data: { alert: { ...mockAlert, [field]: data } } });
@@ -130,18 +135,20 @@ describe('AlertDetails', () => {
       });
     });
 
-    describe('Create issue from alert', () => {
-      it('should display "View issue" button that links the issue page when issue exists', () => {
+    describe('Create incident from alert', () => {
+      it('should display "View incident" button that links the incident page when incident exists', () => {
         const issueIid = '3';
         mountComponent({
           data: { alert: { ...mockAlert, issueIid }, sidebarStatus: false },
         });
-        expect(findViewIssueBtn().exists()).toBe(true);
-        expect(findViewIssueBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, issueIid));
-        expect(findCreateIssueBtn().exists()).toBe(false);
+        expect(findViewIncidentBtn().exists()).toBe(true);
+        expect(findViewIncidentBtn().attributes('href')).toBe(
+          joinPaths(projectIssuesPath, issueIid),
+        );
+        expect(findCreateIncidentBtn().exists()).toBe(false);
       });
 
-      it('should display "Create issue" button when issue doesn\'t exist yet', () => {
+      it('should display "Create incident" button when incident doesn\'t exist yet', () => {
         const issueIid = null;
         mountComponent({
           mountMethod: mount,
@@ -149,8 +156,8 @@ describe('AlertDetails', () => {
         });
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(findViewIssueBtn().exists()).toBe(false);
-          expect(findCreateIssueBtn().exists()).toBe(true);
+          expect(findViewIncidentBtn().exists()).toBe(false);
+          expect(findCreateIncidentBtn().exists()).toBe(true);
         });
       });
 
@@ -160,7 +167,7 @@ describe('AlertDetails', () => {
           .spyOn(wrapper.vm.$apollo, 'mutate')
           .mockResolvedValue({ data: { createAlertIssue: { issue: { iid: issueIid } } } });
 
-        findCreateIssueBtn().trigger('click');
+        findCreateIncidentBtn().trigger('click');
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: createIssueMutation,
           variables: {
@@ -170,7 +177,7 @@ describe('AlertDetails', () => {
         });
       });
 
-      it('shows error alert when issue creation fails ', () => {
+      it('shows error alert when incident creation fails ', () => {
         const errorMsg = 'Something went wrong';
         mountComponent({
           mountMethod: mount,
@@ -178,10 +185,10 @@ describe('AlertDetails', () => {
         });
 
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(errorMsg);
-        findCreateIssueBtn().trigger('click');
+        findCreateIncidentBtn().trigger('click');
 
         setImmediate(() => {
-          expect(findIssueCreationAlert().text()).toBe(errorMsg);
+          expect(findIncidentCreationAlert().text()).toBe(errorMsg);
         });
       });
     });
@@ -191,7 +198,7 @@ describe('AlertDetails', () => {
         mountComponent({ data: { alert: mockAlert } });
       });
       it('should display a table of raw alert details data', () => {
-        wrapper.find('[data-testid="fullDetailsTab"]').trigger('click');
+        wrapper.find('[data-testid="fullDetails"]').trigger('click');
         expect(findDetailsTable().exists()).toBe(true);
       });
     });
@@ -252,6 +259,22 @@ describe('AlertDetails', () => {
         );
       });
     });
+
+    describe('tab navigation', () => {
+      beforeEach(() => {
+        mountComponent({ data: { alert: mockAlert } });
+      });
+
+      it.each`
+        index | tabId
+        ${0}  | ${'overview'}
+        ${1}  | ${'fullDetails'}
+        ${2}  | ${'metrics'}
+      `('will navigate to the correct tab via $tabId', ({ index, tabId }) => {
+        wrapper.setData({ currentTabIndex: index });
+        expect($router.replace).toHaveBeenCalledWith({ name: 'tab', params: { tabId } });
+      });
+    });
   });
 
   describe('Snowplow tracking', () => {
diff --git a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
index 0d1214211d3..6712282503d 100644
--- a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
@@ -15,6 +15,7 @@ describe('AlertManagementEmptyState', () => {
     wrapper = shallowMount(AlertManagementEmptyState, {
       propsData: {
         enableAlertManagementPath: '/link',
+        alertsHelpUrl: '/link',
         emptyAlertSvgPath: 'illustration/path',
         ...props,
       },
diff --git a/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
index 4644406c037..c36107c28ce 100644
--- a/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
@@ -19,6 +19,7 @@ describe('AlertManagementList', () => {
       propsData: {
         projectPath: 'gitlab-org/gitlab',
         enableAlertManagementPath: '/link',
+        alertsHelpUrl: '/link',
         populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data',
         emptyAlertSvgPath: 'illustration/path',
         ...props,
diff --git a/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
index fe08cf2c10a..2814b5ce357 100644
--- a/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue';
-import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.graphql';
+import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -34,6 +34,8 @@ describe('Alert Details Sidebar To Do', () => {
     wrapper.destroy();
   });
 
+  const findToDoButton = () => wrapper.find('[data-testid="alert-todo-button"]');
+
   describe('updating the alert to do', () => {
     const mockUpdatedMutationResult = {
       data: {
@@ -44,25 +46,27 @@ describe('Alert Details Sidebar To Do', () => {
       },
     };
 
-    beforeEach(() => {
-      mountComponent({
-        data: { alert: mockAlert },
-        sidebarCollapsed: false,
-        loading: false,
+    describe('adding a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: mockAlert },
+          sidebarCollapsed: false,
+          loading: false,
+        });
       });
-    });
 
-    it('renders a button for adding a To Do', () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('[data-testid="alert-todo-button"]').text()).toBe('Add a To Do');
+      it('renders a button for adding a To-Do', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Add a To-Do');
       });
-    });
 
-    it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+      it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find('button').trigger('click');
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: AlertMarkTodo,
           variables: {
@@ -72,5 +76,28 @@ describe('Alert Details Sidebar To Do', () => {
         });
       });
     });
+    describe('removing a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: { ...mockAlert, todos: { nodes: [{ id: '1234' }] } } },
+          sidebarCollapsed: false,
+          loading: false,
+        });
+      });
+
+      it('renders a Mark As Done button when todo is present', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Mark as done');
+      });
+
+      it('calls `$apollo.mutate` with `AlertMarkTodoDone` mutation and variables containing `id`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 });
diff --git a/spec/frontend/alert_management/components/alert_management_table_spec.js b/spec/frontend/alert_management/components/alert_management_table_spec.js
index f316126432e..5dd0d9dc1ba 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -3,8 +3,8 @@ import {
   GlTable,
   GlAlert,
   GlLoadingIcon,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlIcon,
   GlTabs,
   GlTab,
@@ -12,6 +12,7 @@ import {
   GlPagination,
   GlSearchBoxByType,
 } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 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';
@@ -32,18 +33,19 @@ describe('AlertManagementTable', () => {
   const findAlerts = () => wrapper.findAll('table tbody tr');
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
+  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findStatusTabs = () => wrapper.find(GlTabs);
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
-  const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
   const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
   const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
   const findPagination = () => wrapper.find(GlPagination);
   const findSearch = () => wrapper.find(GlSearchBoxByType);
   const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
+  const findAlertError = () => wrapper.find('[data-testid="alert-error"]');
   const alertsCount = {
     open: 14,
     triggered: 10,
@@ -51,6 +53,11 @@ describe('AlertManagementTable', () => {
     resolved: 1,
     all: 16,
   };
+  const selectFirstStatusOption = () => {
+    findFirstStatusOption().vm.$emit('click');
+
+    return waitForPromises();
+  };
 
   function mountComponent({
     props = {
@@ -138,7 +145,7 @@ describe('AlertManagementTable', () => {
     it('error state', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { errors: ['error'] }, alertsCount: null, errored: true },
+        data: { alerts: { errors: ['error'] }, alertsCount: null, hasError: true },
         loading: false,
       });
       expect(findAlertsTable().exists()).toBe(true);
@@ -155,7 +162,7 @@ describe('AlertManagementTable', () => {
     it('empty state', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: [], pageInfo: {} }, alertsCount: { all: 0 }, errored: false },
+        data: { alerts: { list: [], pageInfo: {} }, alertsCount: { all: 0 }, hasError: false },
         loading: false,
       });
       expect(findAlertsTable().exists()).toBe(true);
@@ -172,7 +179,7 @@ describe('AlertManagementTable', () => {
     it('has data state', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
       expect(findLoader().exists()).toBe(false);
@@ -188,7 +195,7 @@ describe('AlertManagementTable', () => {
     it('displays status dropdown', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
       expect(findStatusDropdown().exists()).toBe(true);
@@ -197,7 +204,7 @@ describe('AlertManagementTable', () => {
     it('does not display a dropdown status header', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
       expect(findStatusDropdown().contains('.dropdown-title')).toBe(false);
@@ -206,7 +213,7 @@ describe('AlertManagementTable', () => {
     it('shows correct severity icons', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
@@ -223,7 +230,7 @@ describe('AlertManagementTable', () => {
     it('renders severity text', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
@@ -237,7 +244,7 @@ describe('AlertManagementTable', () => {
     it('renders Unassigned when no assignee(s) present', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
@@ -251,7 +258,7 @@ describe('AlertManagementTable', () => {
     it('renders username(s) when assignee(s) present', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
@@ -265,7 +272,7 @@ describe('AlertManagementTable', () => {
     it('navigates to the detail page when alert row is clicked', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
@@ -279,7 +286,7 @@ describe('AlertManagementTable', () => {
       beforeEach(() => {
         mountComponent({
           props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-          data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+          data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
           loading: false,
         });
       });
@@ -323,7 +330,7 @@ describe('AlertManagementTable', () => {
               ],
             },
             alertsCount,
-            errored: false,
+            hasError: false,
           },
           loading: false,
         });
@@ -343,7 +350,7 @@ describe('AlertManagementTable', () => {
               },
             ],
             alertsCount,
-            errored: false,
+            hasError: false,
           },
           loading: false,
         });
@@ -358,7 +365,7 @@ describe('AlertManagementTable', () => {
         it('should highlight the row when alert is new', () => {
           mountComponent({
             props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-            data: { alerts: { list: [newAlert] }, alertsCount, errored: false },
+            data: { alerts: { list: [newAlert] }, alertsCount, hasError: false },
             loading: false,
           });
 
@@ -372,7 +379,7 @@ describe('AlertManagementTable', () => {
         it('should not highlight the row when alert is not new', () => {
           mountComponent({
             props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-            data: { alerts: { list: [oldAlert] }, alertsCount, errored: false },
+            data: { alerts: { list: [oldAlert] }, alertsCount, hasError: false },
             loading: false,
           });
 
@@ -392,7 +399,7 @@ describe('AlertManagementTable', () => {
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
         data: {
           alerts: { list: mockAlerts },
-          errored: false,
+          hasError: false,
           sort: 'STARTED_AT_DESC',
           alertsCount,
         },
@@ -429,7 +436,7 @@ describe('AlertManagementTable', () => {
     beforeEach(() => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
     });
@@ -448,19 +455,36 @@ describe('AlertManagementTable', () => {
       });
     });
 
-    it('shows an error when request fails', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
-      findFirstStatusOption().vm.$emit('click');
-      wrapper.setData({
-        errored: true,
+    describe('when a request fails', () => {
+      beforeEach(() => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
       });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('[data-testid="alert-error"]').exists()).toBe(true);
+      it('shows an error', async () => {
+        await selectFirstStatusOption();
+
+        expect(findAlertError().text()).toContain(
+          'There was an error while updating the status of the alert.',
+        );
+      });
+
+      it('shows an error when triggered a second time', async () => {
+        await selectFirstStatusOption();
+
+        wrapper.find(GlAlert).vm.$emit('dismiss');
+
+        await wrapper.vm.$nextTick();
+
+        // Assert that the error has been dismissed in the setup
+        expect(findAlertError().exists()).toBe(false);
+
+        await selectFirstStatusOption();
+
+        expect(findAlertError().exists()).toBe(true);
       });
     });
 
-    it('shows an error when response includes HTML errors', () => {
+    it('shows an error when response includes HTML errors', async () => {
       const mockUpdatedMutationErrorResult = {
         data: {
           updateAlertStatus: {
@@ -474,13 +498,11 @@ describe('AlertManagementTable', () => {
       };
 
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationErrorResult);
-      findFirstStatusOption().vm.$emit('click');
-      wrapper.setData({ errored: true });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.contains('[data-testid="alert-error"]')).toBe(true);
-        expect(wrapper.contains('[data-testid="htmlError"]')).toBe(true);
-      });
+      await selectFirstStatusOption();
+
+      expect(findAlertError().exists()).toBe(true);
+      expect(findAlertError().contains('[data-testid="htmlError"]')).toBe(true);
     });
   });
 
@@ -510,7 +532,7 @@ describe('AlertManagementTable', () => {
     beforeEach(() => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts, pageInfo: {} }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts, pageInfo: {} }, alertsCount, hasError: false },
         loading: false,
       });
     });
@@ -570,7 +592,7 @@ describe('AlertManagementTable', () => {
     beforeEach(() => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
     });
diff --git a/spec/frontend/alert_management/components/alert_metrics_spec.js b/spec/frontend/alert_management/components/alert_metrics_spec.js
index c188363ddc2..e0a069fa1a8 100644
--- a/spec/frontend/alert_management/components/alert_metrics_spec.js
+++ b/spec/frontend/alert_management/components/alert_metrics_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import AlertMetrics from '~/alert_management/components/alert_metrics.vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
+import AlertMetrics from '~/alert_management/components/alert_metrics.vue';
 
 jest.mock('~/monitoring/stores', () => ({
   monitoringDashboard: {},
diff --git a/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
index db086782424..a14596b6722 100644
--- a/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
+++ b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } 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';
@@ -103,7 +103,7 @@ describe('Alert Details Sidebar Assignees', () => {
     it('renders a unassigned option', () => {
       wrapper.setData({ isDropdownSearching: false });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
+        expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
       });
     });
 
diff --git a/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
index c2eaf540e9c..5bd0d3b3c17 100644
--- a/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
+++ b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
 import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue';
 import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql';
@@ -10,8 +10,8 @@ const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
-  const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
+  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findStatusDropdownItem = () => wrapper.find(GlDeprecatedDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {