🐛 Fixed bookmark filtering in Welcome Emails editor

closes https://linear.app/ghost/issue/NY-1143

`useFilterableApi` filtered the response if data was already loaded, but
not if it wasn't. This fixes that bug, which fixes the end-user bug.

Author: EvanHahn

apps/admin-x-framework/src/hooks/use-filterable-api.ts

@@ -2,6 +2,16 @@ import {useRef} from 'react';
 import {apiUrl, useFetchApi} from '../utils/api/fetch-api';
 import {Meta} from '../utils/api/hooks';
 
+const filterData = <
+    Data extends {[k in FilterKey]: string},
+    FilterKey extends keyof Data
+>(data: Data[] = [], filterKey: FilterKey, input: string): Data[] => {
+    if (!data || !input) {
+        return data;
+    }
+    return data.filter(item => item[filterKey]?.toLowerCase().includes(input.toLowerCase()));
+};
+
 const escapeNqlString = (value: string) => {
     return '\'' + value.replace(/'/g, '\\\'') + '\'';
 };
@@ -26,7 +36,7 @@ const useFilterableApi = <
 
     const loadData = async (input: string) => {
         if ((result.current.allLoaded || result.current.lastInput === input) && result.current.data) {
-            return result.current.data.filter(item => item[filterKey]?.toLowerCase().includes(input.toLowerCase()));
+            return filterData(result.current.data, filterKey, input);
         }
 
         const response = await fetchApi<{meta?: Meta} & {[k in ResponseKey]: Data[]}>(apiUrl(path, {
@@ -38,7 +48,7 @@ const useFilterableApi = <
         result.current.allLoaded = !input && !response.meta?.pagination.next;
         result.current.lastInput = input;
 
-        return response[responseKey];
+        return filterData(response[responseKey], filterKey, input);
     };
 
     const loadInitialValues = async (values: string[], key: string) => {

apps/admin-x-framework/test/unit/hooks/use-filterable-api.test.ts

@@ -99,6 +99,36 @@ describe('useFilterableApi', () => {
         });
     });
 
+    it('filters unfiltered API responses for non-empty search input', async () => {
+        const mockData: TestData[] = [
+            {id: '1', name: 'John Doe', email: 'john@example.com'},
+            {id: '2', name: 'Jane Smith', email: 'jane@example.com'},
+            {id: '3', name: 'johnny Appleseed', email: 'johnny@example.com'}
+        ];
+
+        mockFetchApi.mockResolvedValueOnce({
+            users: mockData,
+            meta: {pagination: {next: null}}
+        });
+
+        const {result} = renderHook(() => useFilterableApi<TestData, 'users', 'name'>({
+            path: '/users',
+            filterKey: 'name',
+            responseKey: 'users'
+        }));
+
+        const data = await result.current.loadData('john');
+
+        expect(data).toEqual([
+            {id: '1', name: 'John Doe', email: 'john@example.com'},
+            {id: '3', name: 'johnny Appleseed', email: 'johnny@example.com'}
+        ]);
+        expect(mockApiUrl).toHaveBeenCalledWith('/users', {
+            filter: 'name:~\'john\'',
+            limit: '20'
+        });
+    });
+
     it('escapes single quotes in filter values', async () => {
         const mockData: TestData[] = [];
 
@@ -314,7 +344,7 @@ describe('useFilterableApi', () => {
         const firstResult = await result.current.loadData('');
         expect(firstResult).toEqual(mockData);
 
-        const secondResult = await result.current.loadData('test');
+        const secondResult = await result.current.loadData('john');
         expect(secondResult).toEqual(mockData);
     });
 
@@ -425,7 +455,9 @@ describe('useFilterableApi', () => {
 
         it('handles rapid filter changes correctly', async () => {
             const mockData: TestData[] = [
-                {id: '1', name: 'Test Result'}
+                {id: '1', name: 'test1'},
+                {id: '2', name: 'test2'},
+                {id: '3', name: 'test3'}
             ];
 
             mockFetchApi.mockResolvedValue({
@@ -444,12 +476,10 @@ describe('useFilterableApi', () => {
             const promise2 = result.current.loadData('test2');
             const promise3 = result.current.loadData('test3');
 
-            const results = await Promise.all([promise1, promise2, promise3]);
-
             // All calls should return data
-            results.forEach((resultItem) => {
-                expect(resultItem).toEqual(mockData);
-            });
+            await expect(promise1).resolves.toEqual([{id: '1', name: 'test1'}]);
+            await expect(promise2).resolves.toEqual([{id: '2', name: 'test2'}]);
+            await expect(promise3).resolves.toEqual([{id: '3', name: 'test3'}]);
         });
     });