Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <script> import { GlCollapsibleListbox, GlButton, GlSprintf } from '@gitlab/ui'; import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '../constants'; export default { name: 'AvailableAgentsDropdown', i18n: I18N_AVAILABLE_AGENTS_DROPDOWN, components: { GlCollapsibleListbox, GlButton, GlSprintf, }, props: { isRegistering: { required: true, type: Boolean, }, availableAgents: { required: true, type: Array, }, }, data() { return { selectedAgent: null, searchTerm: '', }; }, computed: { dropdownText() { Iif (this.isRegistering) { return this.$options.i18n.registeringAgent; } Iif (this.selectedAgent === null) { return this.$options.i18n.selectAgent; } 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.dropdownItems.filter((item) => item.value.toLowerCase().includes(lowerCasedSearchTerm), ); }, }, methods: { selectAgent(agent) { this.$emit('agentSelected', agent); this.selectedAgent = agent; }, onKeyEnter() { Iif (!this.searchTerm?.length) { return; } this.selectAgent(this.searchTerm); }, searchAgent(searchQuery) { this.searchTerm = searchQuery; }, }, }; </script> <template> <div @keydown.enter.stop.prevent="onKeyEnter"> <gl-collapsible-listbox 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" > <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> |