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

p-jackson · 2025-07-02T04:23:52Z

Part of DOTDASH-14

Proposed Changes

Note

In light of ARC-422 (merging dataviews back to core) there are parts of this PR that will need to reworked.

Creates new <DataViewsEmptyState>, based on this experimental DS component rykv85Ii9RkvP504dtqqaW-fi-158_50621 QOBjujZah0UlGDDdLKZhzi-fi-2587_192468
Adds an empty prop to <DataViews> to allow for arbitrary empty states to be added
Site list shows a DataViewsEmptyState in its DataViews if the user has no sites or if the filter/search returns no results
"Add new site" button opens the same modal as the header action button
"Clear search" button clears just the text search, not all filters
- @matt-west should the button actually reset all filters to default?
Tweaks one of the data view padding styles that was missed in Dataviews: Use CSS to automatically to apply consistent 24px paddings when the DataViews component is placed inside a Card #104479
- The data view's inline padding is 24px when viewed within a card. But that change should also apply to the loading spinner and empty state containers
Fixes sentence casing of "Add new site" button and modal title

Not in this PR

Adding a min-height to the dataview as discussed here p1751440760784079/1751428514.884869-slack-C05QAFZSFTL

New user with no sites

This can happen for example if a user created a WordPress.com account at some stage just to comment on a blog. And they come to the dashboard at a later date.

Text search returns no results (grid mode)

Text search returns no results (table mode)

@matt-west the text wrapping here doesn't match Figma, despite the fact I'm using the same container size. But I don't think it makes sense to sweat over the wrapping. The user's search term appears in the copy so there's not much we can do about it.

A filter returns no results, but there is no search term

Grid mode on phone

Table mode on phone

Why are these changes being made?

When a data view is empty, it can be useful to give the user a call-to-action, so they can start populating the data view.

The "empty state" component is marked as experimental, so I've added it to the dashboard code rather than promoting it to @automattic/components. The component also needs to have custom padding based on the type of data view, which is why I thought it was best to specifically call it DataViewsEmptyState for now.

Testing Instructions

Test the site list at calypso.localhost:3000/v2
Test the backport at calypso.localhost:3000/sites?flags=dashboard/v2/backport/sites-list

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-07-02T04:24:03Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-149853

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-149853&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-149853&env=a8c-for-agencies

matticbot · 2025-07-02T04:34:15Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~44 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
entry-dashboard-dotcom       +134 B  (+0.0%)      +44 B  (+0.0%)
entry-dashboard-a4a          +134 B  (+0.0%)      +44 B  (+0.0%)
entry-subscriptions           +68 B  (+0.0%)      +23 B  (+0.0%)
entry-stepper                 +68 B  (+0.0%)      +23 B  (+0.0%)
entry-reauth-required         +68 B  (+0.0%)      +23 B  (+0.0%)
entry-main                    +68 B  (+0.0%)      +23 B  (+0.0%)
entry-login                   +68 B  (+0.0%)      +23 B  (+0.0%)
entry-domains-landing         +68 B  (+0.0%)      +23 B  (+0.0%)
entry-browsehappy             +68 B  (+0.0%)      +23 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~46 bytes added 📈 [gzipped])

name                parsed_size           gzip_size
staging-site             +150 B  (+0.0%)      +46 B  (+0.0%)
sites-dashboard          +150 B  (+0.0%)      +46 B  (+0.0%)
site-settings            +150 B  (+0.0%)      +46 B  (+0.0%)
site-performance         +150 B  (+0.0%)      +46 B  (+0.0%)
site-monitoring          +150 B  (+0.0%)      +46 B  (+0.0%)
site-logs                +150 B  (+0.0%)      +46 B  (+0.0%)
plans                    +150 B  (+0.0%)      +46 B  (+0.0%)
overview                 +150 B  (+0.0%)      +46 B  (+0.0%)
hosting                  +150 B  (+0.0%)      +46 B  (+0.0%)
github-deployments       +150 B  (+0.0%)      +46 B  (+0.0%)
domains                  +150 B  (+0.0%)      +46 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~35 bytes added 📈 [gzipped])

name                       parsed_size           gzip_size
async-load-v-2-sites-list        +66 B  (+0.1%)      +35 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2025-07-04T03:58:46Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug DOTDASH-14/add-empty-site-list-state on your sandbox.

arthur791004 · 2025-07-04T05:13:15Z

We have to split the changes of the Dataviews to Gutenberg.

p-jackson · 2025-07-04T05:19:13Z

client/dashboard/sites/index.tsx

@@ -66,10 +67,27 @@ export default function Sites() {
 	const { data: filteredData, paginationInfo } = filterSortAndPaginate( sites ?? [], view, fields );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );

+	const hasFilterOrSearch = ( view.filters && view.filters.length > 0 ) || view.search;
+
+	const emptyHeading = hasFilterOrSearch ? __( 'No sites found' ) : __( 'No sites' );


When choosing the copy to show, having some sort of filter takes precedence over having no sites. That might be counter intuitive.

My first instinct was that "No sites" should take precedence. If a user has zero sites and they type in a search, surely the more important message is that the user has no sites.

But is a little more nuanced. By default we do not show "hidden" sites. But then when the user starts typing, we assume that maybe they're looking for a specific hidden site and so start showing them.

So when the user sees the "No sites" message, we don't actually know whether the user has literally no sites 😳

And when the user starts searching, they might be looking for a hidden site, and so it is better to show the message "No sites found".

p-jackson · 2025-07-04T07:41:53Z

We have to split the changes of the Dataviews to Gutenberg.

Yes, I added a note about that in the PR description. I'm hoping to get some feedback about the empty state, but ultimately I need to open some GB PRs to get this whole thing merged.

Tweaks one of the data view padding styles that was missed in #104479

@arthur791004 Since this PR also adds an extra style rule that should have been in #104479, do you think it makes sense to just merge that in to wp-calypso so all those style changes get considered as one when merging into upstream?

arthur791004 · 2025-07-04T07:47:35Z

so all those style changes get considered as one when merging into upstream?

It has been merged into upstream via WordPress/gutenberg#70567, so any further changes should now be made directly in the upstream 😅

matt-west

Thanks @p-jackson!

should the button actually reset all filters to default?

Yes, because you could see the empty state after only applying filters. Ideally the button text would be conditional, so it would say Clear search, Clear filters, or Clear search and filters depending on what the user has applied.

the text wrapping here doesn't match Figma, despite the fact I'm using the same container size.

We could use text-wrap: balance; here to make the wrapping feel a bit better.

We should drop the column headers when the empty state is shown.

Let’s centre the empty state in the container. At the moment it appears to be top-aligned.

I noticed a small error in the illustration which has now been fixed in Figma. Can you please grab the updated version here.

p-jackson · 2025-07-08T00:25:50Z

Adding an empty prop in GB WordPress/gutenberg#70637

p-jackson · 2025-07-08T02:14:07Z

Adding the padding fix to GB WordPress/gutenberg#70638

p-jackson · 2025-07-25T08:24:19Z

Abandoned WordPress/gutenberg#70637
Opened WordPress/gutenberg#70867 to create a consistent customisable empty state in all dataviews.

p-jackson self-assigned this Jul 2, 2025

p-jackson force-pushed the DOTDASH-14/add-empty-site-list-state branch from e153e47 to 659ce4e Compare July 4, 2025 03:50

p-jackson force-pushed the DOTDASH-14/add-empty-site-list-state branch from 659ce4e to 96458db Compare July 4, 2025 04:33

p-jackson marked this pull request as ready for review July 4, 2025 04:57

p-jackson requested review from a team and youknowriad as code owners July 4, 2025 04:57

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jul 4, 2025

p-jackson commented Jul 4, 2025

View reviewed changes

p-jackson changed the title ~~Adds empty prop to DataViews component for rendering empty states~~ Hosting dashboard: Add a custom empty state to the site list Jul 4, 2025

matt-west reviewed Jul 4, 2025

View reviewed changes

p-jackson added 4 commits July 8, 2025 17:15

Adds empty prop to DataViews component for rendering empty states

57ea3af

Switch "Add New Button" to sentence case

9fc7b75

Adds an empty site component to the site list

4f76a1c

Fix the broken illustration

d39cbee

p-jackson force-pushed the DOTDASH-14/add-empty-site-list-state branch from 96458db to d39cbee Compare July 8, 2025 05:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

p-jackson commented Jul 2, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 2, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Jul 2, 2025 •

edited

Loading

Uh oh!

matticbot commented Jul 4, 2025 •

edited

Loading

Uh oh!

arthur791004 commented Jul 4, 2025

Uh oh!

p-jackson Jul 4, 2025

Uh oh!

p-jackson commented Jul 4, 2025

Uh oh!

arthur791004 commented Jul 4, 2025

Uh oh!

matt-west left a comment

Uh oh!

p-jackson commented Jul 8, 2025

Uh oh!

p-jackson commented Jul 8, 2025

Uh oh!

p-jackson commented Jul 25, 2025

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

p-jackson commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Jul 2, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arthur791004 commented Jul 4, 2025

Uh oh!

p-jackson Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

p-jackson commented Jul 4, 2025

Uh oh!

arthur791004 commented Jul 4, 2025

Uh oh!

matt-west left a comment

Choose a reason for hiding this comment

Uh oh!

p-jackson commented Jul 8, 2025

Uh oh!

p-jackson commented Jul 8, 2025

Uh oh!

p-jackson commented Jul 25, 2025

Uh oh!

Uh oh!

p-jackson commented Jul 2, 2025 •

edited

Loading

github-actions bot commented Jul 2, 2025 •

edited by matticbot

Loading

matticbot commented Jul 2, 2025 •

edited

Loading

matticbot commented Jul 4, 2025 •

edited

Loading