Page MenuHomePhabricator

VE Dialog on the Test Instance: Add ENUM parameter type to Template Data and add combobox to VE
Closed, ResolvedPublic5 Estimated Story Points

Description

Summary
Add new parameter property of 'Values,' which if used displays a combobox to users in VE with these values instead an input field. This would allow a template creator/editor to set a list of inputs as the possible choices for a parameter in TemplateData, converting it into an ENUM type. This implementation without creating a new parameter type builds on the discussion from this ticket: T53375: TemplateData: Add parameter type for selecting one of predefined values (like "<select>" or ENUM).

This ticket has four parts, to be implemented on the test instance in order to use it for usability testing and understand any potential issues the proposed change may cause:

  1. Add new parameter property to TemplateData, "Values."
  2. Add this property to the TemplateData editor with a single field accepting comma separated values. Label "Limit values to (comma separated)." Note: in a later ticket, all fields will get descriptions describing the impact of their choices on VE and what users will see. This one will include, "When used a dropdown with these values will be displayed, when left empty users will see an input field."
  3. Add the combobox input type to the Visual Editor dialog to display parameters with this property. Use OOUI ComboBoxInputWidget (filtering on input).
  4. Add a warning when a value is entered that is not in the list of values.

Mock ups
TemplateData Editor

Screen Shot 2020-08-11 at 18.41.25.png (239×1 px, 18 KB)

Visual Editor
Screen Shot 2020-08-11 at 17.33.09.png (296×927 px, 31 KB)

Screen Shot 2020-08-11 at 18.11.17.png (251×561 px, 26 KB)

Requirements

  • Values field should only be shown for parameter types: Unknown, String, Line, and Number.
  • User should be able to easily add a short or long list of values to the TemplateData in both the TemplateData editor and in JSON. If the list is long, it should wrap and be visible at a glance, not cut-off by the input field. The text field should expand to multi-line.
  • The combobox must allow users to type to find an existing value from the dropdown or type in a value not existing in the dropdown.
  • When a user types in a value not included in the dropdown, an in-line warning should display, "This template is intended to work with only the provided values. If the deviation from the list is intentional, it is still possible to publish." This warning should not block the user from saving if they still want to.

Open Questions

  1. Are there other parameter types which should display this new 'Values' property? What happens if someone gives a values property to another type in JSON?
  2. Is there a maximum number of values that can be added? Ideally this would allow for a very large number of values.
  3. Should the warning display immediately after typing (but not during or before) or after the user presses submit, requiring them to submit a second time to bypass it?
  4. Are there any benefits to the alternate way of implementing this - adding a new parameter type called "Dropdown," which then allows you to add values? This decreases the flexibility and increases the complexity from a TemplateData standpoint. On the other hand, it may be clearer to users which actions they need to take if they would like to create a dropdown for a particular parameter.

Alternate:

Screen Shot 2020-08-11 at 17.50.01.png (394×670 px, 25 KB)
Screen Shot 2020-08-11 at 17.53.15.png (178×712 px, 14 KB)

Event Timeline

One possible approach is to follow what we have in HTML.

I favor the later very much. This allows, for example, to list preferred images, templates, user names, or pages for a field of that type. However, we would certainly start adding support for this to the most used text types first, and skip the rare ones for the moment.

The only place where I can see this in the JSON is in the param object:

"params": {
    "Color": {
        "type": "line",
        "datalist": [ "red", "green", "blue" ],
        

To be discussed:

  • Should we stick to the word "datalist" or come up with something else?
  • There is already a specification for localizable InterfaceText in the TemplateData specs. When we discussed this we realized the proposed datalist values are probably not interface texts, but need to be raw, machine-readable (i.e. readable by the template) strings. However, what if it turns out this assumption is not true in all cases? We would need to change our spec to something like this:
"datalist": {
    "red": { "de": "Rot",  },
    

Maybe we should do this right away? It would allow for nice use-cases like "Saxony.png": { "de": "Karte von Sachsen", "en": … }. Note that the InterfaceText spec does not require it to be that complicated. It can be a single string as well: "Saxony.png": "Karte von Sachsen". However, there is no way to simplify this further. Each value must be listed twice, even if the machine-readable value is already human-readable: "datalist": { "red": "red", "green": "green", … }. That's a little inconvenient when writing JSON manually.

I agree, the second datalist option seems to make the most sense. Also agree that it makes sense to add support for the text types first and then add it to the rest as needed later. If it's easier, we can even just add it to the 'string' type at the moment for usability testing.

After reading through the second part again, I think I understand a bit better. From what I see there are two options - does the below feel accurate? I think I see the benefits of building in the complexity (it would be almost impossible to add later), but am still leaning towards the simpler option in order to make the feature simpler and (hopefully) encourage widespread adoption.

Option 1 (simple): Users can list a series of values as part of the datalist, there would never be a sub-list. This is simpler but is a bit restricting.

  • Con: The values must be machine-readable and there is no way to provide an alternate label which shows in the dropdown. For example, if it's a list of flag templates, users would see in the dropdown: {{DE}}, {{USA}}, etc.. but if there could be labels added, they could instead see: German Flag, USA Flag ...
  • Con: The values can only written in one language. Currently, many parameter properties allow for a user to put values in multiple languages, so that the VE dialog can match the interface language, not just the wiki language. I wonder if we can look at the TemplateData stats to see how often people actually use this feature. Based on the current completeness of TemplateData, I would be a bit surprised if people take the time to do this translation on top of filling out TemplateData. Can we add this to T258924: Run script to collect one-time stats about TemplateData?
  • Pro: Easier to write in JSON. No need to repeat the exact same value if the machine-readable value is also human-readable.
  • Pro: Fewer changes to TemplateData editor, no need to design a complex UI to support this feature

Option 2 (complex): Users can list a single list of machine readable values, but apply human-readable 'labels' to each of these values which display in the dropdown. Users can also create multiple versions of the 'label' list in multiple languages.

  • Con: This might be unnecessary complexity. It might go unused and make the fundamental feature more difficult to use. Could create busy work.
  • Pro: Multiple language support is consistent with the rest of TemplateData
  • Pro: Allows for descriptive titles beyond what needs to passed into the template itself.

does the below feel accurate?

Yes, absolutely! (Maybe one exception, see below.)

it would be almost impossible to add later […]

It's possible, but ugly. The spec would need to say something like "a datalist must be an array of string values, or an object mapping string values to interface texts". I would like to avoid such complexity.

[…] leaning towards the simpler option in order to make the feature simpler and (hopefully) encourage widespread adoption.

We could focus on the TemplateData editor and make that easy to use. The actual JSON format doesn't matter that much then.

Fewer changes to TemplateData editor, no need to design a complex UI to support this feature

I don't think this is true. The complexity of the editor UI is pretty much the same in both cases. If all the user want's to do is to list values, but not assign labels, they should be able to do just this. That should probably even be the default behavior of the editor.

Decided that for usability testing purposes, we will go ahead with the more simple approach.

We will also investigate how much localisation is used currently for parameters that allow this.

Change 621277 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/TemplateData@master] [POC] Add basic support for datalist/pre-defined values

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

Change 621278 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/VisualEditor@master] [POC] Add basic support for datalist/pre-defined values

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

Basic support is done:

Screenshot from 2020-08-19 16-44-32.png (253×438 px, 8 KB)

@thiemowmde - filtering on input is working for me now, thanks!

Known issues/questions:

  • I named the thing "pre-defined values" instead of "limit values to", because it doesn't actually limit what the user can input.
  • Proper validation is missing.
  • The new feature can be added to all types, but currently doesn't have an effect for most of them. Should we limit it to specific types to make this limitation more visible? (It's very easy to relax limitations later.) Or just leave it as it is and let clients decide if and what they want to do with the information?
  • When flipping into "wikitext" mode, there is no dropdown any more. It's possible to add it there as well.
  • When typing and filtering the list, the first match should be highlighted (gray), which means it will be selected when pressing enter. This doesn't always work. A OOUI bug?
  • When the field contains something that doesn't have any match in the list, the dropdown button behaves like it's broken. It doesn't do anything any more. Should probably open the full list instead.
  • The yellow warning text is often hidden behind the dropdown, and only becomes visible when leaving the field.
  • The warning is phrased like the template would not work as intended when the user enters an arbitrary value. We don't know if this is the case. Some template parameters might work like this. In other situations the list provided via TemplateData might be a short list of "suggested values", but the template accepts many more. The warning should not appear like an issue that must be fixed. This might trick random editors in deleting stuff that was put there on purpose.

I named the thing "pre-defined values" instead of "limit values to", because it doesn't actually limit what the user can input.

Good point. Maybe it's actually better to call it "Suggested values"? Since as you mention later, that's essentially what they end up being in practice.

The new feature can be added to all types, but currently doesn't have an effect for most of them.

Do you see any benefit to adding to the types other than: Unknown, String, Line, and Number? On the other hand, we can add it and see if people find a use for it. For example, maybe there are times when users may want to suggest templates or files to use. If there isn't a downside to adding it, then it might make sense. If it's not actually usable on those types though, that could create confusion or frustration. In that case, I would not add it.

When flipping into "wikitext" mode, there is no dropdown any more. It's possible to add it there as well.

Would not add it to wikitext mode since the purpose is to add something 'custom.' Also, we might be removing this mode. We should consider though if adding the dropdown makes the wikitext mode more necessary.

the first match should be highlighted (gray)

Also noticed this. It doesn't do it in the demo either though, so maybe it's simply missing behavior?

Should probably open the full list instead.

Agree this would be the ideal behavior when there is a non-matching value. It should still be possible to open the dropdown and switch to a different value. Does this have to do with the filtering though? Because the existing value is essentially filtering the suggestions and nothing matches, so nothing shows in the dropdown. If so, I'm not sure this is possible to solve.

The yellow warning text is often hidden behind the dropdown, and only becomes visible when leaving the field.

I think this is ok, maybe even ideal. Then the user only sees the warning once they have exited the input, meaning it is intentional vs. showing the warning while they might still be typing or fixing their own typos.

The warning should not appear like an issue that must be fixed. This might trick random editors in deleting stuff that was put there on purpose.

Good point, we should re-write the text to be more neutral/general. Maybe we should also switch the warning to a more neutral notice using the MessageWidget (type: 'notice', inline: true).

Sorry, my comment was misleading. I think the current state is fine for the prototype phase. What I listed are questions I would like to re-validate after we collected more input from user tests and such.

Suggested values […]

Nice! Done.

Do you see any benefit to adding to the types other than […]

Yes, I think the feature can be useful for all types except boolean. However, it might be helpful to allow the feature for a type only when VE supports it, to avoid confusion and frustration. This assumes VE is the only consumer, or at least the archetype for how TemplateData is meant to be consumed. This might not be true when relevant 3rd-party consumers exist. In this case it's better to just allow it everywhere – as it is in the current prototype.

In this case it's better to just allow it everywhere – as it is in the current prototype.

Great, agree. And thanks for the extra explanation.

The warning should not appear like an issue that must be fixed. This might trick random editors in deleting stuff that was put there on purpose.

Good point, we should re-write the text to be more neutral/general. Maybe we should also switch the warning to a more neutral notice using the MessageWidget (type: 'notice', inline: true).

Per the sprint review, let's do this. I adapted the inline widget to not be bold and use Base10 for text and icon.

Screen Shot 2020-08-25 at 15.44.41.png (241×731 px, 26 KB)

New text: "This is not one of the suggested values and may not work with the template."

Nice! I think it looks much better (and is less alarming). Thanks for the quick update. I think this ticket can be resolved then? @Lena_WMDE

Looks good! Thanks for updating!

Change 624678 had a related patch set uploaded (by Awight; owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Add basic support for datalist/pre-defined values

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

Change 624678 merged by Awight:
[mediawiki/extensions/VisualEditor@wmde-templates] [POC] Add basic support for datalist/pre-defined values

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

Change 621278 abandoned by Awight:
[mediawiki/extensions/VisualEditor@master] [POC] Add basic support for datalist/pre-defined values

Reason:
Moved to a gitlab branch, https://gitlab.com/wmde/mediawiki-extensions-VisualEditor/-/tree/datalist

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

Change 621277 abandoned by Awight:
[mediawiki/extensions/TemplateData@master] [POC] Add basic support for datalist/pre-defined values

Reason:
https://gitlab.com/wmde/mediawiki-extensions-TemplateData/-/tree/wmde-alpha-deploy

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