Domains Management Revamp: Show the Add Forward Email subpage in site…

… context (#98294)

* Include Add Email Forwarding subpage to the site context

* Update paths

* Update tests

* Fix SubpageWrapper tests

* Update EmailPathUtilityFunction

* Fix typo

* Fix site and domain order on breadcrumb path

client/hosting/overview/index.tsx

@@ -15,7 +15,10 @@ import {
 	DOMAIN_OVERVIEW,
 	EMAIL_MANAGEMENT,
 } from 'calypso/my-sites/domains/domain-management/domain-overview-pane/constants';
-import { EDIT_CONTACT_INFO } from 'calypso/my-sites/domains/domain-management/subpage-wrapper/subpages';
+import {
+	ADD_FORWARDING_EMAIL,
+	EDIT_CONTACT_INFO,
+} from 'calypso/my-sites/domains/domain-management/subpage-wrapper/subpages';
 import emailController from 'calypso/my-sites/email/controller';
 import {
 	DOTCOM_HOSTING_CONFIG,
@@ -127,4 +130,13 @@ export default function () {
 			domainManagementController.domainManagementSubpageView,
 		],
 	} );
+
+	registerSiteDomainPage( {
+		path: '/overview/site-domain/email/:domain/forwarding/add/:site',
+		controllers: [
+			domainManagementController.domainManagementSubpageParams( ADD_FORWARDING_EMAIL ),
+			emailController.emailManagementAddEmailForwards,
+			domainManagementController.domainManagementSubpageView,
+		],
+	} );
 }

client/my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx

@@ -1,25 +1,67 @@
+import { SiteExcerptData } from '@automattic/sites';
 import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
 import NavigationHeader from 'calypso/components/navigation-header';
+import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths';
+import { getEmailManagementPath } from 'calypso/my-sites/email/paths';
+import SiteIcon from 'calypso/sites/components/sites-dataviews/site-icon';
+import { useSelector } from 'calypso/state';
+import { getSite } from 'calypso/state/sites/selectors';
 import { CustomHeaderComponentType } from './custom-header-component-type';
 
 const AddForwardingEmailHeader: CustomHeaderComponentType = ( {
 	selectedDomainName,
 	selectedSiteSlug,
+	inSiteContext,
 } ) => {
 	const translate = useTranslate();
+	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) as SiteExcerptData );
+
+	const navigationItems = useMemo( () => {
+		const baseNavigationItems = [
+			{
+				label: selectedDomainName,
+				href: domainManagementAllOverview(
+					selectedSiteSlug,
+					selectedDomainName,
+					null,
+					inSiteContext
+				),
+			},
+			{
+				label: translate( 'Email' ),
+				href: getEmailManagementPath(
+					selectedSiteSlug,
+					selectedDomainName,
+					null,
+					undefined,
+					inSiteContext
+				),
+			},
+			{
+				label: translate( 'Add email forwarding' ),
+			},
+		];
+
+		if ( inSiteContext ) {
+			return [
+				{
+					label: site?.name || selectedDomainName,
+					href: `/overview/${ selectedSiteSlug }`,
+					icon: <SiteIcon site={ site } viewType="breadcrumb" disableClick />,
+				},
+				...baseNavigationItems,
+			];
+		}
+
+		return baseNavigationItems;
+	}, [ inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] );
+
 	return (
 		<>
 			<NavigationHeader
 				className="navigation-header__breadcrumb"
-				navigationItems={ [
-					{
-						label: selectedDomainName,
-						href: `/domains/manage/all/email/${ selectedDomainName }/${ selectedSiteSlug }`,
-					},
-					{
-						label: translate( 'Add email forwarding' ),
-					},
-				] }
+				navigationItems={ navigationItems }
 			/>
 			<NavigationHeader
 				className="navigation-header__title"

client/my-sites/domains/domain-management/subpage-wrapper/test/index.test.tsx

@@ -3,14 +3,42 @@
  */
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
 import SubpageWrapper from '../index';
 import { ADD_FORWARDING_EMAIL, ADD_DNS_RECORD, EDIT_DNS_RECORD } from '../subpages';
 
 jest.mock( 'component-file-picker', () => () => <div>File Picker</div> );
 
+const initialState = {
+	sites: {
+		items: {
+			1: {
+				ID: 1,
+				URL: 'example.wordpress.com',
+				plan: {
+					product_slug: 'free_plan',
+				},
+				options: {
+					is_wpforteams_site: false,
+				},
+			},
+		},
+	},
+	ui: {
+		selectedSiteId: 1,
+	},
+};
+
+const mockStore = configureStore();
+const store = mockStore( initialState );
+
+const wrapper = ( { children } ) => <Provider store={ store }>{ children }</Provider>;
+const renderWithWrapper = ( component ) => render( component, { wrapper } );
+
 describe( 'SubpageWrapper', () => {
 	it( 'should render the children', () => {
-		render(
+		renderWithWrapper(
 			<SubpageWrapper
 				subpageKey={ ADD_FORWARDING_EMAIL }
 				siteName="site.com"
@@ -24,7 +52,7 @@ describe( 'SubpageWrapper', () => {
 	} );
 
 	it( 'should render the children with the subpage header', () => {
-		render(
+		renderWithWrapper(
 			<SubpageWrapper
 				subpageKey={ ADD_FORWARDING_EMAIL }
 				siteName="site.com"
@@ -43,7 +71,7 @@ describe( 'SubpageWrapper', () => {
 	} );
 
 	it( 'should render the children without the subpage header', () => {
-		render(
+		renderWithWrapper(
 			<SubpageWrapper subpageKey="non-existent" siteName="site.com" domainName="domain.com">
 				<span>Hello</span>
 			</SubpageWrapper>
@@ -53,7 +81,7 @@ describe( 'SubpageWrapper', () => {
 	} );
 
 	it( 'should render Add DNS subpage breadcrumbs', () => {
-		const { container } = render(
+		const { container } = renderWithWrapper(
 			<SubpageWrapper subpageKey={ ADD_DNS_RECORD } siteName="site.com" domainName="domain.com">
 				<span>Hello</span>
 			</SubpageWrapper>
@@ -68,7 +96,7 @@ describe( 'SubpageWrapper', () => {
 	} );
 
 	it( 'should render Edit DNS subpage breadcrumbs', () => {
-		const { container } = render(
+		const { container } = renderWithWrapper(
 			<SubpageWrapper subpageKey={ EDIT_DNS_RECORD } siteName="site.com" domainName="domain.com">
 				<span>Hello</span>
 			</SubpageWrapper>

client/my-sites/email/paths.ts

@@ -1,19 +1,26 @@
 import { isEnabled } from '@automattic/calypso-config';
 import { stringify } from 'qs';
-import { isUnderDomainManagementAll, domainManagementRoot } from 'calypso/my-sites/domains/paths';
+import {
+	isUnderDomainManagementAll,
+	isUnderDomainSiteContext,
+	domainManagementRoot,
+	domainSiteContextRoot,
+} from 'calypso/my-sites/domains/paths';
 
 type QueryStringParameters = { [ key: string ]: string | undefined };
 
 type EmailPathUtilityFunction = (
 	siteName: string | null | undefined,
 	domainName?: string | null,
 	relativeTo?: string | null,
-	urlParameters?: QueryStringParameters
+	urlParameters?: QueryStringParameters,
+	inSiteContext?: boolean
 ) => string;
 
 export const emailManagementPrefix = '/email';
 export const emailManagementAllSitesPrefix = '/email/all';
 export const domainsManagementPrefix = '/domains/manage/all/email';
+export const emailSiteContextPrefix = `${ domainSiteContextRoot() }/email`;
 
 export function isUnderEmailManagementAll( path?: string | null ) {
 	return path?.startsWith( emailManagementAllSitesPrefix + '/' );
@@ -78,7 +85,11 @@ export const getAddEmailForwardsPath: EmailPathUtilityFunction = (
 	urlParameters
 ) => {
 	if ( isUnderDomainManagementAll( relativeTo ) ) {
-		return `${ domainsManagementPrefix }/${ domainName }/forwarding/add/${ siteName }${ buildQueryString(
+		const prefix = isUnderDomainSiteContext( relativeTo )
+			? emailSiteContextPrefix
+			: domainsManagementPrefix;
+
+		return `${ prefix }/${ domainName }/forwarding/add/${ siteName }${ buildQueryString(
 			urlParameters
 		) }`;
 	}
@@ -155,13 +166,17 @@ export const getTitanControlPanelRedirectPath: EmailPathUtilityFunction = (
 export const getEmailManagementPath: EmailPathUtilityFunction = (
 	siteName,
 	domainName,
-	relativeTo,
-	urlParameters
+	relativeTo = null,
+	urlParameters = {},
+	inSiteContext = false
 ) => {
-	if ( isEnabled( 'calypso/all-domain-management' ) && isUnderDomainManagementAll( relativeTo ) ) {
-		return `${ domainsManagementPrefix }/${ siteName }/${ domainName }${ buildQueryString(
-			urlParameters
-		) }`;
+	if ( inSiteContext || isUnderDomainManagementAll( relativeTo ) ) {
+		const prefix =
+			inSiteContext || isUnderDomainSiteContext( relativeTo )
+				? emailSiteContextPrefix
+				: domainsManagementPrefix;
+
+		return `${ prefix }/${ domainName }/${ siteName }${ buildQueryString( urlParameters ) }`;
 	}
 
 	return getPath( siteName, domainName, 'manage', relativeTo, urlParameters );

client/my-sites/email/test/paths.ts

@@ -43,6 +43,11 @@ describe( 'path helper functions', () => {
 		expect( getAddEmailForwardsPath( ':site', ':domain', domainsManagementPrefix ) ).toEqual(
 			'/domains/manage/all/email/:domain/forwarding/add/:site'
 		);
+
+		const relativeTo = '/overview/site-domain/email';
+		expect( getAddEmailForwardsPath( siteName, domainName, relativeTo ) ).toEqual(
+			`/overview/site-domain/email/${ domainName }/forwarding/add/${ siteName }`
+		);
 	} );
 
 	it( 'getAddGSuiteUsersPath', () => {
@@ -135,6 +140,16 @@ describe( 'path helper functions', () => {
 		expect( getEmailManagementPath( ':site' ) ).toEqual( '/email/:site' );
 		expect( getEmailManagementPath( siteName, null ) ).toEqual( `/email/${ siteName }` );
 		expect( getEmailManagementPath( null, null ) ).toEqual( '/email' );
+
+		const relativeTo = '/domains/manage/all/email';
+		expect( getEmailManagementPath( siteName, domainName, relativeTo ) ).toEqual(
+			`/domains/manage/all/email/${ domainName }/${ siteName }`
+		);
+
+		const inSiteContext = true;
+		expect( getEmailManagementPath( siteName, domainName, relativeTo, {}, inSiteContext ) ).toEqual(
+			`/overview/site-domain/email/${ domainName }/${ siteName }`
+		);
 	} );
 
 	it( 'getForwardingPath', () => {