Add merge train helper text to MR widget (CE)ce-11982-merge-trains-helper-text

This commit adds a helper text that describes what will happen when a
user clicks the "Start/Add to merge train when pipeline succeeds"
button.  This text appears at the bottom of the merge request widget.

In addition, this commit renames the "merge_train_info" component to
"merge_train_position_indicator" to avoid ambiguity with the
"merge_train_helper_text" component.

5 files changed, 12 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index a347269c916..53bf9d5ab6f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -23,7 +23,7 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-widget-help">
+  <section class="mr-widget-help font-italic">
     <template v-if="missingBranch">
       {{ missingBranchInfo }}
     </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index 76b96c8c1c0..8fdf61a6b8d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -18,8 +18,8 @@ export default {
     Deployment,
     MrWidgetContainer,
     MrWidgetPipeline,
-    MergeTrainInfo: () =>
-      import('ee_component/vue_merge_request_widget/components/merge_train_info.vue'),
+    MergeTrainPositionIndicator: () =>
+      import('ee_component/vue_merge_request_widget/components/merge_train_position_indicator.vue'),
   },
   props: {
     mr: {
@@ -62,7 +62,7 @@ export default {
     showVisualReviewAppLink() {
       return this.mr.visualReviewAppAvailable;
     },
-    showMergeTrainInfo() {
+    showMergeTrainPositionIndicator() {
       return _.isNumber(this.mr.mergeTrainIndex);
     },
   },
@@ -90,8 +90,8 @@ export default {
           :visual-review-app-meta="visualReviewAppMeta"
         />
       </div>
-      <merge-train-info
-        v-if="showMergeTrainInfo"
+      <merge-train-position-indicator
+        v-if="showMergeTrainPositionIndicator"
         class="mr-widget-extension"
         :merge-train-index="mr.mergeTrainIndex"
       />
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 3eab8e6fc0b..0f55bebd3fc 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
@@ -31,6 +31,9 @@ export default class MergeRequestStore {
     this.targetBranchSha = data.target_branch_sha;
     this.sourceBranch = data.source_branch;
     this.sourceBranchProtected = data.source_branch_protected;
+    this.conflictsDocsPath = data.conflicts_docs_path;
+    this.mergeRequestPipelinesHelpPath = data.merge_request_pipelines_docs_path;
+    this.mergeTrainWhenPipelineSucceedsDocsPath = data.merge_train_when_pipeline_succeeds_docs_path;
     this.mergeStatus = data.merge_status;
     this.commitMessage = data.default_merge_commit_message;
     this.shortMergeCommitSha = data.short_merge_commit_sha;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 3c1e384d6ed..c8d155706a9 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -397,7 +397,6 @@
 
   .mr-widget-help {
     padding: 10px 16px 10px ($gl-padding-8 * 7);
-    font-style: italic;
   }
 
   .ci-coverage {
@@ -906,7 +905,7 @@
 }
 
 .deploy-heading,
-.merge-train-info {
+.merge-train-position-indicator {
   @include media-breakpoint-up(md) {
     padding: $gl-padding-8 $gl-padding;
   }
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index 253413ae43e..a55d5537df7 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -233,6 +233,8 @@ export default {
     'http://localhost:3000/root/acets-app/commit/53027d060246c8f47e4a9310fb332aa52f221775',
   troubleshooting_docs_path: 'help',
   merge_request_pipelines_docs_path: '/help/ci/merge_request_pipelines/index.md',
+  merge_train_when_pipeline_succeeds_docs_path:
+    '/help/ci/merge_request_pipelines/pipelines_for_merged_results/merge_trains/#startadd-to-merge-train-when-pipeline-succeeds',
   squash: true,
   visual_review_app_available: true,
   merge_trains_enabled: true,