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

15 files changed, 233 insertions, 180 deletions

diff --git a/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js b/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js
index e39f66d3f30..65ca3639dcc 100644
--- a/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js
+++ b/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js
@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import Approvals from '~/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import ApprovalsSummaryOptional from '~/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import {
   FETCH_LOADING,
   FETCH_ERROR,
diff --git a/spec/frontend/vue_mr_widget/components/approvals/approvals_summary_optional_spec.js b/spec/frontend/vue_mr_widget/components/approvals/approvals_summary_optional_spec.js
index 77fad7f51ab..d9a5230f55f 100644
--- a/spec/frontend/vue_mr_widget/components/approvals/approvals_summary_optional_spec.js
+++ b/spec/frontend/vue_mr_widget/components/approvals/approvals_summary_optional_spec.js
@@ -1,9 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
-import {
-  OPTIONAL,
-  OPTIONAL_CAN_APPROVE,
-} from '~/vue_merge_request_widget/components/approvals/messages';
 import ApprovalsSummaryOptional from '~/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
 
 const TEST_HELP_PATH = 'help/path';
@@ -29,10 +25,6 @@ describe('MRWidget approvals summary optional', () => {
       createComponent({ canApprove: true, helpPath: TEST_HELP_PATH });
     });
 
-    it('shows optional can approve message', () => {
-      expect(wrapper.text()).toEqual(OPTIONAL_CAN_APPROVE);
-    });
-
     it('shows help link', () => {
       const link = findHelpLink();
 
@@ -46,10 +38,6 @@ describe('MRWidget approvals summary optional', () => {
       createComponent({ canApprove: false, helpPath: TEST_HELP_PATH });
     });
 
-    it('shows optional message', () => {
-      expect(wrapper.text()).toEqual(OPTIONAL);
-    });
-
     it('does not show help link', () => {
       expect(findHelpLink().exists()).toBe(false);
     });
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_container_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
index 5f3a8654990..d67f1adadf2 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_container_spec.js
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
 import MrWidgetPipelineContainer from '~/vue_merge_request_widget/components/mr_widget_pipeline_container.vue';
 import MrWidgetPipeline from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import ArtifactsApp from '~/vue_merge_request_widget/components/artifacts_list_app.vue';
 import { mockStore } from '../mock_data';
-import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 
 describe('MrWidgetPipelineContainer', () => {
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js
index d6c996f7501..8fcc982ac99 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_suggest_pipeline_spec.js
@@ -1,119 +1,156 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
+import MockAdapter from 'axios-mock-adapter';
 import suggestPipelineComponent from '~/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue';
 import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
-import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
-import { popoverProps, iconName } from './pipeline_tour_mock_data';
+import dismissibleContainer from '~/vue_shared/components/dismissible_container.vue';
+import { suggestProps, iconName } from './pipeline_tour_mock_data';
+import axios from '~/lib/utils/axios_utils';
+import {
+  SP_TRACK_LABEL,
+  SP_LINK_TRACK_EVENT,
+  SP_SHOW_TRACK_EVENT,
+  SP_LINK_TRACK_VALUE,
+  SP_SHOW_TRACK_VALUE,
+  SP_HELP_URL,
+} from '~/vue_merge_request_widget/constants';
 
 describe('MRWidgetSuggestPipeline', () => {
-  let wrapper;
-  let trackingSpy;
-
-  const mockTrackingOnWrapper = () => {
-    unmockTracking();
-    trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
-  };
-
-  beforeEach(() => {
-    document.body.dataset.page = 'projects:merge_requests:show';
-    trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
-
-    wrapper = mount(suggestPipelineComponent, {
-      propsData: popoverProps,
-      stubs: {
-        GlSprintf,
-      },
+  describe('template', () => {
+    let wrapper;
+
+    afterEach(() => {
+      wrapper.destroy();
     });
-  });
 
-  afterEach(() => {
-    wrapper.destroy();
-    unmockTracking();
-  });
+    describe('core functionality', () => {
+      const findOkBtn = () => wrapper.find('[data-testid="ok"]');
+      let trackingSpy;
+      let mockAxios;
+
+      const mockTrackingOnWrapper = () => {
+        unmockTracking();
+        trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+      };
+
+      beforeEach(() => {
+        mockAxios = new MockAdapter(axios);
+        document.body.dataset.page = 'projects:merge_requests:show';
+        trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+
+        wrapper = mount(suggestPipelineComponent, {
+          propsData: suggestProps,
+          stubs: {
+            GlSprintf,
+          },
+        });
+      });
 
-  describe('template', () => {
-    const findOkBtn = () => wrapper.find('[data-testid="ok"]');
+      afterEach(() => {
+        unmockTracking();
+        mockAxios.restore();
+      });
 
-    it('renders add pipeline file link', () => {
-      const link = wrapper.find(GlLink);
+      it('renders add pipeline file link', () => {
+        const link = wrapper.find(GlLink);
 
-      expect(link.exists()).toBe(true);
-      expect(link.attributes().href).toBe(popoverProps.pipelinePath);
-    });
+        expect(link.exists()).toBe(true);
+        expect(link.attributes().href).toBe(suggestProps.pipelinePath);
+      });
 
-    it('renders the expected text', () => {
-      const messageText = /\s*No pipeline\s*Add the .gitlab-ci.yml file\s*to create one./;
+      it('renders the expected text', () => {
+        const messageText = /\s*No pipeline\s*Add the .gitlab-ci.yml file\s*to create one./;
 
-      expect(wrapper.text()).toMatch(messageText);
-    });
+        expect(wrapper.text()).toMatch(messageText);
+      });
 
-    it('renders widget icon', () => {
-      const icon = wrapper.find(MrWidgetIcon);
+      it('renders widget icon', () => {
+        const icon = wrapper.find(MrWidgetIcon);
 
-      expect(icon.exists()).toBe(true);
-      expect(icon.props()).toEqual(
-        expect.objectContaining({
-          name: iconName,
-        }),
-      );
-    });
+        expect(icon.exists()).toBe(true);
+        expect(icon.props()).toEqual(
+          expect.objectContaining({
+            name: iconName,
+          }),
+        );
+      });
 
-    it('renders the show me how button', () => {
-      const button = findOkBtn();
+      it('renders the show me how button', () => {
+        const button = findOkBtn();
 
-      expect(button.exists()).toBe(true);
-      expect(button.classes('btn-info')).toEqual(true);
-      expect(button.attributes('href')).toBe(popoverProps.pipelinePath);
-    });
+        expect(button.exists()).toBe(true);
+        expect(button.classes('btn-info')).toEqual(true);
+        expect(button.attributes('href')).toBe(suggestProps.pipelinePath);
+      });
 
-    it('renders the help link', () => {
-      const link = wrapper.find('[data-testid="help"]');
+      it('renders the help link', () => {
+        const link = wrapper.find('[data-testid="help"]');
 
-      expect(link.exists()).toBe(true);
-      expect(link.attributes('href')).toBe(wrapper.vm.$options.helpURL);
-    });
+        expect(link.exists()).toBe(true);
+        expect(link.attributes('href')).toBe(SP_HELP_URL);
+      });
 
-    it('renders the empty pipelines image', () => {
-      const image = wrapper.find('[data-testid="pipeline-image"]');
+      it('renders the empty pipelines image', () => {
+        const image = wrapper.find('[data-testid="pipeline-image"]');
 
-      expect(image.exists()).toBe(true);
-      expect(image.attributes().src).toBe(popoverProps.pipelineSvgPath);
-    });
+        expect(image.exists()).toBe(true);
+        expect(image.attributes().src).toBe(suggestProps.pipelineSvgPath);
+      });
 
-    describe('tracking', () => {
-      it('send event for basic view of the suggest pipeline widget', () => {
-        const expectedCategory = undefined;
-        const expectedAction = undefined;
+      describe('tracking', () => {
+        it('send event for basic view of the suggest pipeline widget', () => {
+          const expectedCategory = undefined;
+          const expectedAction = undefined;
 
-        expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
-          label: wrapper.vm.$options.trackLabel,
-          property: popoverProps.humanAccess,
+          expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
+            label: SP_TRACK_LABEL,
+            property: suggestProps.humanAccess,
+          });
         });
-      });
 
-      it('send an event when add pipeline link is clicked', () => {
-        mockTrackingOnWrapper();
-        const link = wrapper.find('[data-testid="add-pipeline-link"]');
-        triggerEvent(link.element);
+        it('send an event when add pipeline link is clicked', () => {
+          mockTrackingOnWrapper();
+          const link = wrapper.find('[data-testid="add-pipeline-link"]');
+          triggerEvent(link.element);
 
-        expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', {
-          label: wrapper.vm.$options.trackLabel,
-          property: popoverProps.humanAccess,
-          value: '30',
+          expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_LINK_TRACK_EVENT, {
+            label: SP_TRACK_LABEL,
+            property: suggestProps.humanAccess,
+            value: SP_LINK_TRACK_VALUE.toString(),
+          });
         });
-      });
 
-      it('send an event when ok button is clicked', () => {
-        mockTrackingOnWrapper();
-        const okBtn = findOkBtn();
-        triggerEvent(okBtn.element);
+        it('send an event when ok button is clicked', () => {
+          mockTrackingOnWrapper();
+          const okBtn = findOkBtn();
+          triggerEvent(okBtn.element);
 
-        expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
-          label: wrapper.vm.$options.trackLabel,
-          property: popoverProps.humanAccess,
-          value: '10',
+          expect(trackingSpy).toHaveBeenCalledWith('_category_', SP_SHOW_TRACK_EVENT, {
+            label: SP_TRACK_LABEL,
+            property: suggestProps.humanAccess,
+            value: SP_SHOW_TRACK_VALUE.toString(),
+          });
         });
       });
     });
+
+    describe('dismissible', () => {
+      const findDismissContainer = () => wrapper.find(dismissibleContainer);
+
+      beforeEach(() => {
+        wrapper = shallowMount(suggestPipelineComponent, { propsData: suggestProps });
+      });
+
+      it('renders the dismissal container', () => {
+        expect(findDismissContainer().exists()).toBe(true);
+      });
+
+      it('emits dismiss upon dismissal button click', () => {
+        findDismissContainer().vm.$emit('dismiss');
+
+        expect(wrapper.emitted().dismiss).toBeTruthy();
+      });
+    });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/pipeline_tour_mock_data.js b/spec/frontend/vue_mr_widget/components/pipeline_tour_mock_data.js
index c749c434079..eef087d62b8 100644
--- a/spec/frontend/vue_mr_widget/components/pipeline_tour_mock_data.js
+++ b/spec/frontend/vue_mr_widget/components/pipeline_tour_mock_data.js
@@ -1,7 +1,9 @@
-export const popoverProps = {
+export const suggestProps = {
   pipelinePath: '/foo/bar/add/pipeline/path',
   pipelineSvgPath: 'assets/illustrations/something.svg',
   humanAccess: 'maintainer',
+  userCalloutsPath: 'some/callout/path',
+  userCalloutFeatureId: 'suggest_pipeline',
 };
 
 export const iconName = 'status_notfound';
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
index 56832f82b05..5c7e6a87c16 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
 
 const commits = [
@@ -39,7 +39,7 @@ describe('Commits message dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   it('should have 3 elements in dropdown list', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
index d3482b457ad..c3a16a776a7 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { removeBreakLine } from 'helpers/text_helper';
-import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue';
 import { TEST_HOST } from 'helpers/test_constants';
+import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue';
 
 describe('MRWidgetConflicts', () => {
   let vm;
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
index 1542b0939aa..4c213899dbd 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
@@ -79,7 +79,7 @@ describe('Squash before merge component', () => {
       });
 
       it(expectation, () => {
-        expect(findLabel().classes('gl-text-gray-600')).toBe(isDisabled);
+        expect(findLabel().classes('gl-text-gray-400')).toBe(isDisabled);
       });
     });
   });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
index 33e52f4fd36..a5531577a8c 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
@@ -1,46 +1,68 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
+import { mount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
+import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
+import notesEventHub from '~/notes/event_hub';
+
+function createComponent({ path = '' } = {}) {
+  return mount(UnresolvedDiscussions, {
+    propsData: {
+      mr: {
+        createIssueToResolveDiscussionsPath: path,
+      },
+    },
+  });
+}
 
 describe('UnresolvedDiscussions', () => {
-  const Component = Vue.extend(UnresolvedDiscussions);
-  let vm;
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+  });
+
+  it('triggers the correct notes event when the jump to first unresolved discussion button is clicked', () => {
+    jest.spyOn(notesEventHub, '$emit');
+
+    wrapper.find('[data-testid="jump-to-first"]').trigger('click');
+
+    expect(notesEventHub.$emit).toHaveBeenCalledWith('jumpToFirstUnresolvedDiscussion');
   });
 
   describe('with threads path', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        mr: {
-          createIssueToResolveDiscussionsPath: TEST_HOST,
-        },
-      });
+      wrapper = createComponent({ path: TEST_HOST });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
     });
 
     it('should have correct elements', () => {
-      expect(vm.$el.innerText).toContain(
-        'There are unresolved threads. Please resolve these threads',
+      expect(wrapper.element.innerText).toContain(
+        `Before this can be merged, one or more threads must be resolved.`,
       );
 
-      expect(vm.$el.innerText).toContain('Create an issue to resolve them later');
-      expect(vm.$el.querySelector('.js-create-issue').getAttribute('href')).toEqual(TEST_HOST);
+      expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
+      expect(wrapper.element.innerText).toContain('Resolve all threads in new issue');
+      expect(wrapper.element.querySelector('.js-create-issue').getAttribute('href')).toEqual(
+        TEST_HOST,
+      );
     });
   });
 
   describe('without threads path', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, { mr: {} });
-    });
-
     it('should not show create issue link if user cannot create issue', () => {
-      expect(vm.$el.innerText).toContain(
-        'There are unresolved threads. Please resolve these threads',
+      expect(wrapper.element.innerText).toContain(
+        `Before this can be merged, one or more threads must be resolved.`,
       );
 
-      expect(vm.$el.querySelector('.js-create-issue')).toEqual(null);
+      expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
+      expect(wrapper.element.innerText).not.toContain('Resolve all threads in new issue');
+      expect(wrapper.element.querySelector('.js-create-issue')).toEqual(null);
     });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js
index 6fa555b4fc4..6ccf1e1f56b 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 jest.mock('~/flash');
 
@@ -84,11 +84,11 @@ describe('Wip', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This is a Work in Progress');
+      expect(el.innerText).toContain('This merge request is still a work in progress.');
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-remove-wip').innerText.replace(/\s\s+/g, ' ')).toContain(
-        'Resolve WIP status',
+        'Mark as ready',
       );
     });
 
diff --git a/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js b/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
index be43f10c03e..ffcf9b1477a 100644
--- a/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
+++ b/spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js
@@ -1,8 +1,8 @@
 import { GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
-import { invalidPlanWithName, plans, validPlanWithName } from './mock_data';
 import { shallowMount } from '@vue/test-utils';
-import axios from '~/lib/utils/axios_utils';
 import MockAdapter from 'axios-mock-adapter';
+import { invalidPlanWithName, plans, validPlanWithName } from './mock_data';
+import axios from '~/lib/utils/axios_utils';
 import MrWidgetExpanableSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
 import MrWidgetTerraformContainer from '~/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue';
 import Poll from '~/lib/utils/poll';
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js
index 6449272e6ed..1711efb5512 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import DeploymentActions from '~/vue_merge_request_widget/components/deployment/deployment_actions.vue';
diff --git a/spec/frontend/vue_mr_widget/mock_data.js b/spec/frontend/vue_mr_widget/mock_data.js
index e00456a78b5..d64a7f88b6b 100644
--- a/spec/frontend/vue_mr_widget/mock_data.js
+++ b/spec/frontend/vue_mr_widget/mock_data.js
@@ -37,6 +37,9 @@ export default {
   target_project_id: 19,
   target_project_full_path: '/group2/project2',
   merge_request_add_ci_config_path: '/group2/project2/new/pipeline',
+  is_dismissed_suggest_pipeline: false,
+  user_callouts_path: 'some/callout/path',
+  suggest_pipeline_feature_id: 'suggest_pipeline',
   new_project_pipeline_path: '/group2/project2/pipelines/new',
   metrics: {
     merged_by: {
diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index 93659fa54fb..0bbe040d031 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -62,6 +62,9 @@ describe('mrWidgetOptions', () => {
     return axios.waitForAll();
   };
 
+  const findSuggestPipeline = () => vm.$el.querySelector('[data-testid="mr-suggest-pipeline"]');
+  const findSuggestPipelineButton = () => findSuggestPipeline().querySelector('button');
+
   describe('default', () => {
     beforeEach(() => {
       return createComponent();
@@ -804,42 +807,48 @@ describe('mrWidgetOptions', () => {
       });
     });
 
-    it('should not suggest pipelines', () => {
-      vm.mr.mergeRequestAddCiConfigPath = null;
-
-      expect(vm.shouldSuggestPipelines).toBeFalsy();
+    it('should not suggest pipelines when feature flag is not present', () => {
+      expect(findSuggestPipeline()).toBeNull();
     });
   });
 
   describe('given suggestPipeline feature flag is enabled', () => {
     beforeEach(() => {
+      mock.onAny().reply(200);
+
       // This is needed because some grandchildren Bootstrap components throw warnings
       // https://gitlab.com/gitlab-org/gitlab/issues/208458
       jest.spyOn(console, 'warn').mockImplementation();
 
       gon.features = { suggestPipeline: true };
-      return createComponent();
-    });
 
-    it('should suggest pipelines when none exist', () => {
-      vm.mr.mergeRequestAddCiConfigPath = 'some/path';
+      createComponent();
+
       vm.mr.hasCI = false;
+    });
 
-      expect(vm.shouldSuggestPipelines).toBeTruthy();
+    it('should suggest pipelines when none exist', () => {
+      expect(findSuggestPipeline()).toEqual(expect.any(Element));
     });
 
-    it('should not suggest pipelines when they exist', () => {
-      vm.mr.mergeRequestAddCiConfigPath = null;
-      vm.mr.hasCI = false;
+    it.each([
+      { isDismissedSuggestPipeline: true },
+      { mergeRequestAddCiConfigPath: null },
+      { hasCI: true },
+    ])('with %s, should not suggest pipeline', async obj => {
+      Object.assign(vm.mr, obj);
+
+      await vm.$nextTick();
 
-      expect(vm.shouldSuggestPipelines).toBeFalsy();
+      expect(findSuggestPipeline()).toBeNull();
     });
 
-    it('should not suggest pipelines hasCI is true', () => {
-      vm.mr.mergeRequestAddCiConfigPath = 'some/path';
-      vm.mr.hasCI = true;
+    it('should allow dismiss of the suggest pipeline message', async () => {
+      findSuggestPipelineButton().click();
+
+      await vm.$nextTick();
 
-      expect(vm.shouldSuggestPipelines).toBeFalsy();
+      expect(findSuggestPipeline()).toBeNull();
     });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/stores/get_state_key_spec.js b/spec/frontend/vue_mr_widget/stores/get_state_key_spec.js
index 1cb2c6c669b..128e0f39c41 100644
--- a/spec/frontend/vue_mr_widget/stores/get_state_key_spec.js
+++ b/spec/frontend/vue_mr_widget/stores/get_state_key_spec.js
@@ -11,15 +11,13 @@ describe('getStateKey', () => {
       hasMergeableDiscussionsState: false,
       isPipelineBlocked: false,
       canBeMerged: false,
+      projectArchived: false,
+      branchMissing: false,
+      commitsCount: 2,
+      hasConflicts: false,
+      workInProgress: false,
     };
-    const data = {
-      project_archived: false,
-      branch_missing: false,
-      commits_count: 2,
-      has_conflicts: false,
-      work_in_progress: false,
-    };
-    const bound = getStateKey.bind(context, data);
+    const bound = getStateKey.bind(context);
 
     expect(bound()).toEqual(null);
 
@@ -49,7 +47,7 @@ describe('getStateKey', () => {
 
     expect(bound()).toEqual('unresolvedDiscussions');
 
-    data.work_in_progress = true;
+    context.workInProgress = true;
 
     expect(bound()).toEqual('workInProgress');
 
@@ -62,7 +60,7 @@ describe('getStateKey', () => {
 
     expect(bound()).toEqual('rebase');
 
-    data.has_conflicts = true;
+    context.hasConflicts = true;
 
     expect(bound()).toEqual('conflicts');
 
@@ -70,15 +68,15 @@ describe('getStateKey', () => {
 
     expect(bound()).toEqual('checking');
 
-    data.commits_count = 0;
+    context.commitsCount = 0;
 
     expect(bound()).toEqual('nothingToMerge');
 
-    data.branch_missing = true;
+    context.branchMissing = true;
 
     expect(bound()).toEqual('missingBranch');
 
-    data.project_archived = true;
+    context.projectArchived = true;
 
     expect(bound()).toEqual('archived');
   });
@@ -94,15 +92,13 @@ describe('getStateKey', () => {
       isPipelineBlocked: false,
       canBeMerged: false,
       shouldBeRebased: true,
+      projectArchived: false,
+      branchMissing: false,
+      commitsCount: 2,
+      hasConflicts: false,
+      workInProgress: false,
     };
-    const data = {
-      project_archived: false,
-      branch_missing: false,
-      commits_count: 2,
-      has_conflicts: false,
-      work_in_progress: false,
-    };
-    const bound = getStateKey.bind(context, data);
+    const bound = getStateKey.bind(context);
 
     expect(bound()).toEqual('rebase');
   });
@@ -115,15 +111,11 @@ describe('getStateKey', () => {
   `(
     'returns $stateKey when canMerge is $canMerge and isSHAMismatch is $isSHAMismatch',
     ({ canMerge, isSHAMismatch, stateKey }) => {
-      const bound = getStateKey.bind(
-        {
-          canMerge,
-          isSHAMismatch,
-        },
-        {
-          commits_count: 2,
-        },
-      );
+      const bound = getStateKey.bind({
+        canMerge,
+        isSHAMismatch,
+        commitsCount: 2,
+      });
 
       expect(bound()).toEqual(stateKey);
     },