TableCard: Add search to table header (https://github.com/woocommerce/woocommerce-admin/pull/495)

* Add label override options to TableCard

* Add search input to the tableHeader

* Style search in table header

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

@@ -125,6 +125,10 @@ export default class extends Component {
 
 		const rows = this.getRowsContent( products );
 		const headers = this.getHeadersContent();
+		const labels = {
+			helpText: __( 'Select at least two products to compare', 'wc-admin' ),
+			placeholder: __( 'Search by product name or SKU', 'wc-admin' ),
+		};
 
 		const tableQuery = {
 			...query,
@@ -139,6 +143,7 @@ export default class extends Component {
 				rowsPerPage={ rowsPerPage }
 				headers={ headers }
 				compareBy={ 'product' }
+				labels={ labels }
 				ids={ products.map( p => p.product_id ) }
 				onClickDownload={ noop }
 				onQueryChange={ onQueryChange }

plugins/woocommerce-admin/client/components/filters/compare/button.js

@@ -15,13 +15,13 @@ const CompareButton = ( { count, children, helpText, onClick } ) =>
 	count < 2 ? (
 		<Tooltip text={ helpText }>
 			<span>
-				<Button isDefault disabled={ true }>
+				<Button className="woocommerce-compare-button" isDefault disabled={ true }>
 					{ children }
 				</Button>
 			</span>
 		</Tooltip>
 	) : (
-		<Button isDefault onClick={ onClick }>
+		<Button className="woocommerce-compare-button" isDefault onClick={ onClick }>
 			{ children }
 		</Button>
 	);

plugins/woocommerce-admin/client/components/search/index.js

@@ -81,7 +81,7 @@ class Search extends Component {
 		};
 		return (
 			<div className="woocommerce-search">
-				<Gridicon className="woocommerce-search__icon" icon="search" />
+				<Gridicon className="woocommerce-search__icon" icon="search" size={ 18 } />
 				<Autocomplete completer={ autocompleter } onSelect={ this.selectResult }>
 					{ ( { listBoxId, activeId, onChange } ) => (
 						<input

plugins/woocommerce-admin/client/components/search/style.scss

@@ -12,7 +12,7 @@
 
 	.woocommerce-search__input {
 		width: 100%;
-		padding: $gap-small $gap-small $gap-small 36px;
+		padding: $gap-smaller $gap-small $gap-smaller 36px;
 		border: 1px solid $core-grey-light-700;
 	}
 
@@ -21,6 +21,11 @@
 		flex-direction: column;
 		align-items: stretch;
 		border: 1px solid $core-grey-light-700;
+		position: absolute;
+		top: 36px;
+		left: 0;
+		right: 0;
+		z-index: 10;
 
 		&:empty {
 			display: none;

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

@@ -20,6 +20,7 @@ import { getIdsFromQuery } from 'lib/nav-utils';
 import MenuItem from 'components/ellipsis-menu/menu-item';
 import MenuTitle from 'components/ellipsis-menu/menu-title';
 import Pagination from 'components/pagination';
+import Search from 'components/search';
 import Table from './table';
 import TableSummary from './summary';
 
@@ -41,6 +42,7 @@ class TableCard extends Component {
 		};
 		this.toggleCols = this.toggleCols.bind( this );
 		this.onCompare = this.onCompare.bind( this );
+		this.onSearch = this.onSearch.bind( this );
 		this.selectRow = this.selectRow.bind( this );
 		this.selectAllRows = this.selectAllRows.bind( this );
 	}
@@ -84,6 +86,15 @@ class TableCard extends Component {
 		}
 	}
 
+	onSearch( value ) {
+		const { compareBy, onQueryChange } = this.props;
+		const { selectedRows } = this.state;
+		if ( compareBy ) {
+			const ids = value.map( v => v.id );
+			onQueryChange( 'compare' )( compareBy, [ ...selectedRows, ...ids ].join( ',' ) );
+		}
+	}
+
 	filterCols( rows = [] ) {
 		const { showCols } = this.state;
 		// Header is a 1d array
@@ -155,6 +166,7 @@ class TableCard extends Component {
 	render() {
 		const {
 			compareBy,
+			labels,
 			onClickDownload,
 			onQueryChange,
 			query,
@@ -189,26 +201,32 @@ class TableCard extends Component {
 						<CompareButton
 							key="compare"
 							count={ selectedRows.length }
-							helpText={ __( 'Select at least two items to compare', 'wc-admin' ) }
+							helpText={
+								labels.helpText || __( 'Select at least two items to compare', 'wc-admin' )
+							}
 							onClick={ this.onCompare }
 						>
-							{ __( 'Compare', 'wc-admin' ) }
+							{ labels.compareButton || __( 'Compare', 'wc-admin' ) }
 						</CompareButton>
 					),
 					compareBy && (
-						<div key="search" style={ { padding: '4px 12px', color: '#6c7781' } }>
+						<Search
-							Placeholder for search
+							key="search"
-						</div>
+							placeholder={ labels.placeholder || __( 'Search by item name', 'wc-admin' ) }
+							type={ compareBy + 's' }
+							onChange={ this.onSearch }
+						/>
 					),
 					onClickDownload && (
 						<IconButton
 							key="download"
+							className="woocommerce-table__download-button"
 							onClick={ onClickDownload }
 							icon="arrow-down"
 							size={ 18 }
 							isDefault
 						>
-							{ __( 'Download', 'wc-admin' ) }
+							{ labels.downloadButton || __( 'Download', 'wc-admin' ) }
 						</IconButton>
 					),
 				] }
@@ -272,6 +290,15 @@ TableCard.propTypes = {
 			required: PropTypes.bool,
 		} )
 	),
+	/**
+	 * Custom labels for table header actions.
+	 */
+	labels: PropTypes.shape( {
+		compareButton: PropTypes.string,
+		downloadButton: PropTypes.string,
+		helpText: PropTypes.string,
+		placeholder: PropTypes.string,
+	} ),
 	/**
 	 * A list of IDs, matching to the row list so that ids[ 0 ] contains the object ID for the object displayed in row[ 0 ].
 	 */

plugins/woocommerce-admin/client/components/table/style.scss

@@ -13,11 +13,20 @@
 
 	&.has-compare {
 		.woocommerce-card__action {
+			align-items: center;
 			text-align: left;
 			display: grid;
 			width: 100%;
 			grid-template-columns: auto 1fr auto;
 		}
+		.woocommerce-search {
+			margin: 0 $gap;
+		}
+		.woocommerce-compare-button,
+		.woocommerce-table__download-button {
+			padding: 3px $gap-small;
+			height: auto;
+		}
 	}
 }