Merge branch...

Merge branch '41545-gitlab-merge-request-status-could-not-connect-to-the-ci-server-please-check-your-settings-and-try-again' into 'master'

Resolve "Reword error message for internal CI unknown pipeline status"

Closes #53056

See merge request gitlab-org/gitlab-ce!22474

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

 <script>
 /* eslint-disable vue/require-default-prop */
+import { sprintf, __ } from '~/locale';
 import PipelineStage from '~/pipelines/components/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -36,6 +37,10 @@ export default {
       type: String,
       required: false,
     },
+    troubleshootingDocsPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     hasPipeline() {
@@ -57,6 +62,12 @@ export default {
     hasCommitInfo() {
       return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0;
     },
+    errorText() {
+      return sprintf(__('Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}'), {
+        linkStart: `<a href="${this.troubleshootingDocsPath}">`,
+        linkEnd: '</a>',
+      });
+    },
   },
 };
 </script>
@@ -77,8 +88,10 @@ export default {
             name="status_failed_borderless"
           />
         </div>
-        <div class="media-body">
-          Could not connect to the CI server. Please check your settings and try again
+        <div
+          class="media-body"
+          v-html="errorText"
+        >
         </div>
       </template>
       <template v-else-if="hasPipeline">

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -301,6 +301,7 @@ export default {
       :has-ci="mr.hasCI"
       :source-branch="mr.sourceBranch"
       :source-branch-link="mr.sourceBranchLink"
+      :troubleshooting-docs-path="mr.troubleshootingDocsPath"
     />
     <deployment
       v-for="deployment in mr.deployments"

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -18,6 +18,8 @@ export default class MergeRequestStore {
     this.squash = data.squash;
     this.squashBeforeMergeHelpPath =
       this.squashBeforeMergeHelpPath || data.squash_before_merge_help_path;
+    this.troubleshootingDocsPath =
+      this.troubleshootingDocsPath || data.troubleshooting_docs_path;
     this.enableSquashBeforeMerge = this.enableSquashBeforeMerge || true;
 
     this.iid = data.iid;

app/views/projects/merge_requests/show.html.haml

@@ -21,6 +21,7 @@
       window.gl.mrWidgetData = #{serialize_issuable(@merge_request, serializer: 'widget')}
 
       window.gl.mrWidgetData.squash_before_merge_help_path = '#{help_page_path("user/project/merge_requests/squash_and_merge")}';
+      window.gl.mrWidgetData.troubleshooting_docs_path = '#{help_page_path('user/project/merge_requests', anchor: 'troubleshooting')}';
 
     #js-vue-mr-widget.mr-widget
 

changelogs/unreleased/41545-gitlab-merge-request-status-could-not-connect-to-the-ci-server-please-check-your-settings-and-try-again.yml

+---
+title: Reword error message for internal CI unknown pipeline status
+merge_request: 22474
+author:
+type: changed

doc/user/project/merge_requests/index.md

@@ -236,6 +236,35 @@ all your changes will be available to preview by anyone with the Review Apps lin
 
 Find out about [bulk editing merge requests](../../project/bulk_editing.md).
 
+## Troubleshooting
+
+Sometimes things don't go as expected in a merge request, here are some
+troubleshooting steps.
+
+### Merge request cannot retrieve the pipeline status
+
+This can occur for one of two reasons:
+
+* Sidekiq doesn't pick up the changes fast enough
+* Because of the bug described in [#41545](https://gitlab.com/gitlab-org/gitlab-ce/issues/41545)
+
+#### Sidekiq
+
+Sidekiq didn't process the CI state change fast enough. Please wait a few
+seconds and the status will update automatically.
+
+#### Bug
+
+Merge Request pipeline statuses can't be retrieved when the following occurs:
+
+1. A Merge Requst is created
+1. The Merge Request is closed
+1. Changes are made in the project
+1. The Merge Request is reopened
+
+To enable the pipeline status to be properly retrieved, close and reopen the
+Merge Request again.
+
 ## Tips
 
 Here are some tips that will help you be more efficient with merge requests in

locale/gitlab.pot

@@ -1986,6 +1986,9 @@ msgstr ""
 msgid "Copy token to clipboard"
 msgstr ""
 
+msgid "Could not retrieve the pipeline status. For troubleshooting steps, read the %{linkStart}documentation.%{linkEnd}"
+msgstr ""
+
 msgid "Create"
 msgstr ""
 

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -179,7 +179,7 @@ describe 'Merge request > User sees merge widget', :js do
       # Wait for the `ci_status` and `merge_check` requests
       wait_for_requests
 
-      expect(page).to have_text('Could not connect to the CI server. Please check your settings and try again')
+      expect(page).to have_text(%r{Could not retrieve the pipeline status\. For troubleshooting steps, read the <a href=\".+\">documentation\.</a>})
     end
   end
 

spec/features/merge_request/user_sees_pipelines_spec.rb

@@ -41,8 +41,8 @@ describe 'Merge request > User sees pipelines', :js do
         visit project_merge_request_path(project, merge_request)
         wait_for_requests
 
-        expect(page.find('.ci-widget')).to have_content(
-          'Could not connect to the CI server. Please check your settings and try again')
+        expect(page.find('.ci-widget')).to have_text(
+          %r{Could not retrieve the pipeline status\. For troubleshooting steps, read the <a href=\".+\">documentation\.</a>})
       end
     end
 

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -22,6 +22,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           ciStatus: 'success',
           hasCi: true,
+          troubleshootingDocsPath: 'help',
         });
 
         expect(vm.hasPipeline).toEqual(true);
@@ -30,6 +31,7 @@ describe('MRWidgetPipeline', () => {
       it('should return false when there is no pipeline', () => {
         vm = mountComponent(Component, {
           pipeline: {},
+          troubleshootingDocsPath: 'help',
         });
 
         expect(vm.hasPipeline).toEqual(false);
@@ -42,6 +44,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
         });
 
         expect(vm.hasCIError).toEqual(false);
@@ -52,6 +55,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           hasCi: true,
           ciStatus: null,
+          troubleshootingDocsPath: 'help',
         });
 
         expect(vm.hasCIError).toEqual(true);
@@ -65,11 +69,12 @@ describe('MRWidgetPipeline', () => {
         pipeline: mockData.pipeline,
         hasCi: true,
         ciStatus: null,
+          troubleshootingDocsPath: 'help',
       });
 
       expect(
         vm.$el.querySelector('.media-body').textContent.trim(),
-      ).toEqual('Could not connect to the CI server. Please check your settings and try again');
+      ).toContain('Could not retrieve the pipeline status. For troubleshooting steps, read the <a href="help">documentation.</a>');
     });
 
     describe('with a pipeline', () => {
@@ -78,6 +83,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
         });
       });
 
@@ -122,6 +128,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockCopy.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
         });
       });
 
@@ -162,6 +169,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockCopy.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
         });
 
         expect(
@@ -179,6 +187,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockCopy.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          troubleshootingDocsPath: 'help',
         });
 
         expect(vm.$el.querySelector('.js-mini-pipeline-graph')).toEqual(null);

spec/javascripts/vue_mr_widget/mock_data.js

@@ -219,4 +219,5 @@ export default {
   only_allow_merge_if_pipeline_succeeds: false,
   commit_change_content_path: '/root/acets-app/merge_requests/22/commit_change_content',
   merge_commit_path: 'http://localhost:3000/root/acets-app/commit/53027d060246c8f47e4a9310fb332aa52f221775',
+  troubleshooting_docs_path: 'help'
 };