A4A: Blocked site selection row when migration is in progress

Automattic · Jun 20, 2024 · 59e037d · 59e037d
1 parent f667aaa
commit 59e037d
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 18 deletions.
diff --git a/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx b/client/a8c-for-agencies/sections/sites/features/jetpack/jetpack-sites-dataviews.tsx
@@ -68,6 +68,10 @@ export const JetpackSitesDataViews = ( {
 
 	const openSitePreviewPane = useCallback(
 		( site: Site ) => {
+			if ( site.sticker.includes( 'migration-in-progress' ) ) {
+				return;
+			}
+
 			if ( site.is_connection_healthy ) {
 				setDataViewsState( ( prevState: DataViewsState ) => ( {
 					...prevState,
@@ -380,19 +384,23 @@ export const JetpackSitesDataViews = ( {
 								onClick={ ( e: MouseEvent ) => e.stopPropagation() }
 								onKeyDown={ ( e: KeyboardEvent ) => e.stopPropagation() }
 							>
-								<SiteActions
-									isLargeScreen={ isLargeScreen }
-									site={ item.site }
-									siteError={ item.site.error }
-								/>
-								<Button
-									onClick={ () => openSitePreviewPane( item.site.value ) }
-									className="site-preview__open"
-									borderless
-									ref={ ( ref ) => setActionsRef( ( current ) => current || ref ) }
-								>
-									<Gridicon icon="chevron-right" />
-								</Button>
+								{ ! item.site.value.sticker.includes( 'migration-in-progress' ) && (
+									<>
+										<SiteActions
+											isLargeScreen={ isLargeScreen }
+											site={ item.site }
+											siteError={ item.site.error }
+										/>
+										<Button
+											onClick={ () => openSitePreviewPane( item.site.value ) }
+											className="site-preview__open"
+											borderless
+											ref={ ( ref ) => setActionsRef( ( current ) => current || ref ) }
+										>
+											<Gridicon icon="chevron-right" />
+										</Button>
+									</>
+								) }
 							</div>
 						</>
 					);

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/sites-dataviews-style.scss b/client/a8c-for-agencies/sections/sites/sites-dashboard/sites-dataviews-style.scss
@@ -19,6 +19,10 @@
 	width: 180px;
 	font-weight: 500;
 	font-size: rem(14px);
+
+	.migration-badge {
+		border-radius: 2px;
+	}
 }
 
 .sites-dataviews__site-url {

diff --git a/client/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field.tsx b/client/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@automattic/components';
+import { Badge, Button } from '@automattic/components';
 import SiteFavicon from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon';
 import TextPlaceholder from 'calypso/jetpack-cloud/sections/partner-portal/text-placeholder';
 import { Site } from '../types';
@@ -14,15 +14,27 @@ const SiteDataField = ( { isLoading, site, onSiteTitleClick }: SiteDataFieldProp
 		return <TextPlaceholder />;
 	}
 
+	const migrationInProgress = site.sticker.includes( 'migration-in-progress' );
+
 	return (
-		<Button className="sites-dataviews__site" onClick={ () => onSiteTitleClick( site ) } borderless>
+		<Button
+			disabled={ migrationInProgress }
+			className="sites-dataviews__site"
+			onClick={ () => onSiteTitleClick( site ) }
+			borderless
+		>
 			<SiteFavicon
 				blogId={ site.blog_id }
 				fallback={ site.is_atomic ? 'wordpress-logo' : 'color' }
 			/>
 			<div className="sites-dataviews__site-name">
-				{ site.blogname }
-				<div className="sites-dataviews__site-url">{ site.url }</div>
+				<div>{ site.blogname }</div>
+				{ ! migrationInProgress && <div className="sites-dataviews__site-url">{ site.url }</div> }
+				{ migrationInProgress && (
+					<Badge className="migration-badge" type="info-blue">
+						Migration in progress
+					</Badge>
+				) }
 			</div>
 		</Button>
 	);

diff --git a/.../sections/agency-dashboard/sites-overview/site-status-content/site-boost-column/index.tsx b/.../sections/agency-dashboard/sites-overview/site-status-content/site-boost-column/index.tsx
@@ -57,7 +57,7 @@ export default function SiteBoostColumn( { site, siteError }: Props ) {
 				}
 				href={ siteError ? '' : noBoostHrefOption }
 				target="_blank"
-				disabled={ siteError }
+				disabled={ siteError || site.sticker.includes( 'migration-in-progress' ) }
 				onClick={ () =>
 					recordEvent( 'boost_column_score_click', {
 						score: overallScore,

diff --git a/...-cloud/sections/agency-dashboard/sites-overview/site-status-content/site-stats-column.tsx b/...-cloud/sections/agency-dashboard/sites-overview/site-status-content/site-stats-column.tsx
@@ -52,6 +52,7 @@ export default function SiteStatsColumn( { site, stats }: Props ) {
 					translate( '%(totalViews)s views in the last 7 days', { args: { totalViews } } ) as string
 				}
 				onClick={ openStats }
+				disabled={ site?.sticker.includes( 'migration-in-progress' ) }
 				className={ clsx(
 					'sites-overview__stats-trend',
 					`sites-overview__stats-trend__${ viewsTrend }`,

diff --git a/...cloud/sections/agency-dashboard/sites-overview/site-status-content/site-status-column.tsx b/...cloud/sections/agency-dashboard/sites-overview/site-status-content/site-status-column.tsx
@@ -45,6 +45,10 @@ export default function SiteStatusColumn( { type, rows, metadata, disabled }: Pr
 		isSupported,
 	} = metadata;
 
+	if ( rows.site.value.sticker?.includes( 'migration-in-progress' ) ) {
+		disabled = true;
+	}
+
 	const dispatch = useDispatch();
 	const translate = useTranslate();