1 files changed, 45 insertions, 58 deletions

diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
index bde76c46b4b..365e0384d87 100644
--- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
+++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue
@@ -1,23 +1,13 @@
 <script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-  GlDropdownText,
-  GlSearchBoxByType,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlCollapsibleListbox, GlButton, GlSprintf } from '@gitlab/ui';
 import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '../constants';
 
 export default {
   name: 'AvailableAgentsDropdown',
   i18n: I18N_AVAILABLE_AGENTS_DROPDOWN,
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownText,
-    GlSearchBoxByType,
+    GlCollapsibleListbox,
+    GlButton,
     GlSprintf,
   },
   props: {
@@ -46,13 +36,21 @@ export default {
 
       return this.selectedAgent;
     },
+    dropdownItems() {
+      return this.availableAgents.map((agent) => {
+        return {
+          value: agent,
+          text: agent,
+        };
+      });
+    },
     shouldRenderCreateButton() {
       return this.searchTerm && !this.availableAgents.includes(this.searchTerm);
     },
     filteredResults() {
       const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
-      return this.availableAgents.filter((resultString) =>
-        resultString.toLowerCase().includes(lowerCasedSearchTerm),
+      return this.dropdownItems.filter((item) =>
+        item.value.toLowerCase().includes(lowerCasedSearchTerm),
       );
     },
   },
@@ -60,59 +58,48 @@ export default {
     selectAgent(agent) {
       this.$emit('agentSelected', agent);
       this.selectedAgent = agent;
-      this.clearSearch();
-    },
-    isSelected(agent) {
-      return this.selectedAgent === agent;
-    },
-    clearSearch() {
-      this.searchTerm = '';
-    },
-    focusSearch() {
-      this.$refs.searchInput.focusInput();
-    },
-    handleShow() {
-      this.clearSearch();
-      this.focusSearch();
+
+      this.$refs.dropdown.closeAndFocus();
     },
     onKeyEnter() {
       if (!this.searchTerm?.length) {
         return;
       }
-      this.$refs.dropdown.hide();
       this.selectAgent(this.searchTerm);
     },
+    searchAgent(searchQuery) {
+      this.searchTerm = searchQuery;
+    },
   },
 };
 </script>
 <template>
-  <gl-dropdown ref="dropdown" :text="dropdownText" :loading="isRegistering" @shown="handleShow">
-    <template #header>
-      <gl-search-box-by-type
-        ref="searchInput"
-        v-model.trim="searchTerm"
-        @keydown.enter.stop.prevent="onKeyEnter"
-      />
-    </template>
-    <gl-dropdown-item
-      v-for="agent in filteredResults"
-      :key="agent"
-      :is-checked="isSelected(agent)"
-      is-check-item
-      @click="selectAgent(agent)"
+  <div @keydown.enter.stop.prevent="onKeyEnter">
+    <gl-collapsible-listbox
+      ref="dropdown"
+      v-model="selectedAgent"
+      class="gl-w-full"
+      toggle-class="select-agent-dropdown"
+      :items="filteredResults"
+      :toggle-text="dropdownText"
+      :loading="isRegistering"
+      :searchable="true"
+      :no-results-text="$options.i18n.noResults"
+      @search="searchAgent"
+      @select="selectAgent"
     >
-      {{ agent }}
-    </gl-dropdown-item>
-    <gl-dropdown-text v-if="!filteredResults.length" ref="noMatchingResults">{{
-      $options.i18n.noResults
-    }}</gl-dropdown-text>
-    <template v-if="shouldRenderCreateButton">
-      <gl-dropdown-divider />
-      <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)">
-        <gl-sprintf :message="$options.i18n.createButton">
-          <template #searchTerm>{{ searchTerm }}</template>
-        </gl-sprintf>
-      </gl-dropdown-item>
-    </template>
-  </gl-dropdown>
+      <template v-if="shouldRenderCreateButton" #footer>
+        <gl-button
+          category="tertiary"
+          class="gl-justify-content-start! gl-border-t-1! gl-border-t-solid gl-border-t-gray-200 gl-pl-7! gl-rounded-top-left-none! gl-rounded-top-right-none!"
+          :class="{ 'gl-mt-3': !filteredResults.length }"
+          @click="selectAgent(searchTerm)"
+        >
+          <gl-sprintf :message="$options.i18n.createButton">
+            <template #searchTerm>{{ searchTerm }}</template>
+          </gl-sprintf>
+        </gl-button>
+      </template>
+    </gl-collapsible-listbox>
+  </div>
 </template>