hi @Sgs, commenting on my understanding here about this just to make sure it is not completely inaccurate :) is the need here to build a way for admins to add/remove 'elements' of the respective collection, in this case, links?

a few days ago I aimed to improve the doubled numbered list you talked about in the description by using a multi-column field. is this something that you think could alleviate the issue?

In T360445#9664061, @JFernandez-WMF wrote:

hi @Sgs, commenting on my understanding here about this just to make sure it is not completely inaccurate :) is the need here to build a way for admins to add/remove 'elements' of the respective collection, in this case, links?

Yes, for the GrowthExperiments Help panel links we would not show the controls because we want exactly five items but that is a Growth special case rather than the general case where "management" is desired.

a few days ago I aimed to improve the doubled numbered list you talked about in the description by using a multi-column field. is this something that you think could alleviate the issue?

This is indeed an improvement that we can apply to the Help panel config form but it does not remove the need for the "management" feature.

thank you! same as https://phabricator.wikimedia.org/T357710 I think this may also take advantage of the multi selections approach in form guidelines?

feel free to disagree, maybe I am not getting these use cases right!

In T360445#9689412, @JFernandez-WMF wrote:

thank you! same as https://phabricator.wikimedia.org/T357710 I think this may also take advantage of the multi selections approach in form guidelines?

feel free to disagree, maybe I am not getting these use cases right!

I think the ChipInput plus Menu metaphor works well one there's only one value to select, in the case of the help panel links there are two values to select per row. Could we update design to reflect so?

@Sgs just to make sure I am following,

In T360445#9727057, @Sgs wrote:

I think the ChipInput plus Menu metaphor works well one there's only one value to select, in the case of the help panel links there are two values to select per row. Could we update design to reflect so?

Is the need here for a design that has the multi selections workaround I commented, but using the multi column field (two values per row)?

In T360445#9753471, @JFernandez-WMF wrote:

@Sgs just to make sure I am following,

In T360445#9727057, @Sgs wrote:

I think the ChipInput plus Menu metaphor works well one there's only one value to select, in the case of the help panel links there are two values to select per row. Could we update design to reflect so?

Is the need here for a design that has the multi selections workaround I commented, but using the multi column field (two values per row)?

I think that is a design question, but I tempted to say yes. In our case, the help panel links would display much better if we inlined the "Destination page" filed and the "Label" one.

Thanks for the patience here @Sgs, I also agree with mixing the multi selections with the multi-columns. Here's an attempt at that:

I added the 'plus' button to the 'Fifth link' field in the Help panel links sections, but I am wondering if there is a better placement for this for our use case 🤔 Do you have any thoughts?

In T360445#9781103, @JFernandez-WMF wrote:

This improves the current status quo we have but I think it does not complete the management requirement as it lacks a delete button (trash button in "design alternative") and also the "single" labels approach in the "design alternative" seems it would save some vertical space in the form which would improve the UX. What do you think?

I added the 'plus' button to the 'Fifth link' field in the Help panel links sections, but I am wondering if there is a better placement for this for our use case 🤔 Do you have any thoughts?

I think we should split this task in two, this task can hold the management functionality requirements which per comments above need some refinement and one for the in-lined display of fields. For the latter I have filed T364557 (and asked some design clarifications there).

In T360445#9783835, @Sgs wrote:

This improves the current status quo we have but I think it does not complete the management requirement as it lacks a delete button (trash button in "design alternative") and also the "single" labels approach in the "design alternative" seems it would save some vertical space in the form which would improve the UX. What do you think?

Gotcha! I think that makes sense. We can do the following, see screenshot:

[not directly related to the task] Let's maybe encapsulate each link/option inside of a module to create visual separation (see https://doc.wikimedia.org/codex/latest/style-guide/constructing-forms.html#modules). We can have the delete action next to the 'X link' label, and then have the action to add another link (or whichever element) at the bottom of the section.

@Sgs how does this sound?

In T360445#9783835, @Sgs wrote:

I think we should split this task in two, this task can hold the management functionality requirements which per comments above need some refinement and one for the in-lined display of fields. For the latter I have filed T364557 (and asked some design clarifications there).

Thank you, I'll comment on that task for that :-)

(very rough) Notes from demo:

• We should have one explanatory field at the top ("Help panel links" or something...)
• "Destination page" and "Label" could possibly be headers for the full column rather than needed for each new row.
• i18n issues with having "First link", "Second link", etc. because what happens when a new row is added? (Could we remove these labels, or just have them numbered?)
• We still need to have the "recommended help page" text in the design for this particular example.

In T360445#9791108, @KStoller-WMF wrote:

• "Destination page" and "Label" could possibly be headers for the full column rather than needed for each new row.

I am initially against reworking this at least for a first release, since I believe we should be looking into using the Table component for this instead (which, admittedly, I think would work great for this use case). @Sgs can you look into the Codex site and confirm if there's an alignment on using this component for this control?

• i18n issues with having "First link", "Second link", etc. because what happens when a new row is added? (Could we remove these labels, or just have them numbered?)

Would naming them 'Link 1', 'Link 2', 'Link 3' or just '1', '2', '3' help? cc @Sgs

In T360445#9819563, @JFernandez-WMF wrote:

I am initially against reworking this at least for a first release, since I believe we should be looking into using the Table component for this instead (which, admittedly, I think would work great for this use case). @Sgs can you look into the Codex site and confirm if there's an alignment on using this component for this control?

While I agree the table component addresses some of the management requirements by adding the trash icon by the side of each element I think it requires quite investment of engineering resource. That is because for our use it makes more complex to edit the internal fields of each element. How would we edit these? Would we display in-lined form fields in each table cell? Or add an edit button which would then get the selected item in context of some other view?

• i18n issues with having "First link", "Second link", etc. because what happens when a new row is added? (Could we remove these labels, or just have them numbered?)

Would naming them 'Link 1', 'Link 2', 'Link 3' or just '1', '2', '3' help? cc @Sgs

I think that would be more confusing. My concern with adding numbers on its ordinal or cardinal form is they can convey confusing information. For instance, in the GrowthExperiments help panel links specific use case links, the order of links matters, because it will be reflected in the help panel. But that is not the case for the list of mentors (unless @Urbanecm_WMF corrects me). See https://test.wikipedia.org/wiki/Special:ManageMentors which is a potential use case we want to support. I think something similar to

would work for an initial management version and require much less effort. I would just make the number less prominent (if even present). eg: "1. Help panel link", "2. Help panel link", "3. Help panel link". Maybe something that would help conveying the information that all items belong to the same collection would be wrapping them in ome box or with some border.

If it sounds good @Sgs, I'll close this task as resolved since the design proposal was already made. I am guessing we should create an Engineering task for this, let me know if you want me to take on that task.
Thank you!

Sure, filed as T366274.