Add latest changes from gitlab-org/gitlab@master

6 files changed, 289 insertions, 44 deletions

diff --git a/spec/frontend/__mocks__/@gitlab/ui.js b/spec/frontend/__mocks__/@gitlab/ui.js
index 7cdecefab05..ecd67247362 100644
--- a/spec/frontend/__mocks__/@gitlab/ui.js
+++ b/spec/frontend/__mocks__/@gitlab/ui.js
@@ -38,7 +38,9 @@ jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () => ({
       required: false,
       default: () => [],
     },
-    ...Object.fromEntries(['target', 'triggers', 'placement'].map((prop) => [prop, {}])),
+    ...Object.fromEntries(
+      ['target', 'triggers', 'placement', 'boundary', 'container'].map((prop) => [prop, {}]),
+    ),
   },
   render(h) {
     return h(
diff --git a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
new file mode 100644
index 00000000000..0730cfd453e
--- /dev/null
+++ b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import { GlPopover, GlLink, GlButton } from '@gitlab/ui';
+import FeatureHighlightPopover from '~/feature_highlight/feature_highlight_popover.vue';
+import { dismiss } from '~/feature_highlight/feature_highlight_helper';
+import { POPOVER_TARGET_ID } from '~/feature_highlight/constants';
+
+jest.mock('~/feature_highlight/feature_highlight_helper');
+
+describe('feature_highlight/feature_highlight_popover', () => {
+  let wrapper;
+  const props = {
+    autoDevopsHelpPath: '/help/autodevops',
+    highlightId: '123',
+    dismissEndpoint: '/api/dismiss',
+  };
+
+  const buildWrapper = (propsData = props) => {
+    wrapper = mount(FeatureHighlightPopover, {
+      propsData,
+    });
+  };
+  const findPopoverTarget = () => wrapper.find(`#${POPOVER_TARGET_ID}`);
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findAutoDevopsHelpLink = () => wrapper.findComponent(GlLink);
+  const findDismissButton = () => wrapper.findComponent(GlButton);
+
+  beforeEach(() => {
+    buildWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders popover target', () => {
+    expect(findPopoverTarget().exists()).toBe(true);
+  });
+
+  it('renders popover', () => {
+    expect(findPopover().props()).toMatchObject({
+      target: POPOVER_TARGET_ID,
+      cssClasses: ['feature-highlight-popover'],
+      triggers: 'hover',
+      container: 'body',
+      placement: 'right',
+      boundary: 'viewport',
+    });
+  });
+
+  it('renders link that points to the autodevops help page', () => {
+    expect(findAutoDevopsHelpLink().attributes().href).toBe(props.autoDevopsHelpPath);
+    expect(findAutoDevopsHelpLink().text()).toBe('Auto DevOps');
+  });
+
+  it('renders dismiss button', () => {
+    expect(findDismissButton().props()).toMatchObject({
+      size: 'small',
+      icon: 'thumb-up',
+      variant: 'confirm',
+    });
+  });
+
+  it('dismisses popover when dismiss button is clicked', async () => {
+    await findDismissButton().trigger('click');
+
+    expect(findPopover().emitted('close')).toHaveLength(1);
+    expect(dismiss).toHaveBeenCalledWith(props.dismissEndpoint, props.highlightId);
+  });
+
+  describe('when popover is dismissed and hidden', () => {
+    it('hides the popover target', async () => {
+      await findDismissButton().trigger('click');
+      findPopover().vm.$emit('hidden');
+      await wrapper.vm.$nextTick();
+
+      expect(findPopoverTarget().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/issuable/components/issuable_by_email_spec.js b/spec/frontend/issuable/components/issuable_by_email_spec.js
new file mode 100644
index 00000000000..7e40b903754
--- /dev/null
+++ b/spec/frontend/issuable/components/issuable_by_email_spec.js
@@ -0,0 +1,164 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { shallowMount } from '@vue/test-utils';
+import { GlModal, GlSprintf, GlFormInputGroup, GlButton } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import httpStatus from '~/lib/utils/http_status';
+import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
+
+const initialEmail = 'user@gitlab.com';
+
+const mockToastShow = jest.fn();
+
+describe('IssuableByEmail', () => {
+  let wrapper;
+  let mockAxios;
+  let glModalDirective;
+
+  function createComponent(injectedProperties = {}) {
+    glModalDirective = jest.fn();
+
+    return extendedWrapper(
+      shallowMount(IssuableByEmail, {
+        stubs: {
+          GlModal,
+          GlSprintf,
+          GlFormInputGroup,
+          GlButton,
+        },
+        directives: {
+          glModal: {
+            bind(_, { value }) {
+              glModalDirective(value);
+            },
+          },
+        },
+        mocks: {
+          $toast: {
+            show: mockToastShow,
+          },
+        },
+        provide: {
+          issuableType: 'issue',
+          initialEmail,
+          ...injectedProperties,
+        },
+      }),
+    );
+  }
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    mockAxios.restore();
+  });
+
+  const findFormInputGroup = () => wrapper.find(GlFormInputGroup);
+
+  const clickResetEmail = async () => {
+    wrapper.findByTestId('incoming-email-token-reset').vm.$emit('click');
+
+    await waitForPromises();
+  };
+
+  describe('modal button', () => {
+    it.each`
+      issuableType       | buttonText
+      ${'issue'}         | ${'Email a new issue to this project'}
+      ${'merge_request'} | ${'Email a new merge request to this project'}
+    `(
+      'renders a link with "$buttonText" when type is "$issuableType"',
+      ({ issuableType, buttonText }) => {
+        wrapper = createComponent({ issuableType });
+        expect(wrapper.findByTestId('issuable-email-modal-btn').text()).toBe(buttonText);
+      },
+    );
+
+    it('opens the modal when the user clicks the button', () => {
+      wrapper = createComponent();
+
+      wrapper.findByTestId('issuable-email-modal-btn').vm.$emit('click');
+
+      expect(glModalDirective).toHaveBeenCalled();
+    });
+  });
+
+  describe('modal', () => {
+    it('renders a read-only email input field', () => {
+      wrapper = createComponent();
+
+      expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
+    });
+
+    it.each`
+      issuableType       | subject                            | body
+      ${'issue'}         | ${'Enter the issue title'}         | ${'Enter the issue description'}
+      ${'merge_request'} | ${'Enter the merge request title'} | ${'Enter the merge request description'}
+    `('renders a mailto button when type is "$issuableType"', ({ issuableType, subject, body }) => {
+      wrapper = createComponent({
+        issuableType,
+        initialEmail,
+      });
+
+      expect(wrapper.findByTestId('mail-to-btn').attributes('href')).toBe(
+        `mailto:${initialEmail}?subject=${subject}&body=${body}`,
+      );
+    });
+
+    describe('reset email', () => {
+      const resetPath = 'gitlab-test/new_issuable_address?issuable_type=issue';
+
+      beforeEach(() => {
+        jest.spyOn(axios, 'put');
+      });
+      it('should send request to reset email token', async () => {
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(axios.put).toHaveBeenCalledWith(resetPath);
+      });
+
+      it('should update the email when the request succeeds', async () => {
+        mockAxios.onPut(resetPath).reply(httpStatus.OK, { new_address: 'foo@bar.com' });
+
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(findFormInputGroup().props('value')).toBe('foo@bar.com');
+      });
+
+      it('should show a toast message when the request fails', async () => {
+        mockAxios.onPut(resetPath).reply(httpStatus.NOT_FOUND, {});
+
+        wrapper = createComponent({
+          issuableType: 'issue',
+          initialEmail,
+          resetPath,
+        });
+
+        await clickResetEmail();
+
+        expect(mockToastShow).toHaveBeenCalledWith(
+          'There was an error when reseting email token.',
+          { type: 'error' },
+        );
+        expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/issuable_spec.js b/spec/frontend/issuable_spec.js
index 6712b8bfd34..9c8f1e04609 100644
--- a/spec/frontend/issuable_spec.js
+++ b/spec/frontend/issuable_spec.js
@@ -1,6 +1,3 @@
-import $ from 'jquery';
-import MockAdaptor from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
 import IssuableIndex from '~/issuable_index';
 import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
 
@@ -22,43 +19,4 @@ describe('Issuable', () => {
       expect(issuableInitBulkUpdateSidebar.bulkUpdateSidebar).toBeDefined();
     });
   });
-
-  describe('resetIncomingEmailToken', () => {
-    let mock;
-
-    beforeEach(() => {
-      const element = document.createElement('a');
-      element.classList.add('incoming-email-token-reset');
-      element.setAttribute('href', 'foo');
-      document.body.appendChild(element);
-
-      const input = document.createElement('input');
-      input.setAttribute('id', 'issuable_email');
-      document.body.appendChild(input);
-
-      new IssuableIndex('issue_'); // eslint-disable-line no-new
-
-      mock = new MockAdaptor(axios);
-
-      mock.onPut('foo').reply(200, {
-        new_address: 'testing123',
-      });
-    });
-
-    afterEach(() => {
-      mock.restore();
-    });
-
-    it('should send request to reset email token', (done) => {
-      jest.spyOn(axios, 'put');
-      document.querySelector('.incoming-email-token-reset').click();
-
-      setImmediate(() => {
-        expect(axios.put).toHaveBeenCalledWith('foo');
-        expect($('#issuable_email').val()).toBe('testing123');
-
-        done();
-      });
-    });
-  });
 });
diff --git a/spec/frontend/vue_shared/alert_details/alert_details_spec.js b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
index 40af8e60008..d2ab5878172 100644
--- a/spec/frontend/vue_shared/alert_details/alert_details_spec.js
+++ b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
@@ -90,6 +90,7 @@ describe('AlertDetails', () => {
   const findEnvironmentName = () => wrapper.findByTestId('environmentName');
   const findEnvironmentPath = () => wrapper.findByTestId('environmentPath');
   const findDetailsTable = () => wrapper.find(AlertDetailsTable);
+  const findMetricsTab = () => wrapper.findByTestId('metrics');
 
   describe('Alert details', () => {
     describe('when alert is null', () => {
@@ -175,6 +176,15 @@ describe('AlertDetails', () => {
       });
     });
 
+    describe('Threat Monitoring details', () => {
+      it('should not render the metrics tab', () => {
+        mountComponent({
+          data: { alert: mockAlert, provide: { isThreatMonitoringPage: true } },
+        });
+        expect(findMetricsTab().exists()).toBe(false);
+      });
+    });
+
     describe('Create incident from alert', () => {
       it('should display "View incident" button that links the incident page when incident exists', () => {
         const issueIid = '3';
diff --git a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
index c2df37821d3..70cf2597963 100644
--- a/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
+++ b/spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_spec.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import AlertSidebar from '~/vue_shared/alert_details/components/alert_sidebar.vue';
 import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
+import SidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -11,7 +12,12 @@ describe('Alert Details Sidebar', () => {
   let wrapper;
   let mock;
 
-  function mountComponent({ mountMethod = shallowMount, stubs = {}, alert = {} } = {}) {
+  function mountComponent({
+    mountMethod = shallowMount,
+    stubs = {},
+    alert = {},
+    provide = {},
+  } = {}) {
     wrapper = mountMethod(AlertSidebar, {
       data() {
         return {
@@ -24,6 +30,7 @@ describe('Alert Details Sidebar', () => {
       provide: {
         projectPath: 'projectPath',
         projectId: '1',
+        ...provide,
       },
       stubs,
       mocks: {
@@ -60,5 +67,29 @@ describe('Alert Details Sidebar', () => {
       });
       expect(wrapper.find(SidebarAssignees).exists()).toBe(true);
     });
+
+    it('should render side bar status dropdown', () => {
+      mountComponent({
+        mountMethod: mount,
+        alert: mockAlert,
+      });
+      expect(wrapper.find(SidebarStatus).exists()).toBe(true);
+    });
+  });
+
+  describe('the sidebar renders for threat monitoring', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mountComponent();
+    });
+
+    it('should not render side bar status dropdown', () => {
+      mountComponent({
+        mountMethod: mount,
+        alert: mockAlert,
+        provide: { isThreatMonitoringPage: true },
+      });
+      expect(wrapper.find(SidebarStatus).exists()).toBe(false);
+    });
   });
 });