Move inbox panel to left column, to increase user interaction (https://github.com/woocommerce/woocommerce-admin/pull/6122)

* Move inbox panel to left column, to increase user interaction

* Add changelog

* Fix and add test

* Remove old loading banner-block

* Remove unused css

* Fix test with new props

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

@@ -96,16 +96,11 @@ export const Layout = ( {
 					/>
 					<ActivityPanel />
 					{ isTaskListEnabled && renderTaskList() }
-					{ ! isTaskListEnabled && shouldStickColumns && (
-						<StoreManagementLinks />
-					) }
+					<InboxPanel />
 				</Column>
 				<Column shouldStick={ shouldStickColumns }>
 					<StatsOverview />
-					<InboxPanel />
-					{ ! isTaskListEnabled && ! shouldStickColumns && (
-						<StoreManagementLinks />
-					) }
+					{ ! isTaskListEnabled && <StoreManagementLinks /> }
 				</Column>
 			</>
 		);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { useUserPreferences } from '@woocommerce/data';
 
 /**
@@ -11,7 +11,7 @@ import { Layout } from '../layout';
 
 // Rendering <StatsOverview /> breaks tests.
 jest.mock( 'homescreen/stats-overview', () =>
-	jest.fn().mockReturnValue( null )
+	jest.fn().mockReturnValue( '[StatsOverview]' )
 );
 
 // We aren't testing the <TaskList /> component here.
@@ -64,7 +64,7 @@ describe( 'Homescreen Layout', () => {
 		expect( columns ).not.toBeNull();
 
 		// Expect that the <TaskList /> is there too.
-		const taskList = screen.queryByText( '[TaskList]' );
+		const taskList = screen.queryByText( /\[TaskList\]/ );
 		expect( taskList ).toBeDefined();
 	} );
 
@@ -200,4 +200,45 @@ describe( 'Homescreen Layout', () => {
 			)
 		).toHaveLength( 1 );
 	} );
+
+	it( 'should display the correct blocks in each column', () => {
+		useUserPreferences.mockReturnValue( {
+			homepage_layout: 'two_columns',
+		} );
+		const { container } = render(
+			<Layout
+				requestingTaskList={ false }
+				bothTaskListsHidden={ false }
+				query={ {} }
+				updateOptions={ () => {} }
+			/>
+		);
+
+		const columns = container.getElementsByClassName(
+			'woocommerce-homescreen-column'
+		);
+		expect( columns ).toHaveLength( 2 );
+		const firstColumn = columns[ 0 ];
+		const secondColumn = columns[ 1 ];
+
+		expect(
+			within( firstColumn ).getByText( /\[TaskList\]/ )
+		).toBeInTheDocument();
+		expect(
+			within( firstColumn ).getByText( /\[InboxPanel\]/ )
+		).toBeInTheDocument();
+		expect(
+			within( secondColumn ).queryByText( /\[TaskList\]/ )
+		).toBeNull();
+		expect(
+			within( secondColumn ).queryByText( /\[InboxPanel\]/ )
+		).toBeNull();
+
+		expect(
+			within( secondColumn ).getByText( /\[StatsOverview\]/ )
+		).toBeInTheDocument();
+		expect(
+			within( firstColumn ).queryByText( /\[StatsOverview\]/ )
+		).toBeNull();
+	} );
 } );

plugins/woocommerce-admin/client/inbox-panel/placeholder.js

@@ -12,9 +12,6 @@ class InboxNotePlaceholder extends Component {
 				className={ `woocommerce-inbox-message is-placeholder ${ className }` }
 				aria-hidden
 			>
-				<div className="woocommerce-inbox-message__image">
-					<div className="banner-block" />
-				</div>
 				<div className="woocommerce-inbox-message__wrapper">
 					<div className="woocommerce-inbox-message__content">
 						<div className="woocommerce-inbox-message__date">

plugins/woocommerce-admin/client/inbox-panel/style.scss

@@ -174,16 +174,6 @@
 	}
 }
 
-.woocommerce-inbox-message__image {
-	.banner-block {
-		.is-placeholder & {
-			@include placeholder();
-			width: 100%;
-			height: 120px;
-		}
-	}
-}
-
 .woocommerce-homepage-notes-wrapper {
 	padding-top: $gap-large;
 }

plugins/woocommerce-admin/readme.txt

@@ -82,6 +82,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Update: store deprecation welcome modal support doc link #6094
 - Enhancement: Allowing users to create products by selecting a template. #5892
 - Dev: Add wait script for mysql to be ready for phpunit tests in docker. #6185
+- Update: Homescreen layout, moving Inbox panel for better interaction. #6122
 
 == Changelog ==