Add merge train helper text to MR widget (CE)

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.

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>

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"
       />

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;

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;
   }

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,