Page MenuHomePhabricator

Template flow for edit patrol and Wikitext editor
Closed, ResolvedPublic

Assigned To
Authored By
scblr
Jan 16 2024, 1:15 PM
Referenced Files
F43757902: image.png
Mar 29 2024, 11:08 AM
F43757740: image.png
Mar 29 2024, 11:08 AM
F43757716: image.png
Mar 29 2024, 11:08 AM
F43697859: image.png
Mar 28 2024, 9:50 PM
Restricted File
Mar 18 2024, 11:56 AM
F42723309: image.png
Mar 18 2024, 11:54 AM
F42723484: Screenshot_20240318-123944.png
Mar 18 2024, 11:54 AM
F42723504: Screenshot_20240318-125157.png
Mar 18 2024, 11:54 AM

Description

Background
  • We recently launched the 'Edit Patrol' feature on the Indonesian Wiki and have received user feedback requesting the ability to search for and reply with warning templates. Previous studies have shown that personalized messages can lead to better engagement. By incorporating templates, especially alongside updates to Saved Messages (T356774), we aim to make it easier for Patrollers to create personalized, efficient interactions with other users on Wikipedia.
  • This task also covers the introduction of searching and inserting templates in the Wikitext editor.
Designs (Figma)

Within edit patrol

image.png (720×360 px, 54 KB)
1. Taps new message FAB
image.png (720×360 px, 37 KB)
2. Writes message
image.png (720×360 px, 40 KB)
3. Taps the template button in the toolbar
image.png (720×360 px, 42 KB)
4. Search empty state features recently used templates
image.png (720×360 px, 34 KB)
5. User searches and selects a template
image.png (720×360 px, 32 KB)
6. User sees TemplateData form
image.png (720×360 px, 34 KB)
7. User fills out and inserts form.
image.png (720×360 px, 45 KB)
8. Message with template code and publication
image.png (720×360 px, 32 KB)
9. Save changes dialog (Details see T356774)
patrol edit 189 copy.png (720×360 px, 73 KB)
10. WebView preview
image.png (720×360 px, 42 KB)
11. Publish confirmation
  • Template data flow in 6. and 7. will be shown when available. Otherwise, users are taken to template insertion in 8.
  • Learn more links in 6. and 7. leads to template details.
  • This is the MVP variant. Keyboard-enabled template insertion, as outlined in these designs, will be explored in a future variant.
  • If users choose to write a new message in 1, or makes an edit to an Example Message, the dialog in 9. only features "Save as new message" (without "Update saved message")

Within Wikitext editor

image.png (720×360 px, 54 KB)
9. No surprise, it works the same way!

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

Event Timeline

scblr renamed this task from Create template flow for edit patrol to Template flow for edit patrol.Jan 16 2024, 1:16 PM
scblr claimed this task.
scblr triaged this task as Medium priority.
scblr removed a subscriber: Aklapper.
scblr renamed this task from Template flow for edit patrol to Template flow for edit patrol and Wikitext editor.Feb 22 2024, 11:33 AM
scblr updated the task description. (Show Details)
scblr updated the task description. (Show Details)
  • Per input from @JTannerWMF and @SNowick_WMF – I added the "Save changes?" dialog in step 9
  • Per @Dbrant’s input, I updated step 10 to reflect that we’re showing a WebView instead of a native preview

Moving this task to "Ready for dev" now ✅

CC @HNordeenWMF

scblr removed scblr as the assignee of this task.Feb 23 2024, 12:22 PM

@scblr for #9, since the user started the message from scratch, shouldn't the save dialog only have one option? (Save as new message)

@HNordeenWMF I took the liberty of splitting off a task (T358898) specifically for building the "preview" portion of this workflow. That will be a substantial amount of work on its own, and is pretty independent of the Template-addition workflow.

scblr updated the task description. (Show Details)

@scblr for #9, since the user started the message from scratch, shouldn't the save dialog only have one option? (Save as new message)

Exactly, I added it to the task’s description 👍

thanks @scblr !
@Dbrant I'll try to repeat a question I received: If a user creates a custom saved message that references a template, and saves it into their list of saved messages, the next time they use that saved message, will the template populate as the most recent version of itself?

@Dbrant I'll try to repeat a question I received: If a user creates a custom saved message that references a template, and saves it into their list of saved messages, the next time they use that saved message, will the template populate as the most recent version of itself?

Yes; saved messages are just wikitext, so any templates that are in the message will be unparsed {{template}} references, and will only be parsed when actually posting to a talk page.

Hi @scblr

In the #6 design, all the input fields seem to be required (or optional), do you think we should have a design that indicates different types of parameter?

For example:

Screenshot 2024-03-05 at 16-08-15 Editing San Francisco Bay University - Wikipedia.png (1×1 px, 152 KB)

{{Template: Blockquote}} has three different types of parameters: required, suggested, and optional

Good catch, @cooltey, and yes, please! Can you indicate optional fields in the same way as in the "Create an account" screen?

Screenshot_20240307-142300.png (2×1 px, 160 KB)

Thanks!

Hi @scblr

The implementation is completed. Please download the APK from the ticket description, thanks!

Thanks @cooltey. This looks polished already – great work! 👏

1) Can we display the same information as on the web when there’s no template data?

Implementation
Screenshot_20240318-122923 copy.png (2×1 px, 73 KB)
vsWeb
CleanShot 2024-03-18 at 12.29.14@2x.png (2×3 px, 476 KB)
  • For the text in italics, please use the existing text design from #6 in the task description (Figma)
  • For the contents in the orange box, please reuse the designs for the talk page coffee rolls (T310801 | Figma)

2) Same goes for templates that have template data. Any chance of fetching this information?

Implementation
Screenshot_20240318-124612.png (2×1 px, 150 KB)
vsDesign
image.png (720×360 px, 32 KB)
vsWeb
CleanShot 2024-03-18 at 12.48.40@2x.png (2×3 px, 454 KB)

3) Please remove this border/line:

Screenshot_20240318-125157.png (2×1 px, 149 KB)

4) 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?)

5) Can this link open in-app instead of the browser (as a web view)?

{F42723578}

Hi @scblr

Please download the APK to see the changes, thanks!

Thanks @cooltey. This looks polished already – great work! 👏

1) Can we display the same information as on the web when there’s no template data?

Sure!

2) Same goes for templates that have template data. Any chance of fetching this information?

Fixed.

3) Please remove this border/line:

Done.

4) Save changes dialog:

Talked to @Sharvaniharan and this will be included in her PR. If not, I can help to do it.

5) Can this link open in-app instead of the browser (as a web view)?

If we use the CustomTab (open in-app) to open the Template:[name] page, it will open it in another variant of the app. For example, if you installed Beta and Production on your device, you will open the Template:[name] page in the beta app when you tap on the link in the production app.

I would recommend to open the link in an external browser.

@cooltey, this all looks good!

I will add a comment for this 👇

4) 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?)

... to T356774 👍

ABorbaWMF subscribed.

Testing on 2.7.50480-beta-2024-03-27 on test.wiki

After tapping publish, the user is returned to the messages pages and not the edit page.

Steps to Reproduce:
Navigate to edit patrol

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

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

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

@scblr I was a little confused about the text on this dialog. I was not sure if selecting the bottom radio would mean that the example message would be updated and saved. After publishing the message, I understood that my changes were sent in a one-time message. I'm not sure if the text "update existing message" makes sense in this context. Perhaps something like "send this message with your changes" might be better, but that is a lot of text. Perhaps even reworking the dialog to just say: Save as new message or send as is or cancel

image.png (720×360 px, 29 KB)

@ABorbaWMF, great catch!

The behavior should be as follows after tapping 'Talk' (previously 'Warn') on the main Edit Patrol screen:

1) Both custom and example messages:

  • If no changes are made to a custom or example message, no dialog at all should be shown. The user is taken to the preview step.

2) Example messages:

  • If changes are made to an example message, the following dialog is shown:

image.png (720×360 px, 32 KB)

Since the radio contains only one option now, we could further simplify it to:

image.png (720×360 px, 35 KB)

3) Custom messages:

  • If changes are made to a custom message, the following dialog should be shown:

image.png (720×360 px, 32 KB)

Tagging @HNordeenWMF for transparency, as she contacted me yesterday with a similar question.

@Dbrant, could you make sure the behavior described is implemented? Thanks!

Testing on 2.7.50480-beta-2024-03-27 on test.wiki
Expected Result:
After tapping publish, the initial edit page appears

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

fixed!

I was a little confused about the text on this dialog.

done!