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

6 files changed, 126 insertions, 65 deletions

diff --git a/spec/frontend/alert_management/components/alert_details_spec.js b/spec/frontend/alert_management/components/alert_details_spec.js
index 2c4ed100a56..8aa26dbca3b 100644
--- a/spec/frontend/alert_management/components/alert_details_spec.js
+++ b/spec/frontend/alert_management/components/alert_details_spec.js
@@ -1,7 +1,8 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import AlertDetails from '~/alert_management/components/alert_details.vue';
 import createIssueMutation from '~/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql';
 import { joinPaths } from '~/lib/utils/url_utility';
@@ -22,8 +23,6 @@ describe('AlertDetails', () => {
   const projectId = '1';
   const $router = { replace: jest.fn() };
 
-  const findDetailsTable = () => wrapper.find(GlTable);
-
   function mountComponent({ data, loading = false, mountMethod = shallowMount, stubs = {} } = {}) {
     wrapper = mountMethod(AlertDetails, {
       provide: {
@@ -66,6 +65,7 @@ describe('AlertDetails', () => {
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
   const findViewIncidentBtn = () => wrapper.find('[data-testid="viewIncidentBtn"]');
   const findIncidentCreationAlert = () => wrapper.find('[data-testid="incidentCreationError"]');
+  const findDetailsTable = () => wrapper.find(AlertDetailsTable);
 
   describe('Alert details', () => {
     describe('when alert is null', () => {
@@ -87,8 +87,8 @@ describe('AlertDetails', () => {
         expect(wrapper.find('[data-testid="overview"]').exists()).toBe(true);
       });
 
-      it('renders a tab with full alert information', () => {
-        expect(wrapper.find('[data-testid="fullDetails"]').exists()).toBe(true);
+      it('renders a tab with an activity feed', () => {
+        expect(wrapper.find('[data-testid="activity"]').exists()).toBe(true);
       });
 
       it('renders severity', () => {
@@ -198,7 +198,6 @@ describe('AlertDetails', () => {
         mountComponent({ data: { alert: mockAlert } });
       });
       it('should display a table of raw alert details data', () => {
-        wrapper.find('[data-testid="fullDetails"]').trigger('click');
         expect(findDetailsTable().exists()).toBe(true);
       });
     });
@@ -234,7 +233,7 @@ describe('AlertDetails', () => {
 
     describe('header', () => {
       const findHeader = () => wrapper.find('[data-testid="alert-header"]');
-      const stubs = { TimeAgoTooltip: '<span>now</span>' };
+      const stubs = { TimeAgoTooltip: { template: '<span>now</span>' } };
 
       describe('individual header fields', () => {
         describe.each`
@@ -268,8 +267,8 @@ describe('AlertDetails', () => {
       it.each`
         index | tabId
         ${0}  | ${'overview'}
-        ${1}  | ${'fullDetails'}
-        ${2}  | ${'metrics'}
+        ${1}  | ${'metrics'}
+        ${2}  | ${'activity'}
       `('will navigate to the correct tab via $tabId', ({ index, tabId }) => {
         wrapper.setData({ currentTabIndex: index });
         expect($router.replace).toHaveBeenCalledWith({ name: 'tab', params: { tabId } });
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 2814b5ce357..ea7b4584a63 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,7 @@
 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.mutation.graphql';
+import createAlertTodoMutation from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
+import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -61,14 +62,14 @@ describe('Alert Details Sidebar To Do', () => {
         expect(findToDoButton().text()).toBe('Add a To-Do');
       });
 
-      it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
+      it('calls `$apollo.mutate` with `createAlertTodoMutation` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
 
         findToDoButton().trigger('click');
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation: AlertMarkTodo,
+          mutation: createAlertTodoMutation,
           variables: {
             iid: '1527542',
             projectPath: 'projectPath',
@@ -76,6 +77,7 @@ describe('Alert Details Sidebar To Do', () => {
         });
       });
     });
+
     describe('removing a todo', () => {
       beforeEach(() => {
         mountComponent({
@@ -91,12 +93,19 @@ describe('Alert Details Sidebar To Do', () => {
         expect(findToDoButton().text()).toBe('Mark as done');
       });
 
-      it('calls `$apollo.mutate` with `AlertMarkTodoDone` mutation and variables containing `id`', async () => {
+      it('calls `$apollo.mutate` with `todoMarkDoneMutation` 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);
+
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+          mutation: todoMarkDoneMutation,
+          update: expect.anything(),
+          variables: {
+            id: '1234',
+          },
+        });
       });
     });
   });
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 5dd0d9dc1ba..bcad415eb19 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -11,6 +11,7 @@ import {
   GlBadge,
   GlPagination,
   GlSearchBoxByType,
+  GlAvatar,
 } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -39,19 +40,21 @@ describe('AlertManagementTable', () => {
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
   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 findSeverityColumnHeader = () =>
+    wrapper.find('[data-testid="alert-management-severity-sort"]');
+  const findFirstIDField = () => wrapper.findAll('[data-testid="idField"]').at(0);
+  const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
+  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
   const findAlertError = () => wrapper.find('[data-testid="alert-error"]');
   const alertsCount = {
-    open: 14,
-    triggered: 10,
-    acknowledged: 6,
-    resolved: 1,
-    all: 16,
+    open: 24,
+    triggered: 20,
+    acknowledged: 16,
+    resolved: 11,
+    all: 26,
   };
   const selectFirstStatusOption = () => {
     findFirstStatusOption().vm.$emit('click');
@@ -92,13 +95,10 @@ describe('AlertManagementTable', () => {
     });
   }
 
-  beforeEach(() => {
-    mountComponent({ data: { alerts: mockAlerts, alertsCount } });
-  });
-
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
+      wrapper = null;
     }
   });
 
@@ -192,6 +192,17 @@ describe('AlertManagementTable', () => {
       ).toContain('gl-hover-bg-blue-50');
     });
 
+    it('displays the alert ID and title formatted correctly', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
+        loading: false,
+      });
+
+      expect(findFirstIDField().exists()).toBe(true);
+      expect(findFirstIDField().text()).toBe(`#${mockAlerts[0].iid} ${mockAlerts[0].title}`);
+    });
+
     it('displays status dropdown', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
@@ -207,7 +218,11 @@ describe('AlertManagementTable', () => {
         data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
-      expect(findStatusDropdown().contains('.dropdown-title')).toBe(false);
+      expect(
+        findStatusDropdown()
+          .find('.dropdown-title')
+          .exists(),
+      ).toBe(false);
     });
 
     it('shows correct severity icons', () => {
@@ -255,18 +270,22 @@ describe('AlertManagementTable', () => {
       ).toBe('Unassigned');
     });
 
-    it('renders username(s) when assignee(s) present', () => {
+    it('renders user avatar when assignee present', () => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
         data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
 
-      expect(
-        findAssignees()
-          .at(1)
-          .text(),
-      ).toBe(mockAlerts[1].assignees.nodes[0].username);
+      const avatar = findAssignees()
+        .at(1)
+        .find(GlAvatar);
+      const { src, label } = avatar.attributes();
+      const { name, avatarUrl } = mockAlerts[1].assignees.nodes[0];
+
+      expect(avatar.exists()).toBe(true);
+      expect(label).toBe(name);
+      expect(src).toBe(avatarUrl);
     });
 
     it('navigates to the detail page when alert row is clicked', () => {
@@ -502,7 +521,11 @@ describe('AlertManagementTable', () => {
       await selectFirstStatusOption();
 
       expect(findAlertError().exists()).toBe(true);
-      expect(findAlertError().contains('[data-testid="htmlError"]')).toBe(true);
+      expect(
+        findAlertError()
+          .find('[data-testid="htmlError"]')
+          .exists(),
+      ).toBe(true);
     });
   });
 
diff --git a/spec/frontend/alert_management/components/alert_metrics_spec.js b/spec/frontend/alert_management/components/alert_metrics_spec.js
index e0a069fa1a8..42da8c3768b 100644
--- a/spec/frontend/alert_management/components/alert_metrics_spec.js
+++ b/spec/frontend/alert_management/components/alert_metrics_spec.js
@@ -3,15 +3,13 @@ import waitForPromises from 'helpers/wait_for_promises';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import AlertMetrics from '~/alert_management/components/alert_metrics.vue';
+import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 
 jest.mock('~/monitoring/stores', () => ({
   monitoringDashboard: {},
 }));
 
-const mockEmbedName = 'MetricsEmbedStub';
-
 jest.mock('~/monitoring/components/embeds/metric_embed.vue', () => ({
-  name: mockEmbedName,
   render(h) {
     return h('div');
   },
@@ -26,13 +24,10 @@ describe('Alert Metrics', () => {
       propsData: {
         ...props,
       },
-      stubs: {
-        MetricEmbed: true,
-      },
     });
   }
 
-  const findChart = () => wrapper.find({ name: mockEmbedName });
+  const findChart = () => wrapper.find(MetricEmbed);
   const findEmptyState = () => wrapper.find({ ref: 'emptyState' });
 
   afterEach(() => {
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 a14596b6722..4c9db02eff4 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
@@ -56,6 +56,9 @@ describe('Alert Details Sidebar Assignees', () => {
     mock.restore();
   });
 
+  const findAssigned = () => wrapper.find('[data-testid="assigned-users"]');
+  const findUnassigned = () => wrapper.find('[data-testid="unassigned-users"]');
+
   describe('updating the alert status', () => {
     const mockUpdatedMutationResult = {
       data: {
@@ -100,32 +103,30 @@ describe('Alert Details Sidebar Assignees', () => {
       });
     });
 
-    it('renders a unassigned option', () => {
+    it('renders a unassigned option', async () => {
       wrapper.setData({ isDropdownSearching: false });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
-      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
     });
 
-    it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', () => {
+    it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', async () => {
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
       wrapper.setData({ isDropdownSearching: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find(SidebarAssignee).vm.$emit('update-alert-assignees', 'root');
+      await wrapper.vm.$nextTick();
+      wrapper.find(SidebarAssignee).vm.$emit('update-alert-assignees', 'root');
 
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation: AlertSetAssignees,
-          variables: {
-            iid: '1527542',
-            assigneeUsernames: ['root'],
-            projectPath: 'projectPath',
-          },
-        });
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: AlertSetAssignees,
+        variables: {
+          iid: '1527542',
+          assigneeUsernames: ['root'],
+          projectPath: 'projectPath',
+        },
       });
     });
 
-    it('shows an error when request contains error messages', () => {
+    it('emits an error when request contains error messages', () => {
       wrapper.setData({ isDropdownSearching: false });
       const errorMutationResult = {
         data: {
@@ -137,18 +138,48 @@ describe('Alert Details Sidebar Assignees', () => {
       };
 
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(errorMutationResult);
-
-      return wrapper.vm.$nextTick().then(() => {
-        const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0);
-        SideBarAssigneeItem.vm.$emit('click');
-        expect(wrapper.emitted('alert-refresh')).toBeUndefined();
-      });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0);
+          SideBarAssigneeItem.vm.$emit('update-alert-assignees');
+        })
+        .then(() => {
+          expect(wrapper.emitted('alert-error')).toBeDefined();
+        });
     });
 
     it('stops updating and cancels loading when the request fails', () => {
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
       wrapper.vm.updateAlertAssignees('root');
-      expect(wrapper.find('[data-testid="unassigned-users"]').text()).toBe('assign yourself');
+      expect(findUnassigned().text()).toBe('assign yourself');
+    });
+
+    it('shows a user avatar, username and full name when a user is set', () => {
+      mountComponent({
+        data: { alert: mockAlerts[1] },
+        sidebarCollapsed: false,
+        loading: false,
+        stubs: {
+          SidebarAssignee,
+        },
+      });
+
+      expect(
+        findAssigned()
+          .find('img')
+          .attributes('src'),
+      ).toBe('/url');
+      expect(
+        findAssigned()
+          .find('.dropdown-menu-user-full-name')
+          .text(),
+      ).toBe('root');
+      expect(
+        findAssigned()
+          .find('.dropdown-menu-user-username')
+          .text(),
+      ).toBe('root');
     });
   });
 });
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 5bd0d3b3c17..a8fe40687e1 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
@@ -56,7 +56,11 @@ describe('Alert Details Sidebar Status', () => {
     });
 
     it('displays the dropdown status header', () => {
-      expect(findStatusDropdown().contains('.dropdown-title')).toBe(true);
+      expect(
+        findStatusDropdown()
+          .find('.dropdown-title')
+          .exists(),
+      ).toBe(true);
     });
 
     describe('updating the alert status', () => {