Merge branch 'master' into fix/1012-2

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -193,6 +193,7 @@ export default compose(
 		const selectProps = {
 			primaryData,
 			tableData: extendedTableData,
+			query: { ...tableQuery, ...query },
 		};
 
 		if ( columnPrefsKey ) {

plugins/woocommerce-admin/client/analytics/report/categories/config.js

@@ -7,8 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getCategoryLabels } from 'lib/async-requests';
-import { NAMESPACE } from 'store/constants';
 
 export const charts = [
 	{
@@ -49,10 +48,7 @@ export const filters = [
 						settings: {
 							type: 'categories',
 							param: 'categories',
-							getLabels: getRequestByIdString( NAMESPACE + 'products/categories', category => ( {
+							getLabels: getCategoryLabels,
-								id: category.id,
-								label: category.name,
-							} ) ),
 							labels: {
 								placeholder: __( 'Type to search for a category', 'wc-admin' ),
 								button: __( 'Single Category', 'wc-admin' ),
@@ -68,10 +64,7 @@ export const filters = [
 				settings: {
 					type: 'categories',
 					param: 'categories',
-					getLabels: getRequestByIdString( NAMESPACE + 'products/categories', cat => ( {
+					getLabels: getCategoryLabels,
-						id: cat.id,
-						label: cat.name,
-					} ) ),
 					labels: {
 						helpText: __( 'Select at least two categories to compare', 'wc-admin' ),
 						placeholder: __( 'Search for categories to compare', 'wc-admin' ),

plugins/woocommerce-admin/client/analytics/report/coupons/config.js

@@ -7,8 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getCouponLabels } from 'lib/async-requests';
-import { NAMESPACE } from 'store/constants';
 
 export const charts = [
 	{
@@ -44,10 +43,7 @@ export const filters = [
 						settings: {
 							type: 'coupons',
 							param: 'coupons',
-							getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
+							getLabels: getCouponLabels,
-								id: coupon.id,
-								label: coupon.code,
-							} ) ),
 							labels: {
 								placeholder: __( 'Type to search for a coupon', 'wc-admin' ),
 								button: __( 'Single Coupon', 'wc-admin' ),
@@ -62,10 +58,7 @@ export const filters = [
 				settings: {
 					type: 'coupons',
 					param: 'coupons',
-					getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
+					getLabels: getCouponLabels,
-						id: coupon.id,
-						label: coupon.code,
-					} ) ),
 					labels: {
 						title: __( 'Compare Coupon Codes', 'wc-admin' ),
 						update: __( 'Compare', 'wc-admin' ),

plugins/woocommerce-admin/client/analytics/report/customers/config.js

@@ -8,7 +8,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getCustomerLabels, getRequestByIdString } from 'lib/async-requests';
 import { NAMESPACE } from 'store/constants';
 
 export const filters = [
@@ -129,10 +129,7 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'usernames',
-				getLabels: getRequestByIdString( NAMESPACE + 'customers', customer => ( {
+				getLabels: getCustomerLabels,
-					id: customer.id,
-					label: customer.username,
-				} ) ),
 			},
 		},
 		email: {

plugins/woocommerce-admin/client/analytics/report/downloads/config.js

@@ -7,8 +7,7 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getCustomerLabels, getProductLabels } from 'lib/async-requests';
-import { NAMESPACE } from 'store/constants';
 
 export const charts = [
 	{
@@ -64,10 +63,7 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'products',
-				getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {
+				getLabels: getProductLabels,
-					id: product.id,
-					label: product.name,
-				} ) ),
 			},
 		},
 		user: {
@@ -95,10 +91,7 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'usernames',
-				getLabels: getRequestByIdString( NAMESPACE + 'customers', customer => ( {
+				getLabels: getCustomerLabels,
-					id: customer.id,
-					label: customer.username,
-				} ) ),
 			},
 		},
 		order: {
@@ -126,10 +119,13 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'orders',
-				getLabels: getRequestByIdString( NAMESPACE + 'orders', order => ( {
+				getLabels: async value => {
-					id: order.id,
+					const orderIds = value.split( ',' );
-					label: '#' + order.id,
+					return await orderIds.map( orderId => ( {
-				} ) ),
+						id: orderId,
+						label: '#' + orderId,
+					} ) );
+				},
 			},
 		},
 		ip_address: {

plugins/woocommerce-admin/client/analytics/report/orders/config.js

@@ -7,8 +7,7 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getCouponLabels, getProductLabels } from 'lib/async-requests';
-import { NAMESPACE } from 'store/constants';
 
 const { orderStatuses } = wcSettings;
 
@@ -110,10 +109,7 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'products',
-				getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {
+				getLabels: getProductLabels,
-					id: product.id,
-					label: product.name,
-				} ) ),
 			},
 		},
 		coupon: {
@@ -141,10 +137,7 @@ export const advancedFilters = {
 			input: {
 				component: 'Search',
 				type: 'coupons',
-				getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
+				getLabels: getCouponLabels,
-					id: coupon.id,
-					label: coupon.code,
-				} ) ),
 			},
 		},
 		customer: {

plugins/woocommerce-admin/client/analytics/report/products/config.js

@@ -7,8 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getRequestByIdString } from 'lib/async-requests';
+import { getProductLabels, getCategoryLabels, getVariationLabels } from 'lib/async-requests';
-import { NAMESPACE } from 'store/constants';
 
 export const charts = [
 	{
@@ -48,10 +47,7 @@ const filterConfig = {
 					settings: {
 						type: 'products',
 						param: 'products',
-						getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {
+						getLabels: getProductLabels,
-							id: product.id,
-							label: product.name,
-						} ) ),
 						labels: {
 							placeholder: __( 'Type to search for a product', 'wc-admin' ),
 							button: __( 'Single Product', 'wc-admin' ),
@@ -73,10 +69,7 @@ const filterConfig = {
 					settings: {
 						type: 'categories',
 						param: 'categories',
-						getLabels: getRequestByIdString( NAMESPACE + 'products/categories', category => ( {
+						getLabels: getCategoryLabels,
-							id: category.id,
-							label: category.name,
-						} ) ),
 						labels: {
 							placeholder: __( 'Type to search for a product category', 'wc-admin' ),
 							button: __( 'Single Product Category', 'wc-admin' ),
@@ -92,10 +85,7 @@ const filterConfig = {
 			settings: {
 				type: 'products',
 				param: 'products',
-				getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {
+				getLabels: getProductLabels,
-					id: product.id,
-					label: product.name,
-				} ) ),
 				labels: {
 					helpText: __( 'Select at least two products to compare', 'wc-admin' ),
 					placeholder: __( 'Search for products to compare', 'wc-admin' ),
@@ -111,10 +101,7 @@ const filterConfig = {
 			settings: {
 				type: 'categories',
 				param: 'categories',
-				getLabels: getRequestByIdString( NAMESPACE + 'products/categories', category => ( {
+				getLabels: getCategoryLabels,
-					id: category.id,
-					label: category.name,
-				} ) ),
 				labels: {
 					helpText: __( 'Select at least two product categories to compare', 'wc-admin' ),
 					placeholder: __( 'Search for product categories to compare', 'wc-admin' ),
@@ -151,19 +138,7 @@ const variationsConfig = {
 			settings: {
 				type: 'variations',
 				param: 'variations',
-				getLabels: getRequestByIdString(
+				getLabels: getVariationLabels,
-					query => NAMESPACE + `products/${ query.products }/variations`,
-					variation => {
-						return {
-							id: variation.id,
-							label: variation.attributes.reduce(
-								( desc, attribute, index, arr ) =>
-									desc + `${ attribute.option }${ arr.length === index + 1 ? '' : ', ' }`,
-								''
-							),
-						};
-					}
-				),
 				labels: {
 					helpText: __( 'Select at least two variations to compare', 'wc-admin' ),
 					placeholder: __( 'Search for variations to compare', 'wc-admin' ),

plugins/woocommerce-admin/client/lib/async-requests/index.js

@@ -10,6 +10,11 @@ import { identity } from 'lodash';
  */
 import { getIdsFromQuery, stringifyQuery } from '@woocommerce/navigation';
 
+/**
+ * Internal dependencies
+ */
+import { NAMESPACE } from 'store/constants';
+
 /**
  * Get a function that accepts ids as they are found in url parameter and
  * returns a promise with an optional method applied to results
@@ -32,3 +37,40 @@ export function getRequestByIdString( path, handleData = identity ) {
 		return apiFetch( { path: pathString + payload } ).then( data => data.map( handleData ) );
 	};
 }
+
+export const getCategoryLabels = getRequestByIdString(
+	NAMESPACE + 'products/categories',
+	category => ( {
+		id: category.id,
+		label: category.name,
+	} )
+);
+
+export const getCouponLabels = getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
+	id: coupon.id,
+	label: coupon.code,
+} ) );
+
+export const getCustomerLabels = getRequestByIdString( NAMESPACE + 'customers', customer => ( {
+	id: customer.id,
+	label: customer.username,
+} ) );
+
+export const getProductLabels = getRequestByIdString( NAMESPACE + 'products', product => ( {
+	id: product.id,
+	label: product.name,
+} ) );
+
+export const getVariationLabels = getRequestByIdString(
+	query => NAMESPACE + `products/${ query.products }/variations`,
+	variation => {
+		return {
+			id: variation.id,
+			label: variation.attributes.reduce(
+				( desc, attribute, index, arr ) =>
+					desc + `${ attribute.option }${ arr.length === index + 1 ? '' : ', ' }`,
+				''
+			),
+		};
+	}
+);

plugins/woocommerce-admin/packages/components/src/search/autocomplete.js

@@ -193,7 +193,10 @@ export class Autocomplete extends Component {
 			}
 		}
 		// create a regular expression to filter the options
-		const search = new RegExp( escapeRegExp( query ), 'i' );
+		const expression = 'undefined' !== typeof completer.getSearchExpression
+			? completer.getSearchExpression( escapeRegExp( query ) )
+			: escapeRegExp( query );
+		const search = new RegExp( expression, 'i' );
 		// filter the options we already have
 		const filteredOptions = filterOptions( search, this.state.options, selected );
 		// update the state

plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js

@@ -23,6 +23,9 @@ export default {
 	options() {
 		return wcSettings.dataEndpoints.countries || [];
 	},
+	getSearchExpression( query ) {
+		return '^' + query;
+	},
 	getOptionKeywords( country ) {
 		return [ country.code, decodeEntities( country.name ) ];
 	},