Merge pull request woocommerce/woocommerce-admin#960 from woocommerce/add/variations-table-data

Variations: Add table data

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

@@ -116,7 +116,8 @@ ReportTable.defaultProps = {
 export default compose(
 	withSelect( ( select, props ) => {
 		const { endpoint, getSummary, query, tableQuery } = props;
-		const primaryData = getSummary ? getReportChartData( endpoint, 'primary', query, select ) : {};
+		const chartEndpoint = 'variations' === endpoint ? 'products' : endpoint;
+		const primaryData = getSummary ? getReportChartData( chartEndpoint, 'primary', query, select ) : {};
 		const tableData = getReportTableData( endpoint, query, select, tableQuery );
 
 		return {

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

@@ -2,9 +2,9 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _n } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { map } from 'lodash';
+import { map, get } from 'lodash';
 
 /**
  * WooCommerce dependencies
@@ -17,6 +17,7 @@ import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
  * Internal dependencies
  */
 import ReportTable from 'analytics/components/report-table';
+import { numberFormat } from 'lib/number';
 
 export default class VariationsReportTable extends Component {
 	constructor() {
@@ -26,11 +27,11 @@ export default class VariationsReportTable extends Component {
 		this.getRowsContent = this.getRowsContent.bind( this );
 	}
 
-	getVariationName( variation ) {
-		return variation.attributes.reduce( ( desc, attribute, index, arr ) => {
-			desc += `${ attribute.option }${ arr.length === index + 1 ? '' : ', ' }`;
-			return desc;
-		}, variation.product_name + ' / ' );
+	getVariationName( row ) {
+		const extendedInfo = get( row, 'extended_info', {} );
+		const attributes = get( extendedInfo, 'attributes', {} );
+
+		return extendedInfo.name + ' / ' + attributes.map( a => a.option ).join( ', ' );
 	}
 
 	getHeadersContent() {
@@ -94,10 +95,15 @@ export default class VariationsReportTable extends Component {
 				filter: 'advanced',
 				product_includes: query.products,
 			} );
+			const editPostLink = `post.php?post=${ product_id }&action=edit`;
 
 			return [
 				{
-					display: name,
+					display: (
+						<Link href={ editPostLink } type="wp-admin">
+							{ name }
+						</Link>
+					),
 					value: name,
 				},
 				{
@@ -118,7 +124,7 @@ export default class VariationsReportTable extends Component {
 				},
 				{
 					display: (
-						<Link href={ 'post.php?action=edit&post=' + product_id } type="wp-admin">
+						<Link href={ editPostLink } type="wp-admin">
 							{ stockStatuses[ stock_status ] }
 						</Link>
 					),
@@ -132,6 +138,31 @@ export default class VariationsReportTable extends Component {
 		} );
 	}
 
+	getSummary( totals ) {
+		if ( ! totals ) {
+			return [];
+		}
+		return [
+			{
+				// @TODO: When primaryData is segmented, fix this to reflect variations, not products.
+				label: _n( 'variation sold', 'variations sold', totals.products_count, 'wc-admin' ),
+				value: numberFormat( totals.products_count ),
+			},
+			{
+				label: _n( 'item sold', 'items sold', totals.items_sold, 'wc-admin' ),
+				value: numberFormat( totals.items_sold ),
+			},
+			{
+				label: __( 'gross revenue', 'wc-admin' ),
+				value: formatCurrency( totals.gross_revenue ),
+			},
+			{
+				label: _n( 'orders', 'orders', totals.orders_count, 'wc-admin' ),
+				value: numberFormat( totals.orders_count ),
+			},
+		];
+	}
+
 	render() {
 		const { query } = this.props;
 
@@ -150,9 +181,11 @@ export default class VariationsReportTable extends Component {
 				itemIdField="product_id"
 				labels={ labels }
 				query={ query }
+				getSummary={ this.getSummary }
 				tableQuery={ {
 					orderby: query.orderby || 'items_sold',
 					order: query.order || 'desc',
+					extended_info: true,
 				} }
 				title={ __( 'Variations', 'wc-admin' ) }
 			/>

plugins/woocommerce-admin/client/store/reports/items/resolvers.js

@@ -20,7 +20,7 @@ export default {
 	async getReportItems( ...args ) {
 		const [ endpoint, query ] = args.slice( -2 );
 
-		const swaggerEndpoints = [ 'categories', 'coupons', 'taxes', 'variations' ];
+		const swaggerEndpoints = [ 'categories', 'coupons', 'taxes' ];
 		if ( swaggerEndpoints.indexOf( endpoint ) >= 0 ) {
 			try {
 				const response = await fetch(