Page MenuHomePhabricator

Build search/depicts prototype
Closed, ResolvedPublic

Description

Implement a prototype for searching depicts based off of these designs:

Acceptance criteria:

This can be tested on https://federated-commons.wmflabs.org/wiki/Main_Page

  • The is a search widget (input field, media types dropdown, submit button) top-right
  • Clicking input field reveals menu to toggle input modes (keywords & tags)
  • Selecting on of the input modes changes the input field to said mode
  • "keywords" input mode shows autocomplete after 2 or more characters have been input
  • When selecting from autocomplete, "keyword" input field receives text from autocomplete; adding more characters fires new autocomplete results that replace the existing text
  • "tags" input mode shows autocomplete after 2 or more characters have been input
  • When selecting from autocomplete, "tags" input field receives text from autocomplete in a capsule; adding more characters fires a new autocomplete result to add a new capsule
  • Clicking a capsule in "tags" input mode opens a popover window
  • A property can be selected, after which the operators dropdown is enabled with "is", "is not" and "is empty" options
  • When property "quantity" is selected, "is greater than" and "is less than" are additional options
  • An operator can be selected, after which the value input field is enabled (except for "is empty", which requires no value)
  • Typing a value behaves like the "keywords" dropdown (autocomplete, selecting from it fills the input field)
  • Unless the value is something that has been selected from the autocomplete, the input field will indicate (red border & text) that the input is invalid when blurred
  • For "quantity", the value can only be a number
  • Clicking "Add qualifier" adds another property-operator-input line
  • Clicking "save" closes the popover and adds an asterisk to the capsule in the search input field (if properties have been added)
  • After having clicked "save", clicking the capsule again opens the popover with any existing valid input
  • Clicking "cancel" closes the popover
  • After having clicked "cancel", clicking the capsule again opens the popover without the changes that were canceled (but may include earlier changes that had been saved)
  • The media types dropdown allows selecting any combination of media types
  • Hitting the return key inside the input field (both "keywords" and "tags") submits the search form, taking the user to Special:Search
  • Clicking the submit button (search icon) submits the search form, taking the user to Special:Search
  • The correct results are displayed (note: results for anything inside the properties popover can't really be tested ATM, since adding qualifiers to depicts statements has not yet been enabled)

QA Results

Related Objects

StatusSubtypeAssignedTask
Declineddchen
OpenNone
OpenNone
DuplicateNone
OpenFeatureNone
OpenFeatureNone
DuplicateNone
ResolvedNone
ResolvedNone
ResolvedNone
Resolved Ramsey-WMF
ResolvedNone
Resolved Ramsey-WMF
Resolvedmatthiasmullie
Resolvedmatthiasmullie
Resolvedmatthiasmullie
Resolvedmatthiasmullie

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 441040 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@master] Search prototype

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

Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.

Change 441040 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/WikibaseMediaInfo@master] Search prototype

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

Change 441040 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Search prototype

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

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome

Test Artifact(s):

This can be tested on https://federated-commons.wmflabs.org/wiki/Main_Page

✅ AC1: The is a search widget (input field, media types dropdown, submit button) top-right
✅ AC2: Clicking input field reveals menu to toggle input modes (keywords & tags)
✅ AC3: Selecting on of the input modes changes the input field to said mode
✅ AC4: "keywords" input mode shows autocomplete after 2 or more characters have been input
✅ AC5: When selecting from autocomplete, "keyword" input field receives text from autocomplete; adding more characters fires new autocomplete results that replace the existing text

Screen Shot 2019-03-29 at 8.19.50 PM.png (2×2 px, 765 KB)

✅ AC6: "tags" input mode shows autocomplete after 2 or more characters have been input
✅ AC7: When selecting from autocomplete, "tags" input field receives text from autocomplete in a capsule; adding more characters fires a new autocomplete result to add a new capsule
✅ AC8: Clicking a capsule in "tags" input mode opens a popover window
✅ AC9: A property can be selected, after which the operators dropdown is enabled with "is", "is not" and "is empty" options

Screen Shot 2019-03-29 at 8.28.26 PM.png (2×2 px, 771 KB)

✅ AC10: When property "quantity" is selected, "is greater than" and "is less than" are additional options
✅ AC11: An operator can be selected, after which the value input field is enabled (except for "is empty", which requires no value)

Screen Shot 2019-03-29 at 8.33.07 PM.png (2×2 px, 766 KB)

Screen Shot 2019-03-29 at 8.36.39 PM.png (2×2 px, 635 KB)

✅ AC12: Typing a value behaves like the "keywords" dropdown (autocomplete, selecting from it fills the input field)
✅ AC13: Unless the value is something that has been selected from the autocomplete, the input field will indicate (red border & text) that the input is invalid when blurred

Screen Shot 2019-03-29 at 8.42.14 PM.png (2×2 px, 790 KB)

Screen Shot 2019-03-29 at 8.44.40 PM.png (2×2 px, 901 KB)

✅ AC14: For "quantity", the value can only be a number
✅ AC15: Clicking "Add qualifier" adds another property-operator-input line

Screen Shot 2019-03-29 at 8.46.20 PM.png (2×2 px, 907 KB)

✅ AC16: Clicking "save" closes the popover and adds an asterisk to the capsule in the search input field (if properties have been added)

Screen Shot 2019-03-29 at 8.47.34 PM.png (218×614 px, 19 KB)

✅ AC17: After having clicked "save", clicking the capsule again opens the popover with any existing valid input

Screen Shot 2019-03-29 at 8.48.47 PM.png (720×1 px, 109 KB)

✅ AC18: Clicking "cancel" closes the popover
Added qualifiers and then clicked Cancel.

Screen Shot 2019-03-29 at 8.48.47 PM.png (720×1 px, 109 KB)

✅ AC19: After having clicked "cancel", clicking the capsule again opens the popover without the changes that were canceled (but may include earlier changes that had been saved)
Previously added but not saved qualifiers are gone.

Screen Shot 2019-03-29 at 8.51.16 PM.png (724×1 px, 105 KB)

✅ AC20: The media types dropdown allows selecting any combination of media types

Screen Shot 2019-03-29 at 8.52.29 PM.png (586×362 px, 36 KB)

Screen Shot 2019-03-29 at 8.52.15 PM.png (594×412 px, 37 KB)

✅ AC21: Hitting the return key inside the input field (both "keywords" and "tags") submits the search form, taking the user to Special:Search

Screen Shot 2019-03-29 at 8.53.03 PM.png (2×2 px, 773 KB)

✅ AC22: Clicking the submit button (search icon) submits the search form, taking the user to Special:Search

Screen Shot 2019-03-29 at 8.53.03 PM.png (2×2 px, 773 KB)

✅ AC23: The correct results are displayed (note: results for anything inside the properties popover can't really be tested ATM, since adding qualifiers to depicts statements has not yet been enabled)

Thanks, Edward! This one is a little weird process-wise because it's still going through user testing. Depending on user feedback, I'll either close this and we'll make a new ticket reflecting redesign, or confirm that existing behavior is what we're going with and move this to Verify on Production.

As promised, since it looks like we're going to tweak this and go in a different direction, going to close this one and start new ticket(s) when we have made more decisions on what's next.

Thanks, Edward! This one is a little weird process-wise because it's still going through user testing. Depending on user feedback, I'll either close this and we'll make a new ticket reflecting redesign, or confirm that existing behavior is what we're going with and move this to Verify on Production.