Variations inline editing - add Tracks (#48870)

* Add a new event called wcadmin_product_variations_inline_select that fires when the user selects one of the inline options

* Add a new event prop called updated_options to wcadmin_product_variations_change to identify the options updated by the user

* Add changelog file

packages/js/product-editor/changelog/add-48791

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add tracks to the variation inline editing

packages/js/product-editor/src/components/variations-table/variations-table-row/variations-table-row.tsx

@@ -5,6 +5,7 @@ import { Tag, __experimentalTooltip as Tooltip } from '@woocommerce/components';
 import { CurrencyContext } from '@woocommerce/currency';
 import { PartialProductVariation, ProductVariation } from '@woocommerce/data';
 import { getNewPath } from '@woocommerce/navigation';
+import { recordEvent } from '@woocommerce/tracks';
 import {
 	Button,
 	CheckboxControl,
@@ -24,7 +25,10 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import { PRODUCT_VARIATION_TITLE_LIMIT } from '../../../constants';
+import {
+	PRODUCT_VARIATION_TITLE_LIMIT,
+	TRACKS_SOURCE,
+} from '../../../constants';
 import HiddenIcon from '../../../icons/hidden-icon';
 import {
 	getProductStockStatus,
@@ -108,6 +112,73 @@ export function VariationsTableRow( {
 		onDelete( values[ 0 ] );
 	}
 
+	function toggleHandler(
+		option: string,
+		isOpen: boolean,
+		onToggle: () => void
+	) {
+		return function handleToggle() {
+			if ( ! isOpen ) {
+				recordEvent( 'product_variations_inline_select', {
+					source: TRACKS_SOURCE,
+					product_id: variation.parent_id,
+					variation_id: variation.id,
+					selected_option: option,
+				} );
+			}
+			onToggle();
+		};
+	}
+
+	function renderImageActionsMenu() {
+		return (
+			<ImageActionsMenu
+				selection={ [ variation ] }
+				onChange={ handleChange }
+				onDelete={ handleDelete }
+				renderToggle={ ( { isOpen, onToggle, isBusy } ) =>
+					isBusy ? (
+						<div className="woocommerce-product-variations__add-image-button">
+							<Spinner
+								aria-label={ __(
+									'Loading image',
+									'woocommerce'
+								) }
+							/>
+						</div>
+					) : (
+						<Button
+							className={ classNames(
+								variation.image
+									? 'woocommerce-product-variations__image-button'
+									: 'woocommerce-product-variations__add-image-button'
+							) }
+							icon={ variation.image ? undefined : plus }
+							iconSize={ variation.image ? undefined : 16 }
+							// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+							// @ts-ignore this exists in the props but is not typed
+							size="compact"
+							onClick={ toggleHandler(
+								'image',
+								isOpen,
+								onToggle
+							) }
+						>
+							{ variation.image && (
+								<div
+									className="woocommerce-product-variations__image"
+									style={ {
+										backgroundImage: `url('${ variation.image.src }')`,
+									} }
+								/>
+							) }
+						</Button>
+					)
+				}
+			/>
+		);
+	}
+
 	function renderPrices() {
 		return (
 			<>
@@ -153,8 +224,12 @@ export function VariationsTableRow( {
 				popoverProps={ {
 					placement: 'bottom',
 				} }
-				renderToggle={ ( { onToggle } ) => (
+				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button onClick={ onToggle }>{ renderPrices() }</Button>
+					<Button
+						onClick={ toggleHandler( 'price', isOpen, onToggle ) }
+					>
+						{ renderPrices() }
+					</Button>
 				) }
 				renderContent={ ( { onClose } ) => renderPriceForm( onClose ) }
 			/>
@@ -200,8 +275,11 @@ export function VariationsTableRow( {
 				popoverProps={ {
 					placement: 'bottom',
 				} }
-				renderToggle={ ( { onToggle } ) => (
+				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button onClick={ onToggle } variant="tertiary">
+					<Button
+						onClick={ toggleHandler( 'stock', isOpen, onToggle ) }
+						variant="tertiary"
+					>
 						{ renderStockStatus() }
 					</Button>
 				) }
@@ -251,46 +329,7 @@ export function VariationsTableRow( {
 				className="woocommerce-product-variations__attributes-cell"
 				role="cell"
 			>
-				<ImageActionsMenu
+				{ renderImageActionsMenu() }
-					selection={ [ variation ] }
-					onChange={ handleChange }
-					onDelete={ handleDelete }
-					renderToggle={ ( { onToggle, isBusy } ) =>
-						isBusy ? (
-							<div className="woocommerce-product-variations__add-image-button">
-								<Spinner
-									aria-label={ __(
-										'Loading image',
-										'woocommerce'
-									) }
-								/>
-							</div>
-						) : (
-							<Button
-								className={ classNames(
-									variation.image
-										? 'woocommerce-product-variations__image-button'
-										: 'woocommerce-product-variations__add-image-button'
-								) }
-								icon={ variation.image ? undefined : plus }
-								iconSize={ variation.image ? undefined : 16 }
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore this exists in the props but is not typed
-								size="compact"
-								onClick={ onToggle }
-							>
-								{ variation.image && (
-									<div
-										className="woocommerce-product-variations__image"
-										style={ {
-											backgroundImage: `url('${ variation.image.src }')`,
-										} }
-									/>
-								) }
-							</Button>
-						)
-					}
-				/>
 
 				<div className="woocommerce-product-variations__attributes">
 					{ tags.map( ( tagInfo ) => {

packages/js/product-editor/src/components/variations-table/variations-table.tsx

@@ -211,13 +211,17 @@ export const VariationsTable = forwardRef<
 		variation: PartialProductVariation,
 		showSuccess = true
 	) {
+		const { id, ...changes } = variation;
+
 		onUpdate( variation )
 			.then( ( response ) => {
 				recordEvent( 'product_variations_change', {
 					source: TRACKS_SOURCE,
 					product_id: productId,
 					variation_id: variation.id,
+					updated_options: Object.keys( changes ),
 				} );
+
 				if ( showSuccess ) {
 					createSuccessNotice(
 						getSnackbarText(