Add latest changes from gitlab-org/gitlab@master

2 files changed, 67 insertions, 0 deletions

diff --git a/app/assets/javascripts/releases/components/milestone_list.vue b/app/assets/javascripts/releases/components/milestone_list.vue
new file mode 100644
index 00000000000..53416f0ab4d
--- /dev/null
+++ b/app/assets/javascripts/releases/components/milestone_list.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'MilestoneList',
+  components: {
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    milestones: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    labelText() {
+      return this.milestones.length === 1 ? s__('Milestone') : s__('Milestones');
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <icon name="flag" class="align-middle" /> <span class="js-label-text">{{ labelText }}</span>
+    <template v-for="(milestone, index) in milestones">
+      <gl-link
+        :key="milestone.id"
+        v-gl-tooltip
+        :title="milestone.description"
+        :href="milestone.web_url"
+      >
+        {{ milestone.title }}
+      </gl-link>
+      <template v-if="index !== milestones.length - 1">
+        &bull;
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
index 88b6b4732b1..2dacd8549ad 100644
--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -5,6 +5,7 @@ import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import MilestoneList from './milestone_list.vue';
 import { __, sprintf } from '../../locale';
 
 export default {
@@ -14,6 +15,7 @@ export default {
     GlBadge,
     Icon,
     UserAvatarLink,
+    MilestoneList,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -49,6 +51,20 @@ export default {
     hasAuthor() {
       return !_.isEmpty(this.author);
     },
+    milestones() {
+      // At the moment, a release can only be associated to
+      // one milestone. This will be expanded to be many-to-many
+      // in the near future, so we pass the milestone as an
+      // array here in anticipation of this change.
+      return [this.release.milestone];
+    },
+    shouldRenderMilestones() {
+      // Similar to the `milestones` computed above,
+      // this check will need to be updated once
+      // the API begins sending an array of milestones
+      // instead of just a single object.
+      return Boolean(this.release.milestone);
+    },
   },
 };
 </script>
@@ -73,6 +89,12 @@ export default {
           <span v-gl-tooltip.bottom :title="__('Tag')">{{ release.tag_name }}</span>
         </div>
 
+        <milestone-list
+          v-if="shouldRenderMilestones"
+          class="append-right-4 js-milestone-list"
+          :milestones="milestones"
+        />
+
         <div class="append-right-4">
           &bull;
           <span v-gl-tooltip.bottom :title="tooltipTitle(release.released_at)">