Add Release "show" page

This commit implements the Release "show" page - a page that shows the
details of a single Release.

app/assets/javascripts/pages/projects/releases/show/index.js

+import initShowRelease from '~/releases/mount_show';
+
+document.addEventListener('DOMContentLoaded', initShowRelease);

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

+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoading } from '@gitlab/ui';
+import ReleaseBlock from './release_block.vue';
+
+export default {
+  name: 'ReleaseShowApp',
+  components: {
+    GlSkeletonLoading,
+    ReleaseBlock,
+  },
+  computed: {
+    ...mapState('detail', ['isFetchingRelease', 'fetchError', 'release']),
+  },
+  created() {
+    this.fetchRelease();
+  },
+  methods: {
+    ...mapActions('detail', ['fetchRelease']),
+  },
+};
+</script>
+<template>
+  <div class="prepend-top-default">
+    <gl-skeleton-loading v-if="isFetchingRelease" />
+
+    <release-block v-else-if="!fetchError" :release="release" />
+  </div>
+</template>

app/assets/javascripts/releases/mount_show.js

+import Vue from 'vue';
+import ReleaseShowApp from './components/app_show.vue';
+import createStore from './stores';
+import detailModule from './stores/modules/detail';
+
+export default () => {
+  const el = document.getElementById('js-show-release-page');
+
+  const store = createStore({ detail: detailModule });
+  store.dispatch('detail/setInitialState', el.dataset);
+
+  return new Vue({
+    el,
+    store,
+    render: h => h(ReleaseShowApp),
+  });
+};

spec/features/projects/releases/user_views_release_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'User views Release', :js do
+  let(:project) { create(:project, :repository) }
+  let(:release) { create(:release, project: project, name: 'The first release' ) }
+  let(:user) { create(:user) }
+
+  before do
+    project.add_developer(user)
+
+    gitlab_sign_in(user)
+
+    visit project_release_path(project, release)
+  end
+
+  it 'renders the breadcrumbs' do
+    within('.breadcrumbs') do
+      expect(page).to have_content("#{project.creator.name} #{project.name} Releases #{release.name}")
+
+      expect(page).to have_link(project.creator.name, href: user_path(project.creator))
+      expect(page).to have_link(project.name, href: project_path(project))
+      expect(page).to have_link('Releases', href: project_releases_path(project))
+      expect(page).to have_link(release.name, href: project_release_path(project, release))
+    end
+  end
+
+  it 'renders the release details' do
+    within('.release-block') do
+      expect(page).to have_content(release.name)
+      expect(page).to have_content(release.tag)
+      expect(page).to have_content(release.commit.short_id)
+      expect(page).to have_content(release.description)
+    end
+  end
+end

spec/frontend/releases/components/app_show_spec.js

+import Vuex from 'vuex';
+import { shallowMount } from '@vue/test-utils';
+import ReleaseShowApp from '~/releases/components/app_show.vue';
+import { release as originalRelease } from '../mock_data';
+import { GlSkeletonLoading } from '@gitlab/ui';
+import ReleaseBlock from '~/releases/components/release_block.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+describe('Release show component', () => {
+  let wrapper;
+  let release;
+  let actions;
+
+  beforeEach(() => {
+    release = convertObjectPropsToCamelCase(originalRelease);
+  });
+
+  const factory = state => {
+    actions = {
+      fetchRelease: jest.fn(),
+    };
+
+    const store = new Vuex.Store({
+      modules: {
+        detail: {
+          namespaced: true,
+          actions,
+          state,
+        },
+      },
+    });
+
+    wrapper = shallowMount(ReleaseShowApp, { store });
+  };
+
+  const findLoadingSkeleton = () => wrapper.find(GlSkeletonLoading);
+  const findReleaseBlock = () => wrapper.find(ReleaseBlock);
+
+  it('calls fetchRelease when the component is created', () => {
+    factory({ release });
+    expect(actions.fetchRelease).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows a loading skeleton and hides the release block while the API call is in progress', () => {
+    factory({ isFetchingRelease: true });
+    expect(findLoadingSkeleton().exists()).toBe(true);
+    expect(findReleaseBlock().exists()).toBe(false);
+  });
+
+  it('hides the loading skeleton and shows the release block when the API call finishes successfully', () => {
+    factory({ isFetchingRelease: false });
+    expect(findLoadingSkeleton().exists()).toBe(false);
+    expect(findReleaseBlock().exists()).toBe(true);
+  });
+
+  it('hides both the loading skeleton and the release block when the API call fails', () => {
+    factory({ fetchError: new Error('Uh oh') });
+    expect(findLoadingSkeleton().exists()).toBe(false);
+    expect(findReleaseBlock().exists()).toBe(false);
+  });
+});