Page MenuHomePhabricator

Collection items fields should be wrapped in a module like box
Closed, ResolvedPublic

Description

Regardless of the level of nesting of the schema properties we display as fields, all fields have the same level of indentation (none). This is causing issues to identify the hierarchy relation between fields in the resulting form. This task is to fix this problem. The most confusing control presenting this problem is the collection control (ArrayControl).

Design specification for nested fields: Codex constructing forms docs

Design screenshot

Nested fields (1).png (791×860 px, 22 KB)

Acceptance criteria

  • Collection item fields are wrapped in a box
  • Each item should have the same label perfixed by an ordinal number, ef: 1. Help panel link

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sgs triaged this task as Medium priority.

I did some tests by adding just border and padding to different levels. This was the outcome:

all-levels.png (1×1 px, 173 KB)
second-level.png (1×1 px, 159 KB)
complex-fields.png (1×1 px, 168 KB)
All levelsSecond level only"Complex" fields (using fieldset)

What do you think? cc @JFernandez-WMF

KStoller-WMF renamed this task from Nested schema properties should be idented to Nested schema properties should be indented.May 22 2024, 4:46 PM
KStoller-WMF updated the task description. (Show Details)
KStoller-WMF moved this task from Inbox to Up Next on the Growth-Team board.
Sgs renamed this task from Nested schema properties should be indented to Collection items fields should be wrapped in a module like box.May 27 2024, 3:57 PM
Sgs updated the task description. (Show Details)
JFernandez-WMF updated the task description. (Show Details)

Change #1039306 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/CommunityConfiguration@master] ArrayControl: surround items with border

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

Taking the same width as the vertical parent is tricky to achieve because of the "flex" nature and unclear width of the fields, which is pending clarifications in T361324#9867903. Meanwhile I've left the last field on even number of fields in an item to occupy the full parent width.

Screenshot 2024-06-10 at 12.06.17.png (612×2 px, 62 KB)

Change #1039306 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] ArrayControl: surround items with border

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

Change #1043146 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/CommunityConfiguration@master] Editor: use a single label for array items

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

Collection items are now wrapped in a box (testable in Beta). The item label is still specific to each item (First link, Second link...) as opposed of what the design in the task description shows. That is because the change will be easier to make once T367502: Compute editor labels on the server is resolved, however, concerns about the label change have been brought by @Michael about the information lose on the suggestion for each link (recommended: manual of style, recommended: visual editor guide...)

Screenshot 2024-06-14 at 17.08.24.png (1×1 px, 172 KB)

Should we proceed with the single label for all items as the description screenshot or keep a dedicated label per item? cc @KStoller-WMF @JFernandez-WMF

My preference is that we use a single label. That is because using a label per item implies that when a new item is created the translation message may not exist. And it also implies that when one or more items are deleted, we may end-up accumulating unused messages in our translations files.

If we really need a specific recommendation message per link I think we could achieve that by turning "Help panel links" into an object with a dedicated property for each link, instead of using an array.

Etonkovidova subscribed.

Moving to Design review to address @Sgs questions above.
The current implemetnation in eswiki beta (https://es.wikipedia.beta.wmflabs.org/wiki/Especial:Configuraci%C3%B3n_comunitaria/HelpPanel). Also, the following AC is not implemented, but since the form labels have references to the order (and to the ordinal numbers) - First, Second, Third etc.

  • Each item should have the same label perfixed by an ordinal number, ef: 1. Help panel link

Screen Shot 2024-06-14 at 11.12.46 AM.png (1×1 px, 163 KB)

Change #1047042 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Config: update help links item label

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

Thanks Elena!

Should we proceed with the single label for all items as the description screenshot or keep a dedicated label per item? cc @KStoller-WMF @JFernandez-WMF

My preference is that we use a single label. That is because using a label per item implies that when a new item is created the translation message may not exist. And it also implies that when one or more items are deleted, we may end-up accumulating unused messages in our translations files.

If we really need a specific recommendation message per link I think we could achieve that by turning "Help panel links" into an object with a dedicated property for each link, instead of using an array.

@Sgs thank you for sharing your thoughts here. I agree with what you've said — let's keep the single label unless @KStoller-WMF thinks otherwise.

I don't think I'll mark this as resolved until we cross out the last acceptance criteria. @Sgs, @KStoller-WMF do you all agree or do we want to follow up in a newly created task?
Also, is there a task for adding the recommendations to the fields? Since this task doesn't cover that maybe we can create a new one.

I don't think I'll mark this as resolved until we cross out the last acceptance criteria. @Sgs, @KStoller-WMF do you all agree or do we want to follow up in a newly created task?

Let's create a new task for that, if you think it's necessary. (I don't have a strong sense that how the fields are numbered will impact the end user experience too much, but I might be missing something?)

Also, is there a task for adding the recommendations to the fields? Since this task doesn't cover that maybe we can create a new one.

I definitely agree that we need to follow up to improve how we are presenting suggestions for which help pages to link to. I imagine this could be done via the suggestion @Sgs made:

If we really need a specific recommendation message per link I think we could achieve that by turning "Help panel links" into an object with a dedicated property for each link, instead of using an array.

Or we could provide an information section for the Help panel links section of the form, and mention suggestions in that area rather than next to each field?

It seems like supporting adding informational text per section is more likely to be a helpful feature for future uses of Community Configuration.
@Sgs - do you agree?

Change #1047042 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Config: add help links item label

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

Change #1043146 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Editor: use a single label for array items

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

I don't think I'll mark this as resolved until we cross out the last acceptance criteria. @Sgs, @KStoller-WMF do you all agree or do we want to follow up in a newly created task?

Let's create a new task for that, if you think it's necessary. (I don't have a strong sense that how the fields are numbered will impact the end user experience too much, but I might be missing something?)

This is already available in Beta and should be in the next train.

It seems like supporting adding informational text per section is more likely to be a helpful feature for future uses of Community Configuration.
@Sgs - do you agree?

If with per section you mean adding an informational text/description below 'Help panel links' and above the first element, I think that's easy/cheap (T368160). As opposed to creating a "section/group" concept that would allow to group several fields (T358221).

The current implementation (eswiki wmf.10) - I marked the first AC as done:

Screen Shot 2024-06-21 at 12.02.15 PM.png (1×1 px, 198 KB)

The second AC should be full-filed and available in pilot wikis tomorrow (wmf.11).