Apply onQueryChange to more than just 'filter'

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

@@ -60,7 +60,7 @@ const filterConfig = {
 		},
 		{
 			label: __( 'Product Comparison', 'wc-admin' ),
-			value: 'compare-product',
+			value: 'compare-products',
 			settings: {
 				type: 'products',
 				param: 'products',
@@ -78,7 +78,7 @@ const filterConfig = {
 		},
 		{
 			label: __( 'Product Category Comparison', 'wc-admin' ),
-			value: 'compare-product_cat',
+			value: 'compare-product_cats',
 			settings: {
 				type: 'product_cats',
 				param: 'categories',

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

@@ -183,7 +183,7 @@ class ProductsReportTable extends Component {
 				labels={ labels }
 				ids={ orderedProducts.map( p => p.product_id ) }
 				isLoading={ isRequesting }
-				compareBy={ 'product' }
+				compareBy={ 'products' }
 				onQueryChange={ onQueryChange }
 				query={ tableQuery }
 				summary={ null } // @TODO

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

@@ -109,19 +109,23 @@ class TableCard extends Component {
 	}
 
 	onCompare() {
-		const { compareBy, onQueryChange } = this.props;
+		const { compareBy, compareParam, onQueryChange } = this.props;
 		const { selectedRows } = this.state;
 		if ( compareBy ) {
-			onQueryChange( 'compare' )( compareBy, selectedRows.join( ',' ) );
+			onQueryChange( 'compare' )( compareBy, compareParam, selectedRows.join( ',' ) );
 		}
 	}
 
 	onSearch( value ) {
-		const { compareBy, onQueryChange } = this.props;
+		const { compareBy, compareParam, onQueryChange } = this.props;
 		const { selectedRows } = this.state;
 		if ( compareBy ) {
 			const ids = value.map( v => v.id );
-			onQueryChange( 'compare' )( compareBy, [ ...selectedRows, ...ids ].join( ',' ) );
+			onQueryChange( 'compare' )(
+				compareBy,
+				compareParam,
+				[ ...selectedRows, ...ids ].join( ',' )
+			);
 		}
 	}
 
@@ -247,7 +251,7 @@ class TableCard extends Component {
 						<Search
 							key="search"
 							placeholder={ labels.placeholder || __( 'Search by item name', 'wc-admin' ) }
-							type={ compareBy + 's' }
+							type={ compareBy }
 							onChange={ this.onSearch }
 						/>
 					),
@@ -409,6 +413,10 @@ TableCard.propTypes = {
 	 * The total number of rows (across all pages).
 	 */
 	totalRows: PropTypes.number.isRequired,
+	/**
+	 * Url query parameter compare function operates on
+	 */
+	compareParam: PropTypes.string,
 };
 
 TableCard.defaultProps = {
@@ -418,6 +426,7 @@ TableCard.defaultProps = {
 	query: {},
 	rowHeader: 0,
 	rows: [],
+	compareParam: 'filter',
 };
 
 export default TableCard;

plugins/woocommerce-admin/packages/navigation/src/index.js

@@ -108,8 +108,8 @@ export function onQueryChange( param, path = getPath(), query = getQuery() ) {
 		case 'sort':
 			return ( key, dir ) => updateQueryString( { orderby: key, order: dir }, path, query );
 		case 'compare':
-			return ( key, ids ) =>
-				updateQueryString( { filter: `compare-${ key }`, [ key ]: ids }, path, query );
+			return ( key, queryParam, ids ) =>
+				updateQueryString( { [ queryParam ]: `compare-${ key }`, [ key ]: ids }, path, query );
 		default:
 			return value => updateQueryString( { [ param ]: value }, path, query );
 	}