1 files changed, 40 insertions, 1 deletions
diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
index 2e2aa052dd8..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,17 +64,33 @@ export default {
       required: false,
       default: () => [],
     },
+    frequentItems: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
       searchText: '',
+      hasBeenOpened: false,
     };
   },
+  computed: {
+    showFrequentItems() {
+      return !this.searchText && this.frequentItems.length > 0;
+    },
+  },
   methods: {
     isSelected(selected) {
       return selected.id === this.selectedItem.id;
     },
     openDropdown() {
+      if (!this.hasBeenOpened) {
+        this.hasBeenOpened = true;
+        this.$emit('first-open');
+      }
+
       this.$emit('search', this.searchText);
     },
     resetDropdown() {
@@ -99,7 +118,7 @@ export default {
       <span class="dropdown-toggle-text gl-flex-grow-1 gl-text-truncate">
         {{ selectedItem[name] }}
       </span>
-      <gl-loading-icon v-if="loading" inline class="gl-mr-3" />
+      <gl-loading-icon v-if="loading" size="sm" inline class="gl-mr-3" />
       <gl-button
         v-if="!isSelected($options.ANY_OPTION)"
         v-gl-tooltip
@@ -133,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"
@@ -142,6 +180,7 @@ export default {
         :search-text="searchText"
         :name="name"
         :full-name="fullName"
+        data-testid="searchable-items"
         @change="updateDropdown"
       />
     </div>