Merge branch 'hly-fix-autocomplete-overlapping-searches' into 'master'

Fix @ autocomplete when search requests overlap

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/153924



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: James Rushford <jrushford@gitlab.com>
Approved-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Costel Maxim <cmaxim@gitlab.com>
Co-authored-by: Heinrich Lee Yu <heinrich@gitlab.com>

app/assets/javascripts/gfm_auto_complete.js

@@ -155,6 +155,7 @@ class GfmAutoComplete {
     this.cachedData = {};
     this.isLoadingData = {};
     this.previousQuery = undefined;
+    this.currentBackendFilterRequestController = null;
   }
 
   setup(input, enableMap = defaultAutocompleteConfig) {
@@ -930,7 +931,7 @@ class GfmAutoComplete {
   }
 
   fetchData($input, at, search) {
-    if (this.isLoadingData[at]) return;
+    if (this.isLoadingData[at] && !GfmAutoComplete.isTypeWithBackendFiltering(at)) return;
 
     this.isLoadingData[at] = true;
     const dataSource = this.dataSources[GfmAutoComplete.atTypeMap[at]];
@@ -939,13 +940,25 @@ class GfmAutoComplete {
       if (this.cachedData[at]?.[search]) {
         this.loadData($input, at, this.cachedData[at][search], { search });
       } else {
+        if (this.currentBackendFilterRequestController) {
+          this.currentBackendFilterRequestController.abort();
+        }
+
+        this.currentBackendFilterRequestController = new AbortController();
+
         axios
-          .get(dataSource, { params: { search } })
+          .get(dataSource, {
+            params: { search },
+            signal: this.currentBackendFilterRequestController.signal,
+          })
           .then(({ data }) => {
             this.loadData($input, at, data, { search });
           })
           .catch(() => {
             this.isLoadingData[at] = false;
+          })
+          .finally(() => {
+            this.currentBackendFilterRequestController = null;
           });
       }
     } else if (this.cachedData[at]) {

spec/frontend/gfm_auto_complete_spec.js

@@ -188,22 +188,6 @@ describe('GfmAutoComplete', () => {
       mock.restore();
     });
 
-    describe('already loading data', () => {
-      beforeEach(() => {
-        const context = {
-          isLoadingData: { '[vulnerability:': true },
-          dataSources: {},
-          cachedData: {},
-        };
-        fetchData.call(context, {}, '[vulnerability:', '');
-      });
-
-      it('should not call either axios nor AjaxCache', () => {
-        expect(axios.get).not.toHaveBeenCalled();
-        expect(AjaxCache.retrieve).not.toHaveBeenCalled();
-      });
-    });
-
     describe('backend filtering', () => {
       describe('data is not in cache', () => {
         let context;
@@ -221,6 +205,26 @@ describe('GfmAutoComplete', () => {
 
           expect(axios.get).toHaveBeenCalledWith('vulnerabilities_autocomplete_url', {
             params: { search: 'query' },
+            signal: expect.any(AbortSignal),
+          });
+        });
+
+        it('should abort previous request and call axios again with another search query', () => {
+          const abortSpy = jest.spyOn(AbortController.prototype, 'abort');
+
+          fetchData.call(context, {}, '[vulnerability:', 'query');
+          fetchData.call(context, {}, '[vulnerability:', 'query2');
+
+          expect(axios.get).toHaveBeenCalledWith('vulnerabilities_autocomplete_url', {
+            params: { search: 'query' },
+            signal: expect.any(AbortSignal),
+          });
+
+          expect(abortSpy).toHaveBeenCalled();
+
+          expect(axios.get).toHaveBeenCalledWith('vulnerabilities_autocomplete_url', {
+            params: { search: 'query2' },
+            signal: expect.any(AbortSignal),
           });
         });