Page MenuHomePhabricator

Special:ReadingList updates
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

  • Add one sentence summary on why were are doing this ticket with relevant context. Ensure you add context on how the outcome of this ticket will affect the end user

User story

  • Add user story in the format: “As a [persona], I want to [X], so that [Y]”

Requirements

  • Implement the final designs for the Special:ReadingLists pages specifically:
    • sort functionality
    • two new views : grid and view to replace the existing ones.
  • Special:ReadingLists/<username> should show a list of lists that belong to the user in <username>. It's important this continues to work for compatibility with apps links.
  • Special:ReadingLists/<username>/<id> should show a list of entries that belong to a specific list.It's important this continues to work for compatibility with apps links.
  • The page should contain the list title/description, number of entries, view options, and multi-delete functionality.
  • Make sure that the new special page does not break the import feature https://www.mediawiki.org/wiki/Extension:ReadingLists#Setting_up_import_functionality_with_apps

https://test.wikipedia.org/wiki/Special:ReadingLists?limport=eyJuYW1lIjoiUXVhbnR1bSBwaHlzaWNzIHN0dWR5IG1hdGVyaWFscyIsImRlc2NyaXB0aW9uIjoiTXkgc3R1ZHkgZ3VpZGUgZm9yIGxlYXJuaW5nIHRoZSBiYXNpY3Mgb2YgcXVhbnR1bSBtZWNoYW5pY3MiLCJsaXN0Ijp7ImVuIjpbNTk4NzRdLCJydSI6WzU5ODc0XX19 which should look like;

Screenshot 2025-06-09 at 3.01.39 PM.png (487×985 px, 60 KB)

BDD

Feature: Special:ReadingLists page updates

Scenario: User visits Special:ReadingLists
  Given I navigate to Special:ReadingLists
  Then I should see list sorting and the option to toggle between grid and list view

Scenario: User views another user's ReadingLists
  Given I visit Special:ReadingLists/<username>
  Then I should see lists belonging to <username>

Scenario: User views a specific list
  Given I visit Special:ReadingLists/<username>/<id>
  Then I should see the list title, description, number of entries, view toggle, and multi-delete options

Scenario: Importing a list using the import parameter
  Given I visit Special:ReadingLists with a valid `limport` parameter
  Then the page should display the imported list preview properly

Test Steps

Test Case 1: Verify sorting and view options

  1. Go to https://test.wikipedia.org/wiki/Special:ReadingLists
  2. AC1: Confirm sorting dropdown is available
  3. AC2: Confirm user can toggle between grid and list views

Test Case 2: View other user's lists

  1. Navigate to https://test.wikipedia.org/wiki/Special:ReadingLists/<username>
  2. AC3: Confirm lists specific to "ExampleUser" are displayed correctly

Test Case 3: View a specific list

  1. Navigate to https://test.wikipedia.org/wiki/Special:ReadingLists/<username>/<id>
  2. AC4: Confirm the list title and description are shown
  3. AC5: Confirm the number of entries is accurate
  4. AC6: Confirm view toggle and multi-delete are present and functional

Test Case 4: Validate import functionality

  1. Visit https://test.wikipedia.org/wiki/Special:ReadingLists?limport=eyJuYW1lIjoiUXVhbnR1bSBwaHlzaWNzIHN0dWR5IG1hdGVyaWFscyIsImRlc2NyaXB0aW9uIjoiTXkgc3R1ZHkgZ3VpZGUgZm9yIGxlYXJuaW5nIHRoZSBiYXNpY3Mgb2YgcXVhbnR1bSBtZWNoYW5pY3MiLCJsaXN0Ijp7ImVuIjpbNTk4NzRdLCJydSI6WzU5ODc0XX19
  2. AC7: Confirm the imported list is rendered properly without error

Design

DescriptionVector (desktop)Minerva (mobile)
Grid view
Grid view.png (1×1 px, 133 KB)
Grid view mobile.png (568×320 px, 75 KB)
Compact view
Compact view.png (1×1 px, 57 KB)
Compact view mobile.png (568×320 px, 27 KB)
Sort options
Sort options.png (1×1 px, 69 KB)
Sort options mobile.png (568×320 px, 24 KB)
Empty list
Empty list.png (1×1 px, 59 KB)
Empty list mobile.png (568×320 px, 17 KB)

Acceptance criteria

  • Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • Add communication criteria

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

QA Results - Prod

Event Timeline

Jdlrobson-WMF moved this task from Incoming to Sprint Backlog on the Web-Team board.
Jdlrobson-WMF set the point value for this task to 5.
Jdlrobson-WMF changed the point value for this task from 5 to 3.
Dillon updated the task description. (Show Details)
Dillon updated the task description. (Show Details)
Dillon renamed this task from [placeholder] Reading List special updates to Special:ReadingList updates.May 21 2025, 4:56 PM
Dillon updated the task description. (Show Details)

Change #1154127 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Restore the icon for the bookmark feature

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

@Jdlrobson-WMF I can't see the image you added to the description, the file might be restricted.

Change #1154127 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore the icon for the bookmark feature

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

This will carry over as Dillon is out sick today - new sprint hasn't yet been created, so noting here

Change #1152355 had a related patch set uploaded (by Dillon; author: Dillon):

[mediawiki/extensions/ReadingLists@master] special: Implement the redesigned pages

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

Test wiki created on Patch demo by DHardy-WMF using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/90698141ee/w/

Change #1152355 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] special: Implement the redesigned pages

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

Test Result - Prod

Status: ❌ FAIL
Environment: testwiki
OS: macOS Sequoia 15.5
Browser: Chrome Canary (latest as of test date)
Device: MS
Emulated Device: NA

Test Steps

Test Case 1: Verify sorting and view options

  1. Go to https://test.wikipedia.org/wiki/Special:ReadingLists
  2. AC1: Confirm sorting dropdown is available
  3. AC2: Confirm user can toggle between grid and list views

I don't see any way to do this

screenshot 78.png (1×1 px, 177 KB)

Test Case 2: View other user's lists

  1. Navigate to https://test.wikipedia.org/wiki/Special:ReadingLists/<username>
  2. AC3: Confirm lists specific to <username> are displayed correctly

screenshot 16.mov.gif (766×2 px, 1 MB)

Test Case 3: View a specific list

  1. Navigate to https://test.wikipedia.org/wiki/Special:ReadingLists/<username>/<id>

see AC3

  1. AC4: Confirm the list title and description are shown

see AC3

  1. AC5: Confirm the number of entries is accurate

see AC3

  1. AC6: Confirm view toggle and multi-delete are present and functional

see AC3

Test Case 4: Validate import functionality

  1. Visit https://test.wikipedia.org/wiki/Special:ReadingLists?limport=eyJuYW1lIjoiUXVhbnR1bSBwaHlzaWNzIHN0dWR5IG1hdGVyaWFscyIsImRlc2NyaXB0aW9uIjoiTXkgc3R1ZHkgZ3VpZGUgZm9yIGxlYXJuaW5nIHRoZSBiYXNpY3Mgb2YgcXVhbnR1bSBtZWNoYW5pY3MiLCJsaXN0Ijp7ImVuIjpbNTk4NzRdLCJydSI6WzU5ODc0XX19
  2. AC7: Confirm the imported list is rendered properly without error

I wasn't able to import in the app

I don't think it hits prod until next Tuesday since it was merged after the branch cut

Closing this as it looks like we forgot to close this out.
I reviewed the work and there is one follow up relating to this change which the Reader Experience Team will take on:

Test wiki on Patch demo by DHardy-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/90698141ee/w/