Show management links when the task list is complete (even if its not hidden). (https://github.com/woocommerce/woocommerce-admin/pull/6657)

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -49,10 +49,11 @@ export const Layout = ( {
 	isBatchUpdating,
 	query,
 	requestingTaskList,
-	isTaskListHidden,
+	taskListComplete,
 	bothTaskListsHidden,
 	shouldShowWelcomeModal,
 	shouldShowWelcomeFromCalypsoModal,
+	isTaskListHidden,
 	updateOptions,
 } ) => {
 	const userPrefs = useUserPreferences();
@@ -83,6 +84,7 @@ export const Layout = ( {
 	}, [ maybeToggleColumns ] );
 
 	const shouldStickColumns = isWideViewport.current && twoColumns;
+	const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
 
 	const renderColumns = () => {
 		return (
@@ -102,7 +104,7 @@ export const Layout = ( {
 				</Column>
 				<Column shouldStick={ shouldStickColumns }>
 					<StatsOverview />
-					{ isTaskListHidden && <StoreManagementLinks /> }
+					{ shouldShowStoreLinks && <StoreManagementLinks /> }
 				</Column>
 			</>
 		);
@@ -244,6 +246,10 @@ export default compose(
 				isResolving( 'getOption', [
 					'woocommerce_extended_task_list_hidden',
 				] ),
+			taskListComplete:
+				! isResolving( 'getOption', [
+					'woocommerce_task_list_complete',
+				] ) && getOption( 'woocommerce_task_list_complete' ) === 'yes',
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

plugins/woocommerce-admin/client/homescreen/test/index.js

@@ -9,19 +9,22 @@ import { useUserPreferences } from '@woocommerce/data';
  */
 import { Layout } from '../layout';
 
-// Rendering <StatsOverview /> breaks tests.
 jest.mock( 'homescreen/stats-overview', () =>
-	jest.fn().mockReturnValue( '[StatsOverview]' )
+	jest.fn().mockReturnValue( <div>[StatsOverview]</div> )
 );
 
-// We aren't testing the <TaskList /> component here.
+jest.mock( '../../inbox-panel', () =>
-jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) );
+	jest.fn().mockReturnValue( <div>[InboxPanel]</div> )
-
+);
-// We aren't testing the <InboxPanel /> component here.
-jest.mock( 'inbox-panel', () => jest.fn().mockReturnValue( '[InboxPanel]' ) );
 
 jest.mock( '../../store-management-links', () => ( {
-	StoreManagementLinks: jest.fn().mockReturnValue( '[StoreManagementLinks]' ),
+	StoreManagementLinks: jest
+		.fn()
+		.mockReturnValue( <div>[StoreManagementLinks]</div> ),
+} ) );
+
+jest.mock( '../activity-panel', () => ( {
+	ActivityPanel: jest.fn().mockReturnValue( <div>[ActivityPanel]</div> ),
 } ) );
 
 jest.mock( '@woocommerce/data', () => ( {
@@ -29,10 +32,14 @@ jest.mock( '@woocommerce/data', () => ( {
 	useUserPreferences: jest.fn().mockReturnValue( {} ),
 } ) );
 
-// We aren't testing the <ActivityPanel /> component here.
+jest.mock( '@wordpress/element', () => {
-jest.mock( '../activity-panel', () => ( {
+	return {
-	ActivityPanel: jest.fn().mockReturnValue( '[ActivityPanel]' ),
+		...jest.requireActual( '@wordpress/element' ),
-} ) );
+		Suspense: ( { children } ) => <div>{ children }</div>,
+		// It's not easy to mock a React.lazy component, since we only use one in this component, this mocks lazy to return a mocked <TaskList>
+		lazy: () => () => <div>[TaskList]</div>,
+	};
+} );
 
 describe( 'Homescreen Layout', () => {
 	it( 'should show TaskList placeholder when loading', () => {
@@ -48,13 +55,14 @@ describe( 'Homescreen Layout', () => {
 		const placeholder = container.querySelector(
 			'.woocommerce-task-card.is-loading'
 		);
-		expect( placeholder ).not.toBeNull();
+		expect( placeholder ).toBeInTheDocument();
 	} );
 
 	it( 'should show TaskList inline', () => {
 		const { container } = render(
 			<Layout
 				requestingTaskList={ false }
+				taskListComplete
 				bothTaskListsHidden={ false }
 				query={ {} }
 				updateOptions={ () => {} }
@@ -65,11 +73,11 @@ describe( 'Homescreen Layout', () => {
 		const columns = container.querySelector(
 			'.woocommerce-homescreen-column'
 		);
-		expect( columns ).not.toBeNull();
+		expect( columns ).toBeInTheDocument();
 
 		// Expect that the <TaskList /> is there too.
-		const taskList = screen.queryByText( /\[TaskList\]/ );
+		const taskList = screen.getByText( '[TaskList]' );
-		expect( taskList ).toBeDefined();
+		expect( taskList ).toBeInTheDocument();
 	} );
 
 	it( 'should render TaskList alone when on task', () => {
@@ -88,11 +96,11 @@ describe( 'Homescreen Layout', () => {
 		const columns = container.querySelector(
 			'.woocommerce-homescreen-column'
 		);
-		expect( columns ).toBeNull();
+		expect( columns ).not.toBeInTheDocument();
 
 		// Expect that the <TaskList /> is there though.
 		const taskList = screen.queryByText( '[TaskList]' );
-		expect( taskList ).toBeDefined();
+		expect( taskList ).toBeInTheDocument();
 	} );
 
 	it( 'should not show TaskList when user has hidden', () => {
@@ -106,35 +114,24 @@ describe( 'Homescreen Layout', () => {
 		);
 
 		const taskList = screen.queryByText( '[TaskList]' );
-		expect( taskList ).toBeNull();
+		expect( taskList ).not.toBeInTheDocument();
 	} );
 
-	it( 'should show QuickLinks when user has hidden TaskList', () => {
+	it( 'should show StoreManagementLinks when TaskList is complete, even if the task list is not hidden', () => {
-		render(
-			<Layout
-				requestingTaskList={ false }
-				bothTaskListsHidden
-				query={ {} }
-				updateOptions={ () => {} }
-			/>
-		);
-
-		const quickLinks = screen.queryByText( '[QuickLinks]' );
-		expect( quickLinks ).toBeDefined();
-	} );
-
-	it( 'should show QuickLinks when TaskList is complete', () => {
 		render(
 			<Layout
 				requestingTaskList={ false }
 				bothTaskListsHidden={ false }
+				taskListComplete
 				query={ {} }
 				updateOptions={ () => {} }
 			/>
 		);
 
-		const quickLinks = screen.queryByText( '[QuickLinks]' );
+		const storeManagementLinks = screen.queryByText(
-		expect( quickLinks ).toBeDefined();
+			'[StoreManagementLinks]'
+		);
+		expect( storeManagementLinks ).toBeInTheDocument();
 	} );
 
 	it( 'should default to layout option value', () => {
@@ -212,6 +209,7 @@ describe( 'Homescreen Layout', () => {
 		const { container } = render(
 			<Layout
 				requestingTaskList={ false }
+				taskListComplete
 				bothTaskListsHidden={ false }
 				query={ {} }
 				updateOptions={ () => {} }
@@ -226,24 +224,24 @@ describe( 'Homescreen Layout', () => {
 		const secondColumn = columns[ 1 ];
 
 		expect(
-			within( firstColumn ).getByText( /\[TaskList\]/ )
+			within( firstColumn ).getByText( '[TaskList]' )
 		).toBeInTheDocument();
 		expect(
-			within( firstColumn ).getByText( /\[InboxPanel\]/ )
+			within( firstColumn ).getByText( '[InboxPanel]' )
 		).toBeInTheDocument();
 		expect(
-			within( secondColumn ).queryByText( /\[TaskList\]/ )
+			within( secondColumn ).queryByText( '[TaskList]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 		expect(
-			within( secondColumn ).queryByText( /\[InboxPanel\]/ )
+			within( secondColumn ).queryByText( '[InboxPanel]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 
 		expect(
-			within( secondColumn ).getByText( /\[StatsOverview\]/ )
+			within( secondColumn ).getByText( '[StatsOverview]' )
 		).toBeInTheDocument();
 		expect(
-			within( firstColumn ).queryByText( /\[StatsOverview\]/ )
+			within( firstColumn ).queryByText( '[StatsOverview]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should display the correct blocks in each column when task list is hidden', () => {
@@ -253,6 +251,7 @@ describe( 'Homescreen Layout', () => {
 		const { container } = render(
 			<Layout
 				requestingTaskList={ false }
+				taskListComplete
 				bothTaskListsHidden={ false }
 				isTaskListHidden={ true }
 				query={ {} }
@@ -268,26 +267,26 @@ describe( 'Homescreen Layout', () => {
 		const secondColumn = columns[ 1 ];
 
 		expect(
-			within( firstColumn ).getByText( /\[TaskList\]/ )
+			within( firstColumn ).getByText( '[TaskList]' )
 		).toBeInTheDocument();
 		expect(
-			within( firstColumn ).getByText( /\[InboxPanel\]/ )
+			within( firstColumn ).getByText( '[InboxPanel]' )
 		).toBeInTheDocument();
 		expect(
-			within( secondColumn ).queryByText( /\[TaskList\]/ )
+			within( secondColumn ).queryByText( '[TaskList]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 		expect(
-			within( secondColumn ).queryByText( /\[InboxPanel\]/ )
+			within( secondColumn ).queryByText( '[InboxPanel]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 
 		expect(
-			within( secondColumn ).getByText( /\[StatsOverview\]/ )
+			within( secondColumn ).getByText( '[StatsOverview]' )
 		).toBeInTheDocument();
 		expect(
-			within( secondColumn ).getByText( /\[StoreManagementLinks\]/ )
+			within( secondColumn ).getByText( '[StoreManagementLinks]' )
 		).toBeInTheDocument();
 		expect(
-			within( firstColumn ).queryByText( /\[StatsOverview\]/ )
+			within( firstColumn ).queryByText( '[StatsOverview]' )
-		).toBeNull();
+		).not.toBeInTheDocument();
 	} );
 } );

plugins/woocommerce-admin/readme.txt

@@ -138,6 +138,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Add: Paystack payment provider to several african countries. #6579
 - Dev: Payments task: include Mercado Pago #6572
 - Dev: Ensure script asset.php files are included in builds #6635
+- Fix: Show management links when the task list is complete (even if its not hidden). #6657
 - Fix: Adding New Zealand and Ireland to selective bundle option, previously missed. #6649
 - Fix: Update the Mercado option used for enabling/disabling. #6677