Page MenuHomePhabricator

Patroller Tasks: build screen for managing saved warning templates
Closed, ResolvedPublic

Assigned To
Authored By
Dbrant
Aug 8 2023, 5:46 PM
Referenced Files
F37647193: Screenshot_20230901-141018_Wikipedia Dev.jpg
Sep 1 2023, 9:16 PM
F37647194: Screenshot_20230901-140959_Wikipedia Dev.jpg
Sep 1 2023, 9:16 PM
F37647195: Screenshot_20230901-141109_Wikipedia Dev.jpg
Sep 1 2023, 9:16 PM
F37646842: Screenshot_20230901-190859.png
Sep 1 2023, 5:42 PM
F37646845: talk page.jpg
Sep 1 2023, 5:42 PM
F37646840: Screenshot_20230901-190814.png
Sep 1 2023, 5:42 PM
F37643193: Save message modal.png
Aug 30 2023, 7:03 PM
F37643188: Tapping back modal.png
Aug 30 2023, 7:03 PM
Tokens
"Love" token, awarded by scblr.

Description

When sending a "warning" message to a user from the Patrolling workflow, we will now have a concept of "saved" templates, which are simply messages that you would like to re-use for future warnings or communications.

We will need to build a simple CRUD interface for managing your list of saved templates.
Some architectural notes:

  • Everything is stored locally.
  • The actual workflow of sending a "warning" to a user should re-use the existing Talk activity, but should add an entry point for "saving" this reply to your list of saved templates, and/or "managing" the entire list of saved templates.

Design: Figma

Description from the main ticket
40. Empty state41. List of templates42. Compose new message43. Message44. Save changes?45. Adding title to message46. New message saved47. Edit message from list48. Select to delete message49. Message deleted
Empty state manage templates.png (720×360 px, 13 KB)
List of templates.png (720×360 px, 9 KB)
Compose new.png (720×360 px, 31 KB)
New message.png (720×360 px, 38 KB)
Save changes_.png (720×360 px, 20 KB)
Fill in title.png (720×360 px, 20 KB)
Message saved.png (720×360 px, 14 KB)
Edit existing message.png (720×360 px, 27 KB)
Delete message.png (720×376 px, 21 KB)
Message deleted.png (720×360 px, 12 KB)
Manage templates
  1. Empty state
  • Manage templates is accessed through tapping on the custom 'Manage templates’ icon at the top of the ‘Warn’ page.
  • It is a place where all saved messages are stored. From here you can create, edit, move or delete new/existing messages.
    • Title: ‘Manage templates’
    • Icon: ‘Add’ icon (to add new messages to the list).
  • When there are no messages saved you will see an empty state:
    • Copy: ‘You do not have any warning messages saved.’
  1. List of templates
  • When messages are present they will have a drag handle on the left side of the message so patrollers are able to drag them to a different position within the list.
  1. Compose new message
  • Tapping on the ‘Add’ icon in the top right corner opens a new page where patroller can compose a new message. This is similar to ‘Composing the first warning message’ process.
    • Page title: ‘New message’
    • Button: Save
    • Copy top of page: ‘Compose a warning message.’
    • Next: Text input for ‘Subject’ line
    • Next: Text input for ‘Compose message’
    • Next: Licensing text
  • The keyboard for this page is that same as for the one when editing articles that has the additional formatting toolbar over the keyboard.
  1. Message
  • If a patroller composes a message and then decides to go back to the ‘Manage templates’ they will see a modal (see #21):
    • Title: ‘Are you sure you want to exit?’
    • The copy of the modal is: ‘The subject and message text will not be saved.’
    • Buttons: ‘No’; ‘Yes’
  1. Save changes?
  • ‘Subject line’ and ‘Compose message’ must be filled in order save message (same as when composing a message on talk pages)
  • If ‘Compose message’ is filled but ‘Subject’ isn’t the patroller may tap on the active ‘Save’ button but will get a warning underneath the text input saying ‘The subject cannot be empty’ and won’t be able to proceed to saving until the ‘Subject’ is filled (see #23)
  • If ‘Subject’ is filled but the message isn’t the ‘Save’ button stays inactive (see #24).
  • After filling out the ‘Subject’ and ‘Compose message’ the patroller can tap on ‘Save’, this triggers a ‘Save changes’ modal.
    • Copy: ‘Add title and save message.’
    • Text input field: ‘Message title’
    • Buttons: ‘Cancel’; ‘Save’
  1. Adding title to message
  • Patroller must add title to save message, otherwise the ‘Save’ button will stay inactive.
  1. New message saved
  • Saving the message will take the patroller back to the ‘Manage templates’ page (where the message will be present in the list) and trigger a snackbar:
    • Copy: ‘Message has been saved.’

47. Edit message from list

  • Tapping on the edit icon beside any message would trigger a modal that has pre-filled sections for each of the text input fields:
    • Title; ‘Edit message’
    • Text input field: ‘Message title’
    • Text input field: ‘Subject’
    • Text input field: ‘Compose message’
    • Buttons: ‘Delete’; ‘Save’
  • Tapping ‘Save’ closes modal and takes patroller to ‘Manage templates’ page and triggers a snackbar:
    • Copy: ‘Message has been saved’
  1. Select to delete message
  • Tapping delete closes modal and takes patroller to ‘Manage templates’ page and triggers a snackbar.
  1. Message deleted
  • Snackbar copy after someone successfully deletes a message: ‘Message has been deleted’

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

Event Timeline

Hi @OTichonova and cc @scblr

I have some questions regarding the design:

  1. Would it be possible to replace the "X" icon with a more general usage of the "<-" back arrow icon since it is an Activity instead of a dialog or bottom sheet?

Empty state.png (720×360 px, 13 KB)

  1. Do we need the license information in the "New message" screen since it will be saved locally?

Compose new.png (720×360 px, 38 KB)

  1. We do not show the wikitext toolbar in the post message page on the current talk page interface. Do we need to add the wikitext toolbar to this screen?

Compose new.png (720×360 px, 38 KB)

Hi @cooltey!

  1. Would it be possible to replace the "X" icon with a more general usage of the "<-" back arrow icon since it is an Activity instead of a dialog or bottom sheet?

Yes that works, I will update the screens later today

  1. Do we need the license information in the "New message" screen since it will be saved locally?

These messages will be published to peoples talk pages publicly so we should keep the licensing (we don't know if they save it or not, some might just create messages and publish them directly)

  1. We do not show the wikitext toolbar in the post message page on the current talk page interface. Do we need to add the wikitext toolbar to this screen?

Patrollers who are experienced editors will be able to create complex messages (with links and templates etc.) much faster which would be relevant when they are warning/notifying other editors. So it would be great to have the toolbar.

  1. Do we need the license information in the "New message" screen since it will be saved locally?

These messages will be published to peoples talk pages publicly so we should keep the licensing (we don't know if they save it or not, some might just create messages and publish them directly)

I think this was referring to the action of "adding" or "editing" one of your saved template messages, entirely within the context of your private saved message collection, i.e. outside the context of "publishing" a message on a talk page. The license text begins with "By publishing..." which might be a bit confusing in that context. (and possibly unnecessary?)

  1. We do not show the wikitext toolbar in the post message page on the current talk page interface. Do we need to add the wikitext toolbar to this screen?

Patrollers who are experienced editors will be able to create complex messages (with links and templates etc.) much faster which would be relevant when they are warning/notifying other editors. So it would be great to have the toolbar.

At the moment we don't support wikitext (and/or syntax highlighting of wikitext) inside Talk message fields. I agree this would be very useful, but it would need to be a separate effort that involves some rearchitecting of these components. I'll create a separate task.

Hi @cooltey @Dbrant

  1. Do we need the license information in the "New message" screen since it will be saved locally?

These messages will be published to peoples talk pages publicly so we should keep the licensing (we don't know if they save it or not, some might just create messages and publish them directly)

I think this was referring to the action of "adding" or "editing" one of your saved template messages, entirely within the context of your private saved message collection, i.e. outside the context of "publishing" a message on a talk page. The license text begins with "By publishing..." which might be a bit confusing in that context. (and possibly unnecessary?)

Yes, sorry, got it ! That does make sense. The designs are updated now for # 1 & 2.

  1. We do not show the wikitext toolbar in the post message page on the current talk page interface. Do we need to add the wikitext toolbar to this screen?

Patrollers who are experienced editors will be able to create complex messages (with links and templates etc.) much faster which would be relevant when they are warning/notifying other editors. So it would be great to have the toolbar.

At the moment we don't support wikitext (and/or syntax highlighting of wikitext) inside Talk message fields. I agree this would be very useful, but it would need to be a separate effort that involves some rearchitecting of these components. I'll create a separate task.

Okay, makes sense. Thanks

Hi @OTichonova

The implementation is completed. Please download the APK from the link at the bottom of the ticket description and let me know if you need help testing the function.

Screenshot_20230818-143937_Wikipedia Dev.jpg (2×1 px, 88 KB)

Since there has no access to the screen of managing templates, I have added a temporary link at the bottom of the "Edits" screen, where you can find a "Manage TalkTemplates" link.

The link will be removed once this function is merged into the feature branch.

Hi @cooltey, okay sounds good, thank you! I'll check it out today.

Hi @cooltey great work! I have some some small updates/questions (which can also be found in the Figma file)

42. Compose new message43. MessageError messageTapping back44. Save changes?
Compose new message.png (1×432 px, 56 KB)
Message composed.png (1×432 px, 57 KB)
Trying to publish without subject.png (1×432 px, 55 KB)
Tapping back modal.png (1×432 px, 72 KB)
Save message modal.png (1×444 px, 76 KB)

Hi @cooltey great work! I have some some small updates/questions (which can also be found in the Figma file)

42. Compose new message43. MessageError messageTapping back44. Save changes?
Compose new message.png (1×432 px, 56 KB)
Message composed.png (1×432 px, 57 KB)
Trying to publish without subject.png (1×432 px, 55 KB)
Tapping back modal.png (1×432 px, 72 KB)
Save message modal.png (1×444 px, 76 KB)

Hi @OTichonova

  1. Compose new message

Done.

  1. Message

Cannot reproduce it when both fields are filled. Could you please help to provide the steps of reproducing it?

  1. Error message

Done.

Tapping back

This is theme style setting that will automatically apply to all other places (article, talk dialog). Do you want me to change both buttons to be blue everywhere?

  1. Save changes?

Done. Similar to the above, I have updated the inactive color to placeholder color.

Please download the APK from the link in the ticket description again, thanks!

Hi @cooltey! Thank you for the updates. They look great!
43. Message -> cannot reproduce either, and the colors are correct now so this is 'Done'.

Tapping back -> so these are the modals I found currently for tapping back on 'Article', 'Talk page' and 'Image tags' with both buttons blue. If there is an effort to move away from this and have one grey & one blue button in these cases then we can keep it as it is. I just wanted to keep it consistent across features.

Screenshot_20230901-190814.png (960×432 px, 113 KB)
talk page.jpg (1×864 px, 167 KB)
Screenshot_20230901-190859.png (960×432 px, 154 KB)

Hi @OTichonova

Yes, the dialogs in all the screens you tested will be automatically updated once we apply the new setting, which will keep consistency across the app.

Screenshot_20230901-141109_Wikipedia Dev.jpg (2×1 px, 103 KB)
Screenshot_20230901-140959_Wikipedia Dev.jpg (2×1 px, 113 KB)
Screenshot_20230901-141018_Wikipedia Dev.jpg (2×1 px, 55 KB)

Hi @cooltey, thanks!
Can we keep both buttons blue (like it is currently in the app in other places). Robin mentioned that both options in these cases are 'equals' so none of the options should be using the secondary text color.

Hi @OTichonova

Yes, that makes sense to me! Please download the latest APK to see the changes, thanks!

Hi @cooltey, thank you for the work, it looks great!