Merge branch 'ce-11981-show-merge-train-position' into 'master'

CE backport for gitlab-org/gitlab-ee!14064: Add merge train position indicator

See merge request gitlab-org/gitlab-ce!29561

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue

 <script>
+import _ from 'underscore';
 import Deployment from './deployment.vue';
 import MrWidgetContainer from './mr_widget_container.vue';
 import MrWidgetPipeline from './mr_widget_pipeline.vue';
@@ -17,6 +18,8 @@ export default {
     Deployment,
     MrWidgetContainer,
     MrWidgetPipeline,
+    MergeTrainInfo: () =>
+      import('ee_component/vue_merge_request_widget/components/merge_train_info.vue'),
   },
   props: {
     mr: {
@@ -58,6 +61,9 @@ export default {
     showVisualReviewAppLink() {
       return Boolean(this.mr.visualReviewFF && this.mr.visualReviewAppAvailable);
     },
+    showMergeTrainInfo() {
+      return _.isNumber(this.mr.mergeTrainIndex);
+    },
   },
 };
 </script>
@@ -83,6 +89,11 @@ export default {
           :visual-review-app-meta="visualReviewAppMeta"
         />
       </div>
+      <merge-train-info
+        v-if="showMergeTrainInfo"
+        class="mr-widget-extension"
+        :merge-train-index="mr.mergeTrainIndex"
+      />
     </template>
   </mr-widget-container>
 </template>

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