Page MenuHomePhabricator

Make toasts tappable links when redirecting a user away from a page
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
None
Authored By
jhobs
Nov 7 2016, 5:17 PM
Referenced Files
F30065399: Screen Shot 2019-08-22 at 1.57.25 PM.png
Aug 22 2019, 6:59 PM
F29931465: image.png
Aug 1 2019, 5:01 PM
F29931427: image.png
Aug 1 2019, 4:47 PM
F29782394: Screenshot 2019-07-16 at 9.26.40 AM.png
Jul 16 2019, 4:27 PM
F29782378: Screenshot 2019-07-16 at 9.19.32 AM.png
Jul 16 2019, 4:19 PM
F29365070: image.png
Jun 6 2019, 3:22 PM
F5056489: redirectlink.png
Dec 14 2016, 11:15 PM
F5056380: redirectlink.png
Dec 14 2016, 10:42 PM
Tokens
"Like" token, awarded by Cntlsn.

Description

Problem

As a user when I am automatically redirected away from a page, I see a toast but there is no way to return to the page I was redirected from.

Suggested solution

Primarily to service T146596: Make redirect into a toast message, toast messages can also carry actions. Pass url and label as 2 additional parameters to the Toast.show function.

Acceptance criteria

Redirected from \"$1\"

but it should be accompanied by the action

Show redirect

Design

Screenshot 2019-07-16 at 9.19.32 AM.png (611×386 px, 198 KB)

Other toast designs for reference

Default toast without action
https://zpl.io/1CDO7m

Short toast with one action
https://zpl.io/2kTf7Y

Loong toast with long action
https://zpl.io/rQqXy

Two line with action
https://zpl.io/CroBW

Developer notes

We want to make this a generic capability so future features can also make use of it

Screenshot 2019-07-16 at 9.26.40 AM.png (213×606 px, 20 KB)

  • When a toast has an associated action a 'show' label appears on the right hand side of the toast
  • When clicking the toast action the user is navigated to that link ?action=edit&redirect=no

QA steps

Test with https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

T95305 looks like a good use case?
@Nirzar how does this relate to T155835 ?

@Nirzar how does this relate to T155835 ?

no flood gates please, let's have structured way to toast. adding "single action" to toast messages should be an upstream task.

T95305 looks like a good use case?

Yes, similar use case. single action

Jdlrobson added a project: patch-welcome.
Jdlrobson updated the task description. (Show Details)

@Nirzar hope the current description makes sense. To get the underlined link we'd need to allow HTML in toast messages.. this opens up the door for multiple links to be put in there (but we can make sure we don't do that). To avoid flood gates, I've suggested we handle any HTML with multiple links by only allowing the first link to work. Does that make sense?

Alternatively we could throw an error to the developer and not show the toast at all in that situation. What would you prefer?

Awaiting your thoughts. If good to go, please move to triaged but future and remove yourself as assignee.

i was thinking of more like _toast action_ instead of hyperlink. the underline is just for affordance. we don't actually have to have an <a>nchor tag inside. but if you put it on toast config level, it can be only 1 action.

Jdlrobson renamed this task from Make toasts tappable links to Make toasts tappable links when redirecting a user away from a page.May 2 2017, 11:43 PM
Jdlrobson updated the task description. (Show Details)

I talked with @Nirzar about this.
@Nirzar once you've updated the screenshot and added the zeplin link please remove yourself as assignee and move to triaged but future.

Jdlrobson lowered the priority of this task from Medium to Low.May 3 2017, 11:56 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson raised the priority of this task from Low to Medium.Feb 6 2018, 5:48 PM

Could this be useful in the settings page @Nirzar ?

@Jdlrobson it looks like the design work for this task is complete. I've updated the description to include the mock.

I'm concerned, if we start showing the "action" that allows users to go back, they will see pretty ugly page:

https://en.m.wikipedia.beta.wmflabs.org/wiki/Obama?redirect=no

image.png (744×371 px, 52 KB)

Do we have a plan where to use this functionality? Maybe some AMC feature? I cannot find a valid reason why regular user wants to go back to the redirect page.
/cc @ovasileva

I'm concerned, if we start showing the "action" that allows users to go back, they will see pretty ugly page:

I'm not sure if ugly is the right word.. it's functional. Maybe rather than "show redirect", we should make the call to action "edit redirect" - since most people will want to edit the page.

This recently got surfaced on Wikivoyage by a rightly frustrated editor: https://en.wikivoyage.org/wiki/Wikivoyage:Travellers%27_pub?markasread=288124&markasreadwiki=enwikivoyage#Can%E2%80%99t_block_users_on_iPhone

Jdlrobson raised the priority of this task from Medium to High.Jul 1 2019, 9:05 PM

Bumping for visibility so we can talk about the community discussion and potentially estimate.

ovasileva lowered the priority of this task from High to Medium.Jul 16 2019, 4:27 PM
ovasileva set the point value for this task to 3.
Jdlrobson raised the priority of this task from Medium to High.Jul 16 2019, 4:27 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed the point value for this task.
Jdlrobson updated the task description. (Show Details)
ovasileva lowered the priority of this task from High to Medium.Jul 16 2019, 4:34 PM
ovasileva set the point value for this task to 3.

Change 526800 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Provide access to original redirect page on toasts

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

@Jdlrobson it works as expected. Would it be possible to follow the design suggestion here T150189#2874594?

image.png (667×452 px, 88 KB)

Ah yes there was a little confusion on the mocks. I've revised this and put it on staging. Please take another look. Note before for some reason all links inside toast were progressive or red. That seems wrong (blue/red on black background) so I've fixed that to always be white.

Change 526800 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Provide access to original redirect page on toasts

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

nray updated the task description. (Show Details)
nray removed nray as the assignee of this task.
nray subscribed.