Orders Report: Point table links to wc-admin reports with persisted query

plugins/woocommerce-admin/client/analytics/report/categories/breadcrumbs.js

@@ -10,6 +10,7 @@ import { Spinner } from '@wordpress/components';
  * WooCommerce dependencies
  */
 import { Link } from '@woocommerce/components';
+import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 
 export default class CategoryBreadcrumbs extends Component {
 	getCategoryAncestorIds( category, categories ) {
@@ -48,17 +49,18 @@ export default class CategoryBreadcrumbs extends Component {
 	}
 
 	render() {
-		const { categories, category } = this.props;
+		const { categories, category, query } = this.props;
+		const persistedQuery = getPersistedQuery( query );
 
 		return category ? (
 			<div className="woocommerce-table__breadcrumbs">
 				{ this.getCategoryAncestors( category, categories ) }
 				<Link
-					href={
-						'admin.php?page=wc-admin#/analytics/categories?filter=single_category&categories=' +
-						category.id
-					}
-					type="wp-admin"
+					href={ getNewPath( persistedQuery, 'categories', {
+						filter: 'single_category',
+						categories: category.id,
+					} ) }
+					type="wc-admin"
 				>
 					{ category.name }
 				</Link>

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

@@ -68,6 +68,7 @@ class CategoriesReportTable extends Component {
 	}
 
 	getRowsContent( categoryStats ) {
+		const { query } = this.props;
 		return map( categoryStats, categoryStat => {
 			const { category_id, items_sold, net_revenue, products_count, orders_count } = categoryStat;
 			const { categories, query } = this.props;
@@ -76,7 +77,9 @@ class CategoriesReportTable extends Component {
 
 			return [
 				{
-					display: <CategoryBreacrumbs category={ category } categories={ categories } />,
+					display: (
+						<CategoryBreacrumbs query={ query } category={ category } categories={ categories } />
+					),
 					value: category && category.name,
 				},
 				{

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

@@ -31,6 +31,31 @@ export const filters = [
 		showFilters: () => true,
 		filters: [
 			{ label: __( 'All Coupons', 'wc-admin' ), value: 'all' },
+			{
+				label: __( 'Single Coupon', 'wc-admin' ),
+				value: 'select_coupon',
+				chartMode: 'item-comparison',
+				subFilters: [
+					{
+						component: 'Search',
+						value: 'single_coupon',
+						chartMode: 'item-comparison',
+						path: [ 'select_coupon' ],
+						settings: {
+							type: 'coupons',
+							param: 'coupons',
+							getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( {
+								id: coupon.id,
+								label: coupon.code,
+							} ) ),
+							labels: {
+								placeholder: __( 'Type to search for a coupon', 'wc-admin' ),
+								button: __( 'Single Coupon', 'wc-admin' ),
+							},
+						},
+					},
+				],
+			},
 			{
 				label: __( 'Comparison', 'wc-admin' ),
 				value: 'compare-coupons',

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

@@ -18,6 +18,7 @@ import { formatCurrency } from '@woocommerce/currency';
  */
 import { numberFormat } from 'lib/number';
 import ReportTable from 'analytics/components/report-table';
+import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import './style.scss';
 
 export default class OrdersReportTable extends Component {
@@ -91,6 +92,8 @@ export default class OrdersReportTable extends Component {
 	}
 
 	getRowsContent( tableData ) {
+		const { query } = this.props;
+		const persistedQuery = getPersistedQuery( query );
 		return map( tableData, row => {
 			const {
 				currency,
@@ -108,15 +111,19 @@ export default class OrdersReportTable extends Component {
 				.sort( ( itemA, itemB ) => itemB.quantity - itemA.quantity )
 				.map( item => ( {
 					label: item.name,
-					href:
-						'admin.php?page=wc-admin#/analytics/products?filter=single_product&products=' + item.id,
 					quantity: item.quantity,
+					href: getNewPath( persistedQuery, 'products', {
+						filter: 'single_product',
+						products: item.id,
+					} ),
 				} ) );
 
 			const formattedCoupons = coupons.map( coupon => ( {
 				label: coupon.code,
-				// @TODO It should link to the coupons report
-				href: 'edit.php?s=' + coupon.code + '&post_type=shop_coupon',
+				href: getNewPath( persistedQuery, 'coupons', {
+					filter: 'single_coupon',
+					coupons: coupon.id,
+				} ),
 			} ) );
 
 			return [
@@ -217,7 +224,7 @@ export default class OrdersReportTable extends Component {
 
 	renderLinks( items = [] ) {
 		return items.map( ( item, i ) => (
-			<Link href={ item.href } key={ i } type="wp-admin">
+			<Link href={ item.href } key={ i } type="wc-admin">
 				{ item.label }
 			</Link>
 		) );

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

@@ -172,6 +172,7 @@ class ProductsReportTable extends Component {
 											category={ category }
 											categories={ categories }
 											key={ category.id }
+											query={ query }
 										/>
 									) ) }
 								/>