Page MenuHomePhabricator

Allow users to save their filter selections for later reuse
Closed, ResolvedPublic20 Estimated Story Points

Assigned To
Authored By
Catrope
Apr 28 2017, 11:04 PM
Referenced Files
F8234298: Capture d’écran_2017-06-01_14-43-12.png
Jun 1 2017, 12:45 PM
F8225416: Screen Shot 2017-06-01 at 10.08.53 AM.png
Jun 1 2017, 6:15 AM
F8216308: Screen Shot 2017-05-30 at 9.45.11 PM.png
May 30 2017, 5:49 PM
F8043174: Screen Shot 2017-05-11 at 1.56.53 PM.png
May 11 2017, 9:09 PM
F8043099: Screen Shot 2017-05-11 at 1.51.35 PM.png
May 11 2017, 9:09 PM
F8043264: Screen Shot 2017-05-11 at 1.39.29 PM.png
May 11 2017, 9:09 PM
F8043120: Screen Shot 2017-05-11 at 1.37.49 PM.png
May 11 2017, 9:09 PM
F8043062: Screen Shot 2017-05-11 at 1.37.31 PM.png
May 11 2017, 9:09 PM
Tokens
"100" token, awarded by RandomDSdevel.

Description

This is about users being able to save filter selections for themselves; the task for defining saved filters wiki-wide is T164548: Move links at top of Recent Changes to a Quick Links menu

Save filters dialog

RC-QL-dialog-oveview.png (309×1 px, 31 KB)

Behaviour

RC-QL-dialog-states.png (309×1 px, 26 KB)

  • Initially the dialog gets the input focus to its input filed showing a placeholder.
  • When the input field is empty, the main action is disabled.
  • When the input field has content, the main action is enabled.
  • Clicking on "cancel" or outside the panel, cancels the operation and makes the panel disappear.

Layout
The layout is based on three different sizes (16px, 8px, and 4px) keeping a 2x proportion. 16px is used as font-size. The rest of the distances is illustrated below:

RC-QL-dialog-layout.png (345×512 px, 22 KB)

Quick links menu

RC-QL-menu.png (173×467 px, 11 KB)

Behaviour

RC-QL-menu-hover.png (210×760 px, 17 KB)

  • Clicking on the "Quick links" button, shows the list of quick links. Clicking on the button again or anywhere outside the list closes the list.
  • Clicking on a list item will load the associated filters.
  • Clicking on the "..." menu will lead to more options for the item (more on this later).
  • Items on the list are hovered with whichever is the standard color (there are separate UI-Standardization discussions on whether it should be grey or blue).
  • The "..." icon is initially in "Base20" dark grey (#54595d) color, changing to "Base10" (#222) when hovering its active area.

Layout

RC-QL-button.png (172×256 px, 7 KB)

  • The drop-down button should follow the standard layout for buttons with icons and indicators (check "ButtonWidget (icon)" and "ButtonWidget (indicator)" in the widget demo )

RC-QL-menu-layout.png (210×467 px, 19 KB)

  • Menu items use an 8px space padding around the content (text in 14px font size, and "accent50" blue #36c color).
  • The "more" menu ("...") has an active area bigger than the image in order to avoid accidental clicks.
  • Default filter shows the pin icon next to the "more" menu.

Quick links options menu

RC-QL-menu-options.png (309×581 px, 22 KB)

Behaviour

  • When clicking the "..." option for a quick link, the contents of the quick links panel change to show the options for the current quick link.
  • A header is shown with the name of affected quick link, the options provided and a way to return to the list.

Layout

RC-QL-menu-options-layout.png (309×581 px, 34 KB)

  • Items in the list use 8px as spacing unit with a 16px icon.
  • The header uses a light grey as background and a separation line at the bottom.
  • The last option is the action to return to the list, also with a line separator.

Renaming a quick link

RC-QL-Rename.png (309×1 px, 38 KB)

Behaviour

  • When renaming the quick link item becomes an editable input box, focused and with the content as an input selection.
  • The confirmation button will be disabled until the user changes the text.
  • Clicking elsewhere in the list panel should exit the editing mode. Clicking outside should both exit the editing mode and close the panel.

Layout

RC-QL-Rename-long.png (309×290 px, 12 KB)

  • We can allow the text to expand for longer names (always limited to the maximum length we support), making the confirmation button aligned to the bottom of the text area. If this is too complex technically, we can just keep the initial size fixed for the input field.

Event Timeline

Catrope changed the point value for this task from 8 to 20.
Catrope added a subscriber: MSchottlender-WMF.

Just a note here - as part of the testing, I wanted to see how many quick links the user settings will hold (so how many fit in 65535 bytes) and the result, currently, is 65 saved queries.

We can get away with storing almost double that (150 queries) if we clean up the highlight representation to only store highlights that are not null. This will followup. For the moment, however, while I doubt anyone will reach 65 - it might be a good idea to have some sort of alert notifying the user that the 66th quick filter is not going to be saved.

Just a note here - as part of the testing, I wanted to see how many quick links the user settings will hold (so how many fit in 65535 bytes) and the result, currently, is 65 saved queries.

This depends on the number of filters (which varies by wiki) and the exact values for string options (unlike boolean, the value is not just 0 or 1), right? So it should be dynamic.

Also, this storage is shared with other features, right?

Also, this storage is shared with other features, right?

This isn't using localStorage, it's using a preference. up_value is a BLOB, which stores up to 64KB.

Ideally, the preferences API would tell us when you overflow that limit, but if you try to store more than 64KB of stuff in a preference value, the API returns a success message and the stored result just silently gets truncated, and then fails to parse when you try to pull it back out :/

Change 350763 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] Add a 'saved queries' quick filters feature

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

If user saved filters are made available before the community links are integrated into the menu we need to consider how to adjust the initial state. Provide an empty state for the "Quick links" drop-down when there are no user-defined links yet could help to explain what the menu is for and what to do to get options there.

RC-quicklinks-not-integrated.png (768×1 px, 263 KB)

This is may not be needed if there is some kind of integration (e.g., T164548#3238329), that prevents the menu from being empty.

This is may not be needed if there is some kind of integration (e.g., T164548#3238329), that prevents the menu from being empty.

If we don't give wikis a default list.

Change 350763 merged by jenkins-bot:
[mediawiki/core@master] RCFilters UI: Add a 'saved queries' quick filters feature

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

Change 352729 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] Followup I5cede8: Fixup SavedQueries styling and event

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

Change 352732 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] Followup I5cede8: Make the SavedQueries popup larger

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

Change 352729 merged by jenkins-bot:
[mediawiki/core@master] Followup I5cede8: Fixup SavedQueries styling and event

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

Change 352732 merged by jenkins-bot:
[mediawiki/core@master] Followup I5cede8: Make the SavedQueries popup larger

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

If user saved filters are made available before the community links are integrated into the menu we need to consider how to adjust the initial state. Provide an empty state for the "Quick links" drop-down when there are no user-defined links yet could help to explain what the menu is for and what to do to get options there.

RC-quicklinks-not-integrated.png (768×1 px, 263 KB)

This is may not be needed if there is some kind of integration (e.g., T164548#3238329), that prevents the menu from being empty.

This still needs to be implemented. The current implementation doesn't display the button/menu at all if it's empty.

always limited to the maximum length we support

Do you plan to have a counter somewhere, @Pginer-WMF?

Checked in betalabs - below is the comparison between prototype and implemented feature (the screenshots are made with 100% scale although it looks bigger than normal):

Prototype Current
Screen Shot 2017-05-11 at 1.37.49 PM.png (320×384 px, 25 KB)
Screen Shot 2017-05-11 at 1.51.35 PM.png (275×353 px, 21 KB)
not-focused
Screen Shot 2017-05-11 at 1.37.31 PM.png (333×401 px, 25 KB)
not-focused
Screen Shot 2017-05-11 at 1.56.53 PM.png (292×361 px, 27 KB)
RC-QL-menu.png (173×467 px, 11 KB)
Screen Shot 2017-05-11 at 1.39.29 PM.png (199×340 px, 14 KB)
RC-QL-menu-options.png (309×581 px, 22 KB)
Screen Shot 2017-05-11 at 2.03.56 PM.png (282×343 px, 29 KB)

Patch to gate this on a wg variable is https://gerrit.wikimedia.org/r/#/c/353336/ .

It is currently failing due to an unrelated issue, T165074: CI tests failing with segfault.

All looks apparently good. Do we have a deployment date?

@Pginer-WMF - there are some updates to the UI:

  • the bookmark icon is displayed black or blank
  • the placeholder for saved filters is bigger than than 'Quick links' box

Screen Shot 2017-05-30 at 9.45.11 PM.png (194×332 px, 18 KB)

It may not appear in Beta cluster because something is missing, but just in case I report what I've noticed.

When a saved combination is selected, or if you manage to configure manually a saved combination, there is no way to know the current combination is already saved.

When you use a combination which is not saved, the saving icon appears. Maybe we should have an icon to symbolise a saved configuration is in use? Same icon, in blue?

You should see the name you gave the saved filters if the selected configuration fits a saved one... Do you not see that in your case? Or is it not emphasized enough? Trying to see if it's a big or a UX issue.

@jmatazzoni All functionality is in place, except T165437: [betalabs-regression] Highlighting is not preserved for saved filters. If all UI tweaks will be addressed later, the ticket may be marked as Resolved.

If saved filter settings don't implement highlighting properly, then we should not release. But as far as I can tell, saved settings do implement highlighting. @Etonkovidova and @Mooeypoo , did T165437 get fixed? If not, what exactly is the issue?

If highlighting is working, then we can release this—as long as we all understand that this feature is very likely to change some going forward.

Yes, highlighting should be fixed.

@jmatazzoni T165437: [betalabs-regression] Highlighting is not preserved for saved filters is fixed.

@Mooeypoo, @Trizek-WMF

When a saved combination is selected, or if you manage to configure manually a saved combination, there is no way to know the current combination is already saved.

As soon as combination of filters that already is in saved filters, is selected - does not matter how: manually or by modifying already saved filters - the name of the saved filter will appear (the screenshot is below). The question is only about general discoverability/visibility of already saved filters:

Screen Shot 2017-06-01 at 10.08.53 AM.png (134×1 px, 27 KB)

I haven't noticed it, @Etonkovidova. It is not really visible. Maybe we should have the filter name at the same size as the "Active filters" label is?

Capture d’écran_2017-06-01_14-43-12.png (75×538 px, 15 KB)

@Pginer-WMF, any idea?

I haven't noticed it, @Etonkovidova. It is not really visible. Maybe we should have the filter name at the same size as the "Active filters" label is?

Capture d’écran_2017-06-01_14-43-12.png (75×538 px, 15 KB)

@Pginer-WMF, any idea?

We can explore ways to make the title more prominent, either with their style or using a transition. If I understand the issue correctly, this is more relevant when selecting a set of filters that happen to be those you saved before. But it may not be as relevant when selecting a specific saved filter from the menu and getting it applied.

QA Recommendation: Product should weigh in

Change 356876 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] Enable $wgStructuredChangeFiltersEnableSaving by default

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

Change 356876 merged by jenkins-bot:
[mediawiki/core@master] Enable $wgStructuredChangeFiltersEnableSaving by default

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