1 files changed, 15 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">