Add merge train position message (CE)ce-11981-show-merge-train-position

This commit adds an informational message under the pipeline block in
the merge request widget that displays the current position of the merge
request on the merge train.

2 files changed, 5 insertions, 1 deletions

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 03a15ba81ed..4e86f617192 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
@@ -17,6 +17,8 @@ export default {
     Deployment,
     MrWidgetContainer,
     MrWidgetPipeline,
+    MergeTrainInfo: () =>
+      import('ee_component/vue_merge_request_widget/components/merge_train_info.vue'),
   },
   props: {
     mr: {
@@ -83,6 +85,7 @@ export default {
           :visual-review-app-meta="visualReviewAppMeta"
         />
       </div>
+      <merge-train-info class="mr-widget-extension" :mr="mr" />
     </template>
   </mr-widget-container>
 </template>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8cb3fab74e0..3917937f4af 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -904,7 +904,8 @@
   margin-right: -5px;
 }
 
-.deploy-heading {
+.deploy-heading,
+.merge-train-info {
   @include media-breakpoint-up(md) {
     padding: $gl-padding-8 $gl-padding;
   }