1 files changed, 26 insertions, 58 deletions
diff --git a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
index a037e721677..0ed154c47dd 100644
--- a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
+++ b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
@@ -1,12 +1,7 @@
 <script>
-import {
-  GlDropdown,
-  GlSearchBoxByType,
-  GlDropdownItem,
-  GlDropdownText,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { debounce } from 'lodash';
 import {
   I18N_NO_RESULTS_MESSAGE,
   I18N_BRANCH_HEADER,
@@ -16,11 +11,7 @@ import {
 export default {
   name: 'BranchesDropdown',
   components: {
-    GlDropdown,
-    GlSearchBoxByType,
-    GlDropdownItem,
-    GlDropdownText,
-    GlLoadingIcon,
+    GlCollapsibleListbox,
   },
   props: {
     value: {
@@ -46,19 +37,17 @@ export default {
   },
   computed: {
     ...mapGetters(['joinedBranches']),
-    ...mapState(['isFetching', 'branch', 'branches']),
-    filteredResults() {
-      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.joinedBranches.filter((resultString) =>
-        resultString.toLowerCase().includes(lowerCasedSearchTerm),
-      );
+    ...mapState(['isFetching']),
+    listboxItems() {
+      return this.joinedBranches.map((value) => ({ value, text: value }));
     },
   },
   watch: {
     // Parent component can set the branch value (e.g. when the user selects a different project)
     // and we need to keep the search term in sync with the selected value
     value(val) {
-      this.searchTermChanged(val);
+      this.searchTerm = val;
+      this.fetchBranches(this.searchTerm);
     },
   },
   mounted() {
@@ -67,50 +56,29 @@ export default {
   methods: {
     ...mapActions(['fetchBranches']),
     selectBranch(branch) {
-      this.$emit('selectBranch', branch);
-      this.searchTerm = branch; // enables isSelected to work as expected
-    },
-    isSelected(selectedBranch) {
-      return selectedBranch === this.branch;
+      this.$emit('input', branch);
     },
+    debouncedSearch: debounce(function debouncedSearch() {
+      this.fetchBranches(this.searchTerm);
+    }, 250),
     searchTermChanged(value) {
-      this.searchTerm = value;
-      this.fetchBranches(value);
+      this.searchTerm = value.trim();
+      this.debouncedSearch(value);
     },
   },
 };
 </script>
 <template>
-  <gl-dropdown :text="value" :header-text="$options.i18n.branchHeaderTitle">
-    <gl-search-box-by-type
-      :value="searchTerm"
-      trim
-      autocomplete="off"
-      :debounce="250"
-      :placeholder="$options.i18n.branchSearchPlaceholder"
-      data-testid="dropdown-search-box"
-      @input="searchTermChanged"
-    />
-    <gl-dropdown-item
-      v-for="branch in filteredResults"
-      v-show="!isFetching"
-      :key="branch"
-      :name="branch"
-      :is-checked="isSelected(branch)"
-      is-check-item
-      data-testid="dropdown-item"
-      @click="selectBranch(branch)"
-    >
-      {{ branch }}
-    </gl-dropdown-item>
-    <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-      <gl-loading-icon size="sm" class="gl-mx-auto" />
-    </gl-dropdown-text>
-    <gl-dropdown-text
-      v-if="!filteredResults.length && !isFetching"
-      data-testid="empty-result-message"
-    >
-      <span class="gl-text-gray-500">{{ $options.i18n.noResultsMessage }}</span>
-    </gl-dropdown-text>
-  </gl-dropdown>
+  <gl-collapsible-listbox
+    :header-text="$options.i18n.branchHeaderTitle"
+    :toggle-text="value"
+    :items="listboxItems"
+    searchable
+    :search-placeholder="$options.i18n.branchSearchPlaceholder"
+    :searching="isFetching"
+    :selected="value"
+    :no-results-text="$options.i18n.noResultsMessage"
+    @search="searchTermChanged"
+    @select="selectBranch"
+  />
 </template>