wpcom-proxy-request: Return Promise if no callback specified (Take 3) (…

…#39825)

* Revert "Revert "wpcom-proxy-request: Return Promise if no callback specified (Take Two) (#39722)" (#39823)"

This reverts commit 1753cb9.

* Update type location

* Update imports

* Fix tests to use wpcom-proxy-request

.dockerignore

@@ -21,4 +21,3 @@ Dockerfile
 /apps/*/dist/
 /apps/*/types/
 /packages/*/dist/
-/packages/*/types/

.gitignore

@@ -64,6 +64,3 @@ cached-requests.json
 /apps/*/dist/
 /apps/*/types/
 /packages/*/dist/
-# Redundant after https://github.com/Automattic/wp-calypso/pull/39173
-# Safe to remove after some time has passed
-/packages/*/types/

packages/data-stores/src/auth/controls.ts

@@ -3,15 +3,19 @@
  */
 import { createRegistryControl } from '@wordpress/data';
 import { stringify } from 'qs';
+import wpcomRequest, { requestAllBlogsAccess } from 'wpcom-proxy-request';
 
 /**
  * Internal dependencies
  */
-import { wpcomRequest, WpcomClientCredentials } from '../utils';
 import { FetchAuthOptionsAction, FetchWpLoginAction } from './actions';
 import { STORE_KEY } from './constants';
+import { WpcomClientCredentials } from '../shared-types';
 
 export function createControls( clientCreds: WpcomClientCredentials ) {
+	requestAllBlogsAccess().catch( () => {
+		throw new Error( 'Could not get all blog access.' );
+	} );
 	return {
 		SELECT_USERNAME_OR_EMAIL: createRegistryControl( registry => () => {
 			return registry.select( STORE_KEY ).getUsernameOrEmail();

packages/data-stores/src/auth/index.ts

@@ -12,7 +12,7 @@ import * as actions from './actions';
 import { createControls } from './controls';
 import * as selectors from './selectors';
 import { DispatchFromMap, SelectFromMap } from '../mapped-types';
-import { WpcomClientCredentials } from '../utils';
+import { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
 export { State };

packages/data-stores/src/auth/test/controls.ts

@@ -6,18 +6,22 @@
  * @jest-environment jsdom
  */
 
+/**
+ * External dependencies
+ */
+import wpcomRequest from 'wpcom-proxy-request';
+
 /**
  * Internal dependencies
  */
-import { wpcomRequest as wpcomRequestOriginal } from '../../utils';
 import { createControls } from '../controls';
 
-jest.mock( '../../utils', () => ( {
-	wpcomRequest: jest.fn(),
+jest.mock( 'wpcom-proxy-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	requestAllBlogsAccess: jest.fn( () => Promise.resolve() ),
 } ) );
 
-const wpcomRequest: jest.Mock = wpcomRequestOriginal as any;
-
 const { FETCH_AUTH_OPTIONS } = createControls( { client_id: '', client_secret: '' } );
 
 describe( 'FETCH_AUTH_OPTIONS', () => {
@@ -26,7 +30,7 @@ describe( 'FETCH_AUTH_OPTIONS', () => {
 			success: true,
 			data: { token_links: [] },
 		};
-		wpcomRequest.mockResolvedValue( apiResponse );
+		( wpcomRequest as jest.Mock ).mockResolvedValue( apiResponse );
 
 		const result = await FETCH_AUTH_OPTIONS( {
 			type: 'FETCH_AUTH_OPTIONS',

packages/data-stores/src/auth/test/flows.ts

@@ -11,18 +11,19 @@
  */
 import { dispatch, select } from '@wordpress/data';
 import { parse } from 'qs';
+import wpcomRequest from 'wpcom-proxy-request';
 
 /**
  * Internal dependencies
  */
 import { register } from '..';
-import { wpcomRequest as wpcomRequestOriginal } from '../../utils';
 
-jest.mock( '../../utils', () => ( {
-	wpcomRequest: jest.fn(),
+jest.mock( 'wpcom-proxy-request', () => ( {
+	__esModule: true,
+	default: jest.fn(),
+	requestAllBlogsAccess: jest.fn( () => Promise.resolve() ),
 } ) );
 
-const wpcomRequest: jest.Mock = wpcomRequestOriginal as any;
 const fetch = jest.fn();
 
 beforeAll( () => {
@@ -34,7 +35,7 @@ beforeEach( () => {
 	store = register( { client_id: '', client_secret: '' } );
 
 	fetch.mockReset();
-	wpcomRequest.mockReset();
+	( wpcomRequest as jest.Mock ).mockReset();
 } );
 
 describe( 'password login flow', () => {
@@ -44,7 +45,10 @@ describe( 'password login flow', () => {
 
 		expect( getLoginFlowState() ).toBe( 'ENTER_USERNAME_OR_EMAIL' );
 
-		wpcomRequest.mockResolvedValue( { email_verified: true, passwordless: false } );
+		( wpcomRequest as jest.Mock ).mockResolvedValue( {
+			email_verified: true,
+			passwordless: false,
+		} );
 
 		await submitUsernameOrEmail( 'user1' );
 

packages/data-stores/src/shared-types.ts

@@ -0,0 +1,4 @@
+export interface WpcomClientCredentials {
+	client_id: string;
+	client_secret: string;
+}

packages/data-stores/src/site/controls.ts

@@ -1,10 +1,18 @@
+/**
+ * External dependencies
+ */
+import wpcomRequest, { requestAllBlogsAccess } from 'wpcom-proxy-request';
+
 /**
  * Internal dependencies
  */
-import { wpcomRequest, WpcomClientCredentials } from '../utils';
 import { CreateSiteAction } from './types';
+import { WpcomClientCredentials } from '../shared-types';
 
 export default function createControls( clientCreds: WpcomClientCredentials ) {
+	requestAllBlogsAccess().catch( () => {
+		throw new Error( 'Could not get all blog access.' );
+	} );
 	return {
 		CREATE_SITE: async ( action: CreateSiteAction ) => {
 			const { authToken, ...providedParams } = action.params;

packages/data-stores/src/site/index.ts

@@ -12,7 +12,7 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 import createControls from './controls';
 import { DispatchFromMap, SelectFromMap } from '../mapped-types';
-import { WpcomClientCredentials } from '../utils';
+import { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
 export { State };

packages/data-stores/src/user/controls.ts

@@ -1,10 +1,18 @@
+/**
+ * External dependencies
+ */
+import wpcomRequest, { requestAllBlogsAccess } from 'wpcom-proxy-request';
+
 /**
  * Internal dependencies
  */
-import { wpcomRequest, WpcomClientCredentials } from '../utils';
 import { CreateAccountAction } from './types';
+import { WpcomClientCredentials } from '../shared-types';
 
 export default function createControls( clientCreds: WpcomClientCredentials ) {
+	requestAllBlogsAccess().catch( () => {
+		throw new Error( 'Could not get all blog access.' );
+	} );
 	return {
 		CREATE_ACCOUNT: async ( action: CreateAccountAction ) => {
 			const defaultParams = {

packages/data-stores/src/user/index.ts

@@ -13,7 +13,7 @@ import * as resolvers from './resolvers';
 import * as selectors from './selectors';
 import createControls from './controls';
 import { DispatchFromMap, SelectFromMap } from '../mapped-types';
-import { WpcomClientCredentials } from '../utils';
+import { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
 export { State };

packages/data-stores/tsconfig.json

@@ -29,6 +29,6 @@
 		"incremental": true,
 		"tsBuildInfoFile": "../../.tsc-cache/data-stores"
 	},
-	"files": [ "./src/index.ts", "./global.d.ts" ],
+	"files": [ "./src/index.ts" ],
 	"exclude": [ "**/docs/*", "**/test/*" ]
 }

packages/wpcom-proxy-request/History.md

@@ -1,5 +1,9 @@
 # 6.0.0 / TBD
 
+- Breaking: Return Promise (rather than `XMLHttpRequest` instance) if no callback argument is provided.
+  - In practice, most people have probably been using the callback rather than the returned `XMLHttpRequest` instance, so this shouldn't be a breaking change for most.
+- Add `requestAllBlogsAccess()`.
+- Add a few type definitions.
 - Move the published `build/` folder to `dist/` to align with other Calypso packages
 - Upgrade dependency 'debug' to 4.1.1
 - Remove `component-event` dependency, use `addEventListener`/`removeEventListener` directly

packages/wpcom-proxy-request/package.json

@@ -30,9 +30,11 @@
 	},
 	"files": [
 		"dist",
+		"types",
 		"History.md",
 		"README.md"
 	],
+	"types": "types",
 	"scripts": {
 		"clean": "npx rimraf dist",
 		"prepublish": "npm run clean",

packages/wpcom-proxy-request/src/index.js

@@ -101,7 +101,7 @@ debug( 'using "origin": %o', origin );
  * @param {Function} [fn] - callback response
  * @returns {window.XMLHttpRequest} XMLHttpRequest instance
  */
-const request = ( originalParams, fn ) => {
+const makeRequest = ( originalParams, fn ) => {
 	const params = Object.assign( {}, originalParams );
 
 	debug( 'request(%o)', params );
@@ -170,6 +170,40 @@ const request = ( originalParams, fn ) => {
 	return xhr;
 };
 
+/**
+ * Performs a "proxied REST API request". This happens by calling
+ * `iframe.postMessage()` on the proxy iframe instance, which from there
+ * takes care of WordPress.com user authentication (via the currently
+ * logged-in user's cookies).
+ *
+ * If no function is specified as second parameter, a promise is returned.
+ *
+ * @param {object} originalParams - request parameters
+ * @param {Function} [fn] - callback response
+ * @returns {window.XMLHttpRequest|Promise} XMLHttpRequest instance or Promise
+ */
+const request = ( originalParams, fn ) => {
+	// if callback is provided, behave traditionally
+	if ( 'function' === typeof fn ) {
+		// request method
+		return makeRequest( originalParams, fn );
+	}
+
+	// but if not, return a Promise
+	return new Promise( ( res, rej ) => {
+		makeRequest( originalParams, ( err, response ) => {
+			err ? rej( err ) : res( response );
+		} );
+	} );
+};
+
+/**
+ * Set proxy to "access all users' blogs" mode.
+ */
+export function requestAllBlogsAccess() {
+	return request( { metaAPI: { accessAllUsersBlogs: true } } );
+}
+
 /**
  * Calls the `postMessage()` function on the <iframe>.
  *

packages/wpcom-proxy-request/types/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * TypeScript type definitions for wpcom-proxy-request
+ *
+ * @todo Migrate `src/index.js` to TypeScript, incorporate these type definitions.
+ * (Needs changes to the build chain, see other packages in the monorepo
+ * for inspiration, e.g. `@automattic/data-stores`.)
+ */
+
+export interface WpcomRequestParams {
+	path?: string;
+	method?: string;
+	apiVersion?: string;
+	body?: object;
+	token?: string;
+	metaAPI?: {
+		accessAllUsersBlogs?: boolean;
+	};
+}
+
+export function reloadProxy(): void;
+
+export function requestAllBlogsAccess(): ReturnType< typeof request >;
+
+export default function request( params: WpcomRequestParams, callback: Function ): XMLHttpRequest;
+export default function request< T >( params: WpcomRequestParams ): Promise< T >;