From 9f5826ee6121a61485eca0e76d6095bab305d777 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Thu, 23 Jan 2020 08:32:28 -0700
Subject: [PATCH] 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.
---
 .../components/report-table/index.js          |  5 +-
 .../packages/components/CHANGELOG.md          |  1 +
 .../components/src/select-control/style.scss  |  2 +-
 .../components/src/select-control/tags.js     | 53 +++++++++----------
 4 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js
index ec75f61e0e4..8776235333b 100644
--- a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js
+++ b/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.
diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index d74e7bc6b23..46d76582271 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/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
 
diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/style.scss b/plugins/woocommerce-admin/packages/components/src/select-control/style.scss
index eb22594af64..094e460a68e 100644
--- a/plugins/woocommerce-admin/packages/components/src/select-control/style.scss
+++ b/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 {
diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/tags.js b/plugins/woocommerce-admin/packages/components/src/select-control/tags.js
index 295a3458b5c..56e04a1df8e 100644
--- a/plugins/woocommerce-admin/packages/components/src/select-control/tags.js
+++ b/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>
 		);
 	}
 }