Add gla_table_sort track event to AppTableCard,

as requested in #96.

js/src/components/app-table-card/index.js

@@ -7,22 +7,43 @@ import { TableCard } from '@woocommerce/components';
  * Internal dependencies
  */
 import recordColumnToggleEvent from './recordColumnToggleEvent';
+import { recordTableSortEvent } from '../../utils/recordEvent';
 import './index.scss';
 
 const AppTableCard = ( props ) => {
-	const { trackEventReportId, onColumnsChange = () => {}, ...rest } = props;
+	const { trackEventReportId, ...rest } = props;
+	/**
+	 * Returns a function that records a track event before executing an original handler.
+	 *
+	 * @param {String} handlerName The name of the event handler.
+	 * @param {Function} recordEvent The function to record the event.
+	 *
+	 * @returns {decorateHandlerWithTrackEvent~decoratedHandler} Decorated handler.
+	 */
+	const decorateHandlerWithTrackEvent = ( handlerName, recordEvent ) => {
+		/**
+		 * Records track event with specified `trackEventReportId` and any args given,
+		 * then calls original handler if any.
+		 */
+		return function decoratedHandler( ...args ) {
+			if ( trackEventReportId ) {
+				recordEvent( trackEventReportId, ...args );
+			}
 
-	const handleColumnsChange = ( shown, toggled ) => {
-		if ( trackEventReportId ) {
-			recordColumnToggleEvent( trackEventReportId, shown, toggled );
+			// Call the original handler if given.
+			const handler = props.handlerName;
+			if( handler ){
+				handler( ...args );
+			}
 		}
-
-		onColumnsChange( shown, toggled );
-	};
+	}
 
 	return (
 		<div className="app-table-card">
-			<TableCard onColumnsChange={ handleColumnsChange } { ...rest } />
+			<TableCard
+				onColumnsChange={ decorateHandlerWithTrackEvent( 'onColumnsChange', recordColumnToggleEvent) }
+				onSort={ decorateHandlerWithTrackEvent( 'onSort', recordTableSortEvent) }
+				{ ...rest } />
 		</div>
 	);
 };

js/src/reports/compare-programs-table-card.js

@@ -151,7 +151,7 @@ const CompareProgramsTableCard = () => {
 
 	return (
 		<AppTableCard
-			trackEventReportId="all-programs"
+			trackEventReportId="compare-programs"
 			className="gla-all-programs-table-card"
 			title={
 				<>

js/src/utils/recordEvent.js

@@ -11,6 +11,10 @@ export const recordTableHeaderToggleEvent = ( report, column, status ) => {
 	} );
 };
 
+export const recordTableSortEvent = ( report, column, direction ) => {
+	recordEvent( 'gla_table_sort', { report, column, direction } );
+};
+
 export const recordSetupMCEvent = ( target, trigger = 'click' ) => {
 	recordEvent( 'gla_setup_mc', {
 		target,