Reader: Update action button link of an empty list of a user profile #98706

mehmoodak · 2025-01-21T18:06:00Z

Related to https://github.com/Automattic/loop/issues/351

Proposed Changes

The issue was that on an empty list page, the "Back to Following" button with link /read was being displayed even when navigating from a user profile. This PR fixes this by updating the implementation to display a "Back to User Profile" button with link /read/users/:id/lists instead, allowing users to easily navigate back to the user profile.

Other than this I have also refactored ListEmptyContent to functional component so for easier review each commit can be reviewed separately.

Before	After

Why are these changes being made?

To improve the navigation.

Testing Instructions

Go to /read/list/artemiosans/a-third-list.
Verify action button is showing "Back to Following" text with link /read.
Go to the Lists tab of any user profile (example: /read/users/218803706/lists.
Click on a list that have no posts yet (example: A Third List).
Verify action button is showing "Back to User Profile" text with link /read/users/:id/lists.

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 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-01-21T18:06:13Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-01-21T18:06:56Z

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

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

name                                    parsed_size           gzip_size
async-load-calypso-reader-user-profile        +64 B  (+0.5%)      +22 B  (+0.6%)
async-load-calypso-reader-list-stream         +64 B  (+0.4%)     +154 B  (+3.4%)

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.

client/reader/list-stream/empty.tsx

matticbot · 2025-01-21T18:19:47Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug loop-351/update-action-link-on-empty-user-profile-list on your sandbox.

client/reader/list-stream/empty.tsx

DustyReagan

This part doesn't seem to be working for me on Calypso Live. I'm still seeing "Back to Follow" with a link to /read.

Go to the Lists tab of any user profile (example: /read/users/218803706/lists.
Click on a list that have no posts yet (example: A Third List).
Verify action button is showing "Back to User Profile" text with link /read/users/:id/lists.

Could we always link to the list owner's "Lists" page now? Is there any reason we should link to /read now that we have a user profile page?

mehmoodak · 2025-01-22T15:39:05Z

This part doesn't seem to be working for me on Calypso Live.

It is fixed now.

Could we always link to the list owner's "Lists" page now? Is there any reason we should link to /read now that we have a user profile page

If I navigate to the list from User Profile then its better to show /users/:id/lists link and if I navigate from sidebar then its better to show /read link.

Addison-Stavlo

I can see the button content updating and the href changing, but it loads into a wsod for me currently.

Repro:

visited /read/users/218803706/lists
clicked on "A third list" and let the empty list load. (URL on third list /read/list/artemiosans/a-third-list?last_page=/read/users/218803706/lists)
clicked on "Back to user profile". This is a WSOD as it loads /read/list/artemiosans/%2Fread%2Fusers%2F218803706%2Flists instead of /read/users/218803706/lists

Note - the above is on calypso live. When running the branch locally im seeing the query param added to the url, but the button content and href not changing (continues to go to following). 😕

Are you seeing either of these issues?

Addison-Stavlo · 2025-01-22T17:48:04Z

client/reader/list-stream/empty.tsx

+		if ( lastPageLink ) {
+			return;
+		}
+
+		recordAction( 'clicked_following_on_empty' );
+		recordGaEvent( 'Clicked Following on EmptyContent' );
+		dispatch( recordReaderTracksEvent( 'calypso_reader_following_on_empty_list_stream_clicked' ) );


It looks like we are avoiding firing the events around clicking for the following feed. I wonder if there is any value to these types of events, and if we should consider sending separate ones in the case of profile (or alternatively removing them all if not valuable).

I also thought of removing this. Let me know if we need to remove this.

For now I am just removing the if condition as firing the events for both cases is fine.

Addressed in 376a54f

Addison-Stavlo · 2025-01-22T17:57:07Z

client/reader/list-stream/empty.tsx

+	const dispatch = useDispatch();
+	const translate = useTranslate();
+	const queryParams = new URLSearchParams( location.search );
+	const lastPageLink = queryParams.get( 'last_page' ) ?? '';


Can we pull this out of the URL and avoid keeping extra query params in the URL? We could probably look for the value on mount, remove it from the url, and use that initial info for the text/href.

remove it from the url

I avoided it because it will create a new entry in the browser history.

mehmoodak · 2025-01-22T19:05:16Z

I can see the button content updating and the href changing, but it loads into a wsod for me currently.

This should be fixed now (1249bb2).

mehmoodak added 2 commits January 21, 2025 21:28

💫 UPDATE: migrate ListEmptyContent to function component with TS support

6140385

💫 UPDATE: action link on empty list of a user profile

6a41d2c

mehmoodak self-assigned this Jan 21, 2025

github-advanced-security bot found potential problems Jan 21, 2025

View reviewed changes

client/reader/list-stream/empty.tsx Fixed Show fixed Hide fixed

client/reader/list-stream/empty.tsx Fixed Show fixed Hide fixed

github-advanced-security bot found potential problems Jan 21, 2025

View reviewed changes

client/reader/list-stream/empty.tsx Dismissed Show dismissed Hide dismissed

client/reader/list-stream/empty.tsx Fixed Show fixed Hide fixed

🐛 FIX: possible XSS

ac8eff3

mehmoodak force-pushed the loop-351/update-action-link-on-empty-user-profile-list branch from bdd3e9a to ac8eff3 Compare January 21, 2025 18:50

mehmoodak marked this pull request as ready for review January 21, 2025 19:06

mehmoodak requested a review from a team as a code owner January 21, 2025 19:06

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 21, 2025

DustyReagan reviewed Jan 22, 2025

View reviewed changes

🐛 FIX: url check via RegExp

f91cb69

Addison-Stavlo reviewed Jan 22, 2025

View reviewed changes

mehmoodak added 2 commits January 22, 2025 23:44

🐛 FIX: fire track events for both cases

376a54f

🐛 FIX: WSOD issue due to url encoding

1249bb2

mehmoodak force-pushed the loop-351/update-action-link-on-empty-user-profile-list branch from ec3f72a to 1249bb2 Compare January 22, 2025 19:04

mehmoodak requested review from Addison-Stavlo and DustyReagan January 22, 2025 19:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader: Update action button link of an empty list of a user profile #98706

Reader: Update action button link of an empty list of a user profile #98706

mehmoodak commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited by matticbot

Loading

matticbot commented Jan 21, 2025 •

edited

Loading

matticbot commented Jan 21, 2025 •

edited

Loading

DustyReagan left a comment

mehmoodak commented Jan 22, 2025

Addison-Stavlo left a comment •

edited

Loading

Addison-Stavlo Jan 22, 2025 •

edited

Loading

mehmoodak Jan 22, 2025

mehmoodak Jan 22, 2025

Addison-Stavlo Jan 22, 2025

mehmoodak Jan 22, 2025 •

edited

Loading

mehmoodak commented Jan 22, 2025 •

edited

Loading

Reader: Update action button link of an empty list of a user profile #98706

Are you sure you want to change the base?

Reader: Update action button link of an empty list of a user profile #98706

Conversation

mehmoodak commented Jan 21, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 21, 2025 • edited by matticbot Loading

matticbot commented Jan 21, 2025 • edited Loading

matticbot commented Jan 21, 2025 • edited Loading

DustyReagan left a comment

Choose a reason for hiding this comment

mehmoodak commented Jan 22, 2025

Addison-Stavlo left a comment • edited Loading

Choose a reason for hiding this comment

Addison-Stavlo Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

mehmoodak Jan 22, 2025

Choose a reason for hiding this comment

mehmoodak Jan 22, 2025

Choose a reason for hiding this comment

Addison-Stavlo Jan 22, 2025

Choose a reason for hiding this comment

mehmoodak Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

mehmoodak commented Jan 22, 2025 • edited Loading

mehmoodak commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited by matticbot

Loading

matticbot commented Jan 21, 2025 •

edited

Loading

matticbot commented Jan 21, 2025 •

edited

Loading

Addison-Stavlo left a comment •

edited

Loading

Addison-Stavlo Jan 22, 2025 •

edited

Loading

mehmoodak Jan 22, 2025 •

edited

Loading

mehmoodak commented Jan 22, 2025 •

edited

Loading