Skip to content

Commit

Permalink
Sites Dashboard: Update details for sites pending migration (#95261)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m1r0
m1r0 authored Oct 16, 2024
1 parent 609d656 commit c11aab8
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 4 deletions.
6 changes: 5 additions & 1 deletion client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = ( {
Expand Down Expand Up @@ -41,6 +42,9 @@ const SiteFavicon = ( {
);
defaultFaviconClass = 'is-first-grapheme';
break;
case 'migration':
defaultFavicon = <MigrationFavicon size={ size } />;
break;
case 'color':
default:
defaultFavicon = <div className="no-favicon" style={ { background: siteColor } } />;
Expand Down
81 changes: 81 additions & 0 deletions client/a8c-for-agencies/components/items-dashboard/site-favicon/migration-favicon/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
type Props = {
size?: number;
};

const MigrationFavicon: React.FunctionComponent< Props > = ( { size = 56 } ) => {
return (
<svg height={ size } width={ size } viewBox="0 0 56 56">
<g clip-path="url(#clip0_3923_15349)">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4V52C56 54.2091 54.2091 56 52 56H4C1.79086 56 0 54.2091 0 52V4Z"
fill="#3858E9"
/>
<g opacity="0.1">
<circle cx="27.7286" cy="24.7286" r="8.72857" fill="#3858E9" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.8286 27.5C33.8286 21.1635 28.7036 16 22.4143 16C16.1136 16 11 21.1635 11 27.5C11 33.848 16.1136 39 22.4143 39C28.7036 39 33.8286 33.848 33.8286 27.5ZM19.8803 33.6755L15.988 23.153C16.6158 23.13 17.3235 23.061 17.3235 23.061C17.8942 22.992 17.8257 21.7615 17.255 21.7845C17.255 21.7845 15.6 21.911 14.5498 21.911C14.3444 21.911 14.1275 21.911 13.8878 21.8995C15.7027 19.0935 18.8416 17.2765 22.4143 17.2765C25.0738 17.2765 27.4936 18.277 29.3199 19.9675C28.5438 19.841 27.4366 20.416 27.4366 21.7845C27.4366 22.5297 27.8304 23.1691 28.2732 23.8879L28.2733 23.888L28.2735 23.8884C28.3363 23.9903 28.4001 24.0939 28.4639 24.1995C28.8634 24.901 29.0916 25.7635 29.0916 27.0285C29.0916 28.742 27.4936 32.7785 27.4936 32.7785L24.0351 23.153C24.6515 23.13 24.9711 22.9575 24.9711 22.9575C25.5418 22.9 25.4733 21.52 24.9026 21.5545C24.9026 21.5545 23.2589 21.6925 22.186 21.6925C21.193 21.6925 19.5265 21.5545 19.5265 21.5545C18.9558 21.52 18.8873 22.9345 19.458 22.9575L20.5081 23.0495L21.9463 26.971L19.8803 33.6755ZM30.8972 27.4332L30.8723 27.5C30.0451 29.6939 29.2242 31.9067 28.405 34.1151C28.1163 34.8933 27.8278 35.6709 27.5393 36.447C30.5869 34.676 32.5616 31.2835 32.5616 27.5C32.5616 25.729 32.1621 24.096 31.3631 22.6125C31.7065 25.2689 31.179 26.6795 30.8972 27.4332ZM17.9627 36.8035C14.5613 35.1475 12.267 31.5595 12.267 27.5C12.267 26.005 12.5295 24.648 13.0888 23.3715C13.4307 24.315 13.7725 25.259 14.1145 26.2034L14.1147 26.2038C15.394 29.7367 16.6748 33.2737 17.9627 36.8035ZM25.5076 37.206L22.5627 29.179C22.0201 30.7916 21.4735 32.4041 20.9253 34.0215C20.5508 35.1263 20.1756 36.2332 19.8004 37.344C20.6222 37.597 21.5126 37.7235 22.4143 37.7235C23.4986 37.7235 24.5259 37.5395 25.5076 37.206Z"
fill="white"
/>
</g>
<circle cx="27.5" cy="27.5" r="11.5" fill="#3858E9" />
<g opacity="0.35">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M38.8286 27.5C38.8286 21.1635 33.7036 16 27.4143 16C21.1136 16 16 21.1635 16 27.5C16 33.848 21.1136 39 27.4143 39C33.7036 39 38.8286 33.848 38.8286 27.5ZM24.8803 33.6755L20.988 23.153C21.6158 23.13 22.3235 23.061 22.3235 23.061C22.8942 22.992 22.8257 21.7615 22.255 21.7845C22.255 21.7845 20.6 21.911 19.5498 21.911C19.3444 21.911 19.1275 21.911 18.8878 21.8995C20.7027 19.0935 23.8416 17.2765 27.4143 17.2765C30.0738 17.2765 32.4936 18.277 34.3199 19.9675C33.5438 19.841 32.4366 20.416 32.4366 21.7845C32.4366 22.5297 32.8304 23.1691 33.2732 23.8879L33.2733 23.888L33.2735 23.8884C33.3363 23.9903 33.4001 24.0939 33.4639 24.1995C33.8634 24.901 34.0916 25.7635 34.0916 27.0285C34.0916 28.742 32.4936 32.7785 32.4936 32.7785L29.0351 23.153C29.6515 23.13 29.9711 22.9575 29.9711 22.9575C30.5418 22.9 30.4733 21.52 29.9026 21.5545C29.9026 21.5545 28.2589 21.6925 27.186 21.6925C26.193 21.6925 24.5265 21.5545 24.5265 21.5545C23.9558 21.52 23.8873 22.9345 24.458 22.9575L25.5081 23.0495L26.9463 26.971L24.8803 33.6755ZM35.8972 27.4332L35.8723 27.5C35.0451 29.6939 34.2242 31.9067 33.405 34.1151C33.1163 34.8933 32.8278 35.6709 32.5393 36.447C35.5869 34.676 37.5616 31.2835 37.5616 27.5C37.5616 25.729 37.1621 24.096 36.3631 22.6125C36.7065 25.2689 36.179 26.6795 35.8972 27.4332ZM22.9627 36.8035C19.5613 35.1475 17.267 31.5595 17.267 27.5C17.267 26.005 17.5295 24.648 18.0888 23.3715C18.4307 24.315 18.7725 25.259 19.1145 26.2034L19.1147 26.2038C20.394 29.7367 21.6748 33.2737 22.9627 36.8035ZM30.5076 37.206L27.5627 29.179C27.0201 30.7916 26.4735 32.4041 25.9253 34.0215C25.5508 35.1263 25.1756 36.2332 24.8004 37.344C25.6222 37.597 26.5126 37.7235 27.4143 37.7235C28.4986 37.7235 29.5259 37.5395 30.5076 37.206Z"
fill="white"
/>
</g>
<g filter="url(#filter0_d_3923_15349)">
<circle cx="33.5" cy="27.5" r="11.5" fill="#3858E9" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M44.8286 27.5C44.8286 21.1635 39.7036 16 33.4143 16C27.1136 16 22 21.1635 22 27.5C22 33.848 27.1136 39 33.4143 39C39.7036 39 44.8286 33.848 44.8286 27.5ZM30.8803 33.6755L26.988 23.153C27.6158 23.13 28.3235 23.061 28.3235 23.061C28.8942 22.992 28.8257 21.7615 28.255 21.7845C28.255 21.7845 26.6 21.911 25.5498 21.911C25.3444 21.911 25.1275 21.911 24.8878 21.8995C26.7027 19.0935 29.8416 17.2765 33.4143 17.2765C36.0738 17.2765 38.4936 18.277 40.3199 19.9675C39.5438 19.841 38.4366 20.416 38.4366 21.7845C38.4366 22.5297 38.8304 23.1691 39.2732 23.8879L39.2733 23.888L39.2735 23.8884C39.3363 23.9903 39.4001 24.0939 39.4639 24.1995C39.8634 24.901 40.0916 25.7635 40.0916 27.0285C40.0916 28.742 38.4936 32.7785 38.4936 32.7785L35.0351 23.153C35.6515 23.13 35.9711 22.9575 35.9711 22.9575C36.5418 22.9 36.4733 21.52 35.9026 21.5545C35.9026 21.5545 34.2589 21.6925 33.186 21.6925C32.193 21.6925 30.5265 21.5545 30.5265 21.5545C29.9558 21.52 29.8873 22.9345 30.458 22.9575L31.5081 23.0495L32.9463 26.971L30.8803 33.6755ZM41.8972 27.4332L41.8723 27.5C41.0451 29.6939 40.2242 31.9067 39.405 34.1151C39.1163 34.8933 38.8278 35.6709 38.5393 36.447C41.5869 34.676 43.5616 31.2835 43.5616 27.5C43.5616 25.729 43.1621 24.096 42.3631 22.6125C42.7065 25.2689 42.179 26.6795 41.8972 27.4332ZM28.9627 36.8035C25.5613 35.1475 23.267 31.5595 23.267 27.5C23.267 26.005 23.5295 24.648 24.0888 23.3715C24.4307 24.315 24.7725 25.259 25.1145 26.2034L25.1147 26.2038C26.394 29.7367 27.6748 33.2737 28.9627 36.8035ZM36.5076 37.206L33.5627 29.179C33.0201 30.7916 32.4735 32.4041 31.9253 34.0215C31.5508 35.1263 31.1756 36.2332 30.8004 37.344C31.6222 37.597 32.5126 37.7235 33.4143 37.7235C34.4986 37.7235 35.5259 37.5395 36.5076 37.206Z"
fill="white"
/>
</g>
</g>
<defs>
<filter
id="filter0_d_3923_15349"
x="-2"
y="-4"
width="63"
height="63"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="-4" />
<feGaussianBlur stdDeviation="10" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3923_15349" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_3923_15349"
result="shape"
/>
</filter>
<clipPath id="clip0_3923_15349">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4V52C56 54.2091 54.2091 56 52 56H4C1.79086 56 0 54.2091 0 52V4Z"
fill="white"
/>
</clipPath>
</defs>
</svg>
);
};

export default MigrationFavicon;
15 changes: 12 additions & 3 deletions client/hosting/sites/components/sites-dataviews/dataviews-fields/site-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -74,6 +80,9 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
event.preventDefault();
};

const isMigrating = isMigrationInProgress( site );
const siteTitle = isMigrating ? translate( 'Incoming Migration' ) : site.title;

return (
<div className="sites-dataviews__site">
<SiteListTile
Expand All @@ -95,7 +104,7 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
<SiteFavicon
className="sites-site-favicon"
blogId={ site.ID }
fallback="first-grapheme"
fallback={ isMigrating ? 'migration' : 'first-grapheme' }
size={ 56 }
/>
</ThumbnailLink>
Expand All @@ -104,7 +113,7 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
title={
<ListTileTitle>
<SiteName as="div" title={ title }>
<Truncated>{ site.title }</Truncated>
<Truncated>{ siteTitle }</Truncated>
</SiteName>
{ isP2Site && <SitesP2Badge>P2</SitesP2Badge> }
{ isWpcomStagingSite && <SitesStagingBadge>{ __( 'Staging' ) }</SitesStagingBadge> }
Expand Down
18 changes: 18 additions & 0 deletions client/sites-dashboard/test/utils.js
View file
Original file line number Diff line number Diff line change
@@ -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 );
} );
} );
9 changes: 9 additions & 0 deletions client/sites-dashboard/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down

0 comments on commit c11aab8

Please sign in to comment.