Page MenuHomePhabricator

Watchlist Expiry: Implement ability to select & save temporary watch period [medium]
Closed, ResolvedPublic

Description

As a Watchlist Expiry user, I want to be able to select a temporary watch period via drop-down in the pop-up, so that I can successfully watch a page for a predetermined set of time.

Background: This is a sub-task of T248496. Please refer to this ticket for details.

Resources:

Acceptance Criteria:

  • Implement a drop-down for user to select a temporary time period
    • Label has the name "Watchlist time period:" above drop-down
    • The drop-down has the following options:
      • Permanently (set as default)
      • 1 week
      • 1 month
      • 3 months
      • 6 months
  • Implement functionality and behavior after selection chosen
    • If the user keeps default selection ("permanently"), the popup should disappear after X seconds
    • If a temporary span was chosen, the following behavior should occur:
      • The full star rotates and becomes half star (see half star details in T248495)
      • Display a success message: [page name] and its talk page have been added to your watchlist [time period, such as "one week"]
      • The word "watchlist" in the pop-up should always link to the user's watchlist
      • Adjust the watch state of the page to have an expiry
  • Watching temporarily via the star dropdown should sync with the watchlist fields in a page edit page.

Visual Examples:

Temporarily watch a page via star, before selection made

Screen Shot 2020-04-02 at 4.35.55 PM.png (357ร—956 px, 217 KB)

Temporarily watch a page via star, as selection is being made
500px-Watch_a_page_temporarily_with_dropdown,_mockup_example.png (212ร—500 px, 99 KB)

Temporarily watch a page via star, after selection made
500px-Temporarily_watch_a_page_via_star_with_dropdown,_part_2.png (172ร—500 px, 77 KB)

Unwatch a page
500px-Removal_from_temporary_watchlist_(mockup_example).png (121ร—500 px, 46 KB)

Event Timeline

ifried updated the task description. (Show Details)
ifried renamed this task from Watchlist Expiry: Augment pop-up with temporary watchlist behavior to Watchlist Expiry: Implement ability to select & save temporary watch period.Apr 2 2020, 8:50 PM
ifried updated the task description. (Show Details)
ifried updated the task description. (Show Details)
ARamirez_WMF renamed this task from Watchlist Expiry: Implement ability to select & save temporary watch period to Watchlist Expiry: Implement ability to select & save temporary watch period [medium].Apr 6 2020, 5:38 PM
ARamirez_WMF moved this task from New & TBD Tickets to Kanban-2019-20-Q4 on the Community-Tech board.
HMonroy moved this task from In Development to Ready on the Community-Tech (Kanban-2019-20-Q4) board.
HMonroy subscribed.

Change 599149 had a related patch set uploaded (by HMonroy; owner: HMonroy):
[mediawiki/core@master] Implement ability to select and save watch temporarily.

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

Change 609876 had a related patch set uploaded (by HMonroy; owner: HMonroy):
[mediawiki/core@master] Add overlay to mw.notify

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

Current behavior in the mw.notify popup when we add a select field:

Screenshot from 2020-05-21 16-18-53.png (191ร—270 px, 16 KB)

We review this issue and decided that adding an overlay would fix this issue.

@Krinkle @matmarex We are working on a watchlist feature that adds a select field to the mw.notify, and we are experiencing this issue: https://phabricator.wikimedia.org/T249262#6287799. This is happening because this patch https://gerrit.wikimedia.org/r/c/mediawiki/core/+/248320 added the overflow: hidden attribute. When I remove this attribute in my local environment everything looks as expected and the horizontal scrollbar on fade in and fade out issue that is mentioned in the patch doesn't seem to be there anymore. This patch was submitted about 5 years ago. Our current solution is to add an overlay around the mw.notify to accommodate form fields and OOUI widgets :

I'm trying to figure out if removing that CSS attribute is possible. By any chance, do any of you recall when the fade in and fade out issue was happening? Could it had been an ancient problem with older browsers. I appreciate any feedback you can provide. Thank you!

@Krinkle @matmarex We are working on a watchlist feature that adds a select field to the mw.notify, and we are experiencing this issue: https://phabricator.wikimedia.org/T249262#6287799. This is happening because this patch https://gerrit.wikimedia.org/r/c/mediawiki/core/+/248320 added the overflow: hidden attribute. When I remove this attribute in my local environment everything looks as expected and the horizontal scrollbar on fade in and fade out issue that is mentioned in the patch doesn't seem to be there anymore. This patch was submitted about 5 years ago. Our current solution is to add an overlay around the mw.notify to accommodate form fields and OOUI widgets :

I'm trying to figure out if removing that CSS attribute is possible. By any chance, do any of you recall when the fade in and fade out issue was happening? Could it had been an ancient problem with older browsers. I appreciate any feedback you can provide. Thank you!

Please disregard this comment. We were able to replicate the horizontal scrollbar.

Change 609876 merged by jenkins-bot:
[mediawiki/core@master] Add overlay to mw.notify area

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

Change 613176 had a related patch set uploaded (by HMonroy; owner: HMonroy):
[mediawiki/core@REL1_35] Add overlay to mw.notify area

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

Change 613176 merged by jenkins-bot:
[mediawiki/core@REL1_35] Add overlay to mw.notify area

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

Change 599149 merged by jenkins-bot:
[mediawiki/core@master] Implement ability to select and save watch temporarily.

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

@HMonroy For articles with longer titles, sometimes the selection dropdown is cut off.

E.g. the "6 months" option is cut off here:

dropdown_cutoff.png (326ร—259 px, 18 KB)

I am not sure how common long titles are. Wikisource (where I got the example in the screenshot) appears have long titles.

I am guessing this is because the overlay has a fixed height (300px?)

Display a success message: [page name] and its talk page have been added to your watchlist [time period, such as "one week"]

@ifried Do we want to have this? Currently, the popup disappears as soon as the selection is made.

If the user keeps default selection ("permanently"), the popup should disappear after X seconds

It disappears after about 30 seconds (at least when I timed it). This seems reasonable to me...

@dom_walden Yes, we can keep this for now and see what feedback we get. Do we know how long the pop-up currently remains in production when users watch permanently?

@dom_walden, @HMonroy, @Prtksxna

Hello! Here are some thoughts I have on things:

  1. I think the 30 second wait after you watch permanently makes sense. We want to encourage users to see that they have the option to watch temporarily.
  2. I think we should have a shorter period after you select a temporary time period or unwatch the temporary time period. 30 seconds is too long and the user may wonder, "I already made my selection. Why is this taking so long?" So this should be quick/a few second (i.e., the current time it takes for the pop-up to be dismissed when the user watches or unwatches the page on production). We can make this a separate ticket, if necessary.
  3. If possible, we should increase the length of the pop-up via padding. I don't want to remove or modify the title of the article, if possible.

@dom_walden, @HMonroy, @Prtksxna

Hello! Here are some thoughts I have on things:

  1. I think the 30 second wait after you watch permanently makes sense. We want to encourage users to see that they have the option to watch temporarily.
  2. I think we should have a shorter period after you select a temporary time period or unwatch the temporary time period. 30 seconds is too long and the user may wonder, "I already made my selection. Why is this taking so long?" So this should be quick/a few second (i.e., the current time it takes for the pop-up to be dismissed when the user watches or unwatches the page on production). We can make this a separate ticket, if necessary.
  3. If possible, we should increase the length of the pop-up via padding. I don't want to remove or modify the title of the article, if possible.

Sounds good! Should we create a follow up ticket to address these changes?

I have created a ticket for these changes (T258662), which we can discuss in estimation tomorrow.

  • Implement a drop-down for user to select a temporary time period
    • Label has the name "Watchlist time period:" above drop-down

Yep.

Also briefly tested in Hebrew and German, translations and formatting looked fine to me.

  • The drop-down has the following options:

...

Yep, same options as action=watch and on the Edit page.

  • Implement functionality and behavior after selection chosen
    • If the user keeps default selection ("permanently"), the popup should disappear after X seconds

Disappears in about 30 seconds.

  • If a temporary span was chosen, the following behavior should occur:
    • The full star rotates and becomes half star (see half star details in T248495)

Yep.

  • Display a success message: [page name] and its talk page have been added to your watchlist [time period, such as "one week"]

As discussed above, this disappears straight away.

The exception is if you interact with the dropdown with your keyboard (i.e. using up, down and enter). In this case, the message in the popup is updated (see screenshots) and the popup disappears after about 30 seconds since you last interacted with it. You can also select another expiry period if you change your mind.

Interacting with a keyboard:

  • Before selection:

before_select.png (158ร—271 px, 10 KB)

  • After selection:

after_select.png (150ร—270 px, 10 KB)

  • The word "watchlist" in the pop-up should always link to the user's watchlist

Yep.

  • Adjust the watch state of the page to have an expiry

When you first click the watch star, an API request is made to watch the page permanently.

If you select an expiry time from the dropdown, a second API request is made to watch the page with the expiry you chose.

If you select "Permanently" from the dropdown, no second API request is made.

  • Watching temporarily via the star dropdown should sync with the watchlist fields in a page edit page.

The edit expiry dropdown is updated to reflect what was chosen in the popup.

I also tested Talk pages briefly, and they behave the same as content pages.

Change 616945 had a related patch set uploaded (by Samwilson; owner: HMonroy):
[mediawiki/core@REL1_35] Implement ability to select and save watch temporarily.

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

Change 616945 merged by jenkins-bot:
[mediawiki/core@REL1_35] Implement ability to select and save watch temporarily.

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

I have tested this and I see the ability to select a time period and save on testwiki (see screenshot below). We have identified two issues that are being solved in separate tickets: the dropdown not displaying all options when a page name is long (T258753) and the pop-up taking too long before being automatically dismissed (T258662). For this reason, I'm marking this work as Done.

Screenshot example:

Screen Shot 2020-07-31 at 2.03.35 PM.png (313ร—295 px, 29 KB)