From 7f59272423934c103a055895d490a135aec2599c Mon Sep 17 00:00:00 2001 From: Paulo Cruz Date: Tue, 14 Jan 2025 15:57:19 -0300 Subject: [PATCH] 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 | 14 ++++- .../headers/add-fowarding-email-header.tsx | 60 ++++++++++++++++--- .../subpage-wrapper/test/index.test.tsx | 38 ++++++++++-- client/my-sites/email/paths.ts | 33 +++++++--- client/my-sites/email/test/paths.ts | 15 +++++ 5 files changed, 136 insertions(+), 24 deletions(-) diff --git a/client/hosting/overview/index.tsx b/client/hosting/overview/index.tsx index 1f362f65e73c5..952275cf3076d 100644 --- a/client/hosting/overview/index.tsx +++ b/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, + ], + } ); } diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx index 2ec3b193aceef..7a64a085ca77a 100644 --- a/client/my-sites/domains/domain-management/subpage-wrapper/headers/add-fowarding-email-header.tsx +++ b/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: , + }, + ...baseNavigationItems, + ]; + } + + return baseNavigationItems; + }, [ inSiteContext, selectedDomainName, selectedSiteSlug, site, translate ] ); + return ( <> () =>
File Picker
); +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 } ) => { children }; +const renderWithWrapper = ( component ) => render( component, { wrapper } ); + describe( 'SubpageWrapper', () => { it( 'should render the children', () => { - render( + renderWithWrapper( { } ); it( 'should render the children with the subpage header', () => { - render( + renderWithWrapper( { } ); it( 'should render the children without the subpage header', () => { - render( + renderWithWrapper( Hello @@ -53,7 +81,7 @@ describe( 'SubpageWrapper', () => { } ); it( 'should render Add DNS subpage breadcrumbs', () => { - const { container } = render( + const { container } = renderWithWrapper( Hello @@ -68,7 +96,7 @@ describe( 'SubpageWrapper', () => { } ); it( 'should render Edit DNS subpage breadcrumbs', () => { - const { container } = render( + const { container } = renderWithWrapper( Hello diff --git a/client/my-sites/email/paths.ts b/client/my-sites/email/paths.ts index cf914b8d739a9..a9331b15374cd 100644 --- a/client/my-sites/email/paths.ts +++ b/client/my-sites/email/paths.ts @@ -1,6 +1,11 @@ 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 }; @@ -8,12 +13,14 @@ 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 ); diff --git a/client/my-sites/email/test/paths.ts b/client/my-sites/email/test/paths.ts index 01167bd7e2664..794f4a1ddc479 100644 --- a/client/my-sites/email/test/paths.ts +++ b/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', () => {