Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

vykes-mac · 2024-10-15T22:26:33Z

Relates to https://github.com/Automattic/dotcom-forge/issues/9372

Proposed Changes

Add disclaimer to the end of the pages list Searching your top 20 most popular pages.
Remove call to backend when user searches the dropdown list
Forces a No pages found item when no pages are found

Why are these changes being made?

To make the experience more predictable and provide clear indications when pages are not available

Testing Instructions

Go to /sites/performance/site
Verify Searching your top 20 most popular pages. copy is show at the bottom of the list
Search for a page that doesn't exist and verify No pages found is shown

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 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 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 · 2024-10-15T22:26:45Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-10-15T22:33:36Z

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

Sections (~127 bytes added 📈 [gzipped])

name              parsed_size           gzip_size
site-performance       +366 B  (+0.0%)     +127 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.

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.

candy02058912

Functionality-wise, this PR works 👍

Added a comment where the copy might cause confusion.
I didn't realize it when reading the copy from the original issue description, but it felt a bit weird when testing.

candy02058912 · 2024-10-16T04:29:56Z

client/hosting/performance/components/PageSelector.tsx

+						if ( item.value === '-1' ) {
+							return (
+								<div className="message">
+									{ translate( 'Searching your top 20 most popular pages.' ) }


"Searching your top 20 most popular pages" may give a feeling that it's still retrieving the pages since only ten are shown in the dropdown.

Wondering if these would be a clearer copy:

Search is limited to the top 20 pages.

Top 20 pages available for search.

@matt-west curious what you think of the copy from a UX point of view 🙏

Thanks for highlighting @candy02058912. I agree that we can improve on the current copy.

We're really talking about a limitation of the performance feature here rather than just the search.

Something like this could work, but it's a bit long.

Performance testing is available for the 20 most popular pages.

cc: @autumnfjeld what's your take on the copy suggestions here?

@candy02058912

Performance testing is available for the 20 most popular pages.

If this fits on two lines, this is good.

Slightly shorter option if needed and if @matt-west approved

Performance tests limited to the 20 most popular pages.

Performance tests limited to the top 20 pages.

matt-west

Looks good @vykes-mac. Let's address the copy suggestion, but otherwise ship it!

paulopmt1

Working as expected, good job @vykes-mac!

One optional comment.

paulopmt1 · 2024-10-16T17:29:42Z

client/hosting/performance/components/PageSelector.tsx

+							);
+						}
+						if ( item.value === '-2' ) {
+							return <div className="message">{ translate( 'No pages found' ) }</div>;


Since we're looking for a specific page when using the searching, should it be Page not found instead?

I think because a search query can return a list of pages matching and not only a specific one No pages found works. I think the copy works as is. but we can change later if others have a strong opinion.

matticbot · 2024-10-17T07:05:41Z

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

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

notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/empty-state on your sandbox.

a8ci18n · 2024-10-17T09:21:53Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16921039

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @vykes-mac for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-10-20T07:31:36Z

Translation for this Pull Request has now been finished.

vykes-mac self-assigned this Oct 15, 2024

vykes-mac added Logged-in Performance Profiler i1 [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Reviewer Can Merge PR author indicates the reviewer is free to merge/deploy if they want to own the change. labels Oct 16, 2024

vykes-mac requested review from candy02058912, zaguiini and matt-west October 16, 2024 03:01

vykes-mac changed the title ~~Update/empty state~~ Logged in Profiler: Allow searching pages in dropdown and show empty states Oct 16, 2024

candy02058912 reviewed Oct 16, 2024

View reviewed changes

candy02058912 approved these changes Oct 16, 2024

View reviewed changes

matt-west reviewed Oct 16, 2024

View reviewed changes

paulopmt1 approved these changes Oct 16, 2024

View reviewed changes

vykes-mac and others added 9 commits October 17, 2024 14:55

adds a no page found component

49b6ac0

remove call to backend when a page is not found in the list

1c7de61

remove no page found component

ae59374

read check for current page

966969a

add disclaimer at the bottom of the dropdown

0318a3a

allow the disclaimer to always show

ecb33e3

force a no pages found message when no pages are found

0a1da82

remove comment

22c25ad

Update copy

1191805

candy02058912 force-pushed the update/empty-state branch from 6c79eb4 to 1191805 Compare October 17, 2024 06:56

candy02058912 merged commit 8bffce1 into trunk Oct 17, 2024
11 checks passed

candy02058912 deleted the update/empty-state branch October 17, 2024 07:18

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

vykes-mac commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 15, 2024 •

edited by matticbot

Loading

matticbot commented Oct 15, 2024 •

edited

Loading

candy02058912 left a comment •

edited

Loading

candy02058912 Oct 16, 2024

candy02058912 Oct 16, 2024

matt-west Oct 16, 2024

vykes-mac Oct 16, 2024

autumnfjeld Oct 17, 2024

matt-west left a comment

paulopmt1 left a comment

paulopmt1 Oct 16, 2024

vykes-mac Oct 16, 2024

matticbot commented Oct 17, 2024

a8ci18n commented Oct 17, 2024

a8ci18n commented Oct 20, 2024

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

Logged in Profiler: Allow searching pages in dropdown and show empty states #95415

Conversation

vykes-mac commented Oct 15, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 15, 2024 • edited by matticbot Loading

matticbot commented Oct 15, 2024 • edited Loading

candy02058912 left a comment • edited Loading

Choose a reason for hiding this comment

candy02058912 Oct 16, 2024

Choose a reason for hiding this comment

candy02058912 Oct 16, 2024

Choose a reason for hiding this comment

matt-west Oct 16, 2024

Choose a reason for hiding this comment

vykes-mac Oct 16, 2024

Choose a reason for hiding this comment

autumnfjeld Oct 17, 2024

Choose a reason for hiding this comment

matt-west left a comment

Choose a reason for hiding this comment

paulopmt1 left a comment

Choose a reason for hiding this comment

paulopmt1 Oct 16, 2024

Choose a reason for hiding this comment

vykes-mac Oct 16, 2024

Choose a reason for hiding this comment

matticbot commented Oct 17, 2024

a8ci18n commented Oct 17, 2024

a8ci18n commented Oct 20, 2024

vykes-mac commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 15, 2024 •

edited by matticbot

Loading

matticbot commented Oct 15, 2024 •

edited

Loading

candy02058912 left a comment •

edited

Loading