Merge branch 'pb-change-mr-pipeline-failed-message' into 'master'

Change pipeline failed message

See merge request gitlab-org/gitlab!52023

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' });
+    },
+  },
+  i18n: {
+    failedMessage: 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="$options.i18n.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,29 @@ 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](merge_request_pipelines/index.md),
+[merged results pipeline](merge_request_pipelines/pipelines_for_merged_results/index.md),
+or [merge train pipeline](merge_request_pipelines/pipelines_for_merged_results/merge_trains/index.md)
+has failed or been canceled.
+
+If a merge request pipeline or merged result pipeline was canceled or failed, you can:
+
+- Re-run the entire pipeline by clicking **Run pipeline** in the pipeline tab in the merge request.
+- [Retry only the jobs that failed](pipelines/index.md#view-pipelines). If you re-run the entire pipeline, this is not necessary.
+- Push a new commit to fix the failure.
+
+If the merge train pipeline has failed, you can:
+
+- Check the failure and determine if you can use the [`/merge` quick action](../user/project/quick_actions.md) to immediately add the merge request to the train again.
+- Re-run the entire pipeline by clicking **Run pipeline** in the pipeline tab in the merge request, then add the merge request to the train again.
+- Push a commit to fix the failure, then add the merge request to the train again.
+
+If the merge train pipeline was canceled before the merge request was merged, without a failure, you can:
+
+- Add it to the train again.
+
 ## Pipeline warnings
 
 Pipeline configuration warnings are shown when you:

locale/gitlab.pot

@@ -34173,7 +34173,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 render error message with a disabled merge button 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 render error message with a disabled merge button', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('merge button should be disabled', () => {
+    expect(findStatusIcon().props('showDisabledButton')).toBe(true);
   });
 });