diff options
Diffstat (limited to 'app/assets/javascripts/search/topbar/components/searchable_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/search/topbar/components/searchable_dropdown.vue | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue index 488fee90fca..5653cddda60 100644 --- a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue +++ b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue @@ -2,6 +2,7 @@ import { GlDropdown, GlDropdownItem, + GlDropdownSectionHeader, GlSearchBoxByType, GlLoadingIcon, GlIcon, @@ -16,11 +17,13 @@ import SearchableDropdownItem from './searchable_dropdown_item.vue'; export default { i18n: { clearLabel: __('Clear'), + frequentlySearched: __('Frequently searched'), }, name: 'SearchableDropdown', components: { GlDropdown, GlDropdownItem, + GlDropdownSectionHeader, GlSearchBoxByType, GlLoadingIcon, GlIcon, @@ -61,6 +64,11 @@ export default { required: false, default: () => [], }, + frequentItems: { + type: Array, + required: false, + default: () => [], + }, }, data() { return { @@ -68,6 +76,11 @@ export default { hasBeenOpened: false, }; }, + computed: { + showFrequentItems() { + return !this.searchText && this.frequentItems.length > 0; + }, + }, methods: { isSelected(selected) { return selected.id === this.selectedItem.id; @@ -139,6 +152,25 @@ export default { <span data-testid="item-title">{{ $options.ANY_OPTION.name }}</span> </gl-dropdown-item> </div> + <div + v-if="showFrequentItems" + class="gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2 gl-mb-2" + > + <gl-dropdown-section-header>{{ + $options.i18n.frequentlySearched + }}</gl-dropdown-section-header> + <searchable-dropdown-item + v-for="item in frequentItems" + :key="item.id" + :item="item" + :selected-item="selectedItem" + :search-text="searchText" + :name="name" + :full-name="fullName" + data-testid="frequent-items" + @change="updateDropdown" + /> + </div> <div v-if="!loading"> <searchable-dropdown-item v-for="item in items" @@ -148,6 +180,7 @@ export default { :search-text="searchText" :name="name" :full-name="fullName" + data-testid="searchable-items" @change="updateDropdown" /> </div> |