Update Release page to use GraphQL

This commit updates the individual Release page to use GraphQL instead
of the REST endpoint.

app/assets/javascripts/releases/mount_show.js

@@ -13,6 +13,9 @@ export default () => {
     modules: {
       detail: createDetailModule(el.dataset),
     },
+    featureFlags: {
+      graphqlIndividualReleasePage: Boolean(gon.features?.graphqlIndividualReleasePage),
+    },
   });
 
   return new Vue({

app/assets/javascripts/releases/stores/modules/detail/actions.js

@@ -3,7 +3,13 @@ import api from '~/api';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__ } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { releaseToApiJson, apiJsonToRelease } from '~/releases/util';
+import {
+  releaseToApiJson,
+  apiJsonToRelease,
+  gqClient,
+  convertOneReleaseGraphQLResponse,
+} from '~/releases/util';
+import oneReleaseQuery from '~/releases/queries/one_release.query.graphql';
 
 export const initializeRelease = ({ commit, dispatch, getters }) => {
   if (getters.isExistingRelease) {
@@ -18,9 +24,29 @@ export const initializeRelease = ({ commit, dispatch, getters }) => {
   return Promise.resolve();
 };
 
-export const fetchRelease = ({ commit, state }) => {
+export const fetchRelease = ({ commit, state, rootState }) => {
   commit(types.REQUEST_RELEASE);
 
+  if (rootState.featureFlags?.graphqlIndividualReleasePage) {
+    return gqClient
+      .query({
+        query: oneReleaseQuery,
+        variables: {
+          fullPath: state.projectPath,
+          tagName: state.tagName,
+        },
+      })
+      .then(response => {
+        const { data: release } = convertOneReleaseGraphQLResponse(response);
+
+        commit(types.RECEIVE_RELEASE_SUCCESS, release);
+      })
+      .catch(error => {
+        commit(types.RECEIVE_RELEASE_ERROR, error);
+        createFlash(s__('Release|Something went wrong while getting the release details'));
+      });
+  }
+
   return api
     .release(state.projectId, state.tagName)
     .then(({ data }) => {

app/assets/javascripts/releases/stores/modules/detail/state.js

 export default ({
   projectId,
+  projectPath,
   markdownDocsPath,
   markdownPreviewPath,
   updateReleaseApiDocsPath,
@@ -12,6 +13,7 @@ export default ({
   defaultBranch = null,
 }) => ({
   projectId,
+  projectPath,
   markdownDocsPath,
   markdownPreviewPath,
   updateReleaseApiDocsPath,

app/controllers/projects/releases_controller.rb

@@ -9,6 +9,7 @@ class Projects::ReleasesController < Projects::ApplicationController
     push_frontend_feature_flag(:graphql_release_data, project, default_enabled: true)
     push_frontend_feature_flag(:graphql_milestone_stats, project, default_enabled: true)
     push_frontend_feature_flag(:graphql_releases_page, project, default_enabled: true)
+    push_frontend_feature_flag(:graphql_individual_release_page, project)
   end
   before_action :authorize_update_release!, only: %i[edit update]
   before_action :authorize_create_release!, only: :new

app/helpers/releases_helper.rb

@@ -29,6 +29,14 @@ module ReleasesHelper
     end
   end
 
+  def data_for_show_page
+    {
+      project_id: @project.id,
+      project_path: @project.full_path,
+      tag_name: @release.tag
+    }
+  end
+
   def data_for_edit_release_page
     new_edit_pages_shared_data.merge(
       tag_name: @release.tag,
@@ -48,6 +56,7 @@ module ReleasesHelper
   def new_edit_pages_shared_data
     {
       project_id: @project.id,
+      project_path: @project.full_path,
       markdown_preview_path: preview_markdown_path(@project),
       markdown_docs_path: help_page_path('user/markdown'),
       update_release_api_docs_path: help_page_path('api/releases/index.md', anchor: 'update-a-release'),

app/views/projects/releases/show.html.haml

@@ -2,4 +2,4 @@
 - page_title @release.name
 - page_description @release.description_html
 
-#js-show-release-page{ data: { project_id: @project.id, tag_name: @release.tag } }
+#js-show-release-page{ data: data_for_show_page }

config/feature_flags/development/graphql_individual_release_page.yml

+---
+name: graphql_individual_release_page
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44779
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/263522
+type: development
+group: group::release management
+default_enabled: false

spec/features/projects/releases/user_views_release_spec.rb

@@ -5,6 +5,7 @@ require 'spec_helper'
 RSpec.describe 'User views Release', :js do
   let(:project) { create(:project, :repository) }
   let(:user) { create(:user) }
+  let(:graphql_feature_flag) { true }
 
   let(:release) do
     create(:release,
@@ -14,6 +15,8 @@ RSpec.describe 'User views Release', :js do
   end
 
   before do
+    stub_feature_flags(graphql_individual_release_page: graphql_feature_flag)
+
     project.add_developer(user)
 
     sign_in(user)
@@ -23,6 +26,7 @@ RSpec.describe 'User views Release', :js do
 
   it_behaves_like 'page meta description', 'Lorem ipsum dolor sit amet'
 
+  shared_examples 'release page' do
     it 'renders the breadcrumbs' do
       within('.breadcrumbs') do
         expect(page).to have_content("#{project.creator.name} #{project.name} Releases #{release.name}")
@@ -42,4 +46,15 @@ RSpec.describe 'User views Release', :js do
         expect(page).to have_content('Lorem ipsum dolor sit amet')
       end
     end
+  end
+
+  describe 'when the graphql_individual_release_page feature flag is enabled' do
+    it_behaves_like 'release page'
+  end
+
+  describe 'when the graphql_individual_release_page feature flag is disabled' do
+    let(:graphql_feature_flag) { false }
+
+    it_behaves_like 'release page'
+  end
 end

spec/frontend/releases/stores/modules/detail/actions_spec.js

@@ -34,6 +34,12 @@ describe('Release detail actions', () => {
       isExistingRelease: true,
     };
 
+    const rootState = {
+      featureFlags: {
+        graphqlIndividualReleasePage: false,
+      },
+    };
+
     state = {
       ...createState({
         projectId: '18',
@@ -44,6 +50,7 @@ describe('Release detail actions', () => {
         updateReleaseApiDocsPath: 'path/to/api/docs',
       }),
       ...getters,
+      ...rootState,
       ...updates,
     };
   };
@@ -154,7 +161,7 @@ describe('Release detail actions', () => {
         });
 
         it(`shows a flash message`, () => {
-          return actions.fetchRelease({ commit: jest.fn(), state }).then(() => {
+          return actions.fetchRelease({ commit: jest.fn(), state, rootState: state }).then(() => {
             expect(createFlash).toHaveBeenCalledTimes(1);
             expect(createFlash).toHaveBeenCalledWith(
               'Something went wrong while getting the release details',

spec/helpers/releases_helper_spec.rb

@@ -64,6 +64,7 @@ RSpec.describe ReleasesHelper do
     describe '#data_for_edit_release_page' do
       it 'has the needed data to display the "edit release" page' do
         keys = %i(project_id
+                  project_path
                   tag_name
                   markdown_preview_path
                   markdown_docs_path
@@ -80,6 +81,7 @@ RSpec.describe ReleasesHelper do
     describe '#data_for_new_release_page' do
       it 'has the needed data to display the "new release" page' do
         keys = %i(project_id
+                  project_path
                   releases_page_path
                   markdown_preview_path
                   markdown_docs_path
@@ -92,5 +94,15 @@ RSpec.describe ReleasesHelper do
         expect(helper.data_for_new_release_page.keys).to match_array(keys)
       end
     end
+
+    describe '#data_for_show_page' do
+      it 'has the needed data to display the individual "release" page' do
+        keys = %i(project_id
+                  project_path
+                  tag_name)
+
+        expect(helper.data_for_show_page.keys).to match_array(keys)
+      end
+    end
   end
 end