Skip to content

Hosting dashboard: Add a custom empty state to the site list #104544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 14, 2025
Merged

Hosting dashboard: Add a custom empty state to the site list #104544

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9fcf280
Switch "Add New Button" to sentence case
p-jackson Jul 3, 2025
25fd8e9
Adds an empty site component to the site list
p-jackson Jul 4, 2025
4359f85
Fix the broken illustration
p-jackson Jul 8, 2025
3b92b8f
Transform into generic EmptyState component
p-jackson Aug 13, 2025
7237b82
Adjust styles for consistent spacing and mobile layout
p-jackson Aug 13, 2025
cd5588f
Rename props to be consistent with other HD prop names
p-jackson Aug 13, 2025
952e670
Renames to `DataViewsEmptyState`
p-jackson Aug 14, 2025
ee2f3f7
Storybook for empty state
p-jackson Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions client/dashboard/components/empty-state/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {
__experimentalVStack as VStack,
__experimentalHStack as HStack,
} from '@wordpress/components';
import './styles.scss';
import { Text } from '../text';
import type { ReactNode } from 'react';

interface EmptyStateProps {
actions?: ReactNode;
description: string;
illustration?: ReactNode;
title: string;
}

export function EmptyState( { actions, title, illustration, description }: EmptyStateProps ) {
return (
<VStack spacing={ 6 } alignment="center" className="dashboard-empty-state">
{ illustration }
<VStack spacing={ 2 } alignment="center">
<div className="dashboard-empty-state__heading">{ title }</div>
<Text variant="muted" align="center" className="dashboard-empty-state__sub-heading">
{ description }
</Text>
</VStack>
{ actions && (
<HStack spacing={ 4 } justify="center" wrap>
{ actions }
</HStack>
) }
</VStack>
);
}
24 changes: 24 additions & 0 deletions client/dashboard/components/empty-state/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

.dashboard-empty-state {
max-width: 480px;
padding-block: $grid-unit-20;
box-sizing: border-box;

img {
width: 100%;
}
}

.dashboard-empty-state__heading {
Copy link
Contributor

@arthur791004 arthur791004 Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: it would be better to update the classname as well

Copy link
Member Author

@p-jackson p-jackson Aug 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was already working on it 😄

FORCE PUSH!!

@include heading-x-large;
color: $gray-900;
margin: 0;
}

// Balanced wrapping works better for centered text
// Extra specificity to override <Text> component styles
.dashboard-empty-state .dashboard-empty-state__sub-heading {
text-wrap: balance;
}
63 changes: 60 additions & 3 deletions client/dashboard/sites/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useQuery, useSuspenseQuery, useMutation } from '@tanstack/react-query';
import { useNavigate, useRouter } from '@tanstack/react-router';
import { Button, Modal } from '@wordpress/components';
import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { useState } from 'react';
import { useAnalytics } from '../app/analytics';
import { useAuth } from '../app/auth';
Expand All @@ -11,11 +11,13 @@ import { userPreferenceQuery, userPreferenceMutation } from '../app/queries/me-p
import { sitesQuery } from '../app/queries/sites';
import { sitesRoute } from '../app/router';
import DataViewsCard from '../components/dataviews-card';
import { EmptyState } from '../components/empty-state';
import { PageHeader } from '../components/page-header';
import PageLayout from '../components/page-layout';
import { getActions } from './actions';
import AddNewSite from './add-new-site';
import { getFields } from './fields';
import noSitesIllustration from './no-sites-illustration.svg';
import { SitesNotices } from './notices';
import {
getView,
Expand Down Expand Up @@ -103,10 +105,27 @@ export default function Sites() {
updateViewPreferences( updatedViewPreferences );
};

const hasFilterOrSearch = ( view.filters && view.filters.length > 0 ) || view.search;

const emptyTitle = hasFilterOrSearch ? __( 'No sites found' ) : __( 'No sites' );

let emptyDescription = __( 'Get started by creating a new site.' );
if ( view.search ) {
emptyDescription = sprintf(
// Translators: %s is the search term used when looking for sites by title or domain name.
__(
'Your search for “%s” did not match any sites. Try searching by the site title or domain name.'
),
view.search
);
} else if ( hasFilterOrSearch ) {
emptyDescription = __( 'Your search did not match any sites.' );
}

return (
<>
{ isModalOpen && (
<Modal title={ __( 'Add New Site' ) } onRequestClose={ () => setIsModalOpen( false ) }>
<Modal title={ __( 'Add new site' ) } onRequestClose={ () => setIsModalOpen( false ) }>
<AddNewSite context="sites-dashboard" />
</Modal>
) }
Expand All @@ -120,7 +139,7 @@ export default function Sites() {
onClick={ () => setIsModalOpen( true ) }
__next40pxDefaultSize
>
{ __( 'Add New Site' ) }
{ __( 'Add new site' ) }
</Button>
}
/>
Expand All @@ -139,6 +158,44 @@ export default function Sites() {
defaultLayouts={ DEFAULT_LAYOUTS }
paginationInfo={ paginationInfo }
perPageSizes={ DEFAULT_PER_PAGE_SIZES }
empty={
<EmptyState
title={ emptyTitle }
description={ emptyDescription }
illustration={
<img src={ noSitesIllustration } alt="" width={ 408 } height={ 280 } />
}
actions={
<>
{ view.search && (
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ () => {
navigate( {
search: {
...currentSearchParams,
view: Object.fromEntries(
Object.entries( view ).filter( ( [ key ] ) => key !== 'search' )
),
},
} );
} }
>
{ __( 'Clear search' ) }
</Button>
) }
<Button
__next40pxDefaultSize
variant="primary"
onClick={ () => setIsModalOpen( true ) }
>
{ __( 'Add new site' ) }
</Button>
</>
}
/>
}
/>
</DataViewsCard>
</PageLayout>
Expand Down
35 changes: 35 additions & 0 deletions client/dashboard/sites/no-sites-illustration.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.