Add latest changes from gitlab-org/gitlab@master

6 files changed, 384 insertions, 86 deletions

diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
index 66e3f180d92..eb2b82a0211 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_settings_form_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertsSettingsFormNew with default values renders the initial template 1`] = `
+exports[`AlertsSettingsForm with default values renders the initial template 1`] = `
 <form
   class="gl-mt-6"
 >
diff --git a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
index 92ea8b2f33c..1ec7b5c18f6 100644
--- a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
+++ b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
@@ -1,10 +1,10 @@
 import { GlIcon, GlFormInput, GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AlertMappingBuilder, { i18n } from '~/alerts_settings/components/alert_mapping_builder.vue';
-import gitlabFields from '~/alerts_settings/components/mocks/gitlabFields.json';
 import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import * as transformationUtils from '~/alerts_settings/utils/mapping_transformations';
+import alertFields from '../mocks/alertFields.json';
 
 describe('AlertMappingBuilder', () => {
   let wrapper;
@@ -14,6 +14,7 @@ describe('AlertMappingBuilder', () => {
       propsData: {
         parsedPayload: parsedMapping.samplePayload.payloadAlerFields.nodes,
         savedMapping: parsedMapping.storedMapping.nodes,
+        alertFields,
       },
     });
   }
@@ -44,28 +45,28 @@ describe('AlertMappingBuilder', () => {
   });
 
   it('renders disabled form input for each mapped field', () => {
-    gitlabFields.forEach((field, index) => {
+    alertFields.forEach((field, index) => {
       const input = findColumnInRow(index + 1, 0).find(GlFormInput);
-      const types = field.type.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
+      const types = field.types.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
       expect(input.attributes('value')).toBe(`${field.label} (${types})`);
       expect(input.attributes('disabled')).toBe('');
     });
   });
 
   it('renders right arrow next to each input', () => {
-    gitlabFields.forEach((field, index) => {
+    alertFields.forEach((field, index) => {
       const arrow = findColumnInRow(index + 1, 1).find('.right-arrow');
       expect(arrow.exists()).toBe(true);
     });
   });
 
   it('renders mapping dropdown for each field', () => {
-    gitlabFields.forEach(({ compatibleTypes }, index) => {
+    alertFields.forEach(({ types }, index) => {
       const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
       const searchBox = dropdown.findComponent(GlSearchBoxByType);
       const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
       const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-      const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
+      const mappingOptions = nodes.filter(({ type }) => types.includes(type));
 
       expect(dropdown.exists()).toBe(true);
       expect(searchBox.exists()).toBe(true);
@@ -74,7 +75,7 @@ describe('AlertMappingBuilder', () => {
   });
 
   it('renders fallback dropdown only for the fields that have fallback', () => {
-    gitlabFields.forEach(({ compatibleTypes, numberOfFallbacks }, index) => {
+    alertFields.forEach(({ types, numberOfFallbacks }, index) => {
       const dropdown = findColumnInRow(index + 1, 3).find(GlDropdown);
       expect(dropdown.exists()).toBe(Boolean(numberOfFallbacks));
 
@@ -82,7 +83,7 @@ describe('AlertMappingBuilder', () => {
         const searchBox = dropdown.findComponent(GlSearchBoxByType);
         const dropdownItems = dropdown.findAllComponents(GlDropdownItem);
         const { nodes } = parsedMapping.samplePayload.payloadAlerFields;
-        const mappingOptions = nodes.filter(({ type }) => compatibleTypes.includes(type));
+        const mappingOptions = nodes.filter(({ type }) => types.includes(type));
 
         expect(searchBox.exists()).toBe(Boolean(numberOfFallbacks));
         expect(dropdownItems).toHaveLength(mappingOptions.length);
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
index 2afa714fcf8..b43c1318a86 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -11,9 +11,10 @@ import waitForPromises from 'helpers/wait_for_promises';
 import AlertsSettingsForm from '~/alerts_settings/components/alerts_settings_form.vue';
 import MappingBuilder from '~/alerts_settings/components/alert_mapping_builder.vue';
 import { typeSet } from '~/alerts_settings/constants';
+import alertFields from '../mocks/alertFields.json';
 import { defaultAlertSettingsConfig } from './util';
 
-describe('AlertsSettingsFormNew', () => {
+describe('AlertsSettingsForm', () => {
   let wrapper;
   const mockToastShow = jest.fn();
 
@@ -21,6 +22,7 @@ describe('AlertsSettingsFormNew', () => {
     data = {},
     props = {},
     multipleHttpIntegrationsCustomMapping = false,
+    multiIntegrations = true,
   } = {}) => {
     wrapper = mount(AlertsSettingsForm, {
       data() {
@@ -32,8 +34,9 @@ describe('AlertsSettingsFormNew', () => {
         ...props,
       },
       provide: {
-        glFeatures: { multipleHttpIntegrationsCustomMapping },
         ...defaultAlertSettingsConfig,
+        glFeatures: { multipleHttpIntegrationsCustomMapping },
+        multiIntegrations,
       },
       mocks: {
         $toast: {
@@ -132,7 +135,11 @@ describe('AlertsSettingsFormNew', () => {
       });
 
       it('create with custom mapping', async () => {
-        createComponent({ multipleHttpIntegrationsCustomMapping: true });
+        createComponent({
+          multipleHttpIntegrationsCustomMapping: true,
+          multiIntegrations: true,
+          props: { alertFields },
+        });
 
         const integrationName = 'Test integration';
         await selectOptionAtIndex(1);
@@ -275,6 +282,7 @@ describe('AlertsSettingsFormNew', () => {
           currentIntegration: {
             type: typeSet.http,
           },
+          alertFields,
         },
       });
     });
@@ -347,18 +355,27 @@ describe('AlertsSettingsFormNew', () => {
 
   describe('Mapping builder section', () => {
     describe.each`
-      featureFlag | integrationOption | visible
-      ${true}     | ${1}              | ${true}
-      ${true}     | ${2}              | ${false}
-      ${false}    | ${1}              | ${false}
-      ${false}    | ${2}              | ${false}
-    `('', ({ featureFlag, integrationOption, visible }) => {
+      alertFieldsProvided | multiIntegrations | featureFlag | integrationOption | visible
+      ${true}             | ${true}           | ${true}     | ${1}              | ${true}
+      ${true}             | ${true}           | ${true}     | ${2}              | ${false}
+      ${true}             | ${true}           | ${false}    | ${1}              | ${false}
+      ${true}             | ${true}           | ${false}    | ${2}              | ${false}
+      ${true}             | ${false}          | ${true}     | ${1}              | ${false}
+      ${false}            | ${true}           | ${true}     | ${1}              | ${false}
+    `('', ({ alertFieldsProvided, multiIntegrations, featureFlag, integrationOption, visible }) => {
       const visibleMsg = visible ? 'is rendered' : 'is not rendered';
       const featureFlagMsg = featureFlag ? 'is enabled' : 'is disabled';
+      const alertFieldsMsg = alertFieldsProvided ? 'are provided' : 'are not provided';
       const integrationType = integrationOption === 1 ? typeSet.http : typeSet.prometheus;
 
-      it(`${visibleMsg} when multipleHttpIntegrationsCustomMapping feature flag ${featureFlagMsg} and integration type is ${integrationType}`, async () => {
-        createComponent({ multipleHttpIntegrationsCustomMapping: featureFlag });
+      it(`${visibleMsg} when multipleHttpIntegrationsCustomMapping feature flag ${featureFlagMsg} and integration type is ${integrationType} and alert fields ${alertFieldsMsg}`, async () => {
+        createComponent({
+          multipleHttpIntegrationsCustomMapping: featureFlag,
+          multiIntegrations,
+          props: {
+            alertFields: alertFieldsProvided ? alertFields : [],
+          },
+        });
         await selectOptionAtIndex(integrationOption);
 
         expect(findMappingBuilderSection().exists()).toBe(visible);
diff --git a/spec/frontend/alerts_settings/mocks/alertFields.json b/spec/frontend/alerts_settings/mocks/alertFields.json
new file mode 100644
index 00000000000..ffe59dd0c05
--- /dev/null
+++ b/spec/frontend/alerts_settings/mocks/alertFields.json
@@ -0,0 +1,123 @@
+[
+  {
+    "name": "title",
+    "label": "Title",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ],
+    "numberOfFallbacks": 1
+  },
+  {
+    "name": "description",
+    "label": "Description",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "start_time",
+    "label": "Start time",
+    "type": [
+      "datetime"
+    ],
+    "types": [
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "end_time",
+    "label": "End time",
+    "type": [
+      "datetime"
+    ],
+    "types": [
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "service",
+    "label": "Service",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "monitoring_tool",
+    "label": "Monitoring tool",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "hosts",
+    "label": "Hosts",
+    "type": [
+      "string",
+      "ARRAY"
+    ],
+    "types": [
+      "string",
+      "ARRAY",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "severity",
+    "label": "Severity",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "fingerprint",
+    "label": "Fingerprint",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  },
+  {
+    "name": "gitlab_environment_name",
+    "label": "Environment",
+    "type": [
+      "string"
+    ],
+    "types": [
+      "string",
+      "number",
+      "datetime"
+    ]
+  }
+]
diff --git a/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
index f725712fdd2..f8d2a7aa23b 100644
--- a/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
+++ b/spec/frontend/alerts_settings/utils/mapping_transformations_spec.js
@@ -3,24 +3,23 @@ import {
   getPayloadFields,
   transformForSave,
 } from '~/alerts_settings/utils/mapping_transformations';
-import gitlabFieldsMock from '~/alerts_settings/components/mocks/gitlabFields.json';
 import parsedMapping from '~/alerts_settings/components/mocks/parsedMapping.json';
+import alertFields from '../mocks/alertFields.json';
 
 describe('Mapping Transformation Utilities', () => {
   const nameField = {
     label: 'Name',
     path: ['alert', 'name'],
-    type: 'STRING',
+    type: 'string',
   };
   const dashboardField = {
     label: 'Dashboard Id',
     path: ['alert', 'dashboardId'],
-    type: 'STRING',
+    type: 'string',
   };
 
   describe('getMappingData', () => {
     it('should return mapping data', () => {
-      const alertFields = gitlabFieldsMock.slice(0, 3);
       const result = getMappingData(
         alertFields,
         getPayloadFields(parsedMapping.samplePayload.payloadAlerFields.nodes.slice(0, 3)),
@@ -51,7 +50,9 @@ describe('Mapping Transformation Utilities', () => {
       ];
       const result = transformForSave(mockMappingData);
       const { path, type, label } = nameField;
-      expect(result).toEqual([{ fieldName, path, type, label }]);
+      expect(result).toEqual([
+        { fieldName: fieldName.toUpperCase(), path, type: type.toUpperCase(), label },
+      ]);
     });
 
     it('should return empty array if no mapping provided', () => {
diff --git a/spec/frontend/pipelines/stage_spec.js b/spec/frontend/pipelines/stage_spec.js
index e4782a1dab1..8c914705d97 100644
--- a/spec/frontend/pipelines/stage_spec.js
+++ b/spec/frontend/pipelines/stage_spec.js
@@ -1,4 +1,6 @@
 import 'bootstrap/js/dist/dropdown';
+import $ from 'jquery';
+import { GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -9,6 +11,7 @@ import { stageReply } from './mock_data';
 describe('Pipelines stage component', () => {
   let wrapper;
   let mock;
+  let glFeatures;
 
   const defaultProps = {
     stage: {
@@ -22,8 +25,6 @@ describe('Pipelines stage component', () => {
     updateDropdown: false,
   };
 
-  const isDropdownOpen = () => wrapper.classes('show');
-
   const createComponent = (props = {}) => {
     wrapper = mount(StageComponent, {
       attachTo: document.body,
@@ -31,110 +32,265 @@ describe('Pipelines stage component', () => {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        glFeatures,
+      },
     });
   };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
+    jest.spyOn(eventHub, '$emit');
+    glFeatures = {};
   });
 
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
 
+    eventHub.$emit.mockRestore();
     mock.restore();
   });
 
-  describe('default', () => {
-    beforeEach(() => {
-      createComponent();
+  describe('when ci_mini_pipeline_gl_dropdown feature flag is disabled', () => {
+    const isDropdownOpen = () => wrapper.classes('show');
+
+    describe('default', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should render a dropdown with the status icon', () => {
+        expect(wrapper.attributes('class')).toEqual('dropdown');
+        expect(wrapper.find('svg').exists()).toBe(true);
+        expect(wrapper.find('button').attributes('data-toggle')).toEqual('dropdown');
+      });
     });
 
-    it('should render a dropdown with the status icon', () => {
-      expect(wrapper.attributes('class')).toEqual('dropdown');
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.find('button').attributes('data-toggle')).toEqual('dropdown');
+    describe('with successful request', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        createComponent();
+      });
+
+      it('should render the received data and emit `clickedDropdown` event', async () => {
+        wrapper.find('button').trigger('click');
+
+        await axios.waitForAll();
+        expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+          stageReply.latest_statuses[0].name,
+        );
+
+        expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
+      });
     });
-  });
 
-  describe('with successful request', () => {
-    beforeEach(() => {
-      mock.onGet('path.json').reply(200, stageReply);
+    it('when request fails should close the dropdown', async () => {
+      mock.onGet('path.json').reply(500);
       createComponent();
-    });
+      wrapper.find({ ref: 'dropdown' }).trigger('click');
 
-    it('should render the received data and emit `clickedDropdown` event', async () => {
-      jest.spyOn(eventHub, '$emit');
-      wrapper.find('button').trigger('click');
+      expect(isDropdownOpen()).toBe(true);
 
+      wrapper.find('button').trigger('click');
       await axios.waitForAll();
-      expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
-        stageReply.latest_statuses[0].name,
-      );
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
+      expect(isDropdownOpen()).toBe(false);
     });
-  });
 
-  it('when request fails should close the dropdown', async () => {
-    mock.onGet('path.json').reply(500);
-    createComponent();
-    wrapper.find({ ref: 'dropdown' }).trigger('click');
-    expect(isDropdownOpen()).toBe(true);
+    describe('update endpoint correctly', () => {
+      beforeEach(() => {
+        const copyStage = { ...stageReply };
+        copyStage.latest_statuses[0].name = 'this is the updated content';
+        mock.onGet('bar.json').reply(200, copyStage);
+        createComponent({
+          stage: {
+            status: {
+              group: 'running',
+              icon: 'status_running',
+              title: 'running',
+            },
+            dropdown_path: 'bar.json',
+          },
+        });
+        return axios.waitForAll();
+      });
+
+      it('should update the stage to request the new endpoint provided', async () => {
+        wrapper.find('button').trigger('click');
+        await axios.waitForAll();
+
+        expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
+          'this is the updated content',
+        );
+      });
+    });
+
+    describe('pipelineActionRequestComplete', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+      });
+
+      const clickCiAction = async () => {
+        wrapper.find('button').trigger('click');
+        await axios.waitForAll();
+
+        wrapper.find('.js-ci-action').trigger('click');
+        await axios.waitForAll();
+      };
+
+      describe('within pipeline table', () => {
+        it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
+          createComponent({ type: 'PIPELINES_TABLE' });
+
+          await clickCiAction();
+
+          expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+        });
+      });
+
+      describe('in MR widget', () => {
+        beforeEach(() => {
+          jest.spyOn($.fn, 'dropdown');
+        });
 
-    wrapper.find('button').trigger('click');
-    await axios.waitForAll();
+        it('closes the dropdown when `pipelineActionRequestComplete` is triggered', async () => {
+          createComponent();
 
-    expect(isDropdownOpen()).toBe(false);
+          await clickCiAction();
+
+          expect($.fn.dropdown).toHaveBeenCalledWith('toggle');
+        });
+      });
+    });
   });
 
-  describe('update endpoint correctly', () => {
+  describe('when ci_mini_pipeline_gl_dropdown feature flag is enabled', () => {
+    const findDropdown = () => wrapper.find(GlDropdown);
+    const findDropdownToggle = () => wrapper.find('button.gl-dropdown-toggle');
+    const findDropdownMenu = () =>
+      wrapper.find('[data-testid="mini-pipeline-graph-dropdown-menu-list"]');
+    const findCiActionBtn = () => wrapper.find('.js-ci-action');
+
+    const openGlDropdown = () => {
+      findDropdownToggle().trigger('click');
+      return new Promise((resolve) => {
+        wrapper.vm.$root.$on('bv::dropdown::show', resolve);
+      });
+    };
+
     beforeEach(() => {
-      const copyStage = { ...stageReply };
-      copyStage.latest_statuses[0].name = 'this is the updated content';
-      mock.onGet('bar.json').reply(200, copyStage);
-      createComponent({
-        stage: {
-          status: {
-            group: 'running',
-            icon: 'status_running',
-            title: 'running',
-          },
-          dropdown_path: 'bar.json',
-        },
+      glFeatures = { ciMiniPipelineGlDropdown: true };
+    });
+
+    describe('default', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should render a dropdown with the status icon', () => {
+        expect(findDropdown().exists()).toBe(true);
+        expect(findDropdownToggle().classes('gl-dropdown-toggle')).toEqual(true);
+        expect(wrapper.find('[data-testid="status_success_borderless-icon"]').exists()).toBe(true);
       });
-      return axios.waitForAll();
     });
 
-    it('should update the stage to request the new endpoint provided', async () => {
-      wrapper.find('button').trigger('click');
+    describe('with successful request', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        createComponent();
+      });
+
+      it('should render the received data and emit `clickedDropdown` event', async () => {
+        await openGlDropdown();
+        await axios.waitForAll();
+
+        expect(findDropdownMenu().text()).toContain(stageReply.latest_statuses[0].name);
+        expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
+      });
+    });
+
+    it('when request fails should close the dropdown', async () => {
+      mock.onGet('path.json').reply(500);
+
+      createComponent();
+
+      await openGlDropdown();
       await axios.waitForAll();
 
-      expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
-        'this is the updated content',
-      );
+      expect(findDropdown().classes('show')).toBe(false);
     });
-  });
 
-  describe('pipelineActionRequestComplete', () => {
-    beforeEach(() => {
-      mock.onGet('path.json').reply(200, stageReply);
-      mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+    describe('update endpoint correctly', () => {
+      beforeEach(async () => {
+        const copyStage = { ...stageReply };
+        copyStage.latest_statuses[0].name = 'this is the updated content';
+        mock.onGet('bar.json').reply(200, copyStage);
+        createComponent({
+          stage: {
+            status: {
+              group: 'running',
+              icon: 'status_running',
+              title: 'running',
+            },
+            dropdown_path: 'bar.json',
+          },
+        });
+        await axios.waitForAll();
+      });
 
-      createComponent({ type: 'PIPELINES_TABLE' });
+      it('should update the stage to request the new endpoint provided', async () => {
+        await openGlDropdown();
+        await axios.waitForAll();
+
+        expect(findDropdownMenu().text()).toContain('this is the updated content');
+      });
     });
 
-    describe('within pipeline table', () => {
-      it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
-        jest.spyOn(eventHub, '$emit');
+    describe('pipelineActionRequestComplete', () => {
+      beforeEach(() => {
+        mock.onGet('path.json').reply(200, stageReply);
+        mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
+      });
 
-        wrapper.find('button').trigger('click');
+      const clickCiAction = async () => {
+        await openGlDropdown();
         await axios.waitForAll();
 
-        wrapper.find('.js-ci-action').trigger('click');
+        findCiActionBtn().trigger('click');
         await axios.waitForAll();
+      };
+
+      describe('within pipeline table', () => {
+        beforeEach(() => {
+          createComponent({ type: 'PIPELINES_TABLE' });
+        });
+
+        it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
+          await clickCiAction();
+
+          expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+        });
+      });
+
+      describe('in MR widget', () => {
+        beforeEach(() => {
+          jest.spyOn($.fn, 'dropdown');
+          createComponent();
+        });
+
+        it('closes the dropdown when `pipelineActionRequestComplete` is triggered', async () => {
+          const hidden = jest.fn();
+
+          wrapper.vm.$root.$on('bv::dropdown::hide', hidden);
+
+          expect(hidden).toHaveBeenCalledTimes(0);
+
+          await clickCiAction();
 
-        expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
+          expect(hidden).toHaveBeenCalledTimes(1);
+        });
       });
     });
   });