Hook stock panel up to real data.

plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js

@@ -4,11 +4,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import PropTypes from 'prop-types';
 
 /**
  * WooCommerce dependencies
  */
-import { Section } from '@woocommerce/components';
+import { EmptyContent, Section } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -16,23 +18,35 @@ import { Section } from '@woocommerce/components';
 import { ActivityCardPlaceholder } from '../../activity-card';
 import ActivityHeader from '../../activity-header';
 import ProductStockCard from './card';
+import { QUERY_DEFAULTS } from 'wc-api/constants';
+import withSelect from 'wc-api/with-select';
 
 class StockPanel extends Component {
 	render() {
-		const products = [
-			{
-				id: 913,
-				parent_id: 911,
-				type: 'variation',
-				name: 'Octopus Tshirt',
-				permalink: '',
-				image: {
-					src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
-				},
-				stock_quantity: 2,
-			},
-		];
-		const isRequesting = false;
+		const { isError, isRequesting, products } = this.props;
+
+		if ( isError ) {
+			const title = __(
+				'There was an error getting your low stock products. Please try again.',
+				'woocommerce-admin'
+			);
+			const actionLabel = __( 'Reload', 'woocommerce-admin' );
+			const actionCallback = () => {
+				// @todo Add tracking for how often an error is displayed, and the reload action is clicked.
+				window.location.reload();
+			};
+
+			return (
+				<Fragment>
+					<EmptyContent
+						title={ title }
+						actionLabel={ actionLabel }
+						actionURL={ null }
+						actionCallback={ actionCallback }
+					/>
+				</Fragment>
+			);
+		}
 
 		return (
 			<Fragment>
@@ -53,4 +67,33 @@ class StockPanel extends Component {
 	}
 }
 
-export default StockPanel;
+StockPanel.propTypes = {
+	products: PropTypes.array.isRequired,
+	isError: PropTypes.bool,
+	isRequesting: PropTypes.bool,
+};
+
+StockPanel.defaultProps = {
+	products: [],
+	isError: false,
+	isRequesting: false,
+};
+
+export default compose(
+	withSelect( select => {
+		const { getItems, getItemsError, isGetItemsRequesting } = select( 'wc-api' );
+
+		const productsQuery = {
+			page: 1,
+			per_page: QUERY_DEFAULTS.pageSize,
+			low_in_stock: true,
+			status: 'publish',
+		};
+
+		const products = Array.from( getItems( 'products', productsQuery ).values() );
+		const isError = Boolean( getItemsError( 'products', productsQuery ) );
+		const isRequesting = isGetItemsRequesting( 'products', productsQuery );
+
+		return { products, isError, isRequesting };
+	} )
+)( StockPanel );