My Jetpack: show the Overview v1 Welcome heading above notices and banners (#54098)

Author: xavier-lc

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx

@@ -11,14 +11,17 @@ import OverviewSections from '../../product-cards-section/overview-sections';
 import SeoOptInCard from '../../seo-opt-in-card';
 import { A4AUpsell } from './a4a-upsell';
 import styles from './styles.module.scss';
+import type { ReactNode } from 'react';
 
 /**
  * The Overview content component. The full-width footer band (Plans +
  * Connection), when shown, lives in `OverviewFooter`, rendered by `TabContent`.
  *
+ * @param {object}    props               - Component props.
+ * @param {ReactNode} props.beforeContent - Notices, shown below the Welcome heading.
  * @return The rendered component.
  */
-export function OverviewContent() {
+export function OverviewContent( { beforeContent }: { beforeContent?: ReactNode } ) {
 	const { overviewV1 = false } = getMyJetpackWindowInitialState( 'myJetpackFlags' );
 	// Loads the plans the header's plan summary shows, so they're ready when it opens.
 	useSitePurchases( { enabled: isHeaderControlsEnabled() } );
@@ -43,6 +46,7 @@ export function OverviewContent() {
 									: __( 'Welcome to Jetpack', 'jetpack-my-jetpack' ) }
 							</Text>
 						</div>
+						{ beforeContent }
 						<OverviewSections />
 						<OverviewBlogPosts />
 					</>

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/test/content.test.tsx

@@ -33,4 +33,14 @@ describe( 'OverviewContent', () => {
 			expect( screen.getByRole( 'heading', { level: 2, name: heading } ) ).toBeInTheDocument();
 		}
 	);
+
+	it( 'shows the notices below the Welcome heading', () => {
+		render( <OverviewContent beforeContent={ <div>Notice</div> } /> );
+
+		expect(
+			screen
+				.getByRole( 'heading', { level: 2 } )
+				.compareDocumentPosition( screen.getByText( 'Notice' ) )
+		).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
 } );

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import { isHeaderControlsEnabled } from '../header-controls/slot';
 import { FeaturesContent } from './features/content';
 import { FullWidthSeparator } from './full-width-separator';
@@ -15,7 +16,7 @@ export type TabContentProps = {
 	beforeContent?: ReactNode;
 };
 
-const componentMap: Record< MyJetpackSection, ComponentType > = {
+const componentMap: Record< MyJetpackSection, ComponentType< { beforeContent?: ReactNode } > > = {
 	overview: OverviewContent,
 	features: FeaturesContent,
 	help: HelpContent,
@@ -44,6 +45,8 @@ export function TabContent( { name, beforeContent }: TabContentProps ) {
 	// The header's connection control shows the plan and the connection, so the Overview's band would repeat them.
 	const dropsOverviewFooter = name === 'overview' && isHeaderControlsEnabled();
 	const FooterComponent = dropsOverviewFooter ? undefined : footerMap[ name ];
+	const { overviewV1 = false } = getMyJetpackWindowInitialState( 'myJetpackFlags' );
+	const noticesBelowWelcome = name === 'overview' && overviewV1;
 
 	if ( ! ContentComponent ) {
 		return null;
@@ -53,8 +56,8 @@ export function TabContent( { name, beforeContent }: TabContentProps ) {
 		<>
 			<div className={ styles[ 'my-jetpack-tab-panel-inner' ] }>
 				<div className={ clsx( styles[ 'tab-content-wrapper' ] ) }>
-					{ beforeContent }
-					<ContentComponent />
+					{ ! noticesBelowWelcome && beforeContent }
+					<ContentComponent beforeContent={ noticesBelowWelcome ? beforeContent : undefined } />
 				</div>
 			</div>
 			{ FooterComponent && (

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/test/tab-content.test.tsx

@@ -6,7 +6,14 @@ import { TabContent } from '../tab-content';
 jest.mock( '../features/content', () => ( {
 	FeaturesContent: () => jest.requireActual( 'react' ).createElement( 'div', null, 'Features' ),
 } ) );
-jest.mock( '../overview/content', () => ( { OverviewContent: () => null } ) );
+jest.mock( '../overview/content', () => ( {
+	OverviewContent: ( { beforeContent } ) =>
+		jest.requireActual( 'react' ).createElement( 'section', null, beforeContent ),
+} ) );
+let mockOverviewV1 = false;
+jest.mock( '../../../data/utils/get-my-jetpack-window-state', () => ( {
+	getMyJetpackWindowInitialState: () => ( { overviewV1: mockOverviewV1 } ),
+} ) );
 jest.mock( '../overview/footer', () => ( {
 	OverviewFooter: () =>
 		jest.requireActual( 'react' ).createElement( 'div', null, 'Plan and Connection' ),
@@ -31,6 +38,19 @@ describe( 'TabContent', () => {
 		expect( notice.compareDocumentPosition( section ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
 	} );
 
+	it.each( [ false, true ] )(
+		'with Overview v1 on: %s, leaves the notices to the Overview only when on',
+		overviewV1 => {
+			mockOverviewV1 = overviewV1;
+			render(
+				<TabContent name={ MY_JETPACK_SECTION_OVERVIEW } beforeContent={ <div>Notice</div> } />
+			);
+
+			// eslint-disable-next-line testing-library/no-node-access -- The Overview content has no role or text to query by.
+			expect( screen.getByText( 'Notice' ).closest( 'section' ) !== null ).toBe( overviewV1 );
+		}
+	);
+
 	it.each( [
 		[ false, 1 ],
 		[ true, 0 ],

projects/packages/my-jetpack/changelog/update-my-jetpack-overview-v1-welcome-first

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Overview: Show the Welcome heading above notices and banners, behind the Overview v1 feature flag.