Add existing TaskList component to new home screen (#4378)

* Move TaskList component up in directory tree.

* Render the TaskList on the new home screen.

* Render single tasks in isolation on new home screen.

* Fix "is requesting" selection for options API.

* Add loading placeholder for TaskList.

* Add initial test for the task list on the home screen.

* Fix dynamic imports under test.

* Add test for inline TaskList on home screen.

* Test that single task view works on new home screen.

* Restore Jest mocks between tests.

* Fix linting errors.

client/dashboard/customizable.js

@@ -32,7 +32,7 @@ import {
 import ReportFilters from 'analytics/components/report-filters';
 
 const TaskList = lazy( () =>
-	import( /* webpackChunkName: "task-list" */ './task-list' )
+	import( /* webpackChunkName: "task-list" */ '../task-list' )
 );
 
 const DASHBOARD_FILTERS_FILTER = 'woocommerce_admin_dashboard_filters';
@@ -311,10 +311,7 @@ class CustomizableDashboard extends Component {
 			<Fragment>
 				{ isTaskListEnabled && (
 					<Suspense fallback={ <Spinner /> }>
-						<TaskList
-							query={ query }
-							inline={ isDashboardShown }
-						/>
+						<TaskList query={ query } inline={ isDashboardShown } />
 					</Suspense>
 				) }
 				{ isDashboardShown && this.renderDashboardReports() }

client/homepage/index.js

@@ -29,7 +29,7 @@ const Homepage = ( { profileItems, query } ) => {
 		);
 	}
 
-	return <Layout />;
+	return <Layout query={ query } />;
 };
 
 export default compose(

client/homepage/layout.js

@@ -1,18 +1,40 @@
 /**
  * External dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import {
+	Fragment,
+	Suspense,
+	lazy,
+	useState,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
 import { Button } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
 import classnames from 'classnames';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Spinner } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
 import QuickLinks from '../quick-links';
 import StatsOverview from './stats-overview';
 import './style.scss';
+import { isOnboardingEnabled } from 'dashboard/utils';
+import withSelect from 'wc-api/with-select';
+import TaskListPlaceholder from '../task-list/placeholder';
 
-const Layout = () => {
+const TaskList = lazy( () =>
+	import( /* webpackChunkName: "task-list" */ '../task-list' )
+);
+
+export const Layout = ( props ) => {
 	const [ showInbox, setShowInbox ] = useState( true );
 	const [ isContentSticky, setIsContentSticky ] = useState( false );
 	const content = useRef( null );
@@ -35,45 +57,114 @@ const Layout = () => {
 		};
 	}, [] );
 
+	const { query, requestingTaskList, taskListHidden } = props;
+	const isTaskListEnabled = taskListHidden === false;
+	const isDashboardShown = ! isTaskListEnabled || ! query.task;
+
+	const renderColumns = () => {
+		return (
+			<Fragment>
+				{ showInbox && (
+					<div className="woocommerce-homepage-column is-inbox">
+						<div className="temp-content">
+							<Button
+								isPrimary
+								onClick={ () => {
+									setShowInbox( false );
+								} }
+							>
+								Dismiss All
+							</Button>
+						</div>
+						<div className="temp-content" />
+						<div className="temp-content" />
+						<div className="temp-content" />
+						<div className="temp-content" />
+						<div className="temp-content" />
+						<div className="temp-content" />
+					</div>
+				) }
+				<div
+					className="woocommerce-homepage-column"
+					ref={ content }
+					style={ {
+						position: isContentSticky ? 'sticky' : 'static',
+					} }
+				>
+					{ isTaskListEnabled && renderTaskList() }
+					<StatsOverview />
+					<QuickLinks />
+				</div>
+			</Fragment>
+		);
+	};
+
+	const renderTaskList = () => {
+		if ( requestingTaskList ) {
+			return <TaskListPlaceholder />;
+		}
+
+		return (
+			<Suspense fallback={ <Spinner /> }>
+				<TaskList
+					query={ query }
+					inline
+				/>
+			</Suspense>
+		);
+	};
+
 	return (
 		<div
 			className={ classnames( 'woocommerce-homepage', {
 				hasInbox: showInbox,
 			} ) }
 		>
-			{ showInbox && (
-				<div className="woocommerce-homepage-column is-inbox">
-					<div className="temp-content">
-						<Button
-							isPrimary
-							onClick={ () => {
-								setShowInbox( false );
-							} }
-						>
-							Dismiss All
-						</Button>
-					</div>
-					<div className="temp-content" />
-					<div className="temp-content" />
-					<div className="temp-content" />
-					<div className="temp-content" />
-					<div className="temp-content" />
-					<div className="temp-content" />
-				</div>
-			) }
-			<div
-				className="woocommerce-homepage-column"
-				ref={ content }
-				style={ {
-					position: isContentSticky ? 'sticky' : 'static',
-				} }
-			>
-				<StatsOverview />
-
-				<QuickLinks />
-			</div>
+			{ isDashboardShown
+				? renderColumns()
+				: isTaskListEnabled && renderTaskList()
+			}
 		</div>
 	);
 };
 
-export default Layout;
+Layout.propTypes = {
+	/**
+	 * If the task list option is being fetched.
+	 */
+	requestingTaskList: PropTypes.bool.isRequired,
+	/**
+	 * If the task list is hidden.
+	 */
+	taskListHidden: PropTypes.bool,
+	/**
+	 * Page query, used to determine the current task if any.
+	 */
+	query: PropTypes.object.isRequired,
+};
+
+export default compose(
+	withSelect( ( select ) => {
+		const {
+			getOptions,
+			isGetOptionsRequesting,
+		} = select( 'wc-api' );
+
+		if ( isOnboardingEnabled() ) {
+			const options = getOptions( [
+				'woocommerce_task_list_hidden',
+			] );
+
+			return {
+				requestingTaskList: isGetOptionsRequesting( [
+					'woocommerce_task_list_hidden',
+				] ),
+				taskListHidden: get( options, [ 'woocommerce_task_list_hidden' ] ) === 'yes',
+			};
+		}
+
+		return {
+			requestingTaskList: false,
+		};
+	} )
+)( Layout );

client/homepage/style.scss

@@ -9,6 +9,10 @@
 	margin: 0 auto;
 	justify-content: space-between;
 
+	.woocommerce-task-dashboard__container {
+		width: 100%;
+	}
+
 	&.hasInbox .woocommerce-homepage-column {
 		width: calc(50% - 12px);
 		margin: 0;

client/homepage/test/index.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { Layout } from '../layout';
+
+// Rendering <StatsOverview /> breaks tests.
+jest.mock( 'homepage/stats-overview', () => jest.fn().mockReturnValue( null ) );
+
+// We aren't testing the <TaskList /> component here.
+jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) );
+
+describe( 'Homepage Layout', () => {
+	it( 'should show TaskList placeholder when loading', () => {
+		const { container } = render(
+			<Layout
+				requestingTaskList
+				taskListHidden={ false }
+				query={ {} }
+			/>
+		);
+
+		const placeholder = container.querySelector( '.woocommerce-task-card.is-loading' );
+		expect( placeholder ).not.toBeNull();
+	} );
+
+	it( 'should show TaskList inline', async () => {
+		const { container } = render(
+			<Layout
+				requestingTaskList={ false }
+				taskListHidden={ false }
+				query={ {} }
+			/>
+		);
+
+		// Expect that we're rendering the "full" home screen (with columns).
+		const columns = container.querySelector( '.woocommerce-homepage-column' );
+		expect( columns ).not.toBeNull();
+
+		// Expect that the <TaskList /> is there too.
+		const taskList = await screen.findByText( '[TaskList]' )
+		expect( taskList ).toBeDefined();
+	} );
+
+	it( 'should render TaskList alone when on task', async () => {
+		const { container } = render(
+			<Layout
+				requestingTaskList={ false }
+				taskListHidden={ false }
+				query={ {
+					task: 'products',
+				} }
+			/>
+		);
+
+		// Expect that we're NOT rendering the "full" home screen (with columns).
+		const columns = container.querySelector( '.woocommerce-homepage-column' );
+		expect( columns ).toBeNull();
+
+		// Expect that the <TaskList /> is there though.
+		const taskList = await screen.findByText( '[TaskList]' )
+		expect( taskList ).toBeDefined();
+	} );
+} );

client/dashboard/task-list/index.js → client/task-list/index.js

@@ -20,7 +20,7 @@ import { PLUGINS_STORE_NAME } from '@woocommerce/data';
  * Internal dependencies
  */
 import './style.scss';
-import CartModal from '../components/cart-modal';
+import CartModal from 'dashboard/components/cart-modal';
 import { getAllTasks } from './tasks';
 import { recordEvent } from 'lib/tracks';
 import withSelect from 'wc-api/with-select';
@@ -410,12 +410,12 @@ class TaskDashboard extends Component {
 
 export default compose(
 	withSelect( ( select, props ) => {
-		const { getProfileItems, getOptions } = select(
-			'wc-api'
-		);
-		const { getActivePlugins, getInstalledPlugins, isJetpackConnected } = select(
-			PLUGINS_STORE_NAME
-		);
+		const { getProfileItems, getOptions } = select( 'wc-api' );
+		const {
+			getActivePlugins,
+			getInstalledPlugins,
+			isJetpackConnected,
+		} = select( PLUGINS_STORE_NAME );
 		const profileItems = getProfileItems();
 
 		const options = getOptions( [