Fix confusing UX when knowledge base card fails to retreive posts (https://github.com/woocommerce/woocommerce-admin/pull/4133)

* Use EmptyContent component when there are no knowledge base posts

* Reduce transient timeout to 15 mins when remote get fails

* Satisfy phpcs

* Satisfy jslint

plugins/woocommerce-admin/client/marketing/overview/knowledge-base/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
@@ -11,7 +11,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 /**
  * WooCommerce dependencies
  */
-import { Card, Pagination } from '@woocommerce/components';
+import { Card, Pagination, EmptyContent } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -109,14 +109,23 @@ class KnowledgeBase extends Component {
 		const { posts, isLoading } = this.props;
 		const { page, animate } = this.state;
 
+		const renderEmpty = () => {
+			const title = __(
+				'There was an error loading knowledge base posts. Please check again later.',
+				'woocommerce-admin'
+			);
+
+			return (
+				<EmptyContent
+					title={ title }
+					illustrationWidth={ 250 }
+					actionLabel=""
+				/>
+			);
+		};
+
+		const renderPosts = () => {
 			return (
-			<Card
-				title={ __( 'WooCommerce knowledge base', 'woocommerce-admin' ) }
-				description={ __( 'Learn the ins and outs of successful marketing from the experts at WooCommerce.', 'woocommerce-admin' ) }
-				className="woocommerce-marketing-knowledgebase-card"
-			>
-				<Fragment>
-					{ isLoading ? <Spinner /> : (
 				<div className="woocommerce-marketing-knowledgebase-card__posts">
 					<Slider animationKey={ page } animate={ animate }>
 						{ this.getCurrentSlide() }
@@ -131,8 +140,23 @@ class KnowledgeBase extends Component {
 						showPageArrowsLabel={ false }
 					/>
 				</div>
-					) }
+			)
-				</Fragment>
+		};
+
+		const renderCardBody = () => {
+			if ( isLoading ) {
+				return <Spinner />;
+			}
+			return posts.length === 0 ? renderEmpty() : renderPosts();
+		};
+
+		return (
+			<Card
+				title={ __( 'WooCommerce knowledge base', 'woocommerce-admin' ) }
+				description={ __( 'Learn the ins and outs of successful marketing from the experts at WooCommerce.', 'woocommerce-admin' ) }
+				className="woocommerce-marketing-knowledgebase-card"
+			>
+				{ renderCardBody() }
 			</Card>
 		)
 	}

plugins/woocommerce-admin/src/Features/Marketing.php

@@ -129,8 +129,13 @@ class Marketing {
 				$plugins = json_decode( $request['body'], true );
 			}
 
+			set_transient(
+				self::RECOMMENDED_PLUGINS_TRANSIENT,
+				$plugins,
+				// Expire transient in 15 minutes if remote get failed.
 				// Cache an empty result to avoid repeated failed requests.
-			set_transient( self::RECOMMENDED_PLUGINS_TRANSIENT, $plugins, 3 * DAY_IN_SECONDS );
+				empty( $plugins ) ? 900 : 3 * DAY_IN_SECONDS
+			);
 		}
 
 		return array_values( $plugins );
@@ -186,7 +191,12 @@ class Marketing {
 				}
 			}
 
-			set_transient( self::KNOWLEDGE_BASE_TRANSIENT, $posts, DAY_IN_SECONDS );
+			set_transient(
+				self::KNOWLEDGE_BASE_TRANSIENT,
+				$posts,
+				// Expire transient in 15 minutes if remote get failed.
+				empty( $posts ) ? 900 : DAY_IN_SECONDS
+			);
 		}
 
 		return $posts;