WIP

Automattic · Jan 10, 2025 · e6e8336 · e6e8336
1 parent dfab8a9
commit e6e8336
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 45 deletions.
diff --git a/client/hosting/overview/index.tsx b/client/hosting/overview/index.tsx
@@ -15,6 +15,7 @@ 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 emailController from 'calypso/my-sites/email/controller';
 import {
 	DOTCOM_HOSTING_CONFIG,
@@ -117,4 +118,13 @@ export default function () {
 			domainManagementController.domainManagementPaneView( EMAIL_MANAGEMENT ),
 		],
 	} );
+
+	registerSiteDomainPage( {
+		path: '/overview/site-domain/contact-info/edit/:domain/:site',
+		controllers: [
+			domainManagementController.domainManagementSubpageParams( EDIT_CONTACT_INFO ),
+			domainManagementController.domainManagementEditContactInfo,
+			domainManagementController.domainManagementSubpageView,
+		],
+	} );
 }
diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx b/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx
@@ -5,11 +5,10 @@ import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo, useRef } from 'react';
-import SiteFavicon from 'calypso/blocks/site-favicon';
 import NavigationHeader from 'calypso/components/navigation-header';
 import ItemView from 'calypso/layout/hosting-dashboard/item-view';
 import * as paths from 'calypso/my-sites/domains/paths';
-import { getMigrationStatus } from 'calypso/sites-dashboard/utils';
+import SiteIcon from 'calypso/sites/components/sites-dataviews/site-icon';
 import { useSiteAdminInterfaceData } from 'calypso/state/sites/hooks';
 import {
 	FEATURE_TO_ROUTE_MAP,
@@ -145,9 +144,6 @@ const DomainOverviewPane = ( {
 		} );
 	}, [ selectedFeature, selectedDomainPreview, inSiteContext, selectedDomain, siteSlug ] );
 
-	const isMigrationPending = getMigrationStatus( site ) === 'pending';
-	const faviconFallback = isMigrationPending ? 'migration' : 'first-grapheme';
-
 	return (
 		<>
 			{ inSiteContext && (
@@ -157,7 +153,7 @@ const DomainOverviewPane = ( {
 							{
 								label: site.name || selectedDomain,
 								href: `/overview/${ siteSlug }`,
-								icon: <SiteFavicon blogId={ site.ID } size={ 24 } fallback={ faviconFallback } />,
+								icon: <SiteIcon site={ site } viewType="breadcrumb" disableClick />,
 							},
 							{
 								label: selectedDomain,

diff --git a/...sites/domains/domain-management/edit-contact-info-page/edit-contact-info-page-content.tsx b/...sites/domains/domain-management/edit-contact-info-page/edit-contact-info-page-content.tsx
@@ -44,7 +44,7 @@ const EditContactInfoPageContent = ( {
 	}
 
 	const backUrl = isUnderDomainManagementAll( currentRoute )
-		? domainManagementAllOverview( selectedSite?.slug ?? '', selectedDomainName )
+		? domainManagementAllOverview( selectedSite?.slug ?? '', selectedDomainName, currentRoute )
 		: domainManagementEdit( selectedSite?.slug ?? '', selectedDomainName, currentRoute );
 
 	return (

diff --git a/client/my-sites/domains/domain-management/edit-contact-info-page/index.tsx b/client/my-sites/domains/domain-management/edit-contact-info-page/index.tsx
@@ -2,7 +2,7 @@ import page from '@automattic/calypso-router';
 import { Card } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { useTranslate } from 'i18n-calypso';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import TwoColumnsLayout from 'calypso/components/domains/layout/two-columns-layout';
 import ExternalLink from 'calypso/components/external-link';
@@ -12,11 +12,7 @@ import BodySectionCssClass from 'calypso/layout/body-section-css-class';
 import { getSelectedDomain } from 'calypso/lib/domains';
 import DomainMainPlaceholder from 'calypso/my-sites/domains/domain-management/components/domain/main-placeholder';
 import DomainHeader from 'calypso/my-sites/domains/domain-management/components/domain-header';
-import {
-	domainManagementEdit,
-	domainManagementList,
-	isUnderDomainManagementAll,
-} from 'calypso/my-sites/domains/paths';
+import { domainManagementEdit, domainManagementList } from 'calypso/my-sites/domains/paths';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import isRequestingWhois from 'calypso/state/selectors/is-requesting-whois';
 import { IAppState } from 'calypso/state/types';
@@ -31,6 +27,7 @@ const EditContactInfoPage = ( {
 	isRequestingWhois,
 	selectedDomainName,
 	selectedSite,
+	context = { showPageHeader: true },
 }: EditContactInfoPageProps ) => {
 	const translate = useTranslate();
 
@@ -47,13 +44,8 @@ const EditContactInfoPage = ( {
 		return ! getSelectedDomain( { domains, selectedDomainName } ) || isRequestingWhois;
 	};
 
-	const isAllDomainManagementScreen = useMemo(
-		() => isUnderDomainManagementAll( currentRoute ),
-		[ currentRoute ]
-	);
-
 	const renderHeader = () => {
-		if ( ! selectedSite || isAllDomainManagementScreen ) {
+		if ( ! selectedSite ) {
 			return null;
 		}
 
@@ -65,7 +57,7 @@ const EditContactInfoPage = ( {
 
 		const items = [
 			{
-				label: isAllDomainManagementScreen ? translate( 'All Domains' ) : translate( 'Domains' ),
+				label: translate( 'Domains' ),
 				href: domainManagementList(
 					selectedSite?.slug,
 					currentRoute,
@@ -101,7 +93,7 @@ const EditContactInfoPage = ( {
 			/>
 		);
 
-		return isAllDomainManagementScreen ? <Card>{ pageContent }</Card> : pageContent;
+		return <Card>{ pageContent }</Card>;
 	};
 
 	const renderSidebar = () => {
@@ -162,7 +154,7 @@ const EditContactInfoPage = ( {
 	return (
 		<Main className="edit-contact-info-page" wideLayout>
 			<BodySectionCssClass bodyClass={ [ 'edit__body-white' ] } />
-			{ renderHeader() }
+			{ context?.showPageHeader && renderHeader() }
 			<TwoColumnsLayout content={ renderContent() } sidebar={ renderSidebar() } />
 		</Main>
 	);

diff --git a/client/my-sites/domains/domain-management/edit-contact-info-page/types.tsx b/client/my-sites/domains/domain-management/edit-contact-info-page/types.tsx
@@ -6,6 +6,9 @@ export type EditContactInfoPageProps = {
 	isRequestingWhois: boolean;
 	selectedDomainName: string;
 	selectedSite: SiteDetails | null;
+	context?: {
+		showPageHeader?: boolean;
+	};
 };
 
 export type EditContactInfoPageContentProps = {

diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss
@@ -142,7 +142,8 @@
 
 // The `/domains/manage` page
 // Generic domains table styles should go in `packages/domains-table/src/domains-table/style.scss`
-.is-bulk-all-domains-page .layout__content {
+.is-bulk-all-domains-page .layout__content,
+.is-domain-in-site-context .layout__content {
 	overflow: auto;
 	.main {
 		.navigation-header {

diff --git a/...my-sites/domains/domain-management/subpage-wrapper/headers/contact-information-header.tsx b/...my-sites/domains/domain-management/subpage-wrapper/headers/contact-information-header.tsx
@@ -1,7 +1,9 @@
+import { SiteExcerptData } from '@automattic/sites';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import NavigationHeader from 'calypso/components/navigation-header';
-import { domainManagementOverviewRoot } from 'calypso/my-sites/domains/paths';
+import { domainManagementAllOverview } from 'calypso/my-sites/domains/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';
@@ -12,13 +14,18 @@ const ContactInformationHeader: CustomHeaderComponentType = ( {
 	inSiteContext,
 } ) => {
 	const translate = useTranslate();
-	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) );
+	const site = useSelector( ( state ) => getSite( state, selectedSiteSlug ) as SiteExcerptData );
 
 	const navigationItems = useMemo( () => {
 		const baseNavigationItems = [
 			{
 				label: selectedDomainName,
-				href: `${ domainManagementOverviewRoot() }/${ selectedDomainName }/${ selectedSiteSlug }`,
+				href: domainManagementAllOverview(
+					selectedSiteSlug,
+					selectedDomainName,
+					null,
+					inSiteContext
+				),
 			},
 			{
 				label: translate( 'Contact information' ),
@@ -30,6 +37,7 @@ const ContactInformationHeader: CustomHeaderComponentType = ( {
 				{
 					label: site?.name || selectedDomainName,
 					href: `/overview/${ selectedSiteSlug }`,
+					icon: <SiteIcon site={ site } viewType="breadcrumb" disableClick />,
 				},
 				...baseNavigationItems,
 			];

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/index.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import NavigationHeader from 'calypso/components/navigation-header';
+import BodySectionCssClass from 'calypso/layout/body-section-css-class';
 import { domainManagementAllOverview } from 'calypso/my-sites/domains/paths';
 import { getSubpageParams } from './subpages';
 import './style.scss';
@@ -24,6 +25,7 @@ const SubpageWrapper = ( {
 	if ( CustomHeader ) {
 		return (
 			<div className={ clsx( 'subpage-wrapper', `subpage-wrapper--${ subpageKey }` ) }>
+				<BodySectionCssClass bodyClass={ [ 'is-domain-in-site-context' ] } />
 				<CustomHeader
 					selectedDomainName={ domainName }
 					selectedSiteSlug={ siteName }
@@ -48,6 +50,7 @@ const SubpageWrapper = ( {
 
 		return (
 			<div className={ clsx( 'subpage-wrapper', `subpage-wrapper--${ subpageKey }` ) }>
+				<BodySectionCssClass bodyClass={ [ 'is-domain-in-site-context' ] } />
 				<NavigationHeader
 					className="subpage-wrapper__header"
 					navigationItems={ breadcrumbItems }

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/style.scss b/client/my-sites/domains/domain-management/subpage-wrapper/style.scss
@@ -38,6 +38,15 @@
 		}
 	}
 
+
+    .email-forwards-add,
+    .edit-contact-info-page {
+		.button {
+			padding: 10px 24px;
+			border-radius: 4px;
+		}
+    }
+
 	.email-forwards-add {
 		.card {
 			border-radius: 4px;
@@ -50,11 +59,6 @@
 			margin-top: 0;
 			margin-bottom: 16px;
 		}
-
-		.button {
-			padding: 10px 24px;
-			border-radius: 4px;
-		}
 	}
 
 	.edit-contact-info-page {
@@ -66,6 +70,10 @@
 		.contact-details-form-fields {
 			padding: 0;
 		}
+
+        .contact-details-form-fields__submit-button {
+            margin-right: 16px;
+        }
 	}
 
     .dns-records {
@@ -194,14 +202,17 @@
 	}
 }
 
-.is-bulk-all-domains-page .layout__content .main {
+.is-bulk-all-domains-page .layout__content .main,
+.is-domain-in-site-context .layout__content .main {
     .navigation-header {
         &__breadcrumb,
         &__title {
             border-block-end: none;
         }
 
         &__breadcrumb {
+            padding-top: 24px;
+
             @media ( max-width: $break-medium ) {
                 padding-top: 16px;
             }

diff --git a/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx b/client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx
@@ -50,6 +50,7 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 	},
 	[ EDIT_CONTACT_INFO ]: {
 		CustomHeader: ContactInformationHeader,
+		showPageHeader: false,
 	},
 	[ ADD_DNS_RECORD ]: {
 		CustomHeader: DnsRecordHeader,

diff --git a/client/my-sites/domains/paths.js b/client/my-sites/domains/paths.js
@@ -57,18 +57,21 @@ function domainManagementTransferBase(
 }
 
 export function isUnderDomainManagementAll( path ) {
-	return path?.startsWith( domainManagementAllRoot() + '/' );
+	return (
+		path?.startsWith( domainManagementAllRoot() + '/' ) ||
+		path?.startsWith( domainSiteContextRoot() + '/' )
+	);
 }
 
 export function isUnderDomainManagementOverview( path ) {
 	return (
 		path?.startsWith( domainManagementOverviewRoot() + '/' ) ||
-		path?.startsWith( domainSiteContextBasePath() + '/' )
+		path?.startsWith( domainSiteContextRoot() + '/domain/' )
 	);
 }
 
 export function isUnderDomainSiteContext( path ) {
-	return path?.startsWith( domainSiteContextBasePath() + '/' );
+	return path?.startsWith( domainSiteContextRoot() + '/' );
 }
 
 export function domainAddNew( siteName, searchTerm ) {
@@ -97,7 +100,7 @@ export function domainManagementOverviewRoot() {
 	return domainManagementAllRoot() + '/overview';
 }
 
-export function domainSiteContextBasePath() {
+export function domainSiteContextRoot() {
 	return '/overview/site-domain';
 }
 
@@ -153,8 +156,17 @@ export function domainManagementEditContactInfo( siteName, domainName, relativeT
  * @param {string} siteName
  * @param {string} domainName
  */
-export function domainManagementAllOverview( siteName, domainName ) {
-	return domainManagementOverviewRoot() + '/' + domainName + '/' + siteName;
+export function domainManagementAllOverview(
+	siteName,
+	domainName,
+	relativeTo = null,
+	inSiteContext = false
+) {
+	if ( inSiteContext || isUnderDomainSiteContext( relativeTo ) ) {
+		return `${ domainSiteContextRoot() }/domain/${ domainName }/${ siteName }`;
+	}
+
+	return `${ domainManagementOverviewRoot() }/${ domainName }/${ siteName }`;
 }
 
 /**
@@ -164,9 +176,11 @@ export function domainManagementAllOverview( siteName, domainName ) {
  */
 export function domainManagementAllEditContactInfo( siteName, domainName, relativeTo = null ) {
 	const pathSegment = `contact-info/edit/${ domainName }/${ siteName }`;
-	return isUnderDomainSiteContext( relativeTo )
-		? `${ domainSiteContextBasePath() }/${ domainManagementAllRoot() }/${ pathSegment }`
-		: `${ domainManagementAllRoot() }/${ pathSegment }`;
+	const rootPath = isUnderDomainSiteContext( relativeTo )
+		? domainSiteContextRoot()
+		: domainManagementAllRoot();
+
+	return `${ rootPath }/${ pathSegment }`;
 }
 
 export function domainManagementAllEditSelectedContactInfo() {