Connect Downloads report to REST API (https://github.com/woocommerce/woocommerce-admin/pull/1238)

* Connect downloads chart and table to REST API

* Display date picker in Downloads report

* Fix missing value for 'days' in Downloads table summary

* Fix download_count being a string instead of a number

* Minor date packages comment fixes

* Fix filters in Downloads report

* Add back empty line

* JSDoc comments style fixes

* Fix username filter not working

* Fix days counter off by 1

* Fix alignment issue

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

@@ -12,7 +12,7 @@ import { NAMESPACE } from 'store/constants';
 
 export const charts = [
 	{
-		key: 'downloads_count',
+		key: 'download_count',
 		label: __( 'Downloads', 'wc-admin' ),
 		type: 'number',
 	},
@@ -70,7 +70,7 @@ export const advancedFilters = {
 				} ) ),
 			},
 		},
-		username: {
+		user: {
 			labels: {
 				add: __( 'Username', 'wc-admin' ),
 				placeholder: __( 'Search customer username', 'wc-admin' ),

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

@@ -29,7 +29,6 @@ export default class DownloadsReport extends Component {
 					query={ query }
 					path={ path }
 					filters={ filters }
-					showDatePicker={ false }
 					advancedFilters={ advancedFilters }
 				/>
 				<ReportSummary

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

@@ -6,11 +6,12 @@ import { __, _n } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { format as formatDate } from '@wordpress/date';
 import { map } from 'lodash';
+import moment from 'moment';
 
 /**
  * WooCommerce dependencies
  */
-import { getIntervalForQuery, getDateFormatsForInterval } from '@woocommerce/date';
+import { getIntervalForQuery, getCurrentDates, getDateFormatsForInterval } from '@woocommerce/date';
 import { Link } from '@woocommerce/components';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 
@@ -71,7 +72,9 @@ export default class CouponsReportTable extends Component {
 		const persistedQuery = getPersistedQuery( query );
 
 		return map( downloads, download => {
-			const { date, file_name, ip_address, order_id, product_id, user_id } = download;
+			const { _embedded, date, file_name, ip_address, order_id, product_id } = download;
+			const { name: productName } = _embedded.product[ 0 ];
+			const { name: userName } = _embedded.user[ 0 ];
 
 			const productLink = getNewPath( persistedQuery, 'products', {
 				filter: 'single_product',
@@ -86,10 +89,10 @@ export default class CouponsReportTable extends Component {
 				{
 					display: (
 						<Link href={ productLink } type="wc-admin">
-							{ product_id }
+							{ productName }
 						</Link>
 					),
-					value: product_id,
+					value: productName,
 				},
 				{
 					display: file_name,
@@ -104,8 +107,8 @@ export default class CouponsReportTable extends Component {
 					value: order_id,
 				},
 				{
-					display: user_id,
-					value: user_id,
+					display: userName,
+					value: userName,
 				},
 				{
 					display: ip_address,
@@ -119,14 +122,20 @@ export default class CouponsReportTable extends Component {
 		if ( ! totals ) {
 			return [];
 		}
+		const { query } = this.props;
+		const dates = getCurrentDates( query );
+		const after = moment( dates.primary.after );
+		const before = moment( dates.primary.before );
+		const days = before.diff( after, 'days' ) + 1;
+
 		return [
 			{
-				label: _n( 'day', 'days', totals.days, 'wc-admin' ),
-				value: numberFormat( totals.days ), // @TODO it's not defined
+				label: _n( 'day', 'days', days, 'wc-admin' ),
+				value: numberFormat( days ),
 			},
 			{
-				label: _n( 'download', 'downloads', totals.downloads_count, 'wc-admin' ),
-				value: numberFormat( totals.downloads_count ),
+				label: _n( 'download', 'downloads', totals.download_count, 'wc-admin' ),
+				value: numberFormat( totals.download_count ),
 			},
 		];
 	}
@@ -141,6 +150,9 @@ export default class CouponsReportTable extends Component {
 				getRowsContent={ this.getRowsContent }
 				getSummary={ this.getSummary }
 				query={ query }
+				tableQuery={ {
+					_embed: true,
+				} }
 				title={ __( 'Downloads', 'wc-admin' ) }
 				columnPrefsKey="downloads_report_columns"
 			/>

plugins/woocommerce-admin/client/store/reports/utils.js

@@ -19,19 +19,21 @@ import { formatCurrency } from '@woocommerce/currency';
 import { MAX_PER_PAGE, QUERY_DEFAULTS } from 'store/constants';
 import * as categoriesConfig from 'analytics/report/categories/config';
 import * as couponsConfig from 'analytics/report/coupons/config';
+import * as customersConfig from 'analytics/report/customers/config';
+import * as downloadsConfig from 'analytics/report/downloads/config';
 import * as ordersConfig from 'analytics/report/orders/config';
 import * as productsConfig from 'analytics/report/products/config';
 import * as taxesConfig from 'analytics/report/taxes/config';
-import * as customersConfig from 'analytics/report/customers/config';
 import * as reportsUtils from './utils';
 
 const reportConfigs = {
 	categories: categoriesConfig,
 	coupons: couponsConfig,
+	customers: customersConfig,
+	downloads: downloadsConfig,
 	orders: ordersConfig,
 	products: productsConfig,
 	taxes: taxesConfig,
-	customers: customersConfig,
 };
 
 export function getFilterQuery( endpoint, query ) {

plugins/woocommerce-admin/client/wc-api/reports/items/operations.js

@@ -17,7 +17,7 @@ import { NAMESPACE } from '../../constants';
 import { SWAGGERNAMESPACE } from 'store/constants';
 
 // TODO: Remove once swagger endpoints are phased out.
-const swaggerEndpoints = [ 'customers', 'downloads' ];
+const swaggerEndpoints = [ 'customers' ];
 
 const typeEndpointMap = {
 	'report-items-query-orders': 'orders',

plugins/woocommerce-admin/client/wc-api/reports/stats/operations.js

@@ -16,9 +16,9 @@ import { getResourceIdentifier, getResourcePrefix } from '../../utils';
 import { NAMESPACE } from '../../constants';
 import { SWAGGERNAMESPACE } from 'store/constants';
 
-const statEndpoints = [ 'orders', 'revenue', 'products', 'taxes', 'coupons' ];
+const statEndpoints = [ 'coupons', 'downloads', 'orders', 'products', 'revenue', 'taxes' ];
 // TODO: Remove once swagger endpoints are phased out.
-const swaggerEndpoints = [ 'categories', 'downloads' ];
+const swaggerEndpoints = [ 'categories' ];
 
 const typeEndpointMap = {
 	'report-stats-query-orders': 'orders',

plugins/woocommerce-admin/includes/data-stores/class-wc-admin-reports-downloads-stats-data-store.php

@@ -12,6 +12,15 @@ defined( 'ABSPATH' ) || exit;
  */
 class WC_Admin_Reports_Downloads_Stats_Data_Store extends WC_Admin_Reports_Downloads_Data_Store implements WC_Admin_Reports_Data_Store_Interface {
 
+	/**
+	 * Mapping columns to data type to return correct response types.
+	 *
+	 * @var array
+	 */
+	protected $column_types = array(
+		'download_count' => 'intval',
+	);
+
 	/**
 	 * SQL columns to select in the db query and their mapping to SQL code.
 	 *

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

@@ -262,9 +262,9 @@ function getDateValue( period, compare, after, before ) {
  * Add default date-related parameters to a query object
  *
  * @param {string} [period] - period value, ie `last_week`
- * @param {string} [compare] - compare valuer, ie previous_year
- * @param {string} [after] - date in iso date format, ie 2018-07-03
- * @param {string} [before] - date in iso date format, ie 2018-07-03
+ * @param {string} [compare] - compare value, ie `previous_year`
+ * @param {string} [after] - date in iso date format, ie `2018-07-03`
+ * @param {string} [before] - date in iso date format, ie `2018-07-03`
  * @return {DateParams} - date parameters derived from query parameters with added defaults
  */
 export const getDateParamsFromQuery = ( { period, compare, after, before } ) => {
@@ -281,9 +281,9 @@ export const getDateParamsFromQuery = ( { period, compare, after, before } ) =>
  *
  * @param {Object} query - date parameters derived from query parameters
  * @property {string} [period] - period value, ie `last_week`
- * @property {string} [compare] - compare valuer, ie previous_year
- * @property {string} [after] - date in iso date format, ie 2018-07-03
- * @property {string} [before] - date in iso date format, ie 2018-07-03
+ * @property {string} [compare] - compare value, ie `previous_year`
+ * @property {string} [after] - date in iso date format, ie `2018-07-03`
+ * @property {string} [before] - date in iso date format, ie `2018-07-03`
  * @return {{primary: DateValue, secondary: DateValue}} - Primary and secondary DateValue objects
  */
 export const getCurrentDates = query => {