Commit 85cf2b2e authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'nfriend-fix-substring-tag-on-release-page' into 'master'

Fix tag matching behavior on New Release page

See merge request gitlab-org/gitlab!60035
parents 46f4fd2d 447b4c8c
......@@ -74,6 +74,21 @@ export default {
// we need to show the "create from" input.
this.showCreateFrom = true;
},
shouldShowCreateTagOption(isLoading, matches, query) {
// Show the "create tag" option if:
return (
// we're not currently loading any results, and
!isLoading &&
// the search query isn't just whitespace, and
query.trim() &&
// the `matches` object is non-null, and
matches &&
// the tag name doesn't already exist
!matches.tags.list.some(
(tagInfo) => tagInfo.name.toUpperCase() === query.toUpperCase().trim(),
)
);
},
},
translations: {
tagName: {
......@@ -111,7 +126,7 @@ export default {
>
<template #footer="{ isLoading, matches, query }">
<gl-dropdown-item
v-if="!isLoading && matches && matches.tags.totalCount === 0"
v-if="shouldShowCreateTagOption(isLoading, matches, query)"
is-check-item
:is-checked="tagName === query"
@click="createTagClicked(query)"
......
---
title: Fix tag matching behavior on New Release page
merge_request: 60035
author:
type: fixed
......@@ -10,29 +10,35 @@ const TEST_PROJECT_ID = '1234';
const TEST_CREATE_FROM = 'test-create-from';
const NONEXISTENT_TAG_NAME = 'nonexistent-tag';
// A mock version of the RefSelector component that simulates
// a scenario where the users has searched for "nonexistent-tag"
// and the component has found no tags that match.
const RefSelectorStub = Vue.component('RefSelectorStub', {
data() {
return {
footerSlotProps: {
isLoading: false,
matches: {
tags: { totalCount: 0 },
},
query: NONEXISTENT_TAG_NAME,
},
};
},
template: '<div><slot name="footer" v-bind="footerSlotProps"></slot></div>',
});
describe('releases/components/tag_field_new', () => {
let store;
let wrapper;
let RefSelectorStub;
const createComponent = (
mountFn = shallowMount,
{ searchQuery } = { searchQuery: NONEXISTENT_TAG_NAME },
) => {
// A mock version of the RefSelector component that just renders the
// #footer slot, so that the content inside this slot can be tested.
RefSelectorStub = Vue.component('RefSelectorStub', {
data() {
return {
footerSlotProps: {
isLoading: false,
matches: {
tags: {
totalCount: 1,
list: [{ name: TEST_TAG_NAME }],
},
},
query: searchQuery,
},
};
},
template: '<div><slot name="footer" v-bind="footerSlotProps"></slot></div>',
});
const createComponent = (mountFn = shallowMount) => {
wrapper = mountFn(TagFieldNew, {
store,
stubs: {
......@@ -84,8 +90,6 @@ describe('releases/components/tag_field_new', () => {
describe('when the user selects a new tag name', () => {
beforeEach(async () => {
findCreateNewTagOption().vm.$emit('click');
await wrapper.vm.$nextTick();
});
it("updates the store's release.tagName property", () => {
......@@ -102,8 +106,6 @@ describe('releases/components/tag_field_new', () => {
beforeEach(async () => {
findTagNameDropdown().vm.$emit('input', updatedTagName);
await wrapper.vm.$nextTick();
});
it("updates the store's release.tagName property", () => {
......@@ -116,6 +118,28 @@ describe('releases/components/tag_field_new', () => {
});
});
describe('"Create tag" option', () => {
describe('when the search query exactly matches one of the search results', () => {
beforeEach(async () => {
createComponent(mount, { searchQuery: TEST_TAG_NAME });
});
it('does not show the "Create tag" option', () => {
expect(findCreateNewTagOption().exists()).toBe(false);
});
});
describe('when the search query does not exactly match one of the search results', () => {
beforeEach(async () => {
createComponent(mount, { searchQuery: NONEXISTENT_TAG_NAME });
});
it('shows the "Create tag" option', () => {
expect(findCreateNewTagOption().exists()).toBe(true);
});
});
});
describe('validation', () => {
beforeEach(() => {
createComponent(mount);
......@@ -176,8 +200,6 @@ describe('releases/components/tag_field_new', () => {
const updatedCreateFrom = 'update-create-from';
findCreateFromDropdown().vm.$emit('input', updatedCreateFrom);
await wrapper.vm.$nextTick();
expect(store.state.editNew.createFrom).toBe(updatedCreateFrom);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment