Merge branch 'nfriend-add-link-to-dedicated-release-page' into 'master'

Make titles on the Releases page link to dedicated Release page

Closes #32827

See merge request gitlab-org/gitlab!23816

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',
   },
 };