Update help text of tag field on Edit Release page

This commit updates the help text that appears under the "Tag name"
field on the "Edit Release" page.

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

 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
@@ -23,6 +24,7 @@ export default {
       'markdownDocsPath',
       'markdownPreviewPath',
       'releasesPagePath',
+      'updateReleaseApiDocsPath',
     ]),
     showForm() {
       return !this.isFetchingRelease && !this.fetchError;
@@ -42,6 +44,20 @@ export default {
     tagName() {
       return this.$store.state.release.tagName;
     },
+    tagNameHintText() {
+      return sprintf(
+        __(
+          'Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}',
+        ),
+        {
+          linkStart: `<a href="${_.escape(
+            this.updateReleaseApiDocsPath,
+          )}" target="_blank" rel="noopener noreferrer">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
     releaseTitle: {
       get() {
         return this.$store.state.release.name;
@@ -77,8 +93,9 @@ export default {
   <div class="d-flex flex-column">
     <p class="pt-3 js-subtitle-text" v-html="subtitleText"></p>
     <form v-if="showForm" @submit.prevent="updateRelease()">
+      <gl-form-group>
         <div class="row">
-        <gl-form-group class="col-md-6 col-lg-5 col-xl-4">
+          <div class="col-md-6 col-lg-5 col-xl-4">
             <label for="git-ref">{{ __('Tag name') }}</label>
             <gl-form-input
               id="git-ref"
@@ -88,11 +105,10 @@ export default {
               aria-describedby="tag-name-help"
               disabled
             />
-          <div id="tag-name-help" class="form-text text-muted">
-            {{ __('Choose an existing tag, or create a new one') }}
           </div>
-        </gl-form-group>
         </div>
+        <div id="tag-name-help" class="form-text text-muted" v-html="tagNameHintText"></div>
+      </gl-form-group>
       <gl-form-group>
         <label for="release-title">{{ __('Release title') }}</label>
         <gl-form-input

app/assets/javascripts/releases/detail/store/state.js

@@ -4,6 +4,7 @@ export default () => ({
   releasesPagePath: null,
   markdownDocsPath: null,
   markdownPreviewPath: null,
+  updateReleaseApiDocsPath: null,
 
   release: null,
 

app/helpers/releases_helper.rb

@@ -26,7 +26,8 @@ module ReleasesHelper
       tag_name: @release.tag,
       markdown_preview_path: preview_markdown_path(@project),
       markdown_docs_path: help_page_path('user/markdown'),
-      releases_page_path: project_releases_path(@project, anchor: @release.tag)
+      releases_page_path: project_releases_path(@project, anchor: @release.tag),
+      update_release_api_docs_path: help_page_path('api/releases/index.md', anchor: 'update-a-release')
     }
   end
 end

changelogs/unreleased/nfriend-edit-release-ux-cleanup.yml

+---
+title: Update help text of "Tag name" field on Edit Release page
+merge_request: 19321
+author:
+type: changed

locale/gitlab.pot

@@ -3016,6 +3016,9 @@ msgstr ""
 msgid "Changes won't take place until the index is %{link_start}recreated%{link_end}."
 msgstr ""
 
+msgid "Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}"
+msgstr ""
+
 msgid "Changing group path can have unintended side effects."
 msgstr ""
 
@@ -3142,9 +3145,6 @@ msgstr ""
 msgid "Choose a type..."
 msgstr ""
 
-msgid "Choose an existing tag, or create a new one"
-msgstr ""
-
 msgid "Choose any color."
 msgstr ""
 

spec/frontend/releases/detail/components/app_spec.js

@@ -8,15 +8,17 @@ describe('Release detail component', () => {
   let wrapper;
   let releaseClone;
   let actions;
+  let state;
 
   beforeEach(() => {
     gon.api_version = 'v4';
 
     releaseClone = JSON.parse(JSON.stringify(convertObjectPropsToCamelCase(release)));
 
-    const state = {
+    state = {
       release: releaseClone,
       markdownDocsPath: 'path/to/markdown/docs',
+      updateReleaseApiDocsPath: 'path/to/update/release/api/docs',
     };
 
     actions = {
@@ -46,6 +48,21 @@ describe('Release detail component', () => {
     expect(wrapper.find('#git-ref').element.value).toBe(releaseClone.tagName);
   });
 
+  it('renders the correct help text under the "Tag name" field', () => {
+    const helperText = wrapper.find('#tag-name-help');
+    const helperTextLink = helperText.find('a');
+    const helperTextLinkAttrs = helperTextLink.attributes();
+
+    expect(helperText.text()).toBe(
+      'Changing a Release tag is only supported via Releases API. More information',
+    );
+    expect(helperTextLink.text()).toBe('More information');
+    expect(helperTextLinkAttrs.href).toBe(state.updateReleaseApiDocsPath);
+    expect(helperTextLinkAttrs.rel).toContain('noopener');
+    expect(helperTextLinkAttrs.rel).toContain('noreferrer');
+    expect(helperTextLinkAttrs.target).toBe('_blank');
+  });
+
   it('renders the correct release title in the "Release title" field', () => {
     expect(wrapper.find('#release-title').element.value).toBe(releaseClone.name);
   });

spec/helpers/releases_helper_spec.rb

@@ -17,9 +17,11 @@ describe ReleasesHelper do
 
   context 'url helpers' do
     let(:project) { build(:project, namespace: create(:group)) }
+    let(:release) { create(:release, project: project) }
 
     before do
       helper.instance_variable_set(:@project, project)
+      helper.instance_variable_set(:@release, release)
     end
 
     describe '#data_for_releases_page' do
@@ -28,5 +30,17 @@ describe ReleasesHelper do
         expect(helper.data_for_releases_page.keys).to eq(keys)
       end
     end
+
+    describe '#data_for_edit_release_page' do
+      it 'has the needed data to display the "edit release" page' do
+        keys = %i(project_id
+                  tag_name
+                  markdown_preview_path
+                  markdown_docs_path
+                  releases_page_path
+                  update_release_api_docs_path)
+        expect(helper.data_for_edit_release_page.keys).to eq(keys)
+      end
+    end
   end
 end