diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/tag_field_new.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/tag_field_new.vue | 70 |
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> |