Fix tag matching behavior on New Release page

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

@@ -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)"

changelogs/unreleased/nfriend-fix-substring-tag-on-release-page.yml

+---
+title: Fix tag matching behavior on New Release page
+merge_request: 60035
+author:
+type: fixed

spec/frontend/releases/components/tag_field_new_spec.js

@@ -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);
       });
     });