Page MenuHomePhabricator

Single page title selector control
Closed, ResolvedPublic

Description

The Special:EditGrowthConfig contains a control for selecting one page title from the local wiki. The exisiting version uses HTMLTitlesMultiselectField from HTML form on its OOUI display. We need a new control implemented in Vue as a replacement

Config property: GEHelpPanelHelpDeskTitle

Data schema

"GEHelpPanelHelpDeskTitle": {
  "type": "string",
  "minLength": 1
},

Existing implementation:

Screenshot 2024-02-15 at 19.10.30.png (908×1 px, 108 KB)

Design notes: probably can be replaced by one of Lookup, SearchInput, TypeaheadSearch, not sure which one is the more appropriate.

Event Timeline

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

[mediawiki/extensions/CommunityConfiguration@master] [WIP] Editor: add PageTitleControl component

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

KStoller-WMF moved this task from Backlog to Up Next on the Growth-Team board.
Sgs added a subscriber: Urbanecm_WMF.

Per discussion with @Urbanecm_WMF, we'll need a mechanism to define when a given config option is targeting this particular component. An option to achieve this could be by creating a schema definition, eg: PageTitle. So schema would look like:

"GEHelpPanelHelpDeskTitle": {
 "type": { "$ref": "#/$defs/PageTitle" },
},
"$defs": { "PageTitle": { "type": "string" }  }

Moving this task to blocked until we resolve T357718.

Sgs lowered the priority of this task from High to Medium.Mar 19 2024, 3:30 PM

Change #1006494 merged by jenkins-bot:

[mediawiki/extensions/CommunityConfiguration@master] Editor: add PageTitleControl component

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

Tested on beta Especial:CommunityConfiguration/GrowthSuggestedEdits.

The list of suggestions displays the titles in black, not in blue (as links) as they are displayed in production:

eswiki betaproduction
Screen Shot 2024-04-22 at 6.00.45 PM.png (1×3 px, 155 KB)
Screen Shot 2024-04-22 at 6.13.28 PM.png (1×1 px, 152 KB)

Also, the invalid input (no title match) is indicated red.

Note: eswiki beta doesn't have Help namespace

Thank you!

The list of suggestions displays the titles in black, not in blue (as links) as they are displayed in production:

eswiki betaproduction
Screen Shot 2024-04-22 at 6.00.45 PM.png (1×3 px, 155 KB)
Screen Shot 2024-04-22 at 6.13.28 PM.png (1×1 px, 152 KB)

Also, the invalid input (no title match) is indicated red.

I think the OOUI version in production renders menu items as links, giving the opportunity to the user to navigate to the pages listed?, however the click event seems only used for selecting the item, I could not navigate to the page (I tried to open the link in new tab with Cmd + "click"). I don't think the new component needs to follow exactly the same UI/UX than the prior one. First of all because the "old" one is meant for use abroad MW while the new one is scoped to be used in CC forms (at least for now). @JFernandez-WMF could you review the interface and indicate design expectations for this?

Note: eswiki beta doesn't have Help namespace

How is it relevant for the test? Are you implying that the production one is filtering only "Help" namespace pages? It does not seem the case, at least in testwiki.

Note: eswiki beta doesn't have Help namespace

How is it relevant for the test? Are you implying that the production one is filtering only "Help" namespace pages? It does not seem the case, at least in testwiki.

@Sgs - I agree that it's not quite relevant. It was a note to me that when it comes to testing namespaces controls (or links to some pages in specific namespaces), I'd remember that eswiki beta doesn't have any pages in Help namespace.

Also, I agree that the new component doesn't need to follow exactly the same UI/UX than the prior one - my testing summary just lists the differences between two forms.

Moving for @JFernandez-WMF review.
There are few questions:
(1) The list of suggestions displays the titles in black, not in blue (as links) as they are displayed in production:
(2) if there is no matched page, a suggestion is displayed in red

eswiki betaproduction and enwiki beta
Screen Shot 2024-04-22 at 6.00.45 PM.png (1×3 px, 155 KB)
Screen Shot 2024-04-22 at 6.13.28 PM.png (1×1 px, 152 KB)

(3) as per @Sgs comment - a link from suggestions cannot be open in a different tab/window

Screen Shot 2024-04-29 at 5.26.39 PM.png (1×2 px, 247 KB)
Screen Shot 2024-04-29 at 5.26.21 PM.png (1×1 px, 305 KB)

(4) There are no required fields on forms associated with Special:CommunityConfiguration - is it a expected behavior? {

Screen Shot 2024-04-29 at 5.07.30 PM.png (468×1 px, 92 KB)

JFernandez-WMF added a subscriber: KStoller-WMF.

Thanks @Etonkovidova 🙏
As per the MenuItem specs in the Codex page, the label/title is displayed in black. I will check-in with DST if there is a different behaviour when the items are pages and come back to this task.

(4) There are no required fields on forms associated with Special:CommunityConfiguration - is it a expected behavior? {

Screen Shot 2024-04-29 at 5.07.30 PM.png (468×1 px, 92 KB)

@Sgs @KStoller-WMF Do we want to make these fields required?

! In T357712#9762690, @JFernandez-WMF wrote:
@Sgs @KStoller-WMF Do we want to make these fields required?

Yes, those should be required as they are part of the standard Growth features that all wikis have enabled.

Moving for @JFernandez-WMF review.
There are few questions:
(1) The list of suggestions displays the titles in black, not in blue (as links) as they are displayed in production:
(2) if there is no matched page, a suggestion is displayed in red

I just checked in with DST on this and this is expected behavior. Let's leave it as it is right now on beta with the black labels.

! In T357712#9762690, @JFernandez-WMF wrote:
@Sgs @KStoller-WMF Do we want to make these fields required?

Yes, those should be required as they are part of the standard Growth features that all wikis have enabled.

Got it, I also checked in with Derek about this and the Codex guidelines don't recommend marking required labels with an asterisk (see https://doc.wikimedia.org/codex/latest/components/demos/field.html#optional-fields). We should indicate the optional fields in the form (meaning, I am guessing, every field besides the two in the Newcomer Homepage?)

Should we create a task for adding the 'optional' text in fields? cc @Sgs — the optionalFlag is incorporated in the Field component.

! In T357712#9762690, @JFernandez-WMF wrote:
@Sgs @KStoller-WMF Do we want to make these fields required?

Yes, those should be required as they are part of the standard Growth features that all wikis have enabled.

Agreed, however to be able to do so we need first to resolve T360921: Support required properties in schemas

Got it, I also checked in with Derek about this and the Codex guidelines don't recommend marking required labels with an asterisk (see https://doc.wikimedia.org/codex/latest/components/demos/field.html#optional-fields). We should indicate the optional fields in the form (meaning, I am guessing, every field besides the two in the Newcomer Homepage?)

It might be a bit redundant in forms where all fields are optional but I don't have strong objections with the suggested pattern.

Should we create a task for adding the 'optional' text in fields? cc @Sgs — the optionalFlag is incorporated in the Field component.

Yes please 🙏 , but mind that the task will be blocked by T360921 as mentioned above.

The required/optional problem is not specific to the single page title selector, it's just a coincidence that this particular field is required and uses this component. @Etonkovidova can we mark this as resolved?

Yes please 🙏 , but mind that the task will be blocked by T360921 as mentioned above.

I have created T364504: Community Configuration: optional fields should be indicated with optionalFlag.

The required/optional problem is not specific to the single page title selector, it's just a coincidence that this particular field is required and uses this component. @Etonkovidova can we mark this as resolved?

Agree we should resolve, I am going to be bold and do it since this was in the Design Review column, but anyone can feel free to re open if necessary.