Add ProductImage to variations autocompleter (https://github.com/woocommerce/woocommerce-admin/pull/832)

plugins/woocommerce-admin/client/components/product-image/index.js

@@ -5,6 +5,7 @@
  */
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -12,14 +13,15 @@ import PropTypes from 'prop-types';
 import './style.scss';
 
 /**
- * Use `ProductImage` to display a product's featured image. If no image can be found, a placeholder matching the front-end image
+ * Use `ProductImage` to display a product's or variation's featured image.
+ * If no image can be found, a placeholder matching the front-end image
  * placeholder will be displayed.
  *
  * @return { object } -
  */
 const ProductImage = ( { product, alt, width, height, className, ...props } ) => {
 	// The first returned image from the API is the featured/product image.
-	const productImage = product && product.images && product.images[ 0 ];
+	const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
 	const src = ( productImage && productImage.src ) || false;
 	const altText = alt || ( productImage && productImage.alt ) || '';
 
@@ -53,8 +55,10 @@ ProductImage.propTypes = {
 	 */
 	className: PropTypes.string,
 	/**
-	 * Product object. The image to display will be pulled from `product.images`.
+	 * Product or variation object. The image to display will be pulled from
+	 * `product.images` or `variation.image`.
 	 * See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties
+	 * and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties
 	 */
 	product: PropTypes.object,
 	/**

plugins/woocommerce-admin/client/components/product-image/test/__snapshots__/index.js.snap

@@ -40,6 +40,16 @@ exports[`ProductImage should render a product image 1`] = `
 />
 `;
 
+exports[`ProductImage should render a variations image 1`] = `
+<img
+  alt=""
+  className="woocommerce-product-image"
+  height={60}
+  src="https://i.cloudup.com/pt4DjwRB84-3000x3000.png"
+  width={60}
+/>
+`;
+
 exports[`ProductImage should render the passed alt prop 1`] = `
 <img
   alt="testing"

plugins/woocommerce-admin/client/components/product-image/test/index.js

@@ -61,6 +61,17 @@ describe( 'ProductImage', () => {
 		expect( image ).toMatchSnapshot();
 	} );
 
+	test( 'should render a variations image', () => {
+		const variation = {
+			name: 'Test Variation',
+			image: {
+				src: 'https://i.cloudup.com/pt4DjwRB84-3000x3000.png',
+			},
+		};
+		const image = shallow( <ProductImage product={ variation } /> );
+		expect( image ).toMatchSnapshot();
+	} );
+
 	test( 'should render a placeholder image if no product images are found', () => {
 		global.wcSettings.wcAssetUrl = 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/';
 		const product = {

plugins/woocommerce-admin/client/components/search/autocompleters/variations.js

@@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { computeSuggestionMatch } from './utils';
+import ProductImage from 'components/product-image';
 import { stringifyQuery, getQuery } from '@woocommerce/navigation';
 import { NAMESPACE } from 'store/constants';
 
@@ -57,7 +58,14 @@ export default {
 	getOptionLabel( variation, query ) {
 		const match = computeSuggestionMatch( getVariationName( variation ), query ) || {};
 		return [
-			// @TODO: make VariationsImage, modify ProductImage, or leave as is?
+			<ProductImage
+				key="thumbnail"
+				className="woocommerce-search__result-thumbnail"
+				product={ variation }
+				width={ 18 }
+				height={ 18 }
+				alt=""
+			/>,
 			<span
 				key="name"
 				className="woocommerce-search__result-name"

plugins/woocommerce-admin/docs/components/product-image.md

@@ -1,7 +1,8 @@
 `ProductImage` (component)
 ==========================
 
-Use `ProductImage` to display a product's featured image. If no image can be found, a placeholder matching the front-end image
+Use `ProductImage` to display a product's or variation's featured image.
+If no image can be found, a placeholder matching the front-end image
 placeholder will be displayed.
 
 
@@ -35,8 +36,10 @@ Additional CSS classes.
 - Type: Object
 - Default: null
 
-Product object. The image to display will be pulled from `product.images`.
+Product or variation object. The image to display will be pulled from
+`product.images` or `variation.image`.
 See https://woocommerce.github.io/woocommerce-rest-api-docs/#product-properties
+and https://woocommerce.github.io/woocommerce-rest-api-docs/#product-variation-properties
 
 ### `alt`