Fix Epic and Label != filtered search suggestions not showing

Changelog: fixed

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue

@@ -76,6 +76,7 @@ export default {
   },
   data() {
     return {
+      hasFetched: false, // use this to avoid flash of `No suggestions found` before fetching
       searchKey: '',
       recentSuggestions: this.config.recentSuggestionsStorageKey
         ? getRecentlyUsedSuggestions(this.config.recentSuggestionsStorageKey) ?? []
@@ -86,6 +87,9 @@ export default {
     isRecentSuggestionsEnabled() {
       return Boolean(this.config.recentSuggestionsStorageKey);
     },
+    suggestionsEnabled() {
+      return !this.config.suggestionsDisabled;
+    },
     recentTokenIds() {
       return this.recentSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]);
     },
@@ -134,17 +138,6 @@ export default {
     showAvailableSuggestions() {
       return this.availableSuggestions.length > 0;
     },
-    showSuggestions() {
-      // These conditions must match the template under `#suggestions` slot
-      // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65817#note_632619411
-      return (
-        this.showDefaultSuggestions ||
-        this.showRecentSuggestions ||
-        this.showPreloadedSuggestions ||
-        this.suggestionsLoading ||
-        this.showAvailableSuggestions
-      );
-    },
     searchTerm() {
       return this.searchBy && this.activeTokenValue
         ? this.activeTokenValue[this.searchBy]
@@ -161,6 +154,13 @@ export default {
         }
       },
     },
+    suggestionsLoading: {
+      handler(loading) {
+        if (loading) {
+          this.hasFetched = true;
+        }
+      },
+    },
   },
   methods: {
     handleInput: debounce(function debouncedSearch({ data, operator }) {
@@ -216,7 +216,7 @@ export default {
     <template #view="viewTokenProps">
       <slot name="view" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot>
     </template>
-    <template v-if="showSuggestions" #suggestions>
+    <template v-if="suggestionsEnabled" #suggestions>
       <template v-if="showDefaultSuggestions">
         <gl-filtered-search-suggestion
           v-for="token in availableDefaultSuggestions"
@@ -238,12 +238,13 @@ export default {
         :suggestions="preloadedSuggestions"
       ></slot>
       <gl-loading-icon v-if="suggestionsLoading" size="sm" />
+      <template v-else-if="showAvailableSuggestions">
+        <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
+      </template>
       <gl-dropdown-text v-else-if="showNoMatchesText">
         {{ __('No matches found') }}
       </gl-dropdown-text>
-      <template v-else>
-        <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
-      </template>
+      <gl-dropdown-text v-else-if="hasFetched">{{ __('No suggestions found') }}</gl-dropdown-text>
     </template>
   </gl-filtered-search-token>
 </template>

ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue

@@ -150,6 +150,7 @@ export default {
           token: LabelToken,
           operators: OPERATOR_IS_ONLY,
           defaultLabels: [],
+          suggestionsDisabled: true,
           fetchLabels: () => {
             return Promise.resolve([]);
           },

ee/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap

@@ -124,6 +124,7 @@ Object {
           "value": "=",
         },
       ],
+      "suggestionsDisabled": true,
       "symbol": "~",
       "title": "Label",
       "token": "LabelTokenMock",

locale/gitlab.pot

@@ -25030,6 +25030,9 @@ msgstr ""
 msgid "No start date"
 msgstr ""
 
+msgid "No suggestions found"
+msgstr ""
+
 msgid "No tag selected"
 msgstr ""
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js

@@ -4,6 +4,7 @@ import {
   GlFilteredSearchSuggestion,
   GlDropdownSectionHeader,
   GlDropdownDivider,
+  GlDropdownText,
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
@@ -81,6 +82,7 @@ const mockProps = {
 
 function createComponent({
   props = {},
+  data = {},
   stubs = defaultStubs,
   slots = defaultSlots,
   scopedSlots = defaultScopedSlots,
@@ -100,6 +102,9 @@ function createComponent({
         unregister: jest.fn(),
       },
     },
+    data() {
+      return data;
+    },
     stubs,
     slots,
     scopedSlots,
@@ -168,6 +173,24 @@ describe('BaseToken', () => {
   });
 
   describe('suggestions', () => {
+    describe('with suggestions disabled', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          props: {
+            config: {
+              suggestionsDisabled: true,
+            },
+            suggestions: [{ id: 'Foo' }],
+          },
+          mountFn: shallowMountExtended,
+        });
+      });
+
+      it('does not render suggestions', () => {
+        expect(findMockSuggestionList().exists()).toBe(false);
+      });
+    });
+
     describe('with available suggestions', () => {
       let mockSuggestions;
 
@@ -306,6 +329,28 @@ describe('BaseToken', () => {
         });
       });
     });
+
+    describe('with no suggestions', () => {
+      it.each`
+        data                       | expected
+        ${{ searchKey: 'search' }} | ${'No matches found'}
+        ${{ hasFetched: true }}    | ${'No suggestions found'}
+      `('shows $expected text', ({ data, expected }) => {
+        wrapper = createComponent({
+          props: {
+            config: { recentSuggestionsStorageKey: null },
+            defaultSuggestions: [],
+            preloadedSuggestions: [],
+            suggestions: [],
+            suggestionsLoading: false,
+          },
+          data,
+          mountFn: shallowMountExtended,
+        });
+
+        expect(wrapper.findComponent(GlDropdownText).text()).toBe(expected);
+      });
+    });
   });
 
   describe('methods', () => {