Sites Dashboard: Add migration status to site header (#95671)

* Update the site title/icon only when migration is pending

* Update the site header title/icon when migration pending

* Add status to site header for pending migrations

* Fix migration status font fize

client/a8c-for-agencies/components/items-dashboard/item-preview-pane/types.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SiteFaviconFallback } from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon';
 
 export interface FeaturePreviewInterface {
 	id: string;
@@ -44,7 +45,7 @@ export interface PreviewPaneProps {
 
 export interface ItemPreviewPaneHeaderExtraProps {
 	externalIconSize?: number;
-	siteIconFallback?: 'color' | 'wordpress-logo' | 'first-grapheme';
+	siteIconFallback?: SiteFaviconFallback;
 	headerButtons?: React.ComponentType< {
 		focusRef: React.RefObject< HTMLButtonElement >;
 		itemData: ItemData;

client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx

@@ -9,12 +9,14 @@ import { getSite } from 'calypso/state/sites/selectors';
 
 import './style.scss';
 
+export type SiteFaviconFallback = 'color' | 'wordpress-logo' | 'first-grapheme' | 'migration';
+
 interface SiteFaviconProps {
 	blogId?: number;
 	color?: string;
 	size?: number;
 	className?: string;
-	fallback?: 'color' | 'wordpress-logo' | 'first-grapheme' | 'migration';
+	fallback?: SiteFaviconFallback;
 }
 
 const SiteFavicon = ( {

client/hosting/sites/components/site-preview-pane/dotcom-preview-pane.tsx

@@ -5,7 +5,9 @@ import { useI18n } from '@wordpress/react-i18n';
 import React, { useMemo, useEffect } from 'react';
 import ItemPreviewPane from 'calypso/a8c-for-agencies/components/items-dashboard/item-preview-pane';
 import HostingFeaturesIcon from 'calypso/hosting/hosting-features/components/hosting-features-icon';
+import { SiteStatus } from 'calypso/hosting/sites/components/sites-dataviews/sites-site-status';
 import { useStagingSite } from 'calypso/hosting/staging-site/hooks/use-staging-site';
+import { getMigrationStatus } from 'calypso/sites-dashboard/utils';
 import { useSelector } from 'calypso/state';
 import { StagingSiteStatus } from 'calypso/state/staging-site/constants';
 import { getStagingSiteStatus } from 'calypso/state/staging-site/selectors';
@@ -56,6 +58,7 @@ const DotcomPreviewPane = ( {
 	const isAtomicSite = !! site.is_wpcom_atomic || !! site.is_wpcom_staging_site;
 	const isSimpleSite = ! site.jetpack && ! site.is_wpcom_atomic;
 	const isPlanExpired = !! site.plan?.expired;
+	const isMigrationPending = getMigrationStatus( site ) === 'pending';
 
 	const features: FeaturePreviewInterface[] = useMemo( () => {
 		const isActiveAtomicSite = isAtomicSite && ! isPlanExpired;
@@ -141,7 +144,7 @@ const DotcomPreviewPane = ( {
 	] );
 
 	const itemData: ItemData = {
-		title: site.title,
+		title: isMigrationPending ? __( 'Incoming Migration' ) : site.title,
 		subtitle: site.slug,
 		url: site.URL,
 		blogId: site.ID,
@@ -192,12 +195,17 @@ const DotcomPreviewPane = ( {
 			className={ site.is_wpcom_staging_site ? 'is-staging-site' : '' }
 			itemPreviewPaneHeaderExtraProps={ {
 				externalIconSize: 16,
-				siteIconFallback: 'first-grapheme',
+				siteIconFallback: isMigrationPending ? 'migration' : 'first-grapheme',
 				headerButtons: PreviewPaneHeaderButtons,
-				subtitleExtra: () =>
-					( site.is_wpcom_staging_site || isStagingStatusFinished ) && (
-						<SiteEnvironmentSwitcher onChange={ changeSitePreviewPane } site={ site } />
-					),
+				subtitleExtra: () => {
+					if ( isMigrationPending ) {
+						return <SiteStatus site={ site } />;
+					}
+
+					if ( site.is_wpcom_staging_site || isStagingStatusFinished ) {
+						return <SiteEnvironmentSwitcher onChange={ changeSitePreviewPane } site={ site } />;
+					}
+				},
 			} }
 		/>
 	);

client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx

@@ -19,7 +19,7 @@ import { ThumbnailLink } from 'calypso/sites-dashboard/components/thumbnail-link
 import {
 	displaySiteUrl,
 	isNotAtomicJetpack,
-	isMigrationInProgress,
+	getMigrationStatus,
 	isStagingSite,
 	isDisconnectedJetpackAndNotAtomic,
 } from 'calypso/sites-dashboard/utils';
@@ -86,8 +86,8 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
 		event.preventDefault();
 	};
 
-	const isMigrating = isMigrationInProgress( site );
-	const siteTitle = isMigrating ? translate( 'Incoming Migration' ) : site.title;
+	const isMigrationPending = getMigrationStatus( site ) === 'pending';
+	const siteTitle = isMigrationPending ? translate( 'Incoming Migration' ) : site.title;
 
 	return (
 		<div className="sites-dataviews__site">
@@ -110,7 +110,7 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
 							<SiteFavicon
 								className="sites-site-favicon"
 								blogId={ site.ID }
-								fallback={ isMigrating ? 'migration' : 'first-grapheme' }
+								fallback={ isMigrationPending ? 'migration' : 'first-grapheme' }
 								size={ 56 }
 							/>
 						</ThumbnailLink>

client/hosting/sites/components/sites-dataviews/sites-site-status.tsx

@@ -13,7 +13,7 @@ import { USE_SITE_EXCERPTS_QUERY_KEY } from 'calypso/data/sites/use-site-excerpt
 import { SiteLaunchNag } from 'calypso/sites-dashboard/components/sites-site-launch-nag';
 import TransferNoticeWrapper from 'calypso/sites-dashboard/components/sites-transfer-notice-wrapper';
 import { WithAtomicTransfer } from 'calypso/sites-dashboard/components/with-atomic-transfer';
-import { MEDIA_QUERIES } from 'calypso/sites-dashboard/utils';
+import { getMigrationStatus, MEDIA_QUERIES } from 'calypso/sites-dashboard/utils';
 import { useSelector } from 'calypso/state';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import isDIFMLiteInProgress from 'calypso/state/selectors/is-difm-lite-in-progress';
@@ -120,13 +120,12 @@ export const SiteStatus = ( { site }: SiteStatusProps ) => {
 		);
 	}
 
-	const isMigrationPeding =
-		site.site_migration?.migration_status?.startsWith( 'migration-pending' );
-	const statusElement = isMigrationPeding ? (
-		<span className="sites-dataviews__migration-pending-status">{ translatedStatus }</span>
-	) : (
-		translatedStatus
-	);
+	const statusElement =
+		getMigrationStatus( site ) === 'pending' ? (
+			<span className="sites-dataviews__migration-pending-status">{ translatedStatus }</span>
+		) : (
+			translatedStatus
+		);
 
 	return (
 		<WithAtomicTransfer site={ site }>

client/hosting/sites/components/sites-dataviews/style.scss

@@ -145,6 +145,7 @@
 .sites-dataviews__migration-pending-status {
 	display: inline-block;
 	padding: 0 10px;
+	font-size: rem(12px);
 	border-radius: 4px;
 	background-color: var(--color-warning-20);
 	line-height: 20px;