From c11aab855946c40f0a42799d9d835c9453308bfa Mon Sep 17 00:00:00 2001 From: Miroslav Mitev Date: Wed, 16 Oct 2024 13:40:52 +0300 Subject: [PATCH] Sites Dashboard: Update details for sites pending migration (#95261) --- .../items-dashboard/site-favicon/index.tsx | 6 +- .../site-favicon/migration-favicon/index.tsx | 81 +++++++++++++++++++ .../dataviews-fields/site-field.tsx | 15 +++- client/sites-dashboard/test/utils.js | 18 +++++ client/sites-dashboard/utils.ts | 9 +++ 5 files changed, 125 insertions(+), 4 deletions(-) create mode 100644 client/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon/index.tsx create mode 100644 client/sites-dashboard/test/utils.js 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; };