NOTE: This does not reflect final state. For now we are scoping to users not using watchlist. Providing entry point for both watching and bookmarking will be covered in a latter iteration of project.
Background
As part of the reading list experiment we want to provide a way for users to access their saved articles on web.
User story
- As a reader, I want to easily access all my saved articles
Design
Lower resolution:
Requirements
NOTE: The sticky header is out of scope for this ticket.
NOTE: Adding icon for menus in tools (watch action) is out of scope for this ticket.
When the reading list feature (currently via beta feature) is enabled:
- The “Saved” reading list icon appears in the overflow user menu in the header on Vector 2022. The "Watchlist" icon is permanently in the user links menu
- The "Saved" reading list icon at lower resolutions collapses and appears in the user links menu.
- The bookmark icon appears in the page actions menu and collapses into the tools menu at low resolutions.
- The "watch" link appears in the tools menu without an icon.
When the reading list feature (currently via beta feature) is disabled:
- There is no icon for adding articles to bookmarks list.
- There is no link to the saved list.
- The watchstar icon appears in the page actions and collapses into the tools menu at low resolutions
- The watchlist link icon appears in the overflow user menu and collapses into the user menu.
Technical requirements
- We do not want to display both the reading list and watchlist icons in the user overflow menu as this would require responsive design changes e.g. when the search bar collapses. For now it is acceptable to use CSS to hide the watchlist icon as that will keep the code cleaner.
Design
Final icon to be provided. Adding new icon to Codex is tracked here T400948: icons: Add [Saved] 'bookmarkList' icon to Codex
BDD
Feature: Vector 2022 Reading List and Watchlist menu behavior
Scenario: Reading List feature enabled
Given I am logged in and the Reading List feature is enabled
When I view the header in Vector 2022
Then the “Saved” list icon appears in the overflow user menu
And the Watchlist icon is in the user links menu
And the bookmark icon appears in page actions
And the Watch link appears in tools menu without an icon
And at lower resolutions the “Saved” list icon collapses into the user links menu
And the bookmark collapses into the tools menu
Scenario: Reading List feature disabled
Given I am logged in and the Reading List feature is disabled
When I view the header in Vector 2022
Then no bookmark icon or “Saved” list link is shown
And the watchstar icon appears in page actions and collapses into the tools menu at lower resolutions
And the Watchlist icon appears in the overflow user menu and collapses into the user menuTest Steps
Test Case 1: Reading List feature enabled
- Log in and enable Reading Lists in preferences.
- Open an article in Vector 2022 skin.
- AC1: “Saved” list icon is visible in the header user menu.
- AC2: Watchlist icon is visible in the user links menu.
- AC3: Bookmark icon is visible in page actions.
- AC4: Watch link is visible in tools menu without an icon.
- Resize to a narrow viewport.
- AC5: “Saved” list icon collapses into the user links menu.
- AC6: Bookmark icon collapses into the tools menu.
Test Case 2: Reading List feature disabled
- Log in and disable Reading Lists in preferences.
- Open an article in Vector 2022 skin.
- AC7: No bookmark icon or “Saved” list link is visible.
- AC8: Watchstar icon is visible in page actions and collapses into tools menu at narrow viewport.
- AC9: Watchlist icon is visible in the overflow user menu and collapses into the user menu at narrow viewport.
- AC10: Watchlist and Reading List icons do not appear simultaneously in the overflow user menu.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T400946#11155561 |
| 2 | ✅ | T400946#11155561 |
| 3 | ✅ | T400946#11155561 |
| 4 | ✅ | T400946#11155561 |
| 5 | ✅ | T400946#11155561 |
| 6 | ✅ | T400946#11155561 see note regarding requirement |
| 7 | ✅ | T400946#11155561 |
| 8 | ✅ | T400946#11155561 |
| 9 | ✅ | T400946#11155561 |
| 10 | ✅ | T400946#11155561 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T400946#11194909 |
| 2 | ✅ | T400946#11194909 |
| 3 | ✅ | T400946#11194909 |
| 4 | ✅ | T400946#11194909 |
| 5 | ✅ | T400946#11194909 |
| 6 | ✅ | T400946#11194909 |
| 7 | ✅ | T400946#11194909 |
| 8 | ✅ | T400946#11194909 |
| 9 | ✅ | T400946#11194909 |
| 10 | ✅ | T400946#11194909 |
