Add latest changes from gitlab-org/gitlab@master

6 files changed, 96 insertions, 34 deletions

diff --git a/app/assets/javascripts/releases/components/app_edit_new.vue b/app/assets/javascripts/releases/components/app_edit_new.vue
index fd3491a9c62..09fdd9e4438 100644
--- a/app/assets/javascripts/releases/components/app_edit_new.vue
+++ b/app/assets/javascripts/releases/components/app_edit_new.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
-import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
@@ -10,6 +9,7 @@ import { getParameterByName } from '~/lib/utils/common_utils';
 import AssetLinksForm from './asset_links_form.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue';
+import TagField from './tag_field.vue';
 
 export default {
   name: 'ReleaseEditNewApp',
@@ -20,6 +20,7 @@ export default {
     MarkdownField,
     AssetLinksForm,
     MilestoneCombobox,
+    TagField,
   },
   directives: {
     autofocusonshow,
@@ -55,23 +56,6 @@ export default {
         false,
       );
     },
-    tagName() {
-      return this.$store.state.detail.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.detail.release.name;
@@ -136,22 +120,7 @@ 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">
-          <div class="col-md-6 col-lg-5 col-xl-4">
-            <label for="git-ref">{{ __('Tag name') }}</label>
-            <gl-form-input
-              id="git-ref"
-              v-model="tagName"
-              type="text"
-              class="form-control"
-              aria-describedby="tag-name-help"
-              disabled
-            />
-          </div>
-        </div>
-        <div id="tag-name-help" class="form-text text-muted" v-html="tagNameHintText"></div>
-      </gl-form-group>
+      <tag-field />
       <gl-form-group>
         <label for="release-title">{{ __('Release title') }}</label>
         <gl-form-input
diff --git a/app/assets/javascripts/releases/components/tag_field.vue b/app/assets/javascripts/releases/components/tag_field.vue
new file mode 100644
index 00000000000..ed8d6e62926
--- /dev/null
+++ b/app/assets/javascripts/releases/components/tag_field.vue
@@ -0,0 +1,20 @@
+<script>
+import { mapGetters } from 'vuex';
+import TagFieldExisting from './tag_field_existing.vue';
+import TagFieldNew from './tag_field_new.vue';
+
+export default {
+  components: {
+    TagFieldExisting,
+    TagFieldNew,
+  },
+  computed: {
+    ...mapGetters('detail', ['isExistingRelease']),
+  },
+};
+</script>
+
+<template>
+  <tag-field-existing v-if="isExistingRelease" />
+  <tag-field-new v-else />
+</template>
diff --git a/app/assets/javascripts/releases/components/tag_field_existing.vue b/app/assets/javascripts/releases/components/tag_field_existing.vue
new file mode 100644
index 00000000000..6267e7088c4
--- /dev/null
+++ b/app/assets/javascripts/releases/components/tag_field_existing.vue
@@ -0,0 +1,52 @@
+<script>
+import { mapState } from 'vuex';
+import { uniqueId } from 'lodash';
+import { GlFormGroup, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
+
+export default {
+  name: 'TagFieldExisting',
+  components: { GlFormGroup, GlFormInput, GlSprintf, GlLink },
+  computed: {
+    ...mapState('detail', ['release', 'updateReleaseApiDocsPath']),
+    inputId() {
+      return uniqueId('tag-name-input-');
+    },
+    helpId() {
+      return uniqueId('tag-name-help-');
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-group :label="__('Tag name')" :label-for="inputId">
+    <div class="row">
+      <div class="col-md-6 col-lg-5 col-xl-4">
+        <gl-form-input
+          :id="inputId"
+          :value="release.tagName"
+          type="text"
+          class="form-control"
+          :aria-describedby="helpId"
+          disabled
+        />
+      </div>
+    </div>
+    <template #description>
+      <div :id="helpId" data-testid="tag-name-help">
+        <gl-sprintf
+          :message="
+            __(
+              'Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}',
+            )
+          "
+        >
+          <template #link="{ content }">
+            <gl-link :href="updateReleaseApiDocsPath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </div>
+    </template>
+  </gl-form-group>
+</template>
diff --git a/app/assets/javascripts/releases/components/tag_field_new.vue b/app/assets/javascripts/releases/components/tag_field_new.vue
new file mode 100644
index 00000000000..594ae77bfb0
--- /dev/null
+++ b/app/assets/javascripts/releases/components/tag_field_new.vue
@@ -0,0 +1,8 @@
+<script>
+export default {
+  name: 'TagFieldNew',
+};
+</script>
+<template>
+  <div></div>
+</template>
diff --git a/app/assets/javascripts/releases/stores/modules/detail/getters.js b/app/assets/javascripts/releases/stores/modules/detail/getters.js
index 84dc2fca4be..ffbbc756f39 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/getters.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/getters.js
@@ -2,6 +2,14 @@ import { isEmpty } from 'lodash';
 import { hasContent } from '~/lib/utils/text_utility';
 
 /**
+ * @returns {Boolean} `true` if the app is editing an existing release.
+ * `false` if the app is creating a new release.
+ */
+export const isExistingRelease = state => {
+  return Boolean(state.originalRelease);
+};
+
+/**
  * @param {Object} link The link to test
  * @returns {Boolean} `true` if the release link is empty, i.e. it has
  * empty (or whitespace-only) values for both `url` and `name`.
diff --git a/app/assets/javascripts/releases/stores/modules/detail/state.js b/app/assets/javascripts/releases/stores/modules/detail/state.js
index 966c1c00ef5..1e634992d05 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/state.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/state.js
@@ -19,7 +19,12 @@ export default ({
   manageMilestonesPath,
   newMilestonePath,
 
+  /**
+   * The name of the tag associated with the release, provided by the backend.
+   * When creating a new release, this value is null.
+   */
   tagName,
+
   releasesPagePath,
   defaultBranch,