Page MenuHomePhabricator

Display popup the first time a user visits watchlist after labels are enabled
Closed, ResolvedPublic

Assigned To
Authored By
Cparle
Oct 24 2025, 4:56 PM
Referenced Files
F71239735: 2025-12-24_10-57-15.webm
Wed, Dec 24, 7:04 PM
F71239693: 2025-12-23_16-39-02.png
Wed, Dec 24, 7:04 PM
F71239691: 2025-12-23_16-39-32.png
Wed, Dec 24, 7:04 PM
F71239689: 2025-12-23_16-40-25.png
Wed, Dec 24, 7:04 PM
F71239684: 2025-12-23_16-40-02.png
Wed, Dec 24, 7:04 PM
F71239682: 2025-12-23_16-40-53.png
Wed, Dec 24, 7:04 PM
F71239653: 2025-12-23_16-42-55.webm
Wed, Dec 24, 7:04 PM
F71086093: image.png
Dec 16 2025, 2:19 AM

Description

User Story

As a user I want to be made aware of how to assign labels to watchlist items.

Acceptance criteria

  • When I visit the watchlist after labels are enabled I see a set of popups to tell me about assigning labels to watchlist items.
  • The popups should appear for skins (such as Vector-2022) that support the associated-pages menu as well as skins that don't.

Details for QA

  • Should appear only until the user dismisses it with the 'Got it' button, and should not appear again afterwards.
  • The dismissal is saved as a hidden user preference, so will apply to a user regardless of what device they're using.
  • The only way to un-dismiss the onboarding after clicking 'Got it' is with the "reset settings" link in Special:Preferences (or deleting the row in the user_properties DB table where up_property = watchlistlabelonboarding).

Designs

Full designs here https://www.figma.com/design/CdyroPkkcT7GJA9bwno0Rq/WE1.4-Task-priotization?node-id=327-15767&p=f&t=it3KLwgfVRsWHUqn-0

The SVGs can be extracted from the Figma project.

Vector-2022

  • 1 of 3:
    image.png (320×475 px, 29 KB)
    Create labels Go to 'Manage labels' to create, rename and delete custom labels.
  • 2 of 3:
    image.png (316×472 px, 29 KB)
    Assign labels Go to 'Edit watchlist' to assign labels to watched pages.
  • 3 of 3:
    image.png (313×480 px, 24 KB)
    Filter by labels Go to 'Labels' to filter the edits.

Legacy

  • 1 of 2:
    image.png (335×481 px, 32 KB)
    Create and assign labels In 'Manage labels' create custom labels and assign them in 'Edit watchlist'.
  • 2 of 2:
    image.png (307×467 px, 23 KB)
    Filter by labels Go to 'Labels' to filter the edits.

Derived Requirement

Ensure that users are informed about how to assign and use watchlist labels by displaying a one-time onboarding popup sequence the first time they visit their watchlist after watchlist labels are enabled, such that the onboarding appears across supported and unsupported skins, persists until explicitly dismissed, is stored as a hidden user preference across devices, and does not reappear unless the user resets their preferences.

Test Steps

Test Case 1: Show onboarding popup on first watchlist visit after labels are enabled

  1. Log in as a named user who has not previously dismissed the watchlist label onboarding.
  2. Ensure watchlist labels are enabled for the wiki.
  3. Navigate to Special:Watchlist.
  4. Observe the page behavior.
  5. ✅❓❌⬜ AC1: Confirm that an onboarding popup sequence explaining watchlist labels is displayed on the first visit to the watchlist.

Test Case 2: Display onboarding on skins with and without associated-pages menu support

  1. Log in as a named user who has not dismissed the onboarding.
  2. Navigate to Special:Watchlist using a skin that supports the associated-pages menu (for example, Vector-2022).
  3. Observe the onboarding popup sequence.
  4. Switch to a skin that does not support the associated-pages menu.
  5. Navigate again to Special:Watchlist.
  6. ✅❓❌⬜ AC2: Confirm that the onboarding popup sequence is shown on both skin types.

Test Case 3: Persist onboarding until dismissed

  1. While viewing the onboarding popup sequence, navigate away from the watchlist without clicking the 'Got it' button.
  2. Return to Special:Watchlist.
  3. Observe the onboarding behavior.
  4. ✅❓❌⬜ AC3: Confirm that the onboarding popup continues to appear until the user explicitly dismisses it using the 'Got it' button.

Test Case 4: Stop showing onboarding after dismissal

  1. Navigate to Special:Watchlist with the onboarding popup visible.
  2. Click the 'Got it' button to dismiss the onboarding.
  3. Reload the page.
  4. Navigate away and return to Special:Watchlist.
  5. ✅❓❌⬜ AC4: Confirm that the onboarding popup does not appear again after being dismissed.

Test Case 5: Persist dismissal across devices and sessions

  1. Dismiss the onboarding popup as a named user.
  2. Log out or open a new browser session or device.
  3. Log back in as the same user.
  4. Navigate to Special:Watchlist.
  5. ✅❓❌⬜ AC5: Confirm that the onboarding popup remains dismissed across sessions and devices.

Test Case 6: Reset onboarding via user preferences

  1. As a user who has dismissed the onboarding, navigate to Special:Preferences.
  2. Select the option to reset settings.
  3. Save the preference changes.
  4. Navigate to Special:Watchlist.
  5. ✅❓❌⬜ AC6: Confirm that the onboarding popup sequence is shown again after resetting user preferences.

QA Results -Beta

Details

Event Timeline

Samwilson subscribed.

Is this a whole Story? I wonder if it's small enough to be one of the tasks for the filtering story.

Oops yeah, not a story, just a subtask of T406214

should appear only the first time

Normally with these popups we store a flag in localstorage or user preferences when the user clicks 'Got it' to dismiss it, rather than only showing it once. Are we sure it should only be shown the first time?

Nope! That's just how I read the designs, probably got it wrong - let's just do it however we normally do it.

Change #1216778 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/core@master] Add temporary watchlist label onboarding popovers

https://gerrit.wikimedia.org/r/1216778

@JSengupta-WMF The popover component doesn't support icons for the next and previous buttons. Is it okay if these are text 'Next' and 'Previous'? (The icons should probably also be a feature request for Codex; the buttons already support actionType. I'll file a task for that if we do want to go with the icons.)

@Samwilson it should be fine to begin with. Surprised that Codex doesn't support this. I thought growth team was the first to use this component.

Change #1216778 merged by jenkins-bot:

[mediawiki/core@master] Add temporary watchlist label onboarding popovers

https://gerrit.wikimedia.org/r/1216778

Surprised that Codex doesn't support this. I thought growth team was the first to use this component.

Yeah, maybe it's still planned? It's possible to set the label for the default and primary actions, and the actionType of the primary action can be 'progressive' or 'destructive', but that's it.

Should we open a task for that?

The text labels look like this:

image.png (296×568 px, 27 KB)

Should this be a task for design systems?

I'd imagine so. Although, as this isn't a permanent feature, it might not be worth the extra work of implementing icons for those buttons (unless they're also going to be useful in other places).

@Samwilson Confirmed display popup the first time a user visits watchlist after labels are enabled, as seen in the videos/screenshots below. I will mark this as Resolved. Thanks for all your work!

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Tahoe 26.1
Browser: Chrome 143, Safari 26.1
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.beta.wmcloud.org/wiki/Special:WatchlistLabels

Test Steps

Test Case 1: Show onboarding popup on first watchlist visit after labels are enabled

  1. Log in as a named user who has not previously dismissed the watchlist label onboarding.
  2. Ensure watchlist labels are enabled for the wiki.
  3. Navigate to Special:Watchlist.
  4. Observe the page behavior.
  5. AC1: Confirm that an onboarding popup sequence explaining watchlist labels is displayed on the first visit to the watchlist.

Test Case 2: Display onboarding on skins with and without associated-pages menu support

  1. Log in as a named user who has not dismissed the onboarding.
  2. Navigate to Special:Watchlist using a skin that supports the associated-pages menu (for example, Vector-2022).
  3. Observe the onboarding popup sequence.
  4. Switch to a skin that does not support the associated-pages menu.
  5. Navigate again to Special:Watchlist.
  6. AC2: Confirm that the onboarding popup sequence is shown on both skin types.

Vector 2022 & Minervanue= New; Vector, Monobook, Timeless= Legacy

Vector 2022VectorMinervanueMonobookTimeless
2025-12-23_16-40-53.png (1×1 px, 219 KB)
2025-12-23_16-40-02.png (1×1 px, 262 KB)
2025-12-23_16-40-25.png (1×1 px, 178 KB)
2025-12-23_16-39-32.png (1×1 px, 266 KB)
2025-12-23_16-39-02.png (1×1 px, 207 KB)

Test Case 3: Persist onboarding until dismissed

  1. While viewing the onboarding popup sequence, navigate away from the watchlist without clicking the 'Got it' button.
  2. Return to Special:Watchlist.
  3. Observe the onboarding behavior.
  4. AC3: Confirm that the onboarding popup continues to appear until the user explicitly dismisses it using the 'Got it' button.

See AC1

Test Case 4: Stop showing onboarding after dismissal

  1. Navigate to Special:Watchlist with the onboarding popup visible.
  2. Click the 'Got it' button to dismiss the onboarding.
  3. Reload the page.
  4. Navigate away and return to Special:Watchlist.
  5. AC4: Confirm that the onboarding popup does not appear again after being dismissed.

See AC1

Test Case 5: Persist dismissal across devices and sessions

  1. Dismiss the onboarding popup as a named user.
  2. Log out or open a new browser session or device.
  3. Log back in as the same user.
  4. Navigate to Special:Watchlist.
  5. AC5: Confirm that the onboarding popup remains dismissed across sessions and devices.

Test Case 6: Reset onboarding via user preferences

  1. As a user who has dismissed the onboarding, navigate to Special:Preferences.
  2. Select the option to reset settings.
  3. Save the preference changes.
  4. Navigate to Special:Watchlist.
  5. AC6: Confirm that the onboarding popup sequence is shown again after resetting user preferences.

See AC1

GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF updated the task description. (Show Details)