Add customer username filter to Customers page

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

@@ -105,6 +105,37 @@ export const advancedFilters = {
 				},
 			},
 		},
+		username: {
+			labels: {
+				add: __( 'Username', 'wc-admin' ),
+				placeholder: __( 'Search customer username', 'wc-admin' ),
+				remove: __( 'Remove customer username filter', 'wc-admin' ),
+				rule: __( 'Select a customer username filter match', 'wc-admin' ),
+				/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
+				title: __( 'Username {{rule /}} {{filter /}}', 'wc-admin' ),
+				filter: __( 'Select customer username', 'wc-admin' ),
+			},
+			rules: [
+				{
+					value: 'includes',
+					/* translators: Sentence fragment, logical, "Includes" refers to customer usernames including a given username(s). Screenshot for context: https://cloudup.com/cCsm3GeXJbE */
+					label: _x( 'Includes', 'customer usernames', 'wc-admin' ),
+				},
+				{
+					value: 'excludes',
+					/* translators: Sentence fragment, logical, "Excludes" refers to customer usernames excluding a given username(s). Screenshot for context: https://cloudup.com/cCsm3GeXJbE */
+					label: _x( 'Excludes', 'customer usernames', 'wc-admin' ),
+				},
+			],
+			input: {
+				component: 'Search',
+				type: 'usernames',
+				getLabels: getRequestByIdString( NAMESPACE + 'customers', customer => ( {
+					id: customer.id,
+					label: customer.username,
+				} ) ),
+			},
+		},
 		email: {
 			labels: {
 				add: __( 'Email', 'wc-admin' ),

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 - Add `onColumnsChange` property to `<Table />` which is called when columns are shown/hidden
 - Add country autocompleter to search component
 - Add customer email autocompleter to search component
+- Add customer username autocompleter to search component
 - Adding new `<Chart />` component.
 - Added new `showDatePicker` prop to `<Filters />` component which allows to use the filters component without the date picker.
 - Added new taxes and customers autocompleters, and added support for using them within `<Filters />`.

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

@@ -8,5 +8,6 @@ export { default as customers } from './customers';
 export { default as emails } from './emails';
 export { default as product } from './product';
 export { default as productCategory } from './product-cat';
-export { default as variations } from './variations';
 export { default as taxes } from './taxes';
+export { default as usernames } from './usernames';
+export { default as variations } from './variations';

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

@@ -0,0 +1,59 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+/**
+ * Internal dependencies
+ */
+import { computeSuggestionMatch } from './utils';
+/**
+ * A customer username completer.
+ * See https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#the-completer-interface
+ *
+ * @type {Completer}
+ */
+export default {
+	name: 'usernames',
+	className: 'woocommerce-search__usernames-result',
+	options( search ) {
+		let payload = '';
+		if ( search ) {
+			const query = {
+				username: search,
+				per_page: 10,
+			};
+			payload = stringifyQuery( query );
+		}
+		return apiFetch( { path: `/wc/v3/customers${ payload }` } );
+	},
+	isDebounced: true,
+	getOptionKeywords( customer ) {
+		return [ customer.username ];
+	},
+	getOptionLabel( customer, query ) {
+		const match = computeSuggestionMatch( customer.username, query ) || {};
+		return [
+			<span key="name" className="woocommerce-search__result-name" aria-label={ customer.username }>
+				{ match.suggestionBeforeMatch }
+				<strong className="components-form-token-field__suggestion-match">
+					{ match.suggestionMatch }
+				</strong>
+				{ match.suggestionAfterMatch }
+			</span>,
+		];
+	},
+	// This is slightly different than gutenberg/Autocomplete, we don't support different methods
+	// of replace/insertion, so we can just return the value.
+	getOptionCompletion( customer ) {
+		const value = {
+			id: customer.id,
+			label: customer.username,
+		};
+		return value;
+	},
+};

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

@@ -14,7 +14,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import Autocomplete from './autocomplete';
-import { countries, coupons, customers, emails, product, productCategory, taxes, variations } from './autocompleters';
+import { countries, coupons, customers, emails, product, productCategory, taxes, usernames, variations } from './autocompleters';
 import Tag from '../tag';
 
 /**
@@ -80,6 +80,8 @@ class Search extends Component {
 				return productCategory;
 			case 'taxes':
 				return taxes;
+			case 'usernames':
+				return usernames;
 			case 'variations':
 				return variations;
 			default:
@@ -220,6 +222,7 @@ Search.propTypes = {
 		'products',
 		'product_cats',
 		'taxes',
+		'usernames',
 		'variations',
 	] ).isRequired,
 	/**