🐛 Fixed race condition in Unsplash search that causes mixed results (#24583)

fixes 24584

This PR fixes a race condition in the Unsplash search flow where results
from an intermediate search term (e.g., "germ") may appear alongside the
final term (e.g., "germany") when users pause briefly while typing.

---------

Co-authored-by: Steve Larson <9larsons@gmail.com>

Author: niranjan-uma-shankar

ghost/admin/app/services/unsplash.js

@@ -113,10 +113,16 @@ export default Service.extend({
         yield timeout(DEBOUNCE_MS);
 
         let url = `${API_URL}/search/photos?query=${term}&per_page=30`;
-        yield this._makeRequest(url);
+        yield this._makeRequest(url, {searchTermAtRequest: term});
     }).restartable(),
 
-    _addPhotosFromResponse(response) {
+    _addPhotosFromResponse(response, searchTermAtRequest) {
+        // If a search term was provided at the time of the request,
+        // we only want to add photos if the search term matches the current one.
+        if (searchTermAtRequest && searchTermAtRequest !== this.searchTerm) {
+            return;
+        }
+
         let photos = response.results || response;
 
         photos.forEach(photo => this._addPhoto(photo));
@@ -189,9 +195,9 @@ export default Service.extend({
 
         return fetch(url, {headers})
             .then(response => this._checkStatus(response))
-            .then(response => this._extractPagination(response))
+            .then(response => this._extractPagination(response, options.searchTermAtRequest))
             .then(response => response.json())
-            .then(response => this._addPhotosFromResponse(response))
+            .then(response => this._addPhotosFromResponse(response, options.searchTermAtRequest))
             .catch(() => {
                 // if the error text isn't already set then we've get a connection error from `fetch`
                 if (!options.ignoreErrors && !this.error) {
@@ -233,7 +239,11 @@ export default Service.extend({
         });
     },
 
-    _extractPagination(response) {
+    _extractPagination(response, searchTermAtRequest) {
+        if (searchTermAtRequest && searchTermAtRequest !== this.searchTerm) {
+            return response;
+        }
+
         let pagination = {};
         let linkRegex = new RegExp('<(.*)>; rel="(.*)"');
         let {link: links} = response.headers.map;

ghost/admin/tests/unit/services/unsplash-test.js

@@ -27,6 +27,49 @@ describe('Unit: Service: unsplash', function () {
         it('can load next page of search results');
         it('clears photos when starting new search');
         it('loads new when query is cleared');
+
+        it('discards responses that no longer match the current search term', async function () {
+            server.get('https://api.unsplash.com/photos', function () {
+                return [200, {'Content-Type': 'application/json'}, JSON.stringify([])];
+            });
+            server.get('https://api.unsplash.com/search/photos', function () {
+                return [200, {
+                    'Content-Type': 'application/json',
+                    Link: '<https://api.unsplash.com/search/photos?query=cat&page=2>; rel="next"'
+                }, JSON.stringify({results: [{id: 'cat-photo', width: 100, height: 100}]})];
+            });
+
+            let service = this.owner.lookup('service:unsplash');
+            await settled();
+
+            // response for "cat" arrives after the term has changed to "dog"
+            service.set('searchTerm', 'dog');
+            await service._makeRequest('https://api.unsplash.com/search/photos?query=cat', {searchTermAtRequest: 'cat'});
+
+            expect(service.photos.length).to.equal(0);
+            expect(service._pagination.next).to.not.exist;
+        });
+
+        it('adds photos and pagination when the response matches the current search term', async function () {
+            server.get('https://api.unsplash.com/photos', function () {
+                return [200, {'Content-Type': 'application/json'}, JSON.stringify([])];
+            });
+            server.get('https://api.unsplash.com/search/photos', function () {
+                return [200, {
+                    'Content-Type': 'application/json',
+                    Link: '<https://api.unsplash.com/search/photos?query=cat&page=2>; rel="next"'
+                }, JSON.stringify({results: [{id: 'cat-photo', width: 100, height: 100}]})];
+            });
+
+            let service = this.owner.lookup('service:unsplash');
+            await settled();
+
+            service.set('searchTerm', 'cat');
+            await service._makeRequest('https://api.unsplash.com/search/photos?query=cat', {searchTermAtRequest: 'cat'});
+
+            expect(service.photos.length).to.equal(1);
+            expect(service._pagination.next).to.exist;
+        });
     });
 
     describe('columns', function () {