Add empty state message to Top Selling Products card (https://github.com/woocommerce/woocommerce-admin/pull/365)

plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js

@@ -81,21 +81,37 @@ export class TopSellingProducts extends Component {
 		} );
 	}
 
-	render() {
+	getCardContents( title ) {
 		const { data, isRequesting, isError } = this.props;
 
-		// @TODO We will need to update it with a error/empty data indicator
 		const rows = isRequesting || isError ? [] : this.getRowsContent( data );
 		const headers = this.getHeadersContent();
+
+		if ( isRequesting ) {
+			return <TablePlaceholder caption={ title } headers={ headers } />;
+		}
+
+		if ( isError ) {
+			// @TODO An error notice should be displayed when there is an error
+		}
+
+		if ( rows.length === 0 ) {
+			return (
+				<div className="woocommerce-top-selling-products__empty-message">
+					{ __( 'When new orders arrive, popular products will be listed here.', 'wc-admin' ) }
+				</div>
+			);
+		}
+
+		return <Table caption={ title } rows={ rows } headers={ headers } />;
+	}
+
+	render() {
 		const title = __( 'Top Selling Products', 'wc-admin' );
 
 		return (
 			<Card title={ title } className="woocommerce-top-selling-products">
-				{ isRequesting ? (
-					<TablePlaceholder caption={ title } headers={ headers } />
-				) : (
-					<Table caption={ title } rows={ rows } headers={ headers } />
-				) }
+				{ this.getCardContents( title ) }
 			</Card>
 		);
 	}

plugins/woocommerce-admin/client/dashboard/top-selling-products/style.scss

@@ -4,6 +4,13 @@
 		padding: 0;
 	}
 
+	.woocommerce-top-selling-products__empty-message {
+		background: $core-grey-light-100;
+		color: $core-grey-dark-500;
+		padding: $gap-largest 0;
+		text-align: center;
+	}
+
 	.woocommerce-table__table {
 		margin-bottom: 0;
 

plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js

@@ -30,6 +30,14 @@ describe( 'TopSellingProducts', () => {
 		expect( topSellingProducts.find( 'TablePlaceholder' ).length ).toBe( 1 );
 	} );
 
+	test( 'should render empty message when there are no rows', () => {
+		const topSellingProducts = shallow( <TopSellingProducts data={ {} } /> );
+
+		expect(
+			topSellingProducts.find( '.woocommerce-top-selling-products__empty-message' ).length
+		).toBe( 1 );
+	} );
+
 	test( 'should render correct data in the table', () => {
 		const topSellingProducts = shallow( <TopSellingProducts data={ mockData } /> );
 		const table = topSellingProducts.find( 'Table' );