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

3 files changed, 18 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index fee41b239e8..bd1946f337e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -1,5 +1,6 @@
 <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">
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index a5c69d2bc7a..9755d1f2443 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/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"
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index a0c008e7314..c17e9c9e4d6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/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;