1 files changed, 56 insertions, 14 deletions

diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index ee685a4b8cd..3f282138bdf 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import _ from 'underscore';
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
 import Icon from '../../vue_shared/components/icon.vue';
 
@@ -10,6 +11,7 @@ export default {
   components: {
     UserAvatarLink,
     Icon,
+    GlLink,
   },
   props: {
     /**
@@ -33,6 +35,27 @@ export default {
       required: false,
       default: () => ({}),
     },
+
+    /**
+     * If provided, is used the render the MR IID and link
+     * in place of the branch name.  Must contains the
+     * following properties:
+     *   - iid (number)
+     *   - path (non-empty string)
+     *
+     * May optionally contain the following properties:
+     *   - title (string): used in a tooltip if provided
+     *
+     * Any additional properties are ignored.
+     */
+    mergeRequestRef: {
+      type: Object,
+      required: false,
+      default: undefined,
+      validator: ref =>
+        _.isUndefined(ref) || (_.isFinite(ref.iid) && _.isString(ref.path) && !_.isEmpty(ref.path)),
+    },
+
     /**
      * Used to link to the commit sha.
      */
@@ -70,7 +93,11 @@ export default {
       required: false,
       default: () => ({}),
     },
-    showBranch: {
+
+    /**
+     * Indicates whether or not to show the branch/MR ref info
+     */
+    showRefInfo: {
       type: Boolean,
       required: false,
       default: true,
@@ -78,14 +105,12 @@ export default {
   },
   computed: {
     /**
-     * Used to verify if all the properties needed to render the commit
-     * ref section were provided.
-     *
-     * @returns {Boolean}
+     * Determines if we shoud render the ref info section based
      */
-    hasCommitRef() {
-      return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
+    shouldShowRefInfo() {
+      return this.showRefInfo && (this.commitRef || this.mergeRequestRef);
     },
+
     /**
      * Used to verify if all the properties needed to render the commit
      * author section were provided.
@@ -109,18 +134,35 @@ export default {
 </script>
 <template>
   <div class="branch-commit">
-    <template v-if="hasCommitRef && showBranch">
+    <template v-if="shouldShowRefInfo">
       <div class="icon-container">
-        <i v-if="tag" class="fa fa-tag" aria-hidden="true"> </i> <icon v-if="!tag" name="fork" />
+        <icon v-if="tag" name="tag" />
+        <icon v-else-if="mergeRequestRef" name="git-merge" />
+        <icon v-else name="branch" />
       </div>
 
-      <a v-gl-tooltip :href="commitRef.ref_url" :title="commitRef.name" class="ref-name">
+      <gl-link
+        v-if="mergeRequestRef"
+        v-gl-tooltip
+        :href="mergeRequestRef.path"
+        :title="mergeRequestRef.title"
+        class="ref-name"
+      >
+        {{ mergeRequestRef.iid }}
+      </gl-link>
+      <gl-link
+        v-else
+        v-gl-tooltip
+        :href="commitRef.ref_url"
+        :title="commitRef.name"
+        class="ref-name"
+      >
         {{ commitRef.name }}
-      </a>
+      </gl-link>
     </template>
     <icon name="commit" class="commit-icon js-commit-icon" />
 
-    <a :href="commitUrl" class="commit-sha"> {{ shortSha }} </a>
+    <gl-link :href="commitUrl" class="commit-sha"> {{ shortSha }} </gl-link>
 
     <div class="commit-title flex-truncate-parent">
       <span v-if="title" class="flex-truncate-child">
@@ -132,7 +174,7 @@ export default {
           :tooltip-text="author.username"
           class="avatar-image-container"
         />
-        <a :href="commitUrl" class="commit-row-message"> {{ title }} </a>
+        <gl-link :href="commitUrl" class="commit-row-message"> {{ title }} </gl-link>
       </span>
       <span v-else> Can't find HEAD commit for this branch </span>
     </div>