Fix Search component token display in ReportTable (https://github.com/woocommerce/woocommerce-admin/pull/3618)

* Fix parsing of report table search terms.

* Fix styling of Search component "clear all" button.

* Add components changelog entry.

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

@@ -317,8 +317,9 @@ class ReportTable extends Component {
 		const totals = get( primaryData, [ 'data', 'totals' ], {} );
 		const totalResults = items.totalResults;
 		const downloadable = 0 < totalResults;
-		const searchWords = getSearchWords( query );
-		const searchedLabels = searchWords.map( v => ( { id: v, label: v } ) );
+		// Search words are in the query string, not the table query.
+		const searchWords = getSearchWords( this.props.query );
+		const searchedLabels = searchWords.map( v => ( { key: v, label: v } ) );
 
 		/**
 		 * Filter report table.

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

@@ -2,6 +2,7 @@
 - Added `<ImageUpload />` component.
 - Style form components for WordPress 5.3.
 - Fix CompareFilter options format (key prop vs. id).
+- Fix styling of `<Search />` component "clear all" button.
 
 # 4.0.0
 

plugins/woocommerce-admin/packages/components/src/select-control/style.scss

@@ -97,7 +97,7 @@
 
 	.woocommerce-select-control__clear {
 		position: absolute;
-		right: 0;
+		right: 10px;
 		top: calc(50% - 10px);
 
 		& > .dashicon {

plugins/woocommerce-admin/packages/components/src/select-control/tags.js

@@ -4,8 +4,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Button, Icon } from '@wordpress/components';
-import classnames from 'classnames';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { findIndex } from 'lodash';
 import PropTypes from 'prop-types';
 
@@ -43,39 +42,37 @@ class Tags extends Component {
 			return null;
 		}
 
-		const classes = classnames( 'woocommerce-select-control__tags', {
-			'has-clear': showClearButton,
-		} );
-
 		return (
-			<div className={ classes }>
-				{ selected.map( ( item, i ) => {
-					if ( ! item.label ) {
-						return null;
-					}
-					const screenReaderLabel = sprintf(
-						__( '%1$s (%2$s of %3$s)', 'woocommerce-admin' ),
-						item.label,
-						i + 1,
-						selected.length
-					);
-					return (
-						<Tag
-							key={ item.key }
-							id={ item.key }
-							label={ item.label }
-							remove={ this.removeResult }
-							screenReaderLabel={ screenReaderLabel }
-						/>
-					);
-				} ) }
+			<Fragment>
+				<div className="woocommerce-select-control__tags">
+					{ selected.map( ( item, i ) => {
+						if ( ! item.label ) {
+							return null;
+						}
+						const screenReaderLabel = sprintf(
+							__( '%1$s (%2$s of %3$s)', 'woocommerce-admin' ),
+							item.label,
+							i + 1,
+							selected.length
+						);
+						return (
+							<Tag
+								key={ item.key }
+								id={ item.key }
+								label={ item.label }
+								remove={ this.removeResult }
+								screenReaderLabel={ screenReaderLabel }
+							/>
+						);
+					} ) }
+				</div>
 				{ showClearButton && (
 					<Button className="woocommerce-select-control__clear" isLink onClick={ this.removeAll }>
 						<Icon icon="dismiss" />
 						<span className="screen-reader-text">{ __( 'Clear all', 'woocommerce-admin' ) }</span>
 					</Button>
 				) }
-			</div>
+			</Fragment>
 		);
 	}
 }