Add merge train position message (EE)

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.

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

ee/app/assets/javascripts/vue_merge_request_widget/components/merge_train_info.vue

+<script>
+import { s__, sprintf } from '~/locale';
+
+export default {
+  name: 'MergeTrainInfo',
+  props: {
+    mergeTrainIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    message() {
+      return sprintf(s__('mrWidget|Added to the merge train at position %{mergeTrainPosition}'), {
+        mergeTrainPosition: this.mergeTrainIndex + 1,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="pt-2 pb-2 pl-3 plr-3 merge-train-info">
+    <div class="media-body">
+      {{ message }}
+    </div>
+  </div>
+</template>

ee/changelogs/unreleased/test-merge-train-be.yml

+---
+title: Add merge train position message under pipeline in merge request widget
+merge_request: 14064
+author:
+type: added

ee/spec/javascripts/vue_mr_widget/components/merge_train_info_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { trimText } from 'spec/helpers/text_helper';
+import MergeTrainInfo from 'ee/vue_merge_request_widget/components/merge_train_info.vue';
+
+describe('MergeTrainInfo', () => {
+  const localVue = createLocalVue();
+  let wrapper;
+  let vm;
+
+  const factory = propsData => {
+    wrapper = shallowMount(localVue.extend(MergeTrainInfo), {
+      propsData,
+      localVue,
+      sync: false,
+    });
+
+    ({ vm } = wrapper);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('message', () => {
+      it('should return the message with the correct position (i.e., index + 1)', () => {
+        factory({ mergeTrainIndex: 3 });
+
+        expect(vm.message).toBe('Added to the merge train at position 4');
+      });
+    });
+
+    describe('template', () => {
+      it('should render the correct message', () => {
+        factory({ mergeTrainIndex: 3 });
+
+        expect(trimText(wrapper.text())).toBe('Added to the merge train at position 4');
+      });
+    });
+  });
+});

ee/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import MrWidgetPipelineContainer from '~/vue_merge_request_widget/components/mr_widget_pipeline_container.vue';
+import { MT_MERGE_STRATEGY, MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
+import MergeTrainInfo from 'ee/vue_merge_request_widget/components/merge_train_info.vue';
+import { mockStore } from 'spec/vue_mr_widget/mock_data';
+
+describe('MrWidgetPipelineContainer', () => {
+  let wrapper;
+
+  const factory = (mrUpdates = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = mount(localVue.extend(MrWidgetPipelineContainer), {
+      propsData: {
+        mr: Object.assign({}, mockStore, mrUpdates),
+      },
+      localVue,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('merge train indicator', () => {
+    it('should render the merge train indicator if the MR is open and is on the merge train', () => {
+      factory({
+        isOpen: true,
+        autoMergeStrategy: MT_MERGE_STRATEGY,
+      });
+
+      expect(wrapper.find(MergeTrainInfo).exists()).toBe(false);
+    });
+
+    it('should not render the merge train indicator if the MR is closed', () => {
+      factory({
+        isOpen: false,
+        autoMergeStrategy: MT_MERGE_STRATEGY,
+      });
+
+      expect(wrapper.find(MergeTrainInfo).exists()).toBe(false);
+    });
+
+    it('should not render the merge train indicator if the MR is not on the merge train', () => {
+      factory({
+        isOpen: true,
+        autoMergeStrategy: MWPS_MERGE_STRATEGY,
+      });
+
+      expect(wrapper.find(MergeTrainInfo).exists()).toBe(false);
+    });
+  });
+});

locale/gitlab.pot

@@ -16380,6 +16380,9 @@ msgstr ""
 msgid "mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB"
 msgstr ""
 
+msgid "mrWidget|Added to the merge train at position %{mergeTrainPosition}"
+msgstr ""
+
 msgid "mrWidget|Added to the merge train by"
 msgstr ""