Merge branch 'next-38358/auto-imported-from-github' into 'trunk'

NEXT-38358 - Allow admin-search to get aborted by new request

See merge request shopware/6/product/platform!14801

Author: shyim

changelog/_unreleased/2024-09-06-allow-abort-adminsearch.md

@@ -0,0 +1,10 @@
+---
+title: Allow admin-search to get aborted by new request
+issue: NEXT-38358
+author: Benjamin Wittwer
+author_email: benjamin.wittwer@a-k-f.de
+author_github: akf-bw
+---
+# Administration
+* Changed `elastic` function in `search.api.service` to abort the previous search on function call
+* Changed `searchQuery` function in `search.api.service` to abort the previous search on function call

src/Administration/Resources/app/administration/src/core/factory/http.factory.js

@@ -330,7 +330,7 @@ function storeSessionExpiredInterceptor(client) {
             'FRAMEWORK__STORE_SHOP_SECRET_INVALID',
         ];
 
-        if (response.status === 403 && errorCodes.includes(code)) {
+        if (response?.status === 403 && errorCodes.includes(code)) {
             if (typeof config.storeSessionRequestRetries === 'number') {
                 config.storeSessionRequestRetries += 1;
             } else {

src/Administration/Resources/app/administration/src/core/service/api/search.api.service.js

@@ -1,11 +1,14 @@
+import { CanceledError } from 'axios';
 import ApiService from '../api.service';
 
 /**
- * Gateway for the API end point 'product'
+ * Gateway for the API end point 'search'
  * @class
  * @extends ApiService
  */
 class SearchApiService extends ApiService {
+    searchAbortController = null;
+
     constructor(httpClient, loginService, apiEndpoint = '_admin') {
         super(httpClient, loginService, apiEndpoint);
         this.name = 'searchService';
@@ -14,10 +17,25 @@ class SearchApiService extends ApiService {
     elastic(term, entities, limit, additionalHeaders = {}) {
         const headers = this.getBasicHeaders(additionalHeaders);
 
+        if (this.searchAbortController && !this.searchAbortController.signal.aborted) {
+            this.searchAbortController.abort();
+        }
+
+        this.searchAbortController = new AbortController();
+
         return this.httpClient
-            .post(`${this.getApiBasePath()}/es-search`, { term, limit, entities }, { headers })
+            .post(`${this.getApiBasePath()}/es-search`, { term, limit, entities }, {
+                headers,
+                signal: this.searchAbortController.signal,
+            })
             .then((response) => {
                 return ApiService.handleResponse(response);
+            })
+            .catch((error) => {
+                if (error instanceof CanceledError) {
+                    return {};
+                }
+                throw error;
             });
     }
 
@@ -35,10 +53,25 @@ class SearchApiService extends ApiService {
             }
         });
 
+        if (this.searchAbortController && !this.searchAbortController.signal.aborted) {
+            this.searchAbortController.abort();
+        }
+
+        this.searchAbortController = new AbortController();
+
         return this.httpClient
-            .post(`${this.getApiBasePath()}/search`, queries, { headers })
+            .post(`${this.getApiBasePath()}/search`, queries, {
+                headers,
+                signal: this.searchAbortController.signal,
+            })
             .then((response) => {
                 return ApiService.handleResponse(response);
+            })
+            .catch((error) => {
+                if (error instanceof CanceledError) {
+                    return {};
+                }
+                throw error;
             });
     }
 }

src/Administration/Resources/app/administration/src/core/service/api/search.api.service.spec.js

@@ -0,0 +1,65 @@
+import createLoginService from 'src/core/service/login.service';
+import createHTTPClient from 'src/core/factory/http.factory';
+import MockAdapter from 'axios-mock-adapter';
+import SearchApiService from './search.api.service';
+
+function getSearchApiService() {
+    const client = createHTTPClient();
+    const clientMock = new MockAdapter(client);
+    const loginService = createLoginService(client, Shopware.Context.api);
+
+    const searchApiService = new SearchApiService(client, loginService);
+    return { searchApiService, clientMock };
+}
+
+describe('searchApiService', () => {
+    it('is registered correctly', async () => {
+        const { searchApiService } = getSearchApiService();
+        expect(searchApiService).toBeInstanceOf(SearchApiService);
+    });
+
+    it('is request elastic send correctly', async () => {
+        const { searchApiService, clientMock } = getSearchApiService();
+
+        clientMock.onPost('/_admin/es-search')
+            .reply(
+                200,
+                { data: 'foo' },
+            );
+
+        const response = await searchApiService.elastic('bar', [], 10);
+
+        expect(response.data).toBe('foo');
+    });
+
+    it('is request searchQuery send correctly', async () => {
+        const { searchApiService, clientMock } = getSearchApiService();
+
+        clientMock.onPost('/_admin/search')
+            .reply(
+                200,
+                { data: 'foo' },
+            );
+
+        const response = await searchApiService.searchQuery({});
+
+        expect(response.data).toBe('foo');
+    });
+
+    it('is request aborted correctly', async () => {
+        const { searchApiService, clientMock } = getSearchApiService();
+
+        clientMock.onPost('/_admin/search')
+            .reply(
+                200,
+                { data: 'foo' },
+            );
+
+        const response = searchApiService.searchQuery({});
+        searchApiService.searchAbortController.abort();
+
+        expect(await response).toEqual({});
+        expect(searchApiService.searchAbortController).toBeInstanceOf(AbortController);
+        expect(searchApiService.searchAbortController.signal.aborted).toBeTruthy();
+    });
+});

src/Administration/Resources/app/administration/src/meta/baseline.ts

@@ -214,7 +214,6 @@ const missingTests = [
     'src/core/service/api/recommendations.api.service.js',
     'src/core/service/api/sales-channel.api.service.js',
     'src/core/service/api/scheduled-task.api.service.ts',
-    'src/core/service/api/search.api.service.js',
     'src/core/service/api/seo-url-template.api.service.js',
     'src/core/service/api/seo-url.api.service.js',
     'src/core/service/api/snippet-set.api.service.js',