Page MenuHomePhabricator

Add Rollback button and Undo to Diff View
Closed, ResolvedPublic

Description

Background

This quarter the team brought native revision/edit history into the app. Currently the undo button his hidden behind a feature flag because our team wanted to spend time thinking about how to responsibly expose this feature. After collaboration between Design, Engineering and Product we have developed the solution below and are now ready to expose the undo button after some updates to it and add in rollback.

Requirements
  • Roll back will be displayed as a button to users that have rollback rights next to the thanks button and undo will be in the overflow menu
  • Undo will be in the overflow menu for all logged out users
  • Undo will be next to the thanks button for users that DO NOT have rollback rights AND are logged in
  • The rollback and undo buttons must follow the style guidance provided in the Design section of this task. The design must ensure the rollback and undo buttons are visibly accessible to low vision and color blind users however the button should be styled in a way that does not make it too prominent to encourage abuse of the button
User Stories
  • As an Android app user with rollback privileges, I would like the option to roll back edits that are lowering the quality of an article, so that I can easily protect the integrity of wikis from a mobile device
  • As an experienced logged in editor on Android, I would an easy option for undoing an edit that isn't productive, so that I can protect the integrity of the wikis from my mobile device.
Design

If users are logged out

  • Show undo in the overflow menu

If users are logged in

  • If users have rollback rights
    • Show the rollback button next to Thanks
    • Show undo in the overflow menu
  • Else
    • Show undo next to Thanks

APK: https://github.com/wikimedia/apps-android-wikipedia/pull/3374

Event Timeline

JTannerWMF renamed this task from Add Rollback button, in addition to Undo, in edit diff view. to Add Rollback button and Undo to Diff View.Apr 27 2022, 3:15 PM
JTannerWMF updated the task description. (Show Details)

Re: label color per our conversation yesterday → please use color_group_9 for the de-emphasized undo / rollback button label.

We will add data tracking for this function to the MobileWikiAppEdit schema, since a rollback is technically an edit. We can use the value action = rollback and add the requisite pageNS and revID values with each event.

One very quick note on this:
The rollback action is only possible (and only makes sense) on the last revision of the article, not any other older revision.

Hi @scblr

Should we introduce the same input dialog for the rollback button as we currently do for the undo button?

Screenshot_20220601-194214_Wikipedia Dev.jpg (2×1 px, 220 KB)

@cooltey

Should we introduce the same input dialog for the rollback button as we currently do for the undo button?

Screenshot_20220601-194214_Wikipedia Dev.jpg (2×1 px, 220 KB)

That makes sense to me @cooltey. Any objections from an experienced editor's point of view @Dbrant ? Thanks!

@cooltey

Should we introduce the same input dialog for the rollback button as we currently do for the undo button?

That makes sense to me @cooltey. Any objections from an experienced editor's point of view @Dbrant ? Thanks!

Yes, I think we should have a confirmation dialog for rollback. Even though on Desktop there is no confirmation when rolling back, I feel like our native button will be more prone to accidental taps.

However, there is no "reason"/"summary" field when rolling back, so this dialog can be a simple OK/Cancel popup.

Hi @scblr

The implementation is complete, please download the APK in the ticket description. Please note that the "rollback" button will only be available in the latest revision of the page.

We will add data tracking for this function to the MobileWikiAppEdit schema, since a rollback is technically an edit. We can use the value action = rollback and add the requisite pageNS and revID values with each event.

Hi @SNowick_WMF

Should we log more detailed actions for the rollback such as attempt, success, and failure?

log("action", "rollbackAttempt")
log("action", "rollbackSuccess")
log("action", "rollbackFailure")

We have the same behavior for the login action for the MobileWikiAppEdit here: see Github repo.

Not sure if you want to keep it simple or detailed.

Thanks @cooltey — I can’t test the rollback button – maybe @Dbrant can check if it’s working correctly?

other than that:

01) When I’m logged out, I can’t see any undo button in the overflow menu

Screenshot_20220607-133528.png (2×1 px, 187 KB)

02) Remove the gap on the left from the byte indicator when there’s no button

Screenshot_20220607-132252.png (2×1 px, 225 KB)

03) Add “bytes” label after the number (13) everywhere (also on the Watchlist screen) for context

Screenshot_20220607-132252 copy.jpg (2×1 px, 337 KB)

04) We’re now using different button styles with the same purpose. please consolidate and use the style we’re using for undo everywhere (icon + label)

Screenshot_20220607-132929.png (2×1 px, 214 KB)
Screenshot_20220607-133425.png (2×1 px, 226 KB)

... also in the Watchlist

Screenshot_20220607-133731.png (2×1 px, 163 KB)

Re: Label color per our conversation yesterday → please use color_group_9 for the de-emphasized undo / rollback button label.

05) Related: please make sure to update the Watchlist designs to what we newly defined for revision history, namely:

  • move username to the leftmost position
  • use the user profile/anonymous icon instead of the talk page icon
  • remove button style from byte difference indicator

Screenshot_20220607-133731.png (2×1 px, 204 KB)

(Watchlist and revision history should use the same component)

Hi @scblr

Thanks @cooltey — I can’t test the rollback button – maybe @Dbrant can check if it’s working correctly?

All set, now you can test it on test.wikipedia. If you don't know how to test it, you can add test as an app language to access the test wiki.

Please download the APK to see the design updates, thanks!

This is great, @cooltey — you got them all!

One thing I noticed is that the colors of the items in the overflow menu are different:

Screenshot_20220608-171243.png (2×1 px, 253 KB)

In fact, they use three different color groups 🤔 Can we make sure that all overflow menu items in this screen (and everywhere else in the app, where this component is used) → use the same icon color and label as in the article’s overflow menu? Thanks!

Screenshot_20220608-171439.png (2×1 px, 564 KB)

Hi @scblr
How does this look? I have applied the correct color group to icons and text.

Screenshot_20220608-165244_Wikipedia Dev.jpg (2×1 px, 316 KB)

Looks like it will be difficult to customize the icon padding or text padding to the system popup menu if want to do some more customization on the menu.

@cooltey

How does this look? I have applied the correct color group to icons and text.

This looks good @cooltey — even though I can’t extract the real/actual color from a screenshot. I usually measure the color on the device itself.

Looks like it will be difficult to customize the icon padding or text padding to the system popup menu if want to do some more customization on the menu.

It’s fine to use the defaults for this. Are you saying the article overflow and revision history overflow menu have different icon/text padding specs? 🤔

Hey @cooltey , I don't see the Thanks button, is that intentional
https://phabricator.wikimedia.org/T303547#7990843

Hi @JTannerWMF, yes it is. The Thank button will be hidden if the revision was made by the account itself.