Add Product Detail link in table

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

@@ -115,7 +115,7 @@ const variationsConfig = {
 		{ label: __( 'All Variations', 'wc-admin' ), value: 'all' },
 		{
 			label: __( 'Comparison', 'wc-admin' ),
-			value: 'compare',
+			value: 'compare-variations',
 			settings: {
 				type: 'variations',
 				param: 'variations',

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

@@ -99,11 +99,18 @@ class ProductsReportTable extends Component {
 				filter: 'advanced',
 				product_includes: product_id,
 			} );
+			const productDetailLink = getNewPath( timeRelatedQuery, 'products', {
+				filter: 'single_product',
+				products: product_id,
+			} );
 
 			return [
 				{
-					// @TODO Must link to the product detail report.
-					display: name,
+					display: (
+						<Link href={ productDetailLink } type="wc-admin">
+							{ name }
+						</Link>
+					),
 					value: name,
 				},
 				{

plugins/woocommerce-admin/packages/components/src/filters/filter/index.js

@@ -51,6 +51,20 @@ class FilterPicker extends Component {
 		}
 	}
 
+	componentDidUpdate( { query: prevQuery } ) {
+		const { query: nextQuery, config } = this.props;
+		if ( prevQuery[ config.param ] !== nextQuery[ [ config.param ] ] ) {
+			const selectedFilter = this.getFilter();
+			if ( selectedFilter && 'Search' === selectedFilter.component ) {
+				/* eslint-disable react/no-did-update-set-state */
+				this.setState( { nav: selectedFilter.path || [] } );
+				/* eslint-enable react/no-did-update-set-state */
+				const { param: filterParam, getLabels } = selectedFilter.settings;
+				getLabels( nextQuery[ filterParam ], nextQuery ).then( this.updateSelectedTag );
+			}
+		}
+	}
+
 	updateSelectedTag( tags ) {
 		this.setState( { selectedTag: tags[ 0 ] } );
 	}