As a Watchlist Expiry user, I want a popup to appear when I watch a page (temporarily or permanently), so that I can see the expiry selection and make any necessary changes.

Background: We might need to hash out the loading animations (for "watch" action + for loading OOUI) and hash out some more behavior, like how long the popup appears if action was taken or not, what messages appear first and then later, etc. Note that we are adding the half star functionality in T248495. For conversations related to drop-down behavior, you can also check out T245565 for details.

Resources:

• Watchlist Expiry project page
• Interactive mockup: Watch a page temporarily (via star)
• Interactive mockup: Unwatch a page (via star)

Acceptance Criteria:

• On click of the 'watch' button, first watch the page as usual (permanently)
• Lazy-load the popup that allows users to set the page to be watched temporarily
  • The user will first see the following message at the top: [page name] and its talk page have been added to your watchlist permanently
  • Label has the name "Watchlist Time Period:" above drop-down
  • The drop-down has the following options:
    • Permanently (as default)
    • 1 week
    • 1 month
    • 3 months
    • 6 months
• Implement functionality and behavior after selection chosen
  • If a temporary span was chosen, adjust the watch state of the page to have an expiry
  • Behavior of the popup at the end of the process:
    • If the user keeps default selection ("permanently"), the popup should disappear after X seconds
    • If the user changed the selection, 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

Visual Examples:

Temporarily watch a page via star, before selection made