@automattic/newspack-blocks 4.33.1 → 4.34.0-alpha.2

package/src/shared/js/author-fetch.js

@@ -0,0 +1,217 @@
+/**
+ * Shared author lookups for the editor.
+ *
+ * Every Author Profile block used to fetch its author with its own request, so a staff page
+ * with thirty blocks fired thirty requests at once and, on a site near its PHP worker limit,
+ * some were dropped. Lookups made within one short window are combined into a single call to
+ * the authors endpoint, results are shared between blocks and kept briefly, and identical
+ * suggestion-list requests are de-duplicated the same way.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+const ENDPOINT = '/newspack-blocks/v1/authors';
+
+// Blocks mount in bursts as the editor renders. This is long enough to catch a burst and
+// short enough to be invisible next to the request itself.
+const BATCH_WINDOW_MS = 50;
+
+// Most ids the endpoint resolves in one request. Larger batches are split to match, so a block
+// past the limit is not told its author does not exist.
+const MAX_BATCH_IDS = 100;
+
+// Long enough to cover a page load and block re-mounts, short enough that a profile edited in
+// another tab shows up on the next reload.
+const CACHE_TTL_MS = 60 * 1000;
+
+const cache = new Map();
+const pendingBatches = new Map();
+const inFlightLists = new Map();
+
+const authorKey = ( authorId, isGuestAuthor ) => `${ isGuestAuthor ? 'g' : 'u' }:${ authorId }`;
+
+const readCache = key => {
+	const hit = cache.get( key );
+	if ( ! hit ) {
+		return null;
+	}
+	if ( hit.expires < Date.now() ) {
+		cache.delete( key );
+		return null;
+	}
+	return hit;
+};
+
+const writeCache = ( key, value ) => cache.set( key, { expires: Date.now() + CACHE_TTL_MS, value } );
+
+/**
+ * Request a set of authors, giving a failed request one more try.
+ *
+ * A request dropped by a busy server is the failure this fetcher exists to soften, and a whole
+ * page of blocks now rides on each one, so a single failure should not blank every block.
+ *
+ * @param {Object} params Query params.
+ * @return {Promise<Array>} The author records.
+ */
+const requestAuthors = async params => {
+	const path = addQueryArgs( ENDPOINT, params );
+	try {
+		return await apiFetch( { path } );
+	} catch {
+		return apiFetch( { path } );
+	}
+};
+
+/**
+ * Resolve every caller covered by one request from its response.
+ *
+ * @param {string}  batchKey Key grouping lookups that share fields and avatar options.
+ * @param {Array}   entries  Queued lookups the request carries.
+ * @param {Promise} request  The request.
+ */
+const settleEntries = async ( batchKey, entries, request ) => {
+	try {
+		const authors = await request;
+		const byKey = new Map( ( authors || [] ).map( author => [ authorKey( author.id, author.is_guest ), author ] ) );
+		entries.forEach( entry => {
+			const key = authorKey( entry.authorId, entry.isGuestAuthor );
+			// A guest id that matched no guest author comes back as the WP user with that id.
+			const author = byKey.get( key ) || ( entry.isGuestAuthor ? byKey.get( authorKey( entry.authorId, false ) ) : undefined );
+			writeCache( `${ batchKey }|${ key }`, author );
+			entry.settlers.forEach( ( { resolve } ) => resolve( author ) );
+		} );
+	} catch ( error ) {
+		entries.forEach( entry => entry.settlers.forEach( ( { reject } ) => reject( error ) ) );
+	}
+};
+
+/**
+ * Send the lookups queued under a batch key, in as many requests as the endpoint's limit needs.
+ *
+ * @param {string} batchKey Key grouping lookups that share fields and avatar options.
+ */
+const flushBatch = batchKey => {
+	const batch = pendingBatches.get( batchKey );
+	pendingBatches.delete( batchKey );
+	if ( ! batch ) {
+		return;
+	}
+
+	const entries = Array.from( batch.entries.values() );
+	const userEntries = entries.filter( entry => ! entry.isGuestAuthor );
+	const guestEntries = entries.filter( entry => entry.isGuestAuthor );
+	const requests = Math.max( Math.ceil( userEntries.length / MAX_BATCH_IDS ), Math.ceil( guestEntries.length / MAX_BATCH_IDS ) );
+
+	for ( let i = 0; i < requests; i++ ) {
+		const users = userEntries.slice( i * MAX_BATCH_IDS, ( i + 1 ) * MAX_BATCH_IDS );
+		const guests = guestEntries.slice( i * MAX_BATCH_IDS, ( i + 1 ) * MAX_BATCH_IDS );
+		const params = { fields: batch.fields };
+		if ( batch.avatarHideDefault ) {
+			params.avatar_hide_default = 1;
+		}
+		if ( users.length ) {
+			params.author_ids = users.map( entry => entry.authorId ).join( ',' );
+		}
+		if ( guests.length ) {
+			params.guest_author_ids = guests.map( entry => entry.authorId ).join( ',' );
+		}
+		settleEntries( batchKey, [ ...users, ...guests ], requestAuthors( params ) );
+	}
+};
+
+/**
+ * Look up one author, sharing the request with every other lookup made in the same window.
+ *
+ * @param {Object}  options
+ * @param {number}  options.authorId          WP user ID, or guest author post ID.
+ * @param {boolean} options.isGuestAuthor     Whether the ID is a guest author.
+ * @param {string}  options.fields            Comma-separated fields to request.
+ * @param {boolean} options.avatarHideDefault Whether to hide the default avatar.
+ * @return {Promise<Object|undefined>} The author record, or undefined when none matched.
+ */
+export function fetchAuthorById( { authorId, isGuestAuthor = false, fields, avatarHideDefault = false } ) {
+	const id = parseInt( authorId, 10 );
+	const batchKey = `${ fields }|${ avatarHideDefault ? 1 : 0 }`;
+	const key = authorKey( id, !! isGuestAuthor );
+
+	const cached = readCache( `${ batchKey }|${ key }` );
+	if ( cached ) {
+		return Promise.resolve( cached.value );
+	}
+
+	let batch = pendingBatches.get( batchKey );
+	if ( ! batch ) {
+		batch = {
+			fields,
+			avatarHideDefault,
+			entries: new Map(),
+			timer: setTimeout( () => flushBatch( batchKey ), BATCH_WINDOW_MS ),
+		};
+		pendingBatches.set( batchKey, batch );
+	}
+
+	let entry = batch.entries.get( key );
+	if ( ! entry ) {
+		entry = { authorId: id, isGuestAuthor: !! isGuestAuthor, settlers: [] };
+		batch.entries.set( key, entry );
+	}
+
+	return new Promise( ( resolve, reject ) => entry.settlers.push( { resolve, reject } ) );
+}
+
+/**
+ * Fetch a page of author suggestions, sharing identical in-flight requests.
+ *
+ * @param {Object} options
+ * @param {string} options.search Search string.
+ * @param {number} options.offset Offset for pagination.
+ * @param {string} options.fields Comma-separated fields to request.
+ * @return {Promise<{authors: Array, total: number}>} Authors and the total reported by the endpoint.
+ */
+export function fetchAuthorList( { search, offset, fields = 'id,name' } = {} ) {
+	const params = { search: search || '', offset: offset || 0, fields };
+	const key = `list|${ params.search }|${ params.offset }|${ params.fields }`;
+	// Only the initial list is worth keeping: every empty block asks for it at once, while a typed
+	// search should see an author created or renamed a moment ago.
+	const keep = ! params.search && ! params.offset;
+
+	const cached = keep ? readCache( key ) : null;
+	if ( cached ) {
+		return Promise.resolve( cached.value );
+	}
+	if ( inFlightLists.has( key ) ) {
+		return inFlightLists.get( key );
+	}
+
+	// The request starts on the next tick, once it is recorded as in flight, so one that fails
+	// before it starts is still cleared instead of being handed to every later caller.
+	const request = Promise.resolve()
+		.then( () => apiFetch( { parse: false, path: addQueryArgs( ENDPOINT, params ) } ) )
+		.then( async response => {
+			const total = parseInt( response.headers.get( 'x-wp-total' ) || 0, 10 );
+			const authors = await response.json();
+			const result = { authors, total };
+			if ( keep ) {
+				writeCache( key, result );
+			}
+			return result;
+		} )
+		.finally( () => inFlightLists.delete( key ) );
+	inFlightLists.set( key, request );
+
+	return request;
+}
+
+/**
+ * Forget cached results and queued lookups. Intended for tests.
+ */
+export function resetAuthorFetchCache() {
+	cache.clear();
+	pendingBatches.forEach( batch => clearTimeout( batch.timer ) );
+	pendingBatches.clear();
+	inFlightLists.clear();
+}

package/src/shared/js/author-fetch.test.js

@@ -0,0 +1,230 @@
+import apiFetch from '@wordpress/api-fetch';
+import { getQueryArgs } from '@wordpress/url';
+
+import { fetchAuthorById, fetchAuthorList, resetAuthorFetchCache } from './author-fetch';
+
+jest.mock( '@wordpress/api-fetch', () => ( { __esModule: true, default: jest.fn() } ) );
+
+const FIELDS = 'id,name,bio';
+
+const user = ( id, name ) => ( { id, is_guest: false, name } );
+const guest = ( id, name ) => ( { id, is_guest: true, name } );
+
+/**
+ * Let the batching window elapse and the resulting promises settle.
+ */
+const flush = async () => {
+	await jest.advanceTimersByTimeAsync( 100 );
+};
+
+const argsOf = call => getQueryArgs( call[ 0 ].path );
+
+beforeEach( () => {
+	jest.useFakeTimers();
+	apiFetch.mockReset();
+	resetAuthorFetchCache();
+} );
+
+afterEach( () => {
+	jest.useRealTimers();
+} );
+
+describe( 'fetchAuthorById', () => {
+	it( 'coalesces lookups made in the same window into one request', async () => {
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ), user( 2, 'Two' ), guest( 5, 'Five' ) ] );
+
+		const lookups = Promise.all( [
+			fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } ),
+			fetchAuthorById( { authorId: 2, isGuestAuthor: false, fields: FIELDS } ),
+			fetchAuthorById( { authorId: 5, isGuestAuthor: true, fields: FIELDS } ),
+		] );
+		await flush();
+		await lookups;
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( argsOf( apiFetch.mock.calls[ 0 ] ) ).toEqual( {
+			author_ids: '1,2',
+			guest_author_ids: '5',
+			fields: FIELDS,
+		} );
+	} );
+
+	it( 'resolves each caller with its own author', async () => {
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ), guest( 1, 'Guest One' ) ] );
+
+		const lookups = Promise.all( [
+			fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } ),
+			fetchAuthorById( { authorId: 1, isGuestAuthor: true, fields: FIELDS } ),
+		] );
+		await flush();
+		const [ asUser, asGuest ] = await lookups;
+
+		expect( asUser ).toEqual( user( 1, 'One' ) );
+		expect( asGuest ).toEqual( guest( 1, 'Guest One' ) );
+	} );
+
+	it( 'resolves undefined for an author the endpoint did not return', async () => {
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ) ] );
+
+		const lookup = fetchAuthorById( { authorId: 404, isGuestAuthor: false, fields: FIELDS } );
+		await flush();
+
+		await expect( lookup ).resolves.toBeUndefined();
+	} );
+
+	it( 'keeps lookups with different fields or avatar options in separate requests', async () => {
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ) ] );
+
+		const lookups = Promise.all( [
+			fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } ),
+			fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: 'id,name' } ),
+			fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS, avatarHideDefault: true } ),
+		] );
+		await flush();
+		await lookups;
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 3 );
+		expect( argsOf( apiFetch.mock.calls[ 2 ] ) ).toMatchObject( { avatar_hide_default: '1' } );
+	} );
+
+	it( 'serves a repeated lookup from cache without a new request', async () => {
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ) ] );
+
+		const first = fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } );
+		await flush();
+		await first;
+
+		const second = fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } );
+		await flush();
+
+		await expect( second ).resolves.toEqual( user( 1, 'One' ) );
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'resolves a guest lookup with the WP user the endpoint fell back to', async () => {
+		apiFetch.mockResolvedValue( [ user( 7, 'Legacy' ) ] );
+
+		const lookup = fetchAuthorById( { authorId: 7, isGuestAuthor: true, fields: FIELDS } );
+		await flush();
+
+		await expect( lookup ).resolves.toEqual( user( 7, 'Legacy' ) );
+		expect( argsOf( apiFetch.mock.calls[ 0 ] ) ).toEqual( { guest_author_ids: '7', fields: FIELDS } );
+	} );
+
+	it( 'splits a batch larger than the endpoint limit into several requests', async () => {
+		apiFetch.mockResolvedValue( [] );
+
+		const lookups = Promise.all(
+			Array.from( { length: 101 }, ( _, i ) => fetchAuthorById( { authorId: i + 1, isGuestAuthor: false, fields: FIELDS } ) )
+		);
+		await flush();
+		await lookups;
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+		expect( argsOf( apiFetch.mock.calls[ 0 ] ).author_ids.split( ',' ) ).toHaveLength( 100 );
+		expect( argsOf( apiFetch.mock.calls[ 1 ] ).author_ids ).toBe( '101' );
+	} );
+
+	it( 'retries a failed request once before rejecting', async () => {
+		apiFetch.mockRejectedValueOnce( new Error( 'The response is not a valid JSON response.' ) ).mockResolvedValueOnce( [ user( 1, 'One' ) ] );
+
+		const lookup = fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } );
+		await flush();
+
+		await expect( lookup ).resolves.toEqual( user( 1, 'One' ) );
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'rejects every caller when the request keeps failing and tries again on the next lookup', async () => {
+		apiFetch.mockRejectedValue( new Error( 'The response is not a valid JSON response.' ) );
+
+		const first = fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } );
+		const second = fetchAuthorById( { authorId: 2, isGuestAuthor: false, fields: FIELDS } );
+		first.catch( () => {} );
+		second.catch( () => {} );
+		await flush();
+
+		await expect( first ).rejects.toThrow( 'not a valid JSON response' );
+		await expect( second ).rejects.toThrow( 'not a valid JSON response' );
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+
+		apiFetch.mockResolvedValue( [ user( 1, 'One' ) ] );
+		const retry = fetchAuthorById( { authorId: 1, isGuestAuthor: false, fields: FIELDS } );
+		await flush();
+
+		await expect( retry ).resolves.toEqual( user( 1, 'One' ) );
+		expect( apiFetch ).toHaveBeenCalledTimes( 3 );
+	} );
+} );
+
+describe( 'fetchAuthorList', () => {
+	const response = ( authors, total ) => ( {
+		headers: { get: header => ( header === 'x-wp-total' ? String( total ) : null ) },
+		json: async () => authors,
+	} );
+
+	it( 'returns the authors and the total from the response headers', async () => {
+		apiFetch.mockResolvedValue( response( [ user( 1, 'One' ) ], 42 ) );
+
+		await expect( fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } ) ).resolves.toEqual( {
+			authors: [ user( 1, 'One' ) ],
+			total: 42,
+		} );
+		expect( apiFetch.mock.calls[ 0 ][ 0 ] ).toMatchObject( { parse: false } );
+		expect( argsOf( apiFetch.mock.calls[ 0 ] ) ).toEqual( { search: '', offset: '0', fields: 'id,name' } );
+	} );
+
+	it( 'shares one request between identical concurrent lookups', async () => {
+		apiFetch.mockResolvedValue( response( [ user( 1, 'One' ) ], 1 ) );
+
+		const [ a, b ] = await Promise.all( [
+			fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } ),
+			fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } ),
+		] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( a ).toEqual( b );
+	} );
+
+	it( 'requests again when the search differs', async () => {
+		apiFetch.mockResolvedValue( response( [], 0 ) );
+
+		await fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } );
+		await fetchAuthorList( { search: 'jo', offset: 0, fields: 'id,name' } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'serves the initial list from cache once it has loaded', async () => {
+		apiFetch.mockResolvedValue( response( [ user( 1, 'One' ) ], 1 ) );
+
+		await fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } );
+		await fetchAuthorList( { search: '', offset: 0, fields: 'id,name' } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'does not keep a typed search after it settles', async () => {
+		apiFetch.mockResolvedValue( response( [], 0 ) );
+
+		await fetchAuthorList( { search: 'jo', offset: 0, fields: 'id,name' } );
+		await fetchAuthorList( { search: 'jo', offset: 0, fields: 'id,name' } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'does not keep a request that failed before it started', async () => {
+		apiFetch.mockImplementationOnce( () => {
+			throw new Error( 'boom' );
+		} );
+
+		await expect( fetchAuthorList( { search: 'jo', offset: 0, fields: 'id,name' } ) ).rejects.toThrow( 'boom' );
+
+		apiFetch.mockResolvedValue( response( [ user( 1, 'One' ) ], 1 ) );
+
+		await expect( fetchAuthorList( { search: 'jo', offset: 0, fields: 'id,name' } ) ).resolves.toEqual( {
+			authors: [ user( 1, 'One' ) ],
+			total: 1,
+		} );
+	} );
+} );

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => 'bb97d4c46864b3260f24b22690bb570eaf91e404',
+        'reference' => 'a27db19e71dc79f83fb88c77e58cde099da0b0a1',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => 'bb97d4c46864b3260f24b22690bb570eaf91e404',
+            'reference' => 'a27db19e71dc79f83fb88c77e58cde099da0b0a1',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),