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

Add merge train position indicator

Closes #11981

See merge request gitlab-org/gitlab-ee!14064

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