1 files changed, 59 insertions, 11 deletions

diff --git a/app/assets/javascripts/releases/components/tag_field_new.vue b/app/assets/javascripts/releases/components/tag_field_new.vue
index 660fd7ac950..21360a5c6cb 100644
--- a/app/assets/javascripts/releases/components/tag_field_new.vue
+++ b/app/assets/javascripts/releases/components/tag_field_new.vue
@@ -1,20 +1,29 @@
 <script>
-import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlFormGroup, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { __ } from '~/locale';
 import RefSelector from '~/ref/components/ref_selector.vue';
+import { REF_TYPE_TAGS } from '~/ref/constants';
 import FormFieldContainer from './form_field_container.vue';
 
 export default {
   name: 'TagFieldNew',
-  components: { GlFormGroup, GlFormInput, RefSelector, FormFieldContainer },
+  components: {
+    GlFormGroup,
+    RefSelector,
+    FormFieldContainer,
+    GlDropdownItem,
+    GlSprintf,
+  },
   data() {
     return {
       // Keeps track of whether or not the user has interacted with
       // the input field. This is used to avoid showing validation
       // errors immediately when the page loads.
       isInputDirty: false,
+
+      showCreateFrom: true,
     };
   },
   computed: {
@@ -26,6 +35,12 @@ export default {
       },
       set(tagName) {
         this.updateReleaseTagName(tagName);
+
+        // This setter is used by the `v-model` on the `RefSelector`.
+        // When this is called, the selection originated from the
+        // dropdown list of existing tag names, so we know the tag
+        // already exists and don't need to show the "create from" input
+        this.showCreateFrom = false;
       },
     },
     createFromModel: {
@@ -51,12 +66,28 @@ export default {
     markInputAsDirty() {
       this.isInputDirty = true;
     },
+    createTagClicked(newTagName) {
+      this.updateReleaseTagName(newTagName);
+
+      // This method is called when the user selects the "create tag"
+      // option, so the tag does not already exist. Because of this,
+      // we need to show the "create from" input.
+      this.showCreateFrom = true;
+    },
   },
   translations: {
-    noRefSelected: __('No source selected'),
-    searchPlaceholder: __('Search branches, tags, and commits'),
-    dropdownHeader: __('Select source'),
+    tagName: {
+      noRefSelected: __('No tag selected'),
+      dropdownHeader: __('Tag name'),
+      searchPlaceholder: __('Search or create tag'),
+    },
+    createFrom: {
+      noRefSelected: __('No source selected'),
+      searchPlaceholder: __('Search branches, tags, and commits'),
+      dropdownHeader: __('Select source'),
+    },
   },
+  tagNameEnabledRefTypes: [REF_TYPE_TAGS],
 };
 </script>
 <template>
@@ -69,17 +100,34 @@ export default {
       :invalid-feedback="__('Tag name is required')"
     >
       <form-field-container>
-        <gl-form-input
+        <ref-selector
           :id="tagNameInputId"
           v-model="tagName"
+          :project-id="projectId"
+          :translations="$options.translations.tagName"
+          :enabled-ref-types="$options.tagNameEnabledRefTypes"
           :state="!showTagNameValidationError"
-          type="text"
-          class="form-control"
-          @blur.once="markInputAsDirty"
-        />
+          @hide.once="markInputAsDirty"
+        >
+          <template #footer="{ isLoading, matches, query }">
+            <gl-dropdown-item
+              v-if="!isLoading && matches && matches.tags.totalCount === 0"
+              is-check-item
+              :is-checked="tagName === query"
+              @click="createTagClicked(query)"
+            >
+              <gl-sprintf :message="__('Create tag %{tagName}')">
+                <template #tagName>
+                  <b>{{ query }}</b>
+                </template>
+              </gl-sprintf>
+            </gl-dropdown-item>
+          </template>
+        </ref-selector>
       </form-field-container>
     </gl-form-group>
     <gl-form-group
+      v-if="showCreateFrom"
       :label="__('Create from')"
       :label-for="createFromSelectorId"
       data-testid="create-from-field"
@@ -89,7 +137,7 @@ export default {
           :id="createFromSelectorId"
           v-model="createFromModel"
           :project-id="projectId"
-          :translations="$options.translations"
+          :translations="$options.translations.createFrom"
         />
       </form-field-container>
       <template #description>