1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js b/app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js
index 455ae832234..8e0e4baa75a 100644
--- a/app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js
+++ b/app/assets/javascripts/vue_shared/mixins/related_issuable_mixin.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import { sprintf, __ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';
 import icon from '~/vue_shared/components/icon.vue';
@@ -58,6 +59,11 @@ const mixins = {
       required: false,
       default: '',
     },
+    mergedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
     milestone: {
       type: Object,
       required: false,
@@ -83,6 +89,16 @@ const mixins = {
       required: false,
       default: false,
     },
+    isMergeRequest: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    pipelineStatus: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   components: {
     icon,
@@ -95,12 +111,18 @@ const mixins = {
     hasState() {
       return this.state && this.state.length > 0;
     },
+    hasPipeline() {
+      return this.isMergeRequest && this.pipelineStatus && Object.keys(this.pipelineStatus).length;
+    },
     isOpen() {
       return this.state === 'opened';
     },
     isClosed() {
       return this.state === 'closed';
     },
+    isMerged() {
+      return this.state === 'merged';
+    },
     hasTitle() {
       return this.title.length > 0;
     },
@@ -108,9 +130,17 @@ const mixins = {
       return !_.isEmpty(this.milestone);
     },
     iconName() {
+      if (this.isMergeRequest && this.isMerged) {
+        return 'merge';
+      }
+
       return this.isOpen ? 'issue-open-m' : 'issue-close';
     },
     iconClass() {
+      if (this.isMergeRequest && this.isClosed) {
+        return 'merge-request-status closed issue-token-state-icon-closed';
+      }
+
       return this.isOpen ? 'issue-token-state-icon-open' : 'issue-token-state-icon-closed';
     },
     computedLinkElementType() {
@@ -131,12 +161,44 @@ const mixins = {
     createdAtTimestamp() {
       return this.createdAt ? formatDate(new Date(this.createdAt)) : '';
     },
+    mergedAtTimestamp() {
+      return this.mergedAt ? formatDate(new Date(this.mergedAt)) : '';
+    },
+    mergedAtInWords() {
+      return this.mergedAt ? this.timeFormated(this.mergedAt) : '';
+    },
     closedAtInWords() {
       return this.closedAt ? this.timeFormated(this.closedAt) : '';
     },
     closedAtTimestamp() {
       return this.closedAt ? formatDate(new Date(this.closedAt)) : '';
     },
+    stateText() {
+      if (this.isMerged) {
+        return __('Merged');
+      }
+
+      return this.isOpen ? __('Opened') : __('Closed');
+    },
+    stateTimeInWords() {
+      if (this.isMerged) {
+        return this.mergedAtInWords;
+      }
+
+      return this.isOpen ? this.createdAtInWords : this.closedAtInWords;
+    },
+    stateTimestamp() {
+      if (this.isMerged) {
+        return this.mergedAtTimestamp;
+      }
+
+      return this.isOpen ? this.createdAtTimestamp : this.closedAtTimestamp;
+    },
+    pipelineStatusTooltip() {
+      return this.hasPipeline
+        ? sprintf(__('Pipeline: %{status}'), { status: this.pipelineStatus.label })
+        : '';
+    },
   },
   methods: {
     onRemoveRequest() {