Domains Management: Add breadcrumb to the Domain page on site context (…

…#98113) * Accept icons on breadcrumb items * Hide header when in site context * Reduce font-size for small sizes with first-grapheme style * Add breadcrumb to the Domains page on site context * Use NavigationHeader * Revert hideHeader to avoid conflicts
Automattic · Jan 10, 2025 · 5b85eb3 · 5b85eb3
1 parent 1435017
commit 5b85eb3
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/client/blocks/site-favicon/index.tsx b/client/blocks/site-favicon/index.tsx
@@ -38,7 +38,11 @@ const SiteFavicon = ( {
 			break;
 		case 'first-grapheme':
 			defaultFavicon = (
-				<div role="img" aria-label={ __( 'Site Icon' ) }>
+				<div
+					role="img"
+					aria-label={ __( 'Site Icon' ) }
+					style={ size <= 36 ? { fontSize: size * 0.6 } : {} }
+				>
 					{ getFirstGrapheme( site?.title ?? '' ) }
 				</div>
 			);

diff --git a/client/components/breadcrumb/index.tsx b/client/components/breadcrumb/index.tsx
@@ -73,6 +73,10 @@ const HelpBubble = styled( InfoPopover )`
 	}
 `;
 
+const StyledIcon = styled.div`
+	margin-right: 10px;
+`;
+
 const renderHelpBubble = ( item: Item ) => {
 	if ( ! item.helpBubble ) {
 		return null;
@@ -89,6 +93,7 @@ export type Item = {
 	label: string;
 	href?: string;
 	helpBubble?: React.ReactElement;
+	icon?: React.ReactElement;
 	onClick?: () => void;
 };
 interface Props {
@@ -113,6 +118,7 @@ const Breadcrumb: React.FunctionComponent< Props > = ( props ) => {
 		const [ item ] = items;
 		return (
 			<StyledItem>
+				{ item.icon && <StyledIcon>{ item.icon }</StyledIcon> }
 				<StyledRootLabel>{ item.label }</StyledRootLabel>
 				{ renderHelpBubble( item ) }
 			</StyledItem>
@@ -135,6 +141,7 @@ const Breadcrumb: React.FunctionComponent< Props > = ( props ) => {
 		<StyledUl className="breadcrumbs">
 			{ items.map( ( item: Item, index: Key ) => (
 				<StyledLi key={ index }>
+					{ item.icon && <StyledIcon>{ item.icon }</StyledIcon> }
 					{ index !== 0 && <StyledGridicon icon="chevron-right" size={ 14 } /> }
 					{ item.href && index !== items.length - 1 ? (
 						<a href={ item.href } onClick={ item.onClick }>

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,8 +5,11 @@ 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 { useSiteAdminInterfaceData } from 'calypso/state/sites/hooks';
 import {
 	FEATURE_TO_ROUTE_MAP,
@@ -140,20 +143,42 @@ const DomainOverviewPane = ( {
 				preview: enabled ? selectedDomainPreview : null,
 			};
 		} );
-	}, [ __, selectedDomain, selectedFeature, selectedDomainPreview ] );
+	}, [ selectedFeature, selectedDomainPreview, inSiteContext, selectedDomain, siteSlug ] );
+
+	const isMigrationPending = getMigrationStatus( site ) === 'pending';
+	const faviconFallback = isMigrationPending ? 'migration' : 'first-grapheme';
 
 	return (
-		<ItemView
-			itemData={ itemData }
-			closeItemView={ () => {
-				inSiteContext ? page.show( '/sites' ) : page.show( paths.domainManagementRoot() );
-			} }
-			features={ features }
-			enforceTabsView
-			itemViewHeaderExtraProps={ {
-				headerButtons: PreviewPaneHeaderButtons,
-			} }
-		/>
+		<>
+			{ inSiteContext && (
+				<div className="domain-overview__breadcrumb">
+					<NavigationHeader
+						navigationItems={ [
+							{
+								label: site.name || selectedDomain,
+								href: `/overview/${ siteSlug }`,
+								icon: <SiteFavicon blogId={ site.ID } size={ 24 } fallback={ faviconFallback } />,
+							},
+							{
+								label: selectedDomain,
+							},
+						] }
+					/>
+				</div>
+			) }
+
+			<ItemView
+				itemData={ itemData }
+				closeItemView={ () => {
+					inSiteContext ? page.show( '/sites' ) : page.show( paths.domainManagementRoot() );
+				} }
+				features={ features }
+				enforceTabsView
+				itemViewHeaderExtraProps={ {
+					headerButtons: PreviewPaneHeaderButtons,
+				} }
+			/>
+		</>
 	);
 };
 

diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/style.scss b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss
@@ -140,3 +140,11 @@
 		}
 	}
 }
+
+.domain-overview__breadcrumb {
+	padding: 22px 48px;
+
+	.navigation-header {
+		padding: 0;
+	}
+}