Page MenuHomePhabricator

Saved messages flow for edit patrol
Closed, ResolvedPublic

Assigned To
Authored By
scblr
Feb 6 2024, 2:49 PM
Referenced Files
F42935282: image.png
Mar 21 2024, 10:02 AM
F42747821: Screenshot_20240319-110856.png
Mar 19 2024, 10:26 AM
F42747785: Screenshot_20240319-110650.png
Mar 19 2024, 10:26 AM
F42748187: image.png
Mar 19 2024, 10:26 AM
F42442910: image.png
Mar 7 2024, 1:15 PM
F42442908: image.png
Mar 7 2024, 1:15 PM
F42442905: image.png
Mar 7 2024, 1:15 PM
F42442902: image.png
Mar 7 2024, 1:15 PM

Description

Background
Task
  • Design screen with saved warning messages
  • Get feedback from engineers on if we can prepopulate links
  • Hardcode in saved messages based on design
  • Instrument warning messages to understand which are commonly used (T358154)
  • Get target languages translated (see T350511)
Designs (Figma)

Updates to warn flow

1. Taps warn
image.png (1×720 px, 92 KB)
2. Empty state
image.png (1×720 px, 66 KB)
2.1. Custom messages
image.png (1×720 px, 84 KB)
2.2. Example messages
image.png (1×720 px, 122 KB)
3. Or creates message
image.png (1×720 px, 85 KB)
4. Reviews message
image.png (1×720 px, 90 KB)
5. Makes changes
image.png (1×720 px, 123 KB)
6. Saves changes
image.png (720×360 px, 33 KB)
7. Preview
image.png (720×360 px, 52 KB)
8. Published
image.png (1×720 px, 94 KB)
  • After tapping "Warn" in 1, users see saved messages listed in this spreadsheet
  • The saved messages list (2) contains a floating action button for new messages
  • The CC0 disclaimer has been moved to the newly added preview step in 7
  • Please pay attention to small UI and label updates in the above screens
  • Empty state when there are no warning custom warning messages yet (2`
  • Example messages serve as starting points but can’t be edited (2.2.). They can, however, be saved as “new messages” (see 6)
  • If a user edits an Example Message, they should not be shown the "Update existing message" option.
  • If a user creates a brand new Message, they should not be shown the "Update existing message" option.

New entry points

9. List overflow
image.png (1×720 px, 150 KB)
10. Diff overflow
image.png (1×720 px, 156 KB)
11. Your messages
image.png (1×720 px, 84 KB)
11.1. Example messages
image.png (1×720 px, 126 KB)
12. Edit message
image.png (1×720 px, 89 KB)
13. New message
image.png (720×360 px, 33 KB)
  • Entry points for saved messages in the list and diff view allow users to access and manage their saved messages outside of the warn flow
  • Note the contextual label updates in the app bar: "Saved messages" instead of "Warn", "Edit message" and "New message" instead of the user talk page, and "Save" instead of "Next"

Edit saved messages

14. List view
image.png (720×360 px, 35 KB)
15. Edit message
image.png (1×720 px, 89 KB)
16. Delete right swipe
image.png (1×720 px, 79 KB)
17. Delete left swipe
image.png (1×720 px, 78 KB)
18. Single delete
image.png (1×720 px, 76 KB)
19. Edit top right
image.png (1×720 px, 73 KB)
20. Selects messages
image.png (1×720 px, 73 KB)
21. Multi delete
image.png (1×720 px, 67 KB)
  • Only "Your messages" can be edited
  • Tapping a message in the list view (14) allows users to edit it (15). Depending on the context (Warn flow or new entry point), users see a "Next" or "Save" button at the top right
  • Swiping right (16) and left (17) lets users delete a message. The gestures work the same way as in Notifications (T288065)
  • Tapping "Edit" at the top right in 14 lets users change the order and multi-select and delete list items (20 and 21)
  • Snackbars (18, 21) confirm the user's actions and let them undo their deletion
  • Select/Deselect all options in the app bar (20) work the same as in notifications (T288066)
  • Long pressing the list enables edit mode as well (T288066)

Target date for release: Week of April 1-5

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
scblr triaged this task as High priority.
scblr removed a subscriber: Aklapper.
scblr renamed this task from Suggestions for pre-canned messages to Saved messages flow.Feb 9 2024, 2:04 PM
scblr renamed this task from Saved messages flow to Saved messages flow for edit patrol.Feb 9 2024, 2:07 PM
7. Preview
image.png (720×360 px, 52 KB)

Does this screenshot mean that the links will be autonumbered external links? These should be avoided if possible: they look ugly and has accessibility issues. I’d write

Hello Cooltey, I want to let you know I’ve reverted [https://en.wikipedia.org/w/index.php?title=Types_of_volcanic_eruptions&diff=1198780028&oldid=1195211737 one or more of your recent contributions] because they do not seem constructive. If you think I made a mistake, or have questions, you can leave a message on my talk page: [[User talk:Sclbr]]. Please note that continued vandalism may lead to restrictions.

Hi @Tacsipacsi, great suggestion - thank you!
@scblr is planning to ensure that the linked text is used instead of the full url, and update the mockup.

Hi @scblr

I have a few questions as I started implementing:

a) On screen 2, I see on figma that the title style is h3-button but when I implement it looks more like h3. Could you please confirm.
b) Looks like, from the designs, that we have removed the title from messages. Every message has a subject and message, but no longer, the title. This is a very welcome change and easier to manage. However, that means we will need to remove the need to add a title on 6. Please confirm this, so I can remove titles.
c) Need the Learn about message placeholders url
d) Minor: Noting that we upgraded license text on 7 to CC-BY-SA 4.0 license and not 3.0

Thank you :)

Just a note that the job of building the Preview screen was broken out into its own task (T358898), and it's been agreed that it will be a WebView-based preview, that need not match the native presentation that we show in our Talk activities. (T355141#9571761)

@Sharvaniharan

a) On screen 2, I see on figma that the title style is h3-button but when I implement it looks more like h3. Could you please confirm.

Please go with h3-button button here

b) Looks like, from the designs, that we have removed the title from messages. Every message has a subject and message, but no longer, the title. This is a very welcome change and easier to manage. However, that means we will need to remove the need to add a title on 6. Please confirm this, so I can remove titles.

Yes, exactly; we removed this to make it more straightforward. Any ideas on how we could migrate users that have a title and a subject? I suggest to simply remove titles as the subject will be self-explanatory. Thoughts?

c) Need the Learn about message placeholders URL

There’s none yet, @HNordeenWMF any chance you could create an FAQ page (or section of an FAQ) on MediaWiki for this? Content to be defined.

d) Minor: Noting that we upgraded license text on 7 to CC-BY-SA 4.0 license and not 3.0

Good catch! Thanks

b) Looks like, from the designs, that we have removed the title from messages. Every message has a subject and message, but no longer, the title. This is a very welcome change and easier to manage. However, that means we will need to remove the need to add a title on 6. Please confirm this, so I can remove titles.

Yes, exactly; we removed this to make it more straightforward. Any ideas on how we could migrate users that have a title and a subject? I suggest to simply remove titles as the subject will be self-explanatory. Thoughts?

I completely agree @scblr. Let us remove the necessity for title on that screen and any other prompts or displays of a title for the messages. When you review the final version, if you feel otherwise we can always add it back. My instinct is that we will not miss it :-)

To answer the how to migrate users aspect of it, we do not need to do much there, behind the scenes existing messages will have titles that were given to them, and newly created ones will just have an empty message, and since we will never use it, it will not matter. We will just let that unused column just exist on the db.

Hi @scblr

Minor question:

In this screen : https://www.figma.com/file/cJmB34iJE5p8qbqrQWnE50/Android-%E2%86%92-Edit-Patrol-%E2%86%92-T322083?type=design&node-id=3988-320916&mode=design&t=hDu4x3G0BXDeEE94-0

Is the Use an example message below to customize, send and save to your messages. textview part of the list? As-in, does it scroll up when the user scrolls the list, or is it fixed?
Thank you.

Good question @Sharvaniharan — but I think it should be part of the list, therefore not fixed.

@Sharvaniharan here are the UI translations for the new changes to the flow via Robin & design research.

Hi @scblr ,
This is ready for review. However few things I wanted to highlight:

  • The swipe and delete is showing up on the example messages tab, which I need to discuss with other engineers about the best way to remove. So please ignore this during review. Resolved in latest build. please update before testing.
  • When we enter the saved messages from the menu [Template management mode] - When user clicks on an Example message, if they click save, it gets saved as a new message in the Your messages list.. I feel like other than back-press, there is no choice for them to not save that message. Also related to this is that they can save the same message many times. Should we prevent duplicates based on subject?
  • When the user enters from More menu -> Talk - since we have intriduces the preview screen through the saved messages work, we show license text in preview mode just before publish, but I have hidden Learn about message placeholders link below the compose area, since this is not in the patrolling mode. - Just wanted to flag it so you can okay the new look to talk response screen.

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

Thank you :-)

Should we prevent duplicates based on subject?

Someone may want to have several messages with the same subject but different bodies (e.g. differently detailed explanation for users with different experience levels, or formal and informal addressing in languages that differentiate between them). Maybe it wasn’t that great idea to remove titles…

@Sharvaniharan – great work so far! 👏

1) Should we prevent duplicates based on the subject?

image.png (2×2 px, 332 KB)

Yes, I think so. I suggest the Material 3 way of error handling with an icon and this supporting text: Subject name already exists. Try a different one.

Let’s also discuss @Tacsipacsi’s input in our check-in tonight with the team (thanks for that!).

2) If no changes are made to the subject and the message, the 'Save changes' dialog should not be shown, and users should be taken directly to the 'Preview' step.

Screenshot_20240319-110650.png (2×1 px, 130 KB)

3) The Preview step is currently showing me this, e.g. when the 'Vandalism warning' message has been chosen:

Screenshot_20240319-110856.png (2×1 px, 68 KB)

4) The letter spacing in the Subject text field is off, and different from Compose message. I’m unsure what type settings are applied there, could you investigate? It should be using the p type variable without any modifications (cc @cooltey).

5)

but I have hidden Learn about message placeholders link below the compose area, since this is not in the patrolling mode

Great catch, and it looks good to me.

6) From T355141, please fix this (cc @cooltey):

Save changes dialog:

Implementation
Screenshot_20240318-123944.png (2×1 px, 161 KB)
vsDesign
image.png (720×360 px, 32 KB)
  • Please make sure to use all updated labels and placeholders from Figma
  • Save as message and Update existing message (radios) use h3-button not h3 (maybe it’s faux bold?)

Hi @scblr

I have fixed 1), 2) and 4)

For 1) :
Also updated one other scenario in which the error text should be shown. When a user taps warm and taps on an existing message and changes the message text, which takes them to the save dialog, if they choose Save as a new message, we need to ask them to change the title. So I have added logic to carry over the title from reply screen to the dialog and show error message so user can change the title. If they then happen to choose Update existing message then, error text will be removed.

  1. The Preview step is currently showing me this, e.g. when the 'Vandalism warning' message has been chosen:

I am able to see the preview correctly. Could you please check this again on the latest version, and meanwhile I will look closer if this can happen on an edge case.

  1. From T355141, please fix this (cc @cooltey):

I have changed the style to h3-button and re-introduced the Subject input field.

Looks good @Sharvaniharan. Question regarding updates to the view. I noticed that when you save a new message and go back, the message does not appear in the "Your message" list immediately. Can we make sure the view updates once users tap "Save" ? Here’s a video that shows it:

https://www.dropbox.com/scl/fi/d386ohi5xtn2559nlqf23/screen-20240320-183431.mp4?rlkey=0vgnm8oe464ewrbcoorr8r6i3&dl=0

Should we prevent duplicates based on subject?

Someone may want to have several messages with the same subject but different bodies (e.g. differently detailed explanation for users with different experience levels, or formal and informal addressing in languages that differentiate between them). Maybe it wasn’t that great idea to remove titles…

Thanks for raising this @Tacsipacsi! I wrote up a ticket addressing this, using your examples as user stories T360481. It's a "nice-to-have" for the upcoming release, but if we hear more feedback/requests for this functionality as more people begin to use the tool, we will prioritize it accordingly.

Good catch @scblr ! :-)
Here is the fix:
https://youtube.com/shorts/I9kCzTe-DXA

Thank you!

Cool, it looks good to me now – moving it to the next column. I’d appreciate @ABorbaWMF’s eye and skills to test a few more "new message and save" scenarios! 🙌

Hi @Dbrant and @ABorbaWMF, I came across a few issues with Saving while using the feature today:

  • If you start a completely new message, you are prompted with both "Save as a new message" and "Update existing message". We should only be displaying the options for "Save as a new message" / "Don't save"
  • If you start from an example message and make an edit, similarly you see both "Save as new message" and "Update existing message", but you cannot update the example message. We should only display the options for "Save as new message" / "Don't save" in this case.

Apologies, this was detailed in the task at some point but was removed, I'll add it back in.

Another quick note on this one. I believe there is an issue with the example message flow as well. Steps below:

Steps to Reproduce:

  1. Navigate to edit patrol
  2. Choose an edit
  3. Tap on Talk (Note - on Test.wiki, using an anon account, I do not see a warn icon, only a talk icon)
  4. Tap examples tab
  5. Tap an example message
  6. Tap Next
  7. Tap Publish

Expected Result:
After tapping publish, the initial edit page appears

Actual:
After tapping publish, the list of example messages appears

Expected Result:
After tapping publish, the initial edit page appears

Actual:
After tapping publish, the list of example messages appears

fixed!

I've filed a nice-to-have task separately to improve the positioning of the snackbars to match designs, as I noticed that slowed me down a bit while trying to take multiple actions on an edit: T361646.