Add latest changes from gitlab-org/gitlab@master

3 files changed, 16 insertions, 13 deletions

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index b3b3d5c88c6..06478a89721 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/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"
   >
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index cee7c40aa83..188aaee0c0d 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
index c31f3a25fb1..3f7a8920f48 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
+++ b/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"
   >