@automattic/data-stores 3.1.2 → 3.2.1

package/src/agents-manager/persist-state.ts

@@ -0,0 +1,60 @@
+import { default as apiFetchPromise } from '@wordpress/api-fetch';
+import { default as wpcomRequestPromise, canAccessWpcomApis } from '../wpcom-request';
+import type { APIFetchOptions } from '../shared-types';
+
+/**
+ * The Agents Manager stores all its preferences in a single blob that the
+ * server read-modify-writes on every save. Two concurrent requests race on that
+ * blob (last writer wins), so one partial save can revert another — e.g. a
+ * trailing `router_history` write reverting `minimized`.
+ *
+ * To prevent that, we keep at most one request in flight and merge any saves
+ * that arrive meanwhile into a single follow-up request. Saves are
+ * fire-and-forget; callers don't await the result.
+ */
+let pending: Record< string, unknown > = {};
+let inFlight = false;
+
+function send( state: Record< string, unknown > ): Promise< unknown > {
+	if ( canAccessWpcomApis() ) {
+		return wpcomRequestPromise( {
+			path: '/agents-manager/state',
+			apiNamespace: 'wpcom/v2',
+			method: 'POST',
+			body: { state },
+		} );
+	}
+	return apiFetchPromise( {
+		global: true,
+		path: '/agents-manager/open-state',
+		method: 'PUT',
+		data: state,
+	} as APIFetchOptions );
+}
+
+function flush(): void {
+	if ( inFlight || Object.keys( pending ).length === 0 ) {
+		return;
+	}
+
+	const state = pending;
+	pending = {};
+	inFlight = true;
+
+	// Whatever the outcome, free the slot and send anything that accumulated
+	// while this request was in flight.
+	const done = () => {
+		inFlight = false;
+		flush();
+	};
+	send( state ).then( done, done );
+}
+
+/**
+ * Persist a partial Agents Manager state to the user's preferences.
+ * @param state - Object with the prefs to save (e.g. `{ agents_manager_minimized: false }`).
+ */
+export function persistAgentsManagerState( state: Record< string, unknown > ): void {
+	Object.assign( pending, state );
+	flush();
+}

package/src/agents-manager/reducer.ts

@@ -0,0 +1,106 @@
+import { combineReducers } from '@wordpress/data';
+import { PerSiteLastActivity, PerSiteRouterHistory } from './types';
+import type { AgentsManagerAction } from './actions';
+import type { Reducer } from 'redux';
+
+const isOpen: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_OPEN':
+			return action.isOpen;
+	}
+	return state;
+};
+
+const isDocked: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_DOCKED':
+			return action.isDocked;
+	}
+	return state;
+};
+
+export const isMinimized: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_MINIMIZED':
+			return action.isMinimized;
+	}
+	return state;
+};
+
+const routerHistory: Reducer< PerSiteRouterHistory | undefined, AgentsManagerAction > = (
+	state,
+	action
+) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_ROUTER_HISTORY':
+			return action.history;
+	}
+	return state;
+};
+
+const lastActivity: Reducer< PerSiteLastActivity | undefined, AgentsManagerAction > = (
+	state,
+	action
+) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_LAST_ACTIVITY':
+			return action.lastActivity;
+	}
+	return state;
+};
+
+const isLoading: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_LOADING':
+			return action.isLoading;
+	}
+	return state;
+};
+
+const hasLoaded: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_HAS_LOADED':
+			return action.hasLoaded;
+	}
+	return state;
+};
+
+const floatingPosition: Reducer< 'left' | 'right', AgentsManagerAction > = (
+	state = 'right',
+	action
+) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_FLOATING_POSITION':
+			return action.floatingPosition;
+	}
+	return state;
+};
+
+export const isSplitScreen: Reducer< boolean, AgentsManagerAction > = ( state = false, action ) => {
+	switch ( action.type ) {
+		case 'AGENTS_MANAGER_SET_SPLIT_SCREEN':
+			return action.isSplitScreen;
+		// Split-screen only makes sense while docked. Reset on undock so an
+		// out-of-band `setIsDocked(false)` (e.g. from `window.__agentsManagerActions`)
+		// can't leave a stale `true` that re-applies on the next dock.
+		case 'AGENTS_MANAGER_SET_DOCKED':
+			return action.isDocked ? state : false;
+	}
+	return state;
+};
+
+const reducer = combineReducers( {
+	isOpen,
+	isDocked,
+	isMinimized,
+	routerHistory,
+	lastActivity,
+	isLoading,
+	hasLoaded,
+	floatingPosition,
+	isSplitScreen,
+} );
+
+export type State = ReturnType< typeof reducer >;
+
+export default reducer;

package/src/agents-manager/resolvers.ts

@@ -0,0 +1,87 @@
+import { apiFetch } from '@wordpress/data-controls';
+import { canAccessWpcomApis } from '../wpcom-request';
+import { wpcomRequest } from '../wpcom-request-controls';
+import {
+	setRouterHistory,
+	setLastActivity,
+	setIsDocked,
+	setIsMinimized,
+	setIsOpen,
+	setIsLoading,
+	setHasLoaded,
+	setFloatingPosition,
+} from './actions';
+import type { PerSiteLastActivity, PerSiteRouterHistory } from './types';
+import type { APIFetchOptions } from '../shared-types';
+
+const VALID_SITE_KEY = /^\d+$|^no-site$/;
+
+/**
+ * Validate that the router history is in the expected per-site format,
+ * keyed by numeric site ID or 'no-site'.
+ */
+function isValidRouterHistory( value: unknown ): value is PerSiteRouterHistory {
+	return (
+		value !== null &&
+		typeof value === 'object' &&
+		Object.keys( value ).every( ( key ) => VALID_SITE_KEY.test( key ) )
+	);
+}
+
+type AgentsManagerStateResponse = {
+	agents_manager_open?: boolean;
+	agents_manager_docked?: boolean;
+	agents_manager_minimized?: boolean;
+	agents_manager_floating_position?: 'left' | 'right';
+	agents_manager_router_history?: PerSiteRouterHistory;
+	agents_manager_last_activity?: PerSiteLastActivity;
+};
+
+export function* getAgentsManagerState() {
+	yield setIsLoading( true );
+	try {
+		const state: AgentsManagerStateResponse = canAccessWpcomApis()
+			? yield wpcomRequest( {
+					path: '/agents-manager/state',
+					apiNamespace: 'wpcom/v2',
+			  } )
+			: yield apiFetch( {
+					global: true,
+					path: '/agents-manager/open-state',
+			  } as APIFetchOptions );
+
+		const activityMap = state.agents_manager_last_activity;
+		if ( activityMap ) {
+			yield setLastActivity( activityMap );
+		}
+
+		if ( isValidRouterHistory( state.agents_manager_router_history ) ) {
+			yield setRouterHistory( state.agents_manager_router_history );
+		}
+
+		if ( typeof state.agents_manager_docked === 'boolean' ) {
+			yield setIsDocked( state.agents_manager_docked, false );
+		}
+
+		if ( typeof state.agents_manager_minimized === 'boolean' ) {
+			yield setIsMinimized( state.agents_manager_minimized, false );
+		}
+
+		if (
+			state.agents_manager_floating_position === 'left' ||
+			state.agents_manager_floating_position === 'right'
+		) {
+			yield setFloatingPosition( state.agents_manager_floating_position, false );
+		}
+
+		// We only want to auto-open, we don't want to auto-close (and potentially overrule the user's action).
+		if ( state.agents_manager_open ) {
+			yield setIsOpen( true, false );
+		}
+	} catch {
+		// Ignore errors
+	} finally {
+		yield setIsLoading( false );
+		yield setHasLoaded( true );
+	}
+}

package/src/agents-manager/selectors.ts

@@ -0,0 +1,32 @@
+import type { State } from './reducer';
+
+export const getAgentsManagerState = ( state: State ) => ( {
+	isOpen: state.isOpen,
+	isDocked: state.isDocked,
+	isMinimized: state.isMinimized,
+	routerHistory: state.routerHistory,
+	lastActivity: state.lastActivity,
+	isLoading: state.isLoading,
+	hasLoaded: state.hasLoaded,
+	floatingPosition: state.floatingPosition,
+	isSplitScreen: state.isSplitScreen,
+} );
+export const getIsOpen = ( state: State ) => state.isOpen;
+export const getIsDocked = ( state: State ) => state.isDocked;
+export const getIsMinimized = ( state: State ) => state.isMinimized;
+export const getIsSplitScreen = ( state: State ) => state.isSplitScreen;
+export const getRouterHistory = ( state: State, siteKey: string ) => {
+	if ( ! state.routerHistory ) {
+		return undefined;
+	}
+	return state.routerHistory[ siteKey ];
+};
+export const getLastActivity = ( state: State, siteKey: string ) => {
+	if ( ! state.lastActivity ) {
+		return undefined;
+	}
+	return state.lastActivity[ siteKey ];
+};
+export const getIsLoading = ( state: State ) => state.isLoading;
+export const getHasLoaded = ( state: State ) => state.hasLoaded;
+export const getFloatingPosition = ( state: State ) => state.floatingPosition;

package/src/agents-manager/test/persist-state.test.ts

@@ -0,0 +1,81 @@
+import apiFetch from '@wordpress/api-fetch';
+import wpcomRequest, { canAccessWpcomApis } from '../../wpcom-request';
+import { persistAgentsManagerState } from '../persist-state';
+
+jest.mock( '@wordpress/api-fetch', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+} ) );
+
+jest.mock( '../../wpcom-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	canAccessWpcomApis: jest.fn(),
+} ) );
+
+const mockRequest = wpcomRequest as unknown as jest.Mock;
+const mockApiFetch = apiFetch as unknown as jest.Mock;
+const mockCanAccess = canAccessWpcomApis as unknown as jest.Mock;
+
+// Let the queued flush chain (microtasks) run to completion.
+const tick = () => new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+
+describe( 'persistAgentsManagerState', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockCanAccess.mockReturnValue( true );
+		mockRequest.mockResolvedValue( undefined );
+		mockApiFetch.mockResolvedValue( undefined );
+	} );
+
+	it( 'sends a single save as one wpcom request', async () => {
+		persistAgentsManagerState( { agents_manager_minimized: false } );
+
+		expect( mockRequest ).toHaveBeenCalledTimes( 1 );
+		expect( mockRequest ).toHaveBeenCalledWith(
+			expect.objectContaining( { body: { state: { agents_manager_minimized: false } } } )
+		);
+		await tick();
+	} );
+
+	it( 'coalesces saves that arrive mid-flight into one merged follow-up request', async () => {
+		let finishFirst: () => void = () => {};
+		mockRequest.mockReturnValueOnce(
+			new Promise< void >( ( resolve ) => ( finishFirst = resolve ) )
+		);
+
+		// First save goes out immediately and stays in flight.
+		persistAgentsManagerState( { agents_manager_router_history: 'a' } );
+		// These arrive while it's in flight — they must not race; they merge.
+		persistAgentsManagerState( { agents_manager_minimized: false } );
+		persistAgentsManagerState( { agents_manager_router_history: 'b' } );
+
+		expect( mockRequest ).toHaveBeenCalledTimes( 1 );
+
+		finishFirst();
+		await tick();
+
+		// One follow-up carrying the merged state (last value wins per key).
+		expect( mockRequest ).toHaveBeenCalledTimes( 2 );
+		expect( mockRequest ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				body: { state: { agents_manager_minimized: false, agents_manager_router_history: 'b' } },
+			} )
+		);
+	} );
+
+	it( 'falls back to apiFetch when wpcom APIs are unavailable', async () => {
+		mockCanAccess.mockReturnValue( false );
+
+		persistAgentsManagerState( { agents_manager_open: true } );
+
+		expect( mockRequest ).not.toHaveBeenCalled();
+		expect( mockApiFetch ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				path: '/agents-manager/open-state',
+				data: { agents_manager_open: true },
+			} )
+		);
+		await tick();
+	} );
+} );

package/src/agents-manager/test/reducer.test.ts

@@ -0,0 +1,69 @@
+import { isMinimized, isSplitScreen } from '../reducer';
+import { getIsMinimized, getIsSplitScreen } from '../selectors';
+import type { State } from '../reducer';
+
+const setSplit = ( isSplit: boolean ) =>
+	( { type: 'AGENTS_MANAGER_SET_SPLIT_SCREEN', isSplitScreen: isSplit } ) as const;
+
+const setMinimized = ( minimized: boolean ) =>
+	( { type: 'AGENTS_MANAGER_SET_MINIMIZED', isMinimized: minimized } ) as const;
+
+describe( 'isSplitScreen reducer slice', () => {
+	it( 'defaults to false', () => {
+		expect( isSplitScreen( undefined, { type: '@@INIT' } as never ) ).toBe( false );
+	} );
+
+	it( 'returns the action value on `AGENTS_MANAGER_SET_SPLIT_SCREEN`', () => {
+		expect( isSplitScreen( false, setSplit( true ) ) ).toBe( true );
+		expect( isSplitScreen( true, setSplit( false ) ) ).toBe( false );
+	} );
+
+	it( 'leaves state untouched on unrelated actions', () => {
+		expect(
+			isSplitScreen( true, { type: 'AGENTS_MANAGER_SET_OPEN', isOpen: false } as never )
+		).toBe( true );
+	} );
+
+	it( 'resets to false when the sidebar is undocked', () => {
+		const undock = { type: 'AGENTS_MANAGER_SET_DOCKED', isDocked: false } as never;
+		expect( isSplitScreen( true, undock ) ).toBe( false );
+	} );
+
+	it( 'preserves state when the sidebar is (re-)docked', () => {
+		const dock = { type: 'AGENTS_MANAGER_SET_DOCKED', isDocked: true } as never;
+		expect( isSplitScreen( true, dock ) ).toBe( true );
+		expect( isSplitScreen( false, dock ) ).toBe( false );
+	} );
+} );
+
+describe( 'getIsSplitScreen selector', () => {
+	it( 'returns the slice value', () => {
+		const state = { isSplitScreen: true } as State;
+		expect( getIsSplitScreen( state ) ).toBe( true );
+		expect( getIsSplitScreen( { isSplitScreen: false } as State ) ).toBe( false );
+	} );
+} );
+
+describe( 'isMinimized reducer slice', () => {
+	it( 'defaults to false', () => {
+		expect( isMinimized( undefined, { type: '@@INIT' } as never ) ).toBe( false );
+	} );
+
+	it( 'returns the action value on `AGENTS_MANAGER_SET_MINIMIZED`', () => {
+		expect( isMinimized( undefined, setMinimized( true ) ) ).toBe( true );
+		expect( isMinimized( true, setMinimized( false ) ) ).toBe( false );
+	} );
+
+	it( 'leaves state untouched on unrelated actions', () => {
+		expect( isMinimized( true, { type: 'AGENTS_MANAGER_SET_OPEN', isOpen: false } as never ) ).toBe(
+			true
+		);
+	} );
+} );
+
+describe( 'getIsMinimized selector', () => {
+	it( 'returns the slice value', () => {
+		expect( getIsMinimized( { isMinimized: true } as State ) ).toBe( true );
+		expect( getIsMinimized( { isMinimized: false } as State ) ).toBe( false );
+	} );
+} );

package/src/agents-manager/types.ts

@@ -0,0 +1,24 @@
+import { Location } from 'history';
+import * as actions from './actions';
+import * as selectors from './selectors';
+import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
+
+/**
+ * Minimal site data needed by AgentsManager.
+ */
+export interface AgentsManagerSite {
+	ID: number | string;
+	domain: string;
+}
+
+export type Dispatch = DispatchFromMap< typeof actions >;
+export type AgentsManagerSelect = SelectFromMap< typeof selectors >;
+
+export type SingleRouterHistory = {
+	entries: Location[];
+	index: number;
+};
+
+export type PerSiteRouterHistory = Record< string, SingleRouterHistory >;
+
+export type PerSiteLastActivity = Record< string, number >;

package/src/contextual-help/admin-sections.ts

@@ -127,7 +127,7 @@ export function generateAdminSections(
 		},
 		{
 			title: __( "View my site's latest stats" ),
-			link: `/stats/day/${ siteSlug }`,
+			link: `https://${ siteSlug }/wp-admin/admin.php?page=stats`,
 			synonyms: [ 'analytics' ],
 			icon: 'stats-alt',
 		},
@@ -150,7 +150,7 @@ export function generateAdminSections(
 				__(
 					"By upgrading to the %s plan, you'll be able to monetize your site through the WordAds program."
 				),
-				getPlan( PLAN_PREMIUM )?.getTitle()
+				String( getPlan( PLAN_PREMIUM )?.getTitle() ?? '' )
 			),
 			link: `/earn/${ siteSlug }`,
 			synonyms: [ 'monetize', 'wordads', 'premium', 'explorer' ],