Change pipeline failed message

Change message for failed pipeline
on MR widget. And convert the spec
to vue test utils.

app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue

 <script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'PipelineFailed',
   components: {
+    GlLink,
+    GlSprintf,
     statusIcon,
   },
+  computed: {
+    troubleshootingDocsPath() {
+      return helpPagePath('ci/troubleshooting', { anchor: 'merge-request-status-messages' });
+    },
+    failedMessage() {
+      return s__(
+        `mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions.`,
+      );
+    },
+  },
 };
 </script>
 
@@ -14,10 +29,13 @@ export default {
     <status-icon :show-disabled-button="true" status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        {{
-          s__(`mrWidget|The pipeline for this merge request failed.
-Please retry the job or push a new commit to fix the failure`)
-        }}
+        <gl-sprintf :message="failedMessage">
+          <template #link="{ content }">
+            <gl-link :href="troubleshootingDocsPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
       </span>
     </div>
   </div>

changelogs/unreleased/pb-change-mr-pipeline-failed-message.yml

+---
+title: Change UI text for failed pipeline on an MR
+merge_request: 52023
+author:
+type: changed

doc/ci/troubleshooting.md

@@ -222,6 +222,10 @@ This also applies if the pipeline has not been created yet, or if you are waitin
 for an external CI service. If you don't use pipelines for your project, then you
 should disable **Pipelines must succeed** so you can accept merge requests.
 
+### "The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the troubleshooting documentation to see other possible actions." message
+
+This message is shown if the merge request pipeline or merge train pipeline has either failed or been canceled. If the merge train pipeline has failed, check the failure and determine if you need to re-add the MR to the train or push a commit to fix the failure. If the merge train pipeline was canceled try re-adding it to the train or use the shortcut command `/merge`. If the merge request pipeline was canceled or failed, please retry the job or push a new commit to fix the failure.
+
 ## Pipeline warnings
 
 Pipeline configuration warnings are shown when you:

locale/gitlab.pot

@@ -34167,7 +34167,7 @@ msgstr ""
 msgid "mrWidget|The changes will be merged into"
 msgstr ""
 
-msgid "mrWidget|The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure"
+msgid "mrWidget|The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions."
 msgstr ""
 
 msgid "mrWidget|The source branch HEAD has recently changed. Please reload the page and review the changes before merging"

spec/features/merge_request/user_merges_only_if_pipeline_succeeds_spec.rb

@@ -57,7 +57,7 @@ RSpec.describe 'Merge request > User merges only if pipeline succeeds', :js do
           wait_for_requests
 
           expect(page).to have_css('button[disabled="disabled"]', text: 'Merge')
-          expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
+          expect(page).to have_content('The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the troubleshooting documentation to see other possible actions.')
         end
       end
 
@@ -70,7 +70,7 @@ RSpec.describe 'Merge request > User merges only if pipeline succeeds', :js do
           wait_for_requests
 
           expect(page).not_to have_button 'Merge'
-          expect(page).to have_content('Please retry the job or push a new commit to fix the failure')
+          expect(page).to have_content('The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the troubleshooting documentation to see other possible actions.')
         end
       end
 

spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_pipeline_failed_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PipelineFailed should display correctly 1`] = `
+<div
+  class="mr-widget-body media"
+>
+  <status-icon-stub
+    showdisabledbutton="true"
+    status="warning"
+  />
+   
+  <div
+    class="media-body space-children"
+  >
+    <span
+      class="bold"
+    >
+      <gl-sprintf-stub
+        message="The pipeline for this merge request did not complete. Push a new commit to fix the failure or check the %{linkStart}troubleshooting documentation%{linkEnd} to see other possible actions."
+      />
+    </span>
+  </div>
+</div>
+`;

spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js

-import Vue from 'vue';
-import { removeBreakLine } from 'helpers/text_helper';
+import { shallowMount } from '@vue/test-utils';
 import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue';
+import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 
 describe('PipelineFailed', () => {
-  describe('template', () => {
-    const Component = Vue.extend(PipelineFailed);
-    const vm = new Component({
-      el: document.createElement('div'),
-    });
-    it('should have correct elements', () => {
-      expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(removeBreakLine(vm.$el.innerText).trim()).toContain(
-        'The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure',
-      );
-    });
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineFailed);
+  };
+
+  const findStatusIcon = () => wrapper.find(statusIcon);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should display correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('merge button should be disabled', () => {
+    expect(findStatusIcon().props('showDisabledButton')).toBe(true);
   });
 });