Make release title link to dedicated release page

This commit update the each release block title on the Releases page to
point to the dedicated page for the release. The title is only rendered
as a link if the API response includes a _links.self property.

app/assets/javascripts/releases/list/components/release_block_header.vue

@@ -19,8 +19,11 @@ export default {
     },
   },
   computed: {
-    shouldShowEditButton() {
-      return Boolean(this.release._links && this.release._links.edit_url);
+    editLink() {
+      return this.release._links?.edit_url;
+    },
+    selfLink() {
+      return this.release._links?.self;
     },
   },
 };
@@ -29,17 +32,20 @@ export default {
 <template>
   <div class="card-header d-flex align-items-center bg-white pr-0">
     <h2 class="card-title my-2 mr-auto gl-font-size-20">
-      {{ release.name }}
+      <gl-link v-if="selfLink" :href="selfLink" class="font-size-inherit">
+        {{ release.name }}
+      </gl-link>
+      <template v-else>{{ release.name }}</template>
       <gl-badge v-if="release.upcoming_release" variant="warning" class="align-middle">{{
         __('Upcoming Release')
       }}</gl-badge>
     </h2>
     <gl-link
-      v-if="shouldShowEditButton"
+      v-if="editLink"
       v-gl-tooltip
       class="btn btn-default append-right-10 js-edit-button ml-2"
       :title="__('Edit this release')"
-      :href="release._links.edit_url"
+      :href="editLink"
     >
       <icon name="pencil" />
     </gl-link>

app/assets/stylesheets/utilities.scss

@@ -40,6 +40,8 @@
 
 .mh-50vh { max-height: 50vh; }
 
+.font-size-inherit { font-size: inherit; }
+
 .gl-w-64 { width: px-to-rem($grid-size * 8); }
 .gl-h-32 { height: px-to-rem($grid-size * 4); }
 .gl-h-64 { height: px-to-rem($grid-size * 8); }

spec/frontend/releases/list/components/release_block_header_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { cloneDeep, merge } from 'lodash';
+import { GlLink } from '@gitlab/ui';
+import ReleaseBlockHeader from '~/releases/list/components/release_block_header.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { release as originalRelease } from '../../mock_data';
+
+describe('Release block header', () => {
+  let wrapper;
+  let release;
+
+  const factory = (releaseUpdates = {}) => {
+    wrapper = shallowMount(ReleaseBlockHeader, {
+      propsData: {
+        release: merge({}, release, releaseUpdates),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    release = convertObjectPropsToCamelCase(cloneDeep(originalRelease), {
+      ignoreKeyNames: ['_links'],
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findHeader = () => wrapper.find('h2');
+  const findHeaderLink = () => findHeader().find(GlLink);
+
+  describe('when _links.self is provided', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('renders the title as a link', () => {
+      const link = findHeaderLink();
+
+      expect(link.text()).toBe(release.name);
+      expect(link.attributes('href')).toBe(release._links.self);
+    });
+  });
+
+  describe('when _links.self is missing', () => {
+    beforeEach(() => {
+      factory({ _links: { self: null } });
+    });
+
+    it('renders the title as text', () => {
+      expect(findHeader().text()).toBe(release.name);
+      expect(findHeaderLink().exists()).toBe(false);
+    });
+  });
+});

spec/frontend/releases/mock_data.js

@@ -108,6 +108,7 @@ export const release = {
     ],
   },
   _links: {
+    self: 'http://0.0.0.0:3001/root/release-test/-/releases/v0.3',
     edit_url: 'http://0.0.0.0:3001/root/release-test/-/releases/v0.3/edit',
   },
 };