Page MenuHomePhabricator

[L] Build namespace filter feature in JS UI
Closed, ResolvedPublic

Description

This task covers build the namespace filter only in the JavaScript UI. Adding values to URL params, showing a read-only version of the filter in the PHP UI, and respecting the filter value in the PHP UI will be handled in a separate task.

For this task, we will use the OOUI WindowManager and Dialog widgets rather than recreating them in Vue.

Design: desktop and mobile (current special:search for reference at the top)

Screen Shot 2021-02-17 at 10.40.56 AM.png (1×2 px, 428 KB)

Acceptance criteria:

  • Create a dialog that allows the user to select their preferred namespaces
  • Dialog options include 4 radio buttons: All, Discussion, General Help, and Custom
  • Nested underneath the Custom radio button is all of the available namespaces for the tab, and they should be able to be selected individually as checkboxes. The user should be able to select as many as they'd like.
  • If the user chooses the "Custom" option, they should not be able to click the dialog "Submit" button unless they have chosen one or more of the checkboxes below it.
  • Once the dialog is dismissed, the user should be able to see an indication of their namespace filter selection in the filters bar above the search results. This should match the label of the radio button they selected in the dialog( "Namespace: Discussion", "Namespace: Custom", etc). The exact namespaces for custom searches do not need to be shown (this could crowd the UI).
  • Mobile web is a full screen dialog
  • Default is no longer an option
  • "Remember selection..." is no longer an option
  • If the user clicks "Submit", the search on the Categories and Pages tab should be filtered to only include their selected namespaces
  • The user can click the "X" in the upper right hand corner to dismiss the dialog without saving their selections. The search results should not change.

Event Timeline

AnneT updated the task description. (Show Details)
CBogen renamed this task from Build namespace filter feature in JS UI to [L] Build namespace filter feature in JS UI.Mar 9 2021, 2:10 PM

Change 672835 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add namespace filter

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

Change 672835 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add namespace filter

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

Questions:
(1) Should the list of MediaSearch namespaces be aligned with the Namespaces listed in RecentChanges and Special:Search?
The following namespaces - Newsletter,Newsletter talk, Flow and Flow talk are not listed in Namespaces for Special:Search, Recent changes Namespace filters and on API to list all namespaces.

Regarding Flow (Structured discussion) and Flow talk namespaces on commons wiki. The extension is listed on Special:Version, however my understanding was that Flow (according to https://www.mediawiki.org/wiki/Extension_default_namespaces the namespace name for Flow extension is Topic) cannot be used as a name for a namespace. Also I'm not sure about the current status for this extension (there are only 19 pages on commons wiki).

commons betalabs does not have pages with page_content_model =flow-board.

(2) Clicking on`x` dismisses the dialog but the selection is preserved. It does not affect the result set but might be confusing. So the following spec is only partially done.

The user can click the "X" in the upper right hand corner to dismiss the dialog without saving their selections. The search results should not change.

Steps:

  • a user sees the result for default namespaces selection - "All"
  • a user opens the filter selection dialog box, selects some namespaces but clicks on x. The dialog closes.
  • a user opens it again and sees that the selection is "saved". The active status of user's discarded selection may cause confusion to what exactly the search results display.

In the gif below a user performed default namespace search for "All", then selects namespaces but did not submit. Opening again the namespace dialog a user sees that the selection is active.

mediasearch_namespaces.gif (524×885 px, 277 KB)

(3) Selecting the Project namespace will display Commons label, e.g.

Screen Shot 2021-03-23 at 4.00.15 PM.png (442×619 px, 77 KB)

Also, the Project namespace is not listed in the list of namespaces for RC and Special:Search.

Change 674262 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@master] Fix namespaces map for talk namespaces

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

Change 674262 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Fix namespaces map for talk namespaces

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

@mwilliams, what do you think about item 2 in Elena's comment above? What she's describing matches the acceptance criteria, but I just want to confirm that we should reset the namespace filter to the current state represented in the search results. I'm concerned about throwing out someone's choices if they close the dialog and come back to it, or if they accidentally close the dialog.

I've mostly been thinking that the X in dialogs equals a "Cancel" button but after thinking about it "Cancel" does feel like it more explicitly implies that we will not be saving any choices.

A few options:

  1. Leave acceptance criteria as is, since this isn't a time intensive action and someone thinking the X will save their selection is probably an outlier. It also feels a bit weird to save their selection when pressing the X as that could be annoying/confusing to more people.
  1. We could remove the X and replace it with Cancel
    Screen Shot 2021-03-24 at 1.32.19 PM.png (818×1 px, 88 KB)
  1. Add some sort of confirmation to the X "Are you sure you want to leave without saving"

I'm leaning towards 1 but I think 2 could work fine as well. 3 feels way too intense to me, especially for how low of an effort this action is and I'd avoid it.

While creating the new dialog component, we also thought that clicking anywhere outside of dialog also was equivalent to the X and Cancel, does anything happen in this case when you do that? Not a blocker, just curious!

One other thing that I overlooked when we switched this to a dialog is how to represent the text of this action next to the other filters. A few thoughts there:

  • Currently it looks like we have "Namespace: All". Are we planning on listing out all the selected namespaces in this state or just saying "Namespace: Custom"? I'd say just saying Custom is probably the right path since we might run out of space otherwise.
  • I also wondered if we should start with "All Namespaces" and then update to "Discussion Namespaces", "General Help Namespaces" etc. Having a hard time knowing if we should map to language of the Sort by filter or the rest of the filters. Also not a blocker and no hard opinion on this yet.
  • Lastly, it's obviously implied that it's a clickable / actionable element but there isn't a distinct visual cue (blue color, or downwards caret) and wondered if we need that for accessibility. A caret isn't accurate but does imply there is a selection to be made upon clicking this text.

@mwilliams thanks for all the thoughts!

Regarding the cancel behavior: I'd suggest option 1, at least for now. We haven't implemented a destructive action in the dialog component yet, so due to the time crunch I'd suggest we just reset the namespace filter on close. We can totally revisit this later.

Filter language: It will indeed say "Namespace: Custom" if that option is selected rather than listing them all out. We can change the order of the words easily, just let me know what you think is best!

Visible cue that the namespace filter button is interactive: do you think the color change on hover could be enough to cover this? I also just merged Seddon's work to change the dropdown styles, so we could update the namespace filter button to look like that, too (more like a button, basically). I do agree that a carat doesn't seem appropriate here. Maybe another icon that indicates that you can add something, or that a dialog will launch?

That all makes sense to me. So let's just keep option 1 for now and we can think on any improvements to the filter language and the visible cue issue once we can use it in for production for awhile!

Change 674982 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Reset namespace filter on cancel

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

Change 674982 merged by jenkins-bot:

[mediawiki/extensions/WikibaseMediaInfo@master] Reset namespace filter on cancel

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

Change 675881 had a related patch set uploaded (by Matthias Mullie; author: Anne Tomasevich):

[mediawiki/extensions/WikibaseMediaInfo@wmf/1.36.0-wmf.37] Reset namespace filter on cancel

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

Change 675881 merged by jenkins-bot:

[mediawiki/extensions/WikibaseMediaInfo@wmf/1.36.0-wmf.37] Reset namespace filter on cancel

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

Mentioned in SAL (#wikimedia-operations) [2021-03-31T11:38:26Z] <awight@deploy1002> Synchronized php-1.36.0-wmf.37/extensions/WikibaseMediaInfo: Backport: [[gerrit:675882|Style change to mediasearch logged-in notice close (T274927)]] [[gerrit:675883|Suppress user notice on mobile (T274927)]] [[gerrit:675881|Reset namespace filter on cancel (T276261)]] (duration: 01m 08s)

Checked the behavior of Namespace dialog in commons betalabs - looks logical:

  • open the dialog - select some namespaces options
  • click 'X' - the dialog dismissed, the previous search result is unaffected
  • open the dialog again - the selection reflects the criteria for the existing search result

There is another minor discrepancy - Sort by: Relevance cannot be made to look active, i.e. dark-blue, but Namespace:All when selected (not the initial default state) is displayed active.
https://commons.wikimedia.org/wiki/Special:MediaSearch?type=page&search=cat&namespace=all

Screen Shot 2021-03-31 at 1.14.11 PM.png (267×764 px, 48 KB)