diff --git a/client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx b/client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx
index d3dee77b4a7dc..838a4e8f95144 100644
--- a/client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx
+++ b/client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx
@@ -1,6 +1,7 @@
import { WordPressLogo } from '@automattic/components';
import { useI18n } from '@wordpress/react-i18n';
import clsx from 'clsx';
+import MigrationFavicon from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon';
import SiteIcon from 'calypso/blocks/site-icon';
import { getFirstGrapheme } from 'calypso/lib/string';
import { useSelector } from 'calypso/state';
@@ -13,7 +14,7 @@ interface SiteFaviconProps {
color?: string;
size?: number;
className?: string;
- fallback?: 'color' | 'wordpress-logo' | 'first-grapheme';
+ fallback?: 'color' | 'wordpress-logo' | 'first-grapheme' | 'migration';
}
const SiteFavicon = ( {
@@ -41,6 +42,9 @@ const SiteFavicon = ( {
);
defaultFaviconClass = 'is-first-grapheme';
break;
+ case 'migration':
+ defaultFavicon = ;
+ break;
case 'color':
default:
defaultFavicon = ;
diff --git a/client/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon/index.tsx b/client/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon/index.tsx
new file mode 100644
index 0000000000000..d9d08fb0f75c7
--- /dev/null
+++ b/client/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon/index.tsx
@@ -0,0 +1,81 @@
+type Props = {
+ size?: number;
+};
+
+const MigrationFavicon: React.FunctionComponent< Props > = ( { size = 56 } ) => {
+ return (
+
+ );
+};
+
+export default MigrationFavicon;
diff --git a/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx b/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx
index 8ff7b7402a058..e2b425e28b5d3 100644
--- a/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx
+++ b/client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { Icon, external } from '@wordpress/icons';
import { useI18n } from '@wordpress/react-i18n';
import clsx from 'clsx';
+import { translate } from 'i18n-calypso';
import * as React from 'react';
//import { useInView } from 'react-intersection-observer';
import SiteFavicon from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon';
@@ -15,7 +16,12 @@ import { SiteName } from 'calypso/sites-dashboard/components/sites-site-name';
import { Truncated } from 'calypso/sites-dashboard/components/sites-site-url';
import SitesStagingBadge from 'calypso/sites-dashboard/components/sites-staging-badge';
import { ThumbnailLink } from 'calypso/sites-dashboard/components/thumbnail-link';
-import { displaySiteUrl, isNotAtomicJetpack, isStagingSite } from 'calypso/sites-dashboard/utils';
+import {
+ displaySiteUrl,
+ isNotAtomicJetpack,
+ isMigrationInProgress,
+ isStagingSite,
+} from 'calypso/sites-dashboard/utils';
import { useSelector } from 'calypso/state';
import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
import { useSiteAdminInterfaceData } from 'calypso/state/sites/hooks';
@@ -74,6 +80,9 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
event.preventDefault();
};
+ const isMigrating = isMigrationInProgress( site );
+ const siteTitle = isMigrating ? translate( 'Incoming Migration' ) : site.title;
+
return (
{
@@ -104,7 +113,7 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
title={
- { site.title }
+ { siteTitle }
{ isP2Site && P2 }
{ isWpcomStagingSite && { __( 'Staging' ) } }
diff --git a/client/sites-dashboard/test/utils.js b/client/sites-dashboard/test/utils.js
new file mode 100644
index 0000000000000..594984c0b9769
--- /dev/null
+++ b/client/sites-dashboard/test/utils.js
@@ -0,0 +1,18 @@
+import { isMigrationInProgress } from 'calypso/sites-dashboard/utils';
+
+describe( 'isMigrationInProgress', () => {
+ it.each( [
+ { site: {} },
+ { site: { site_migration: { migration_status: 'migration-completed-diy' } } },
+ { site: { site_migration: { migration_status: 'migration-completed-difm' } } },
+ ] )( 'returns false when the migration is not in progress', ( { site } ) => {
+ expect( isMigrationInProgress( site ) ).toBe( false );
+ } );
+
+ it.each( [
+ { site: { site_migration: { migration_status: 'migration-started-diy' } } },
+ { site: { site_migration: { migration_status: 'migration-pending-diy' } } },
+ ] )( 'returns true when the migration is in progress', ( { site } ) => {
+ expect( isMigrationInProgress( site ) ).toBe( true );
+ } );
+} );
diff --git a/client/sites-dashboard/utils.ts b/client/sites-dashboard/utils.ts
index cece6fe30f8a6..0cf84d118194c 100644
--- a/client/sites-dashboard/utils.ts
+++ b/client/sites-dashboard/utils.ts
@@ -66,6 +66,15 @@ export const isMigrationTrialSite = ( site: SiteExcerptNetworkData ) => {
return site?.plan?.product_slug === PLAN_MIGRATION_TRIAL_MONTHLY;
};
+export const isMigrationInProgress = ( site: SiteExcerptData ): boolean => {
+ const migrationStatus = site?.site_migration?.migration_status;
+ if ( ! migrationStatus ) {
+ return false;
+ }
+
+ return ! migrationStatus.startsWith( 'migration-completed' );
+};
+
export const isHostingTrialSite = ( site: SiteExcerptNetworkData ) => {
return site?.plan?.product_slug === PLAN_HOSTING_TRIAL_MONTHLY;
};