Skip to content

Commit cd634fe

Browse files
arthur791004arthur791004
committed
MSD: Apply DataViewsEmptyStateV2 to sites DataViews
1 parent d00c869 commit cd634fe

File tree

2 files changed

+101
-149
lines changed

2 files changed

+101
-149
lines changed

‎client/dashboard/sites/empty-sites-state/index.tsx‎

Lines changed: 80 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const CONTEXT = 'dashboard-sites';
1313
const EMPTY_STATE_REF = 'dashboard-sites-empty-state';
1414
const EMPTY_STATE_CTA_ID = 'dashboard-sites-empty-state';
1515

16-
export default function EmptySitesState() {
16+
export function EmptySitesStateContent() {
1717
const { recordTracksEvent } = useAnalytics();
1818

1919
const trackEmptyStateActionClick = ( action: string ) => {
@@ -43,94 +43,84 @@ export default function EmptySitesState() {
4343
};
4444

4545
return (
46-
<EmptyState.Wrapper>
47-
<EmptyState>
48-
<EmptyState.Header>
49-
<EmptyState.Title>{ __( 'You don’t have any sites yet' ) }</EmptyState.Title>
50-
<EmptyState.Description>
51-
{ __( 'Start a site and begin creating, coding, or exploring what WordPress can do.' ) }
52-
</EmptyState.Description>
53-
</EmptyState.Header>
54-
<EmptyState.Content>
55-
<EmptyState.ActionList>
56-
<EmptyState.ActionItem
57-
title={ __( 'Create it yourself' ) }
58-
description={ __( 'Start with a clean WordPress site and make it yours.' ) }
59-
decoration={ <Icon icon={ wordpress } size={ 24 } /> }
60-
actions={
61-
<Button
62-
variant="secondary"
63-
href={ addQueryArgs( wpcomLink( '/start' ), {
64-
source: CONTEXT,
65-
ref: EMPTY_STATE_REF,
66-
} ) }
67-
onClick={ handleCreateSiteClick }
68-
size="compact"
69-
__next40pxDefaultSize
70-
>
71-
{ __( 'Create a site' ) }
72-
</Button>
73-
}
74-
/>
75-
<EmptyState.ActionItem
76-
title={ __( 'Build with AI' ) }
77-
description={ __( 'Describe your idea and let AI help you refine your site.' ) }
78-
decoration={ <BigSkyLogo.Mark /> }
79-
actions={
80-
<Button
81-
variant="secondary"
82-
href={ addQueryArgs( wpcomLink( '/setup/ai-site-builder' ), {
83-
source: CONTEXT,
84-
ref: EMPTY_STATE_REF,
85-
} ) }
86-
onClick={ handleBuildWithAiClick }
87-
__next40pxDefaultSize
88-
size="compact"
89-
>
90-
{ __( 'Build with AI' ) }
91-
</Button>
92-
}
93-
/>
94-
<EmptyState.ActionItem
95-
title={ __( 'Migrate' ) }
96-
description={ __( 'Bring your site to the world’s best WordPress host.' ) }
97-
decoration={ <Icon icon={ reusableBlock } size={ 24 } /> }
98-
actions={
99-
<Button
100-
variant="secondary"
101-
href={ wpcomLink(
102-
`/setup/site-migration?source=${ CONTEXT }&ref=${ EMPTY_STATE_REF }`
103-
) }
104-
onClick={ handleMigrateClick }
105-
size="compact"
106-
__next40pxDefaultSize
107-
>
108-
{ __( 'Start migration' ) }
109-
</Button>
110-
}
111-
/>
112-
<EmptyState.ActionItem
113-
title={ __( 'Via the Jetpack plugin' ) }
114-
description={ __( 'Install the Jetpack plugin on an existing site.' ) }
115-
decoration={ <JetpackLogo size={ 24 } /> }
116-
actions={
117-
<Button
118-
variant="secondary"
119-
href={ wpcomLink(
120-
`/jetpack/connect?cta_from=${ CONTEXT }&cta_id=${ EMPTY_STATE_CTA_ID }`
121-
) }
122-
onClick={ handleJetpackClick }
123-
size="compact"
124-
__next40pxDefaultSize
125-
>
126-
{ __( 'Migrate via Jetpack' ) }
127-
</Button>
128-
}
129-
/>
130-
</EmptyState.ActionList>
131-
<OfferCard onClick={ handleOfferClick } />
132-
</EmptyState.Content>
133-
</EmptyState>
134-
</EmptyState.Wrapper>
46+
<>
47+
<EmptyState.ActionList>
48+
<EmptyState.ActionItem
49+
title={ __( 'Create it yourself' ) }
50+
description={ __( 'Start with a clean WordPress site and make it yours.' ) }
51+
decoration={ <Icon icon={ wordpress } size={ 24 } /> }
52+
actions={
53+
<Button
54+
variant="secondary"
55+
href={ addQueryArgs( wpcomLink( '/start' ), {
56+
source: CONTEXT,
57+
ref: EMPTY_STATE_REF,
58+
} ) }
59+
onClick={ handleCreateSiteClick }
60+
size="compact"
61+
__next40pxDefaultSize
62+
>
63+
{ __( 'Create a site' ) }
64+
</Button>
65+
}
66+
/>
67+
<EmptyState.ActionItem
68+
title={ __( 'Build with AI' ) }
69+
description={ __( 'Describe your idea and let AI help you refine your site.' ) }
70+
decoration={ <BigSkyLogo.Mark /> }
71+
actions={
72+
<Button
73+
variant="secondary"
74+
href={ addQueryArgs( wpcomLink( '/setup/ai-site-builder' ), {
75+
source: CONTEXT,
76+
ref: EMPTY_STATE_REF,
77+
} ) }
78+
onClick={ handleBuildWithAiClick }
79+
__next40pxDefaultSize
80+
size="compact"
81+
>
82+
{ __( 'Build with AI' ) }
83+
</Button>
84+
}
85+
/>
86+
<EmptyState.ActionItem
87+
title={ __( 'Migrate' ) }
88+
description={ __( 'Bring your site to the world’s best WordPress host.' ) }
89+
decoration={ <Icon icon={ reusableBlock } size={ 24 } /> }
90+
actions={
91+
<Button
92+
variant="secondary"
93+
href={ wpcomLink(
94+
`/setup/site-migration?source=${ CONTEXT }&ref=${ EMPTY_STATE_REF }`
95+
) }
96+
onClick={ handleMigrateClick }
97+
size="compact"
98+
__next40pxDefaultSize
99+
>
100+
{ __( 'Start migration' ) }
101+
</Button>
102+
}
103+
/>
104+
<EmptyState.ActionItem
105+
title={ __( 'Via the Jetpack plugin' ) }
106+
description={ __( 'Install the Jetpack plugin on an existing site.' ) }
107+
decoration={ <JetpackLogo size={ 24 } /> }
108+
actions={
109+
<Button
110+
variant="secondary"
111+
href={ wpcomLink(
112+
`/jetpack/connect?cta_from=${ CONTEXT }&cta_id=${ EMPTY_STATE_CTA_ID }`
113+
) }
114+
onClick={ handleJetpackClick }
115+
size="compact"
116+
__next40pxDefaultSize
117+
>
118+
{ __( 'Migrate via Jetpack' ) }
119+
</Button>
120+
}
121+
/>
122+
</EmptyState.ActionList>
123+
<OfferCard onClick={ handleOfferClick } />
124+
</>
135125
);
136126
}

‎client/dashboard/sites/index.tsx‎

Lines changed: 21 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import {
66
useSuspenseQuery,
77
keepPreviousData,
88
} from '@tanstack/react-query';
9-
import { useNavigate } from '@tanstack/react-router';
109
import { Button, Modal } from '@wordpress/components';
1110
import { filterSortAndPaginate } from '@wordpress/dataviews';
12-
import { __, sprintf } from '@wordpress/i18n';
11+
import { __ } from '@wordpress/i18n';
1312
import { getISOWeek, getISOWeekYear } from 'date-fns';
1413
import deepmerge from 'deepmerge';
1514
import { useState, useEffect } from 'react';
@@ -19,7 +18,7 @@ import { useAuth } from '../app/auth';
1918
import { useAppContext } from '../app/context';
2019
import { usePersistentView } from '../app/hooks/use-persistent-view';
2120
import { sitesRoute } from '../app/router/sites';
22-
import { DataViewsEmptyState } from '../components/dataviews';
21+
import { DataViewsEmptyStateV2 } from '../components/dataviews';
2322
import OptInSurvey from '../components/opt-in-survey';
2423
import { PageHeader } from '../components/page-header';
2524
import PageLayout from '../components/page-layout';
@@ -33,9 +32,8 @@ import {
3332
recordViewChanges,
3433
sanitizeFields,
3534
} from './dataviews';
36-
import EmptySitesState from './empty-sites-state';
35+
import { EmptySitesStateContent } from './empty-sites-state';
3736
import { InviteAcceptedFlashMessage } from './invite-accepted-flash-message';
38-
import noSitesIllustration from './no-sites-illustration.svg';
3937
import { SitesNotices } from './notices';
4038
import { OptInWelcomeModal } from './welcome-modal';
4139
import type {
@@ -183,7 +181,6 @@ function filterSortAndPaginateSites( sites: Site[], view: View, totalItems: numb
183181

184182
export default function Sites() {
185183
const { recordTracksEvent } = useAnalytics();
186-
const navigate = useNavigate( { from: sitesRoute.fullPath } );
187184
const queryClient = useQueryClient();
188185
const currentSearchParams = sitesRoute.useSearch();
189186
const isRestoringAccount = !! currentSearchParams.restored;
@@ -228,24 +225,7 @@ export default function Sites() {
228225
updateView( nextView );
229226
};
230227

231-
const hasFilterOrSearch = ( view.filters && view.filters.length > 0 ) || view.search;
232-
233-
const emptyTitle = hasFilterOrSearch ? __( 'No sites found' ) : __( 'No sites' );
234-
235-
const userHasNoSites = user.site_count === 0;
236-
237-
let emptyDescription = __( 'Get started by creating a new site.' );
238-
if ( view.search ) {
239-
emptyDescription = sprintf(
240-
// Translators: %s is the search term used when looking for sites by title or domain name.
241-
__(
242-
'Your search for “%s” did not match any sites. Try searching by the site title or domain name.'
243-
),
244-
view.search
245-
);
246-
} else if ( hasFilterOrSearch ) {
247-
emptyDescription = __( 'Your search did not match any sites.' );
248-
}
228+
const userHasSites = user.site_count > 0;
249229

250230
useEffect( () => {
251231
if ( sites ) {
@@ -261,37 +241,6 @@ export default function Sites() {
261241
? filterSortAndPaginateSites( sites ?? [], view, totalItems ?? 0 )
262242
: filterSortAndPaginate( sites ?? [], view, fields );
263243

264-
const emptyState = (
265-
<DataViewsEmptyState
266-
title={ emptyTitle }
267-
description={ emptyDescription }
268-
illustration={ <img src={ noSitesIllustration } alt="" width={ 408 } height={ 280 } /> }
269-
actions={
270-
<>
271-
{ view.search && (
272-
<Button
273-
__next40pxDefaultSize
274-
variant="secondary"
275-
onClick={ () => {
276-
navigate( {
277-
search: {
278-
...currentSearchParams,
279-
search: undefined,
280-
},
281-
} );
282-
} }
283-
>
284-
{ __( 'Clear search' ) }
285-
</Button>
286-
) }
287-
<Button __next40pxDefaultSize variant="primary" onClick={ () => setIsModalOpen( true ) }>
288-
{ __( 'Add new site' ) }
289-
</Button>
290-
</>
291-
}
292-
/>
293-
);
294-
295244
return (
296245
<>
297246
{ ! isDashboardBackport() && <OptInWelcomeModal /> }
@@ -306,7 +255,7 @@ export default function Sites() {
306255
<PageHeader
307256
title={ __( 'Sites' ) }
308257
actions={
309-
userHasNoSites ? null : (
258+
userHasSites && (
310259
<Button
311260
variant="primary"
312261
onClick={ () => setIsModalOpen( true ) }
@@ -325,21 +274,34 @@ export default function Sites() {
325274
</>
326275
}
327276
>
328-
{ ! userHasNoSites ? (
277+
{ userHasSites ? (
329278
<SitesDataViews
330279
view={ view }
331280
sites={ filteredData }
332281
fields={ fields }
333282
actions={ actions }
334283
isLoading={ isLoadingSites || ( isPlaceholderData && hasNoData ) }
335284
isPlaceholderData={ isPlaceholderData }
336-
empty={ emptyState }
285+
empty={
286+
<DataViewsEmptyStateV2
287+
title={ __( 'No domains match your search' ) }
288+
description={ __( 'Try again, or add a new domain with the options below.' ) }
289+
isBorderless
290+
>
291+
<EmptySitesStateContent />
292+
</DataViewsEmptyStateV2>
293+
}
337294
paginationInfo={ paginationInfo }
338295
onChangeView={ handleViewChange }
339296
onResetView={ resetView }
340297
/>
341298
) : (
342-
<EmptySitesState />
299+
<DataViewsEmptyStateV2
300+
title={ __( 'Add your first domain name' ) }
301+
description={ __( 'Establish a unique online identity for your site.' ) }
302+
>
303+
<EmptySitesStateContent />
304+
</DataViewsEmptyStateV2>
343305
) }
344306
</PageLayout>
345307
{ /* ExPlat's Evergreen A/A Test Experiment:

0 commit comments

Comments
 (0)