Add some filtered search token improvements and fixes

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -302,6 +302,7 @@ export default {
           unique: true,
           defaultAuthors: [],
           fetchAuthors: this.fetchUsers,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-author`,
           preloadedAuthors,
         },
         {
@@ -313,6 +314,7 @@ export default {
           unique: !this.hasMultipleIssueAssigneesFeature,
           defaultAuthors: DEFAULT_NONE_ANY,
           fetchAuthors: this.fetchUsers,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-assignee`,
           preloadedAuthors,
         },
         {
@@ -321,6 +323,7 @@ export default {
           icon: 'clock',
           token: MilestoneToken,
           fetchMilestones: this.fetchMilestones,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-milestone`,
         },
         {
           type: TOKEN_TYPE_LABEL,
@@ -329,6 +332,7 @@ export default {
           token: LabelToken,
           defaultLabels: DEFAULT_NONE_ANY,
           fetchLabels: this.fetchLabels,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-label`,
         },
         {
           type: TOKEN_TYPE_TYPE,
@@ -350,6 +354,7 @@ export default {
           icon: 'rocket',
           token: ReleaseToken,
           fetchReleases: this.fetchReleases,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-release`,
         });
       }
 
@@ -361,6 +366,7 @@ export default {
           token: EmojiToken,
           unique: true,
           fetchEmojis: this.fetchEmojis,
+          recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-my_reaction`,
         });
 
         tokens.push({
@@ -446,7 +452,12 @@ export default {
           query: searchLabelsQuery,
           variables: { fullPath: this.fullPath, search, isProject: this.isProject },
         })
-        .then(({ data }) => data[this.namespace]?.labels.nodes);
+        .then(({ data }) => data[this.namespace]?.labels.nodes)
+        .then((labels) =>
+          // TODO remove once we can search by title-only on the backend
+          // https://gitlab.com/gitlab-org/gitlab/-/issues/346353
+          labels.filter((label) => label.title.toLowerCase().includes(search.toLowerCase())),
+        );
     },
     fetchMilestones(search) {
       return this.$apollo

app/assets/javascripts/runner/admin_runners/admin_runners_app.vue

@@ -116,7 +116,7 @@ export default {
         statusTokenConfig,
         {
           ...tagTokenConfig,
-          recentTokenValuesStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
+          recentSuggestionsStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
         },
       ];
     },

app/assets/javascripts/runner/components/search_tokens/tag_token.vue

@@ -68,7 +68,6 @@ export default {
     :config="config"
     :suggestions-loading="loading"
     :suggestions="tags"
-    :recent-suggestions-storage-key="config.recentTokenValuesStorageKey"
     @fetch-suggestions="fetchTags"
     v-on="$listeners"
   >

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

@@ -87,7 +87,6 @@ export default {
     :get-active-token-value="getActiveAuthor"
     :default-suggestions="defaultAuthors"
     :preloaded-suggestions="preloadedAuthors"
-    :recent-suggestions-storage-key="config.recentSuggestionsStorageKey"
     @fetch-suggestions="fetchAuthors"
     v-on="$listeners"
   >

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

@@ -4,6 +4,7 @@ import {
   GlFilteredSearchSuggestion,
   GlDropdownDivider,
   GlDropdownSectionHeader,
+  GlDropdownText,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -17,6 +18,7 @@ export default {
     GlFilteredSearchSuggestion,
     GlDropdownDivider,
     GlDropdownSectionHeader,
+    GlDropdownText,
     GlLoadingIcon,
   },
   props: {
@@ -57,11 +59,6 @@ export default {
       required: false,
       default: () => [],
     },
-    recentSuggestionsStorageKey: {
-      type: String,
-      required: false,
-      default: '',
-    },
     valueIdentifier: {
       type: String,
       required: false,
@@ -76,14 +73,14 @@ export default {
   data() {
     return {
       searchKey: '',
-      recentSuggestions: this.recentSuggestionsStorageKey
-        ? getRecentlyUsedSuggestions(this.recentSuggestionsStorageKey)
+      recentSuggestions: this.config.recentSuggestionsStorageKey
+        ? getRecentlyUsedSuggestions(this.config.recentSuggestionsStorageKey)
         : [],
     };
   },
   computed: {
     isRecentSuggestionsEnabled() {
-      return Boolean(this.recentSuggestionsStorageKey);
+      return Boolean(this.config.recentSuggestionsStorageKey);
     },
     recentTokenIds() {
       return this.recentSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]);
@@ -119,6 +116,9 @@ export default {
     showDefaultSuggestions() {
       return this.availableDefaultSuggestions.length > 0;
     },
+    showNoMatchesText() {
+      return this.searchKey && !this.availableSuggestions.length;
+    },
     showRecentSuggestions() {
       return (
         this.isRecentSuggestionsEnabled && this.recentSuggestions.length > 0 && !this.searchKey
@@ -167,7 +167,9 @@ export default {
         this.$emit('fetch-suggestions', search);
       }
     }, DEBOUNCE_DELAY),
-    handleTokenValueSelected(activeTokenValue) {
+    handleTokenValueSelected(selectedValue) {
+      const activeTokenValue = this.getActiveTokenValue(this.suggestions, selectedValue);
+
       // Make sure that;
       // 1. Recently used values feature is enabled
       // 2. User has actually selected a value
@@ -177,7 +179,7 @@ export default {
         activeTokenValue &&
         !this.preloadedTokenIds.includes(activeTokenValue[this.valueIdentifier])
       ) {
-        setTokenValueToRecentlyUsed(this.recentSuggestionsStorageKey, activeTokenValue);
+        setTokenValueToRecentlyUsed(this.config.recentSuggestionsStorageKey, activeTokenValue);
       }
     },
   },
@@ -192,7 +194,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
     @input="handleInput"
-    @select="handleTokenValueSelected(activeTokenValue)"
+    @select="handleTokenValueSelected"
   >
     <template #view-token="viewTokenProps">
       <slot name="view-token" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot>
@@ -222,6 +224,9 @@ export default {
         :suggestions="preloadedSuggestions"
       ></slot>
       <gl-loading-icon v-if="suggestionsLoading" size="sm" />
+      <gl-dropdown-text v-else-if="showNoMatchesText">
+        {{ __('No matches found') }}
+      </gl-dropdown-text>
       <template v-else>
         <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
       </template>

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

@@ -104,7 +104,6 @@ export default {
     :suggestions="labels"
     :get-active-token-value="getActiveLabel"
     :default-suggestions="defaultLabels"
-    :recent-suggestions-storage-key="config.recentSuggestionsStorageKey"
     @fetch-suggestions="fetchLabels"
     v-on="$listeners"
   >

ee/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue

@@ -107,7 +107,6 @@ export default {
     :suggestions="epics"
     :get-active-token-value="getActiveEpic"
     :default-suggestions="availableDefaultEpics"
-    :recent-suggestions-storage-key="config.recentSuggestionsStorageKey"
     search-by="title"
     @fetch-suggestions="fetchEpicsBySearchTerm"
     v-on="$listeners"

spec/frontend/runner/admin_runners/admin_runners_app_spec.js

@@ -147,7 +147,7 @@ describe('AdminRunnersApp', () => {
       }),
       expect.objectContaining({
         type: PARAM_KEY_TAG,
-        recentTokenValuesStorageKey: `${ADMIN_FILTERED_SEARCH_NAMESPACE}-recent-tags`,
+        recentSuggestionsStorageKey: `${ADMIN_FILTERED_SEARCH_NAMESPACE}-recent-tags`,
       }),
     ]);
   });

spec/frontend/runner/components/search_tokens/tag_token_spec.js

@@ -41,7 +41,7 @@ const mockTagTokenConfig = {
   title: 'Tags',
   type: 'tag',
   token: TagToken,
-  recentTokenValuesStorageKey: mockStorageKey,
+  recentSuggestionsStorageKey: mockStorageKey,
   operators: OPERATOR_IS_ONLY,
 };
 

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

@@ -46,13 +46,13 @@ const defaultSlots = {
 };
 
 const mockProps = {
-  config: mockLabelToken,
+  config: { ...mockLabelToken, recentSuggestionsStorageKey: mockStorageKey },
   value: { data: '' },
   active: false,
   suggestions: [],
   suggestionsLoading: false,
   defaultSuggestions: DEFAULT_NONE_ANY,
-  recentSuggestionsStorageKey: mockStorageKey,
+  getActiveTokenValue: (labels, data) => labels.find((label) => label.title === data),
 };
 
 function createComponent({
@@ -152,30 +152,22 @@ describe('BaseToken', () => {
 
   describe('methods', () => {
     describe('handleTokenValueSelected', () => {
-      it('calls `setTokenValueToRecentlyUsed` when `recentSuggestionsStorageKey` is defined', () => {
-        const mockTokenValue = {
-          id: 1,
-          title: 'Foo',
-        };
+      const mockTokenValue = mockLabels[0];
 
-        wrapper.vm.handleTokenValueSelected(mockTokenValue);
+      it('calls `setTokenValueToRecentlyUsed` when `recentSuggestionsStorageKey` is defined', () => {
+        wrapper.vm.handleTokenValueSelected(mockTokenValue.title);
 
         expect(setTokenValueToRecentlyUsed).toHaveBeenCalledWith(mockStorageKey, mockTokenValue);
       });
 
       it('does not add token from preloadedSuggestions', async () => {
-        const mockTokenValue = {
-          id: 1,
-          title: 'Foo',
-        };
-
         wrapper.setProps({
           preloadedSuggestions: [mockTokenValue],
         });
 
         await wrapper.vm.$nextTick();
 
-        wrapper.vm.handleTokenValueSelected(mockTokenValue);
+        wrapper.vm.handleTokenValueSelected(mockTokenValue.title);
 
         expect(setTokenValueToRecentlyUsed).not.toHaveBeenCalled();
       });
@@ -190,7 +182,7 @@ describe('BaseToken', () => {
       const glFilteredSearchToken = wrapperWithNoStubs.find(GlFilteredSearchToken);
 
       expect(glFilteredSearchToken.exists()).toBe(true);
-      expect(glFilteredSearchToken.props('config')).toBe(mockLabelToken);
+      expect(glFilteredSearchToken.props('config')).toEqual(mockProps.config);
 
       wrapperWithNoStubs.destroy();
     });