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