Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

1 files changed, 35 insertions, 62 deletions

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index 66ad5ef5b4e..4b9ad6d8f91 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -1,27 +1,22 @@
 <script>
-import {
-  GlFilteredSearchToken,
-  GlFilteredSearchSuggestion,
-  GlDropdownDivider,
-  GlLoadingIcon,
-} from '@gitlab/ui';
-import { debounce } from 'lodash';
-
+import { GlFilteredSearchSuggestion } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
-
-import { DEFAULT_MILESTONES, DEBOUNCE_DELAY } from '../constants';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import { DEFAULT_MILESTONES } from '../constants';
 import { stripQuotes } from '../filtered_search_utils';
 
 export default {
   components: {
-    GlFilteredSearchToken,
+    BaseToken,
     GlFilteredSearchSuggestion,
-    GlDropdownDivider,
-    GlLoadingIcon,
   },
   props: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
     config: {
       type: Object,
       required: true,
@@ -34,36 +29,21 @@ export default {
   data() {
     return {
       milestones: this.config.initialMilestones || [],
-      defaultMilestones: this.config.defaultMilestones || DEFAULT_MILESTONES,
       loading: false,
     };
   },
   computed: {
-    currentValue() {
-      return this.value.data.toLowerCase();
-    },
-    activeMilestone() {
-      return this.milestones.find(
-        (milestone) => milestone.title.toLowerCase() === stripQuotes(this.currentValue),
-      );
-    },
-  },
-  watch: {
-    active: {
-      immediate: true,
-      handler(newValue) {
-        if (!newValue && !this.milestones.length) {
-          this.fetchMilestoneBySearchTerm(this.value.data);
-        }
-      },
+    defaultMilestones() {
+      return this.config.defaultMilestones || DEFAULT_MILESTONES;
     },
   },
   methods: {
-    fetchMilestoneBySearchTerm(searchTerm = '') {
-      if (this.loading) {
-        return;
-      }
-
+    getActiveMilestone(milestones, data) {
+      return milestones.find(
+        (milestone) => milestone.title.toLowerCase() === stripQuotes(data).toLowerCase(),
+      );
+    },
+    fetchMilestones(searchTerm) {
       this.loading = true;
       this.config
         .fetchMilestones(searchTerm)
@@ -71,47 +51,40 @@ export default {
           const data = Array.isArray(response) ? response : response.data;
           this.milestones = data.slice().sort(sortMilestonesByDueDate);
         })
-        .catch(() => createFlash({ message: __('There was a problem fetching milestones.') }))
+        .catch(() => {
+          createFlash({ message: __('There was a problem fetching milestones.') });
+        })
         .finally(() => {
           this.loading = false;
         });
     },
-    searchMilestones: debounce(function debouncedSearch({ data }) {
-      this.fetchMilestoneBySearchTerm(data);
-    }, DEBOUNCE_DELAY),
   },
 };
 </script>
 
 <template>
-  <gl-filtered-search-token
+  <base-token
+    :active="active"
     :config="config"
-    v-bind="{ ...$props, ...$attrs }"
+    :value="value"
+    :default-suggestions="defaultMilestones"
+    :suggestions="milestones"
+    :suggestions-loading="loading"
+    :get-active-token-value="getActiveMilestone"
+    @fetch-suggestions="fetchMilestones"
     v-on="$listeners"
-    @input="searchMilestones"
   >
-    <template #view="{ inputValue }">
-      <span>%{{ activeMilestone ? activeMilestone.title : inputValue }}</span>
+    <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }">
+      %{{ activeTokenValue ? activeTokenValue.title : inputValue }}
     </template>
-    <template #suggestions>
+    <template #suggestions-list="{ suggestions }">
       <gl-filtered-search-suggestion
-        v-for="milestone in defaultMilestones"
-        :key="milestone.value"
-        :value="milestone.value"
+        v-for="milestone in suggestions"
+        :key="milestone.id"
+        :value="milestone.title"
       >
-        {{ milestone.text }}
+        {{ milestone.title }}
       </gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="defaultMilestones.length" />
-      <gl-loading-icon v-if="loading" size="sm" />
-      <template v-else>
-        <gl-filtered-search-suggestion
-          v-for="milestone in milestones"
-          :key="milestone.id"
-          :value="milestone.title"
-        >
-          <div>{{ milestone.title }}</div>
-        </gl-filtered-search-suggestion>
-      </template>
     </template>
-  </gl-filtered-search-token>
+  </base-token>
 </template>