Renders pre-release tag for pre-releases

When a release is a pre release, we render
an orange badge with `pre-release` label

app/assets/javascripts/releases/components/release_block.vue

 <script>
 import _ from 'underscore';
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+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';
@@ -10,6 +10,7 @@ export default {
   name: 'ReleaseBlock',
   components: {
     GlLink,
+    GlBadge,
     Icon,
     UserAvatarLink,
   },
@@ -53,7 +54,12 @@ export default {
 <template>
   <div class="card">
     <div class="card-body">
-      <h2 class="card-title mt-0">{{ release.name }}</h2>
+      <h2 class="card-title mt-0">
+        {{ release.name }}
+        <gl-badge v-if="release.pre_release" variant="warning" class="align-middle">{{
+          __('Pre-release')
+        }}</gl-badge>
+      </h2>
       <div class="card-subtitle d-flex flex-wrap text-secondary">
         <div class="append-right-8">
@@ -68,9 +74,9 @@ export default {
         <div class="append-right-4">
           &bull;
-          <span v-gl-tooltip.bottom :title="tooltipTitle(release.created_at)">{{
-            releasedTimeAgo
-          }}</span>
+          <span v-gl-tooltip.bottom :title="tooltipTitle(release.created_at)">
+            {{ releasedTimeAgo }}
+          </span>
         </div>
         <div v-if="hasAuthor" class="d-flex">
@@ -98,7 +104,8 @@ export default {
           <li v-for="link in assets.links" :key="link.name" class="append-bottom-8">
             <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.url">
               <icon name="package" class="align-middle append-right-4 align-text-bottom" />
-              {{ link.name }} <span v-if="link.external"> {{ __('(external source)') }}</span>
+              {{ link.name }}
+              <span v-if="link.external">{{ __('(external source)') }}</span>
             </gl-link>
           </li>
         </ul>
@@ -111,7 +118,8 @@ export default {
             aria-haspopup="true"
             aria-expanded="false"
           >
-            <icon name="doc-code" class="align-top append-right-4" /> {{ __('Source code') }}
+            <icon name="doc-code" class="align-top append-right-4" />
+            {{ __('Source code') }}
             <icon name="arrow-down" />
           </button>
@@ -123,7 +131,9 @@ export default {
         </div>
       </div>
-      <div class="card-text prepend-top-default"><div v-html="release.description_html"></div></div>
+      <div class="card-text prepend-top-default">
+        <div v-html="release.description_html"></div>
+      </div>
     </div>
   </div>
 </template>

changelogs/unreleased/38105-pre-release-tag.yml

+---
+title: Renders a pre-release tag for releases
+merge_request: 29797
+author:
+type: changed

locale/gitlab.pot

@@ -7330,6 +7330,9 @@ msgstr ""
 msgid "Please wait while we import the repository for you. Refresh at will."
 msgstr ""
+msgid "Pre-release"
+msgstr ""
+
 msgid "Preferences"
 msgstr ""

spec/javascripts/releases/components/release_block_spec.js

@@ -78,8 +78,10 @@ describe('Release block', () => {
   };
   let vm;
+  const factory = props => mountComponent(Component, { release: props });
+
   beforeEach(() => {
-    vm = mountComponent(Component, { release });
+    vm = factory(release);
   });
   afterEach(() => {
@@ -149,4 +151,14 @@ describe('Release block', () => {
       );
     });
   });
+
+  describe('with pre_release flag', () => {
+    beforeEach(() => {
+      vm = factory(Object.assign({}, release, { pre_release: true }));
+    });
+
+    it('renders pre-release badge', () => {
+      expect(vm.$el.textContent).toContain('Pre-release');
+    });
+  });
 });