Match style of site overview in site context (#98095)

* Hide header when needed

* Use site context param to hide header in flyout view

* Move style to be loaded in all views

* Fix top border after removing header

* Fix wrong page context opening when flag enabled

* Fix rebase error

* Fix email upsell page styles in site context (#98152)

* Move style to be loaded in all views

* Fix email upsell page styles in site context

* Fix context menu not loading

* Fix unit test failing

* Fix scroll spacing issue

client/layout/hosting-dashboard/item-view/index.tsx

@@ -41,6 +41,7 @@ export default function ItemView( {
 	itemViewHeaderExtraProps,
 	hideNavIfSingleTab,
 	enforceTabsView,
+	hideHeader,
 }: ItemViewProps ) {
 	const [ navRef, setNavRef ] = useState< HTMLElement | null >( null );
 
@@ -87,12 +88,14 @@ export default function ItemView( {
 
 	return (
 		<div className={ clsx( 'hosting-dashboard-item-view', className ) }>
-			<ItemViewHeader
-				closeItemView={ closeItemView }
-				itemData={ itemData }
-				isPreviewLoaded={ !! selectedFeature.preview }
-				extraProps={ itemViewHeaderExtraProps }
-			/>
+			{ ! hideHeader && (
+				<ItemViewHeader
+					closeItemView={ closeItemView }
+					itemData={ itemData }
+					isPreviewLoaded={ !! selectedFeature.preview }
+					extraProps={ itemViewHeaderExtraProps }
+				/>
+			) }
 			<div ref={ setNavRef }>
 				<SectionNav
 					className={ clsx( 'hosting-dashboard-item-view__navigation', {

client/layout/hosting-dashboard/item-view/types.ts

@@ -42,6 +42,7 @@ export interface ItemViewProps {
 	itemViewHeaderExtraProps?: ItemViewHeaderExtraProps;
 	hideNavIfSingleTab?: boolean;
 	enforceTabsView?: boolean;
+	hideHeader?: boolean;
 }
 
 export interface ItemViewHeaderExtraProps {

client/my-sites/domains/domain-management/domain-overview-pane/index.tsx

@@ -177,6 +177,7 @@ const DomainOverviewPane = ( {
 				itemViewHeaderExtraProps={ {
 					headerButtons: PreviewPaneHeaderButtons,
 				} }
+				hideHeader={ inSiteContext }
 			/>
 		</>
 	);

client/my-sites/domains/domain-management/domain-overview-pane/style.scss

@@ -148,3 +148,42 @@
 		padding: 0;
 	}
 }
+
+.domains-overview {
+	.hosting-dashboard-layout-with-columns__container {
+		background: var(--color-sidebar-background);
+	}
+
+	.hosting-dashboard-item-view {
+		background: var(--color-light-backdrop);
+		border-radius: 8px; /* stylelint-disable-line scales/radii */
+		flex-grow: 1;
+		max-height: calc(100vh - 32px - var(--masterbar-height));
+		transition: flex-grow 0.2s;
+		width: auto;
+	}
+
+	.hosting-dashboard-item-view__header-info {
+		flex-wrap: wrap;
+	}
+
+	.hosting-dashboard-item-view__content div {
+		flex-grow: 1;
+	}
+
+	.domain-settings-page {
+		margin-left: 0;
+		max-width: 1200px;
+	}
+
+	.domains-overview__details.main {
+		&,
+		.hosting-dashboard-layout-column__container {
+			height: 100%;
+		}
+	}
+}
+
+.sites-dashboard.domains-overview .hosting-dashboard-item-view__content {
+	height: 0; /* Quick fix for scrolling issue in domain overview in site-context, will be replaced with a better solution in the future */
+}

client/my-sites/domains/style.scss

@@ -52,38 +52,3 @@ body.is-section-domains.is-domain-plan-package-flow {
 		max-width: $break-medium;
 	}
 }
-
-.domains-overview {
-	.hosting-dashboard-layout-with-columns__container {
-		background: var(--color-sidebar-background);
-	}
-
-	.hosting-dashboard-item-view {
-		background: var(--color-light-backdrop);
-		border-radius: 8px; /* stylelint-disable-line scales/radii */
-		flex-grow: 1;
-		max-height: calc(100vh - 32px - var(--masterbar-height));
-		transition: flex-grow 0.2s;
-		width: auto;
-	}
-
-	.hosting-dashboard-item-view__header-info {
-		flex-wrap: wrap;
-	}
-
-	.hosting-dashboard-item-view__content div {
-		flex-grow: 1;
-	}
-
-	.domain-settings-page {
-		margin-left: 0;
-		max-width: 1200px;
-	}
-
-	.domains-overview__details.main {
-		&,
-		.hosting-dashboard-layout-column__container {
-			height: 100%;
-		}
-	}
-}

client/my-sites/email/email-management/email-home.tsx

@@ -105,7 +105,7 @@ const EmailHome = ( props: EmailManagementHomeProps ) => {
 		return canCurrentUser( state, selectedSite.ID, 'manage_options' );
 	} );
 	const hasSitesLoaded = useSelector( hasLoadedSites );
-	const isAllDomainManagementContext = context === 'domains';
+	const isAllDomainManagementContext = context === 'domains' || context === 'hosting-overview';
 
 	const addEmailForwardMutationActive = useAddEmailForwardMutationIsLoading();
 

client/my-sites/email/email-management/home/email-plan-mailboxes-list.tsx

@@ -20,7 +20,7 @@ import type { EmailAccount, Mailbox } from 'calypso/data/emails/types';
 import type { ResponseDomain } from 'calypso/lib/domains/types';
 
 type Props = {
-	context: 'domains' | 'email';
+	context: 'domains' | 'email' | 'hosting-overview';
 	domain: ResponseDomain;
 	account: EmailAccount;
 	mailboxes: Mailbox[];
@@ -156,6 +156,7 @@ function EmailPlanMailboxesList( {
 	// Rendering based on the context
 	switch ( context ) {
 		case 'domains':
+		case 'hosting-overview':
 			return (
 				<>
 					{ ( isGoogleConfiguring || isAccountWarningPresent ) && (

client/sites/components/dotcom-style.scss

@@ -269,7 +269,6 @@
 			padding-right: 0;
 			overflow-y: initial;
 			max-height: initial;
-			max-width: 1400px;
 			width: 100%;
 		}
 
@@ -313,6 +312,14 @@
 	}
 }
 
+.wpcom-site .hosting-dashboard-layout.sites-dashboard:not(.domains-overview) .site-preview-pane {
+	.hosting-dashboard-item-view__content {
+		> * {
+			max-width: 1400px;
+		}
+	}
+}
+
 // Use flexbox to structure of fly-out panel.
 .wpcom-site .main.hosting-dashboard-layout.sites-dashboard.sites-dashboard__layout:not(.preview-hidden) {
 	&.hosting-dashboard-layout,
@@ -347,6 +354,12 @@
 			display: none;
 		}
 	}
+
+	&.domains-overview {
+		.hosting-dashboard-item-view__navigation {
+			border-radius: 8px 8px 0 0; /* stylelint-disable-line scales/radii */
+		}
+	}
 }
 
 // Override styles from my-sites/sidebar

client/sites/overview/components/active-domains-card.tsx

@@ -77,6 +77,7 @@ const ActiveDomainsCard: FC = () => {
 				isAllSitesView={ false }
 				useMobileCards={ forceMobile }
 				siteSlug={ site?.slug ?? null }
+				isHostingOverview
 				userCanSetPrimaryDomains={ userCanSetPrimaryDomains }
 				onDomainAction={ ( action, domain ) => {
 					if ( action === 'set-primary-address' && site ) {

packages/domains-table/src/domains-table/domains-table-row.tsx

@@ -56,6 +56,7 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 		isCompact,
 		currentlySelectedDomainName,
 		selectedFeature,
+		isHostingOverview,
 	} = useDomainsTable();
 
 	const renderSiteCell = () => {
@@ -80,7 +81,13 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 		currentDomainData && getDomainTypeText( currentDomainData, __, domainInfoContext.DOMAIN_ROW );
 
 	const domainManagementLink = isManageableDomain
-		? getDomainManagementLink( domain, siteSlug, isAllSitesView, selectedFeature )
+		? getDomainManagementLink(
+				domain,
+				siteSlug,
+				isAllSitesView,
+				selectedFeature,
+				isHostingOverview
+		  )
 		: '';
 
 	const renderOwnerCell = () => {
@@ -100,7 +107,7 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 	const handleSelect = () => {
 		const isAllDomainManagementEnabled = config.isEnabled( 'calypso/all-domain-management' );
 
-		if ( isAllDomainManagementEnabled ) {
+		if ( isAllDomainManagementEnabled && ( isHostingOverview || isAllSitesView ) ) {
 			page.show( domainManagementLink );
 			return;
 		}

packages/domains-table/src/domains-table/domains-table.tsx

@@ -71,6 +71,7 @@ interface BaseDomainsTableProps {
 	sidebarMode?: boolean;
 	selectedDomainName?: string;
 	selectedFeature?: string;
+	isHostingOverview?: boolean;
 }
 
 export type DomainsTableProps =
@@ -128,6 +129,7 @@ type Value = {
 	isCompact: boolean;
 	currentlySelectedDomainName?: string;
 	selectedFeature?: string;
+	isHostingOverview?: boolean;
 };
 
 export const DomainsTableStateContext = createContext< Value | undefined >( undefined );
@@ -152,6 +154,7 @@ export const useGenerateDomainsTableState = ( props: DomainsTableProps ) => {
 		sidebarMode = false,
 		selectedDomainName,
 		selectedFeature,
+		isHostingOverview = false,
 	} = props;
 
 	const [ { sortKey, sortDirection }, setSort ] = useState< {
@@ -454,6 +457,7 @@ export const useGenerateDomainsTableState = ( props: DomainsTableProps ) => {
 		isCompact,
 		currentlySelectedDomainName: selectedDomainName,
 		selectedFeature,
+		isHostingOverview,
 	};
 
 	return value;

packages/domains-table/src/utils/paths.ts

@@ -9,7 +9,8 @@ export function domainManagementLink(
 	{ domain, type }: Pick< ResponseDomain, 'domain' | 'type' >,
 	siteSlug: string,
 	isAllSitesView: boolean,
-	feature?: string
+	feature?: string,
+	isHostingOverview?: boolean
 ) {
 	const viewSlug = domainManagementViewSlug( type );
 
@@ -22,7 +23,7 @@ export function domainManagementLink(
 
 	const isAllDomainManagementEnabled = config.isEnabled( 'calypso/all-domain-management' );
 
-	if ( isAllDomainManagementEnabled ) {
+	if ( isAllDomainManagementEnabled && ( isHostingOverview || isAllSitesView ) ) {
 		switch ( feature ) {
 			case 'email-management':
 				return `${ domainManagementAllRoot() }/email/${ domain }/${ siteSlug }`;