Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

12 files changed, 181 insertions, 230 deletions

diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
index f44f0b98207..a09269e869c 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Header from '~/vue_merge_request_widget/components/mr_widget_header.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 
 describe('MRWidgetHeader', () => {
   let wrapper;
@@ -35,6 +36,8 @@ describe('MRWidgetHeader', () => {
     statusPath: 'abc',
   };
 
+  const findWebIdeButton = () => wrapper.findComponent(WebIdeLink);
+
   describe('computed', () => {
     describe('shouldShowCommitsBehindText', () => {
       it('return true when there are divergedCommitsCount', () => {
@@ -147,73 +150,81 @@ describe('MRWidgetHeader', () => {
         statusPath: 'abc',
         sourceProjectFullPath: 'root/gitlab-ce',
         targetProjectFullPath: 'gitlab-org/gitlab-ce',
+        gitpodEnabled: true,
+        showGitpodButton: true,
+        gitpodUrl: 'http://gitpod.localhost',
       };
 
-      beforeEach(() => {
+      it('renders checkout branch button with modal trigger', () => {
         createComponent({
           mr: { ...mrDefaultOptions },
         });
-      });
 
-      it('renders checkout branch button with modal trigger', () => {
         const button = wrapper.find('.js-check-out-branch');
 
         expect(button.text().trim()).toBe('Check out branch');
       });
 
-      it('renders web ide button', async () => {
-        const button = wrapper.find('.js-web-ide');
-
-        await nextTick();
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.classes('disabled')).toBe(false);
-        expect(button.attributes('href')).toBe(
-          '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
-        );
-      });
-
-      it('renders web ide button in disabled state with no href', async () => {
-        const mr = { ...mrDefaultOptions, canPushToSourceBranch: false };
-        createComponent({ mr });
-
-        await nextTick();
-
-        const link = wrapper.find('.js-web-ide');
-
-        expect(link.attributes('disabled')).toBe('true');
-        expect(link.attributes('href')).toBeUndefined();
-      });
-
-      it('renders web ide button with blank query string if target & source project branch', async () => {
-        createComponent({ mr: { ...mrDefaultOptions, targetProjectFullPath: 'root/gitlab-ce' } });
+      it.each([
+        [
+          'renders web ide button',
+          {
+            mrProps: {},
+            relativeUrl: '',
+            webIdeUrl:
+              '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
+          },
+        ],
+        [
+          'renders web ide button with blank target_project, when mr has same target project',
+          {
+            mrProps: { targetProjectFullPath: 'root/gitlab-ce' },
+            relativeUrl: '',
+            webIdeUrl: '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
+          },
+        ],
+        [
+          'renders web ide button with relative url',
+          {
+            mrProps: { iid: 2 },
+            relativeUrl: '/gitlab',
+            webIdeUrl:
+              '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
+          },
+        ],
+      ])('%s', async (_, { mrProps, relativeUrl, webIdeUrl }) => {
+        gon.relative_url_root = relativeUrl;
+        createComponent({
+          mr: { ...mrDefaultOptions, ...mrProps },
+        });
 
         await nextTick();
 
-        const button = wrapper.find('.js-web-ide');
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.attributes('href')).toBe(
-          '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
-        );
+        expect(findWebIdeButton().props()).toMatchObject({
+          showEditButton: false,
+          showWebIdeButton: true,
+          webIdeText: 'Open in Web IDE',
+          gitpodText: 'Open in Gitpod',
+          gitpodEnabled: true,
+          showGitpodButton: true,
+          gitpodUrl: 'http://gitpod.localhost',
+          webIdeUrl,
+        });
       });
 
-      it('renders web ide button with relative URL', async () => {
-        gon.relative_url_root = '/gitlab';
-
-        createComponent({ mr: { ...mrDefaultOptions, iid: 2 } });
+      it('does not render web ide button if source branch is removed', async () => {
+        createComponent({ mr: { ...mrDefaultOptions, sourceBranchRemoved: true } });
 
         await nextTick();
 
-        const button = wrapper.find('.js-web-ide');
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.attributes('href')).toBe(
-          '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
-        );
+        expect(findWebIdeButton().exists()).toBe(false);
       });
 
       it('renders download dropdown with links', () => {
+        createComponent({
+          mr: { ...mrDefaultOptions },
+        });
+
         expectDownloadDropdownItems();
       });
     });
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js
index a879b06e858..6ea8ca10c02 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js
@@ -17,7 +17,7 @@ describe('MRWidgetRelatedLinks', () => {
       it('returns Closes text for open merge request', () => {
         createComponent({ state: 'open', relatedLinks: {} });
 
-        expect(wrapper.vm.closesText).toBe('Closes');
+        expect(wrapper.vm.closesText).toBe('Closes issues');
       });
 
       it('returns correct text for closed merge request', () => {
@@ -38,6 +38,7 @@ describe('MRWidgetRelatedLinks', () => {
     createComponent({
       relatedLinks: {
         closing: '<a href="#">#23</a> and <a>#42</a>',
+        closingCount: 2,
       },
     });
     const content = wrapper
@@ -45,7 +46,7 @@ describe('MRWidgetRelatedLinks', () => {
       .replace(/\n(\s)+/g, ' ')
       .trim();
 
-    expect(content).toContain('Closes #23 and #42');
+    expect(content).toContain('Closes issues #23 and #42');
     expect(content).not.toContain('Mentions');
   });
 
@@ -53,11 +54,17 @@ describe('MRWidgetRelatedLinks', () => {
     createComponent({
       relatedLinks: {
         mentioned: '<a href="#">#7</a>',
+        mentionedCount: 1,
       },
     });
 
-    expect(wrapper.text().trim()).toContain('Mentions #7');
-    expect(wrapper.text().trim()).not.toContain('Closes');
+    const content = wrapper
+      .text()
+      .replace(/\n(\s)+/g, ' ')
+      .trim();
+
+    expect(content).toContain('Mentions issue #7');
+    expect(content).not.toContain('Closes issues');
   });
 
   it('should have closing and mentioned issues at the same time', () => {
@@ -65,6 +72,8 @@ describe('MRWidgetRelatedLinks', () => {
       relatedLinks: {
         closing: '<a href="#">#7</a>',
         mentioned: '<a href="#">#23</a> and <a>#42</a>',
+        closingCount: 1,
+        mentionedCount: 2,
       },
     });
     const content = wrapper
@@ -72,8 +81,8 @@ describe('MRWidgetRelatedLinks', () => {
       .replace(/\n(\s)+/g, ' ')
       .trim();
 
-    expect(content).toContain('Closes #7');
-    expect(content).toContain('Mentions #23 and #42');
+    expect(content).toContain('Closes issue #7');
+    expect(content).toContain('Mentions issues #23 and #42');
   });
 
   it('should have assing issues link', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index ac20487c55f..5981d2d7849 100644
--- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -4,8 +4,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -17,55 +19,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -75,17 +53,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>
@@ -96,8 +76,10 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
 <div
   class="mr-widget-body media"
 >
-  <status-icon-stub
-    status="success"
+  <gl-icon-stub
+    class="gl-text-blue-500 gl-mr-3 gl-mt-1"
+    name="status_scheduled"
+    size="24"
   />
    
   <div
@@ -109,55 +91,31 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
       <span
         class="gl-mr-3"
       >
-        <span
-          class="js-status-text-before-author"
-          data-testid="beforeStatusText"
-        >
-          Set by
-        </span>
-         
-        <mr-widget-author-stub
-          author="[object Object]"
-          showauthorname="true"
+        <gl-sprintf-stub
+          data-testid="statusText"
+          message="Set by %{merge_author} to be merged automatically when the pipeline succeeds"
         />
-         
-        <span
-          class="js-status-text-after-author"
-          data-testid="afterStatusText"
-        >
-          to be merged automatically when the pipeline succeeds
-        </span>
       </span>
        
-      <a
-        class="btn btn-sm btn-default js-cancel-auto-merge"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="js-cancel-auto-merge"
         data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
-        href="#"
-        role="button"
+        icon=""
+        size="small"
+        variant="default"
       >
-        <!---->
         
-          Cancel
+          Cancel auto-merge
         
-      </a>
+      </gl-button-stub>
     </h4>
      
     <section
       class="mr-info-list"
     >
-      <p>
-        
-          The changes will be merged into
-          
-        <a
-          class="label-branch"
-          href="/foo/bar"
-        >
-          foo
-        </a>
-      </p>
-       
       <p
         class="gl-display-flex"
       >
@@ -167,17 +125,19 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
           The source branch will not be deleted
         </span>
          
-        <a
-          class="btn btn-sm btn-default js-remove-source-branch"
+        <gl-button-stub
+          buttontextclasses=""
+          category="primary"
+          class="js-remove-source-branch"
           data-testid="removeSourceBranchButton"
-          href="#"
-          role="button"
+          icon=""
+          size="small"
+          variant="default"
         >
-          <!---->
           
             Delete source branch
           
-        </a>
+        </gl-button-stub>
       </p>
     </section>
   </div>
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap
deleted file mode 100644
index cef1dff3335..00000000000
--- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReadyToMerge with a mismatched SHA warns the user to refresh to review 1`] = `"<gl-sprintf-stub message=\\"New changes were added. %{linkStart}Reload the page to review them%{linkEnd}\\"></gl-sprintf-stub>"`;
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
index 0110a76e722..4c1534574f5 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
@@ -72,6 +72,8 @@ const defaultMrProps = () => ({
   autoMergeStrategy: MWPS_MERGE_STRATEGY,
 });
 
+const getStatusText = () => wrapper.findByTestId('statusText').attributes('message');
+
 describe('MRWidgetAutoMergeEnabled', () => {
   let oldWindowGl;
 
@@ -167,30 +169,6 @@ describe('MRWidgetAutoMergeEnabled', () => {
           });
         });
 
-        describe('statusTextBeforeAuthor', () => {
-          it('should return "Set by" if the MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by');
-          });
-        });
-
-        describe('statusTextAfterAuthor', () => {
-          it('should return "to be merged automatically..." if MWPS is selected', () => {
-            factory({
-              ...defaultMrProps(),
-              autoMergeStrategy: MWPS_MERGE_STRATEGY,
-            });
-
-            expect(wrapper.findByTestId('afterStatusText').text()).toBe(
-              'to be merged automatically when the pipeline succeeds',
-            );
-          });
-        });
-
         describe('cancelButtonText', () => {
           it('should return "Cancel" if MWPS is selected', () => {
             factory({
@@ -198,7 +176,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
               autoMergeStrategy: MWPS_MERGE_STRATEGY,
             });
 
-            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe('Cancel');
+            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe(
+              'Cancel auto-merge',
+            );
           });
         });
       });
@@ -279,7 +259,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-cancel-auto-merge').props('loading')).toBe(true);
         });
 
         it('should show source branch will be deleted text when it source branch set to remove', () => {
@@ -313,7 +293,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           await nextTick();
 
-          expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled');
+          expect(wrapper.find('.js-remove-source-branch').props('loading')).toBe(true);
         });
 
         it('should render the status text as "...to merged automatically" if MWPS is selected', () => {
@@ -322,9 +302,9 @@ describe('MRWidgetAutoMergeEnabled', () => {
             autoMergeStrategy: MWPS_MERGE_STRATEGY,
           });
 
-          const statusText = trimText(wrapper.find('.js-status-text-after-author').text());
-
-          expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
+          expect(getStatusText()).toBe(
+            'Set by %{merge_author} to be merged automatically when the pipeline succeeds',
+          );
         });
 
         it('should render the cancel button as "Cancel" if MWPS is selected', () => {
@@ -335,7 +315,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text());
 
-          expect(cancelButtonText).toBe('Cancel');
+          expect(cancelButtonText).toBe('Cancel auto-merge');
         });
       });
     });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index cd77d442cbf..e41fb815c8d 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -1,4 +1,3 @@
-import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import simplePoll from '~/lib/utils/simple_poll';
@@ -782,26 +781,4 @@ describe('ReadyToMerge', () => {
       });
     });
   });
-
-  describe('with a mismatched SHA', () => {
-    const findMismatchShaBlock = () => wrapper.find('.js-sha-mismatch');
-    const findMismatchShaTextBlock = () => findMismatchShaBlock().find(GlSprintf);
-
-    beforeEach(() => {
-      createComponent({
-        mr: {
-          isSHAMismatch: true,
-          mergeRequestDiffsPath: '/merge_requests/1/diffs',
-        },
-      });
-    });
-
-    it('displays a warning message', () => {
-      expect(findMismatchShaBlock().exists()).toBe(true);
-    });
-
-    it('warns the user to refresh to review', () => {
-      expect(findMismatchShaTextBlock().element.outerHTML).toMatchSnapshot();
-    });
-  });
 });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
index ef6a9b1e8fc..2a343997cf5 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -1,25 +1,42 @@
-import Vue from 'vue';
-import { removeBreakLine } from 'helpers/text_helper';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue';
+import { I18N_SHA_MISMATCH } from '~/vue_merge_request_widget/i18n';
+
+function createComponent({ path = '' } = {}) {
+  return mount(ShaMismatch, {
+    propsData: {
+      mr: {
+        mergeRequestDiffsPath: path,
+      },
+    },
+  });
+}
 
 describe('ShaMismatch', () => {
-  let vm;
+  let wrapper;
+  const findActionButton = () => wrapper.find('[data-testid="action-button"]');
 
   beforeEach(() => {
-    const Component = Vue.extend(ShaMismatch);
-    vm = mountComponent(Component);
+    wrapper = createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+  });
+
+  it('should render warning message', () => {
+    expect(wrapper.element.innerText).toContain(I18N_SHA_MISMATCH.warningMessage);
   });
 
-  it('should render information message', () => {
-    expect(vm.$el.querySelector('button').disabled).toEqual(true);
+  it('action button should have correct label', () => {
+    expect(findActionButton().text()).toBe(I18N_SHA_MISMATCH.actionButtonLabel);
+  });
+
+  it('action button should link to the diff path', () => {
+    const DIFF_PATH = '/gitlab-org/gitlab-test/-/merge_requests/6/diffs';
+
+    wrapper = createComponent({ path: DIFF_PATH });
 
-    expect(removeBreakLine(vm.$el.textContent).trim()).toContain(
-      'The source branch HEAD has recently changed. Please reload the page and review the changes before merging',
-    );
+    expect(findActionButton().attributes('href')).toBe(DIFF_PATH);
   });
 });
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 49783560bf2..31ade17e50a 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js
@@ -45,7 +45,6 @@ describe('DeploymentAction component', () => {
       propsData: {
         computedDeploymentStatus: CREATED,
         deployment: deploymentMockData,
-        showVisualReviewApp: false,
       },
     });
   });
@@ -64,7 +63,6 @@ describe('DeploymentAction component', () => {
               ...deploymentMockData,
               stop_url: null,
             },
-            showVisualReviewApp: false,
           },
         });
       });
@@ -115,7 +113,6 @@ describe('DeploymentAction component', () => {
                   ...deploymentMockData,
                   details: displayConditionChanges,
                 },
-                showVisualReviewApp: false,
               },
             });
           });
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js
index dd0c483b28a..948d7ebab5e 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_list_spec.js
@@ -7,7 +7,6 @@ import MrCollapsibleExtension from '~/vue_merge_request_widget/components/mr_col
 import { mockStore } from '../mock_data';
 
 const DEFAULT_PROPS = {
-  showVisualReviewAppLink: false,
   hasDeploymentMetrics: false,
   deploymentClass: 'js-pre-deployment',
 };
@@ -46,7 +45,6 @@ describe('~/vue_merge_request_widget/components/deployment/deployment_list.vue',
         ([deploymentWrapper, deployment]) => {
           expect(deploymentWrapper.props('deployment')).toEqual(deployment);
           expect(deploymentWrapper.props()).toMatchObject({
-            showVisualReviewApp: DEFAULT_PROPS.showVisualReviewAppLink,
             showMetrics: DEFAULT_PROPS.hasDeploymentMetrics,
           });
           expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
@@ -87,10 +85,6 @@ describe('~/vue_merge_request_widget/components/deployment/deployment_list.vue',
       zip(deploymentWrappers.wrappers, propsData.deployments).forEach(
         ([deploymentWrapper, deployment]) => {
           expect(deploymentWrapper.props('deployment')).toEqual(deployment);
-          expect(deploymentWrapper.props()).toMatchObject({
-            showVisualReviewApp: DEFAULT_PROPS.showVisualReviewAppLink,
-            showMetrics: DEFAULT_PROPS.hasDeploymentMetrics,
-          });
           expect(deploymentWrapper.classes(DEFAULT_PROPS.deploymentClass)).toBe(true);
           expect(deploymentWrapper.text()).toEqual(expect.any(String));
           expect(deploymentWrapper.text()).not.toBe('');
diff --git a/spec/frontend/vue_mr_widget/mock_data.js b/spec/frontend/vue_mr_widget/mock_data.js
index e6f1e15d718..f356f6fb5bf 100644
--- a/spec/frontend/vue_mr_widget/mock_data.js
+++ b/spec/frontend/vue_mr_widget/mock_data.js
@@ -234,14 +234,11 @@ export default {
     can_revert_on_current_merge_request: true,
     can_cherry_pick_on_current_merge_request: true,
   },
-  codeclimate: {
-    head_path: 'head.json',
-    base_path: 'base.json',
-  },
   blob_path: {
     base_path: 'blob_path',
     head_path: 'blob_path',
   },
+  codequality_reports_path: 'codequality_reports.json',
   codequality_help_path: 'code_quality.html',
   target_branch_path: '/root/acets-app/branches/main',
   source_branch_path: '/root/acets-app/branches/daaaa',
@@ -284,6 +281,9 @@ export default {
   security_reports_docs_path: 'security-reports-docs-path',
   sast_comparison_path: '/sast_comparison_path',
   secret_scanning_comparison_path: '/secret_scanning_comparison_path',
+  gitpod_enabled: true,
+  show_gitpod_button: true,
+  gitpod_url: 'http://gitpod.localhost',
 };
 
 export const mockStore = {
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 9da370747fc..c50cf7cb076 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -12,7 +12,7 @@ import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/consta
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import MrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
 import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';
-import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_merge_request_download_paths.query.graphql';
+import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
 import { faviconDataUrl, overlayDataUrl } from '../lib/utils/mock_data';
 import mockData from './mock_data';
 
@@ -80,14 +80,15 @@ describe('MrWidgetOptions', () => {
 
     describe('computed', () => {
       describe('componentName', () => {
-        it('should return merged component', () => {
-          expect(wrapper.vm.componentName).toEqual('mr-widget-merged');
-        });
-
-        it('should return conflicts component', () => {
-          wrapper.vm.mr.state = 'conflicts';
-
-          expect(wrapper.vm.componentName).toEqual('mr-widget-conflicts');
+        it.each`
+          state            | componentName
+          ${'merged'}      | ${'mr-widget-merged'}
+          ${'conflicts'}   | ${'mr-widget-conflicts'}
+          ${'shaMismatch'} | ${'sha-mismatch'}
+        `('should translate $state into $componentName', ({ state, componentName }) => {
+          wrapper.vm.mr.state = state;
+
+          expect(wrapper.vm.componentName).toEqual(componentName);
         });
       });
 
diff --git a/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js b/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
index cfc846075ea..bf0179aa425 100644
--- a/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
+++ b/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
@@ -10,6 +10,14 @@ describe('MergeRequestStore', () => {
     store = new MergeRequestStore(mockData);
   });
 
+  it('should initialize gitpod attributes', () => {
+    expect(store).toMatchObject({
+      gitpodEnabled: mockData.gitpod_enabled,
+      showGitpodButton: mockData.show_gitpod_button,
+      gitpodUrl: mockData.gitpod_url,
+    });
+  });
+
   describe('setData', () => {
     it('should set isSHAMismatch when the diff SHA changes', () => {
       store.setData({ ...mockData, diff_head_sha: 'a-different-string' });