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