Block Directory: Try/block directory inline error msgs.

packages/block-directory/src/components/downloadable-block-header/index.js

@@ -10,7 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { BlockIcon } from '@wordpress/block-editor';
 import BlockRatings from '../block-ratings';
 
-function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } ) {
+function DownloadableBlockHeader( { icon, title, rating, ratingCount, isLoading, onClick } ) {
 	return (
 		<div className="block-directory-downloadable-block-header__row">
 			{
@@ -30,12 +30,13 @@ function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick }
 			</div>
 			<Button
 				isDefault
+				isBusy={ isLoading }
 				onClick={ ( event ) => {
 					event.preventDefault();
 					onClick();
 				} }
 			>
-				{ __( 'Add block' ) }
+				{ isLoading ? __( 'Adding…' ) : __( 'Add block' ) }
 			</Button>
 		</div>
 	);

packages/block-directory/src/components/downloadable-block-header/test/index.js

@@ -7,18 +7,19 @@ import { shallow } from 'enzyme';
  * WordPress dependencies
  */
 import { BlockIcon } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import DownloadableBlockHeader from '../index';
 import { pluginWithImg, pluginWithIcon } from './fixtures';
 
-const getContainer = ( { icon, title, rating, ratingCount } ) => {
+const getContainer = ( { icon, title, rating, ratingCount }, onClick = jest.fn() ) => {
 	return shallow(
 		<DownloadableBlockHeader
 			icon={ icon }
-			onClick={ () => {} }
+			onClick={ onClick }
 			title={ title }
 			rating={ rating }
 			ratingCount={ ratingCount }
@@ -45,4 +46,16 @@ describe( 'DownloadableBlockHeader', () => {
 			expect( wrapper.find( BlockIcon ) ).toHaveLength( 1 );
 		} );
 	} );
+
+	describe( 'user interaction', () => {
+		test( 'should trigger the onClick function', () => {
+			const onClickMock = jest.fn();
+			const wrapper = getContainer( pluginWithIcon, onClickMock );
+			const event = {
+				preventDefault() {},
+			};
+			wrapper.find( Button ).simulate( 'click', event );
+			expect( onClickMock.mock.calls.length ).toBe( 1 );
+		} );
+	} );
 } );

packages/block-directory/src/components/downloadable-block-list-item/index.js

@@ -8,6 +8,8 @@ import DownloadableBlockInfo from '../downloadable-block-info';
 function DownloadableBlockListItem( {
 	item,
 	onClick,
+	isLoading,
+	notice,
 } ) {
 	const {
 		icon,
@@ -32,9 +34,11 @@ function DownloadableBlockListItem( {
 						title={ title }
 						rating={ rating }
 						ratingCount={ ratingCount }
+						isLoading={ isLoading }
 					/>
 				</header>
 				<section className="block-directory-downloadable-block-list-item__body">
+					{ notice }
 					<DownloadableBlockInfo
 						activeInstalls={ activeInstalls }
 						description={ description }

packages/block-directory/src/components/downloadable-block-list-item/style.scss

@@ -28,13 +28,13 @@
 .block-directory-downloadable-block-list-item__header {
 	display: flex;
 	flex-direction: column;
-	padding: 12px 12px 0;
+	padding: 12px;
 }
 
 .block-directory-downloadable-block-list-item__body {
 	display: flex;
 	flex-direction: column;
-	padding: 12px;
+	padding: 0 12px 12px;
 }
 
 .block-directory-downloadable-block-list-item__footer {

packages/block-directory/src/components/downloadable-block-list-item/test/fixtures/index.js

@@ -0,0 +1,18 @@
+export const plugin = {
+	name: 'boxer/boxer',
+	title: 'Boxer',
+	description: 'Boxer is a Block that puts your WordPress posts into boxes on a page.',
+	id: 'boxer-block',
+	icon: 'block-default',
+	rating: 5,
+	rating_count: 1,
+	active_installs: 0,
+	author_block_rating: 5,
+	author_block_count: '1',
+	author: 'CK Lee',
+	assets: [
+		'http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js',
+		'http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js',
+	],
+	humanized_updated: '3 months ago',
+};

packages/block-directory/src/components/downloadable-block-list-item/test/index.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockListItem from '../index';
+import DownloadableBlockHeader from '../../downloadable-block-header';
+import DownloadableBlockInfo from '../../downloadable-block-info';
+import DownloadableBlockAuthorInfo from '../../downloadable-block-author-info';
+import { plugin } from './fixtures';
+
+const getContainer = ( item, onClick = jest.fn(), isLoading = false ) => {
+	return shallow(
+		<DownloadableBlockListItem
+			key={ item.id }
+			item={ item }
+			onClick={ onClick }
+			onFocus={ jest.fn() }
+			onMouseEnter={ jest.fn() }
+			onMouseLeave={ jest.fn() }
+			onBlur={ jest.fn() }
+			isLoading={ isLoading }
+		/>
+	);
+};
+
+describe( 'DownloadableBlockListItem', () => {
+	describe( 'Rendering', () => {
+		it( 'Should render the base components', () => {
+			const wrapper = getContainer( plugin, false );
+			expect( wrapper.find( DownloadableBlockHeader ).length ).toBe( 1 );
+			expect( wrapper.find( DownloadableBlockInfo ).length ).toBe( 1 );
+			expect( wrapper.find( DownloadableBlockAuthorInfo ).length ).toBe( 1 );
+		} );
+	} );
+} );

packages/block-directory/src/components/downloadable-block-notice/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { DOWNLOAD_ERROR_NOTICE_ID } from '../../store/constants';
+
+const DownloadableBlockNotice = ( { block, errorNotices, fullInstall, download } ) => {
+	if ( ! errorNotices[ block.id ] ) {
+		return null;
+	}
+
+	// A Failed install is the default error as its the first step
+	let copy = __( 'Block previews can\'t install.' );
+	let callback = fullInstall;
+
+	if ( errorNotices[ block.id ] === DOWNLOAD_ERROR_NOTICE_ID ) {
+		copy = __( 'Block previews can\'t load.' );
+		callback = download;
+	}
+
+	return (
+		<Notice status="error" isDismissible={ false } className="block-directory-downloadable-blocks-notice">
+			<span className="block-directory-downloadable-blocks-notice-content">
+				{ copy }
+			</span>
+			<Button isSmall isPrimary onClick={ () => {
+				callback( block );
+			} }>
+				{ __( 'Retry' ) }
+			</Button>
+		</Notice>
+	);
+};
+
+export default DownloadableBlockNotice;

packages/block-directory/src/components/downloadable-block-notice/style.scss

@@ -0,0 +1,7 @@
+.block-directory-downloadable-blocks-notice {
+	margin: 0;
+}
+
+.block-directory-downloadable-blocks-notice-content {
+	padding-right: 12px;
+}

packages/block-directory/src/components/downloadable-block-notice/test/fixtures/index.js

@@ -0,0 +1,3 @@
+export const plugin = {
+	id: 'boxer-block',
+};

packages/block-directory/src/components/downloadable-block-notice/test/index.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockNotice from '../index';
+import { plugin } from './fixtures';
+
+import { DOWNLOAD_ERROR_NOTICE_ID, INSTALL_ERROR_NOTICE_ID } from '../../../store/constants';
+
+const getContainer = ( { block, fullInstall = jest.fn(), download = jest.fn(), errorNotices = {} } ) => {
+	return shallow(
+		<DownloadableBlockNotice
+			block={ block }
+			fullInstall={ fullInstall }
+			download={ download }
+			errorNotices={ errorNotices }
+		/>
+	);
+};
+
+describe( 'DownloadableBlockNotice', () => {
+	describe( 'Rendering', () => {
+		it( 'should return null when there are no error notices', () => {
+			const wrapper = getContainer( { block: plugin } );
+			expect( wrapper.type() ).toEqual( null );
+		} );
+
+		it( 'should return something when there are error notices', () => {
+			const errorNotices = {
+				[ plugin.id ]: INSTALL_ERROR_NOTICE_ID,
+			};
+			const wrapper = getContainer( { block: plugin, errorNotices } );
+			expect( wrapper.length ).toBeGreaterThan( 0 );
+		} );
+	} );
+
+	describe( 'Behavior', () => {
+		it( 'should try the full install when the install failed', () => {
+			const errorNotices = {
+				[ plugin.id ]: INSTALL_ERROR_NOTICE_ID,
+			};
+
+			const fullInstall = jest.fn();
+			const download = jest.fn();
+
+			const wrapper = getContainer( { block: plugin, fullInstall, download, errorNotices } );
+
+			wrapper.find( Button ).simulate( 'click', { event: {} } );
+
+			expect( fullInstall.mock.calls.length ).toBe( 1 );
+			expect( download.mock.calls.length ).toBe( 0 );
+		} );
+
+		it( 'should try to download again if it installed but failed to download', () => {
+			const errorNotices = {
+				[ plugin.id ]: DOWNLOAD_ERROR_NOTICE_ID,
+			};
+
+			const fullInstall = jest.fn();
+			const download = jest.fn();
+
+			const wrapper = getContainer( { block: plugin, fullInstall, download, errorNotices } );
+
+			wrapper.find( Button ).simulate( 'click', { event: {} } );
+
+			expect( fullInstall.mock.calls.length ).toBe( 0 );
+			expect( download.mock.calls.length ).toBe( 1 );
+		} );
+	} );
+} );