From d70ad1ed819d4ae3dc054e2678aa650e4d4fa6ea Mon Sep 17 00:00:00 2001 From: Peter Hegman <phegman@gitlab.com> Date: Mon, 12 Dec 2022 23:34:59 -0800 Subject: [PATCH] Don't clear transfer locations dropdown search when selecting an item To prevent unnecessary API requests Changelog: performance --- .../components/transfer_locations.vue | 22 +++++++++++++------ spec/features/groups/group_settings_spec.rb | 2 +- .../components/transfer_locations_spec.js | 19 ++++++++++++++++ 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/groups_projects/components/transfer_locations.vue b/app/assets/javascripts/groups_projects/components/transfer_locations.vue index e0c8ce36e3c9deb8..eb791075898216c8 100644 --- a/app/assets/javascripts/groups_projects/components/transfer_locations.vue +++ b/app/assets/javascripts/groups_projects/components/transfer_locations.vue @@ -100,17 +100,23 @@ export default { return !this.isLoading && this.filteredAdditionalDropdownItems.length; }, }, - watch: { - searchTerm() { + methods: { + resetPagination() { this.page = 1; - + this.totalPages = 1; + }, + handleSearchBoxInput(searchTerm) { + this.searchTerm = searchTerm.trim(); this.debouncedSearch(); }, - }, - methods: { handleSelect(item) { - this.searchTerm = ''; this.$emit('input', item); + + if (this.searchTerm !== '') { + this.searchTerm = ''; + this.$options.initialTransferLocationsLoaded = false; + this.resetPagination(); + } }, async handleShow() { if (this.$options.initialTransferLocationsLoaded) { @@ -190,6 +196,7 @@ export default { this.isLoading = false; }, debouncedSearch: debounce(async function debouncedSearch() { + this.resetPagination(); this.isSearchLoading = true; this.groupTransferLocations = await this.getGroupTransferLocations(); @@ -230,9 +237,10 @@ export default { > <template #header> <gl-search-box-by-type - v-model.trim="searchTerm" + :value="searchTerm" :is-loading="isSearchLoading" data-qa-selector="namespaces_list_search" + @input="handleSearchBoxInput" /> </template> <template v-if="showAdditionalDropdownItems"> diff --git a/spec/features/groups/group_settings_spec.rb b/spec/features/groups/group_settings_spec.rb index fe1b0909c06e417a..d087400a7ec1aab1 100644 --- a/spec/features/groups/group_settings_spec.rb +++ b/spec/features/groups/group_settings_spec.rb @@ -147,7 +147,7 @@ selected_group.add_owner(user) end - it 'can successfully transfer the group', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/384966' do + it 'can successfully transfer the group' do visit edit_group_path(selected_group) page.within('[data-testid="transfer-locations-dropdown"]') do diff --git a/spec/frontend/groups_projects/components/transfer_locations_spec.js b/spec/frontend/groups_projects/components/transfer_locations_spec.js index 74424ee3230afc0d..2e84266972be4556 100644 --- a/spec/frontend/groups_projects/components/transfer_locations_spec.js +++ b/spec/frontend/groups_projects/components/transfer_locations_spec.js @@ -299,6 +299,25 @@ describe('TransferLocations', () => { expect(findDropdownItemByText(additionalDropdownItem.humanName).exists()).toBe(true); }); + + describe('when dropdown item is selected', () => { + it('clears search but does not call API until it is opened again', async () => { + await arrange(); + + getTransferLocations.mockClear(); + mockResolvedGetTransferLocations(); + + const [dropdownItemToClick] = transferLocationsResponseSearch; + + findDropdownItemByText(dropdownItemToClick.full_name).vm.$emit('click'); + + expect(getTransferLocations).not.toHaveBeenCalled(); + + await showDropdown(); + + expect(getTransferLocations).toHaveBeenCalled(); + }); + }); }); describe('when there are no more pages', () => { -- GitLab