NOTE: this epic is a **draft** and should be considered **work-in-progress** until resolution or this notice is removed. **[[ https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker | Please coordinate your contributions prior to making them. ]]**
This #epic captures all tasks for building and deploying a vastly improved, modern search experience using tooling that's just as up-to-date. The work is part of [[ https://www.mediawiki.org/wiki/Skin:Vector | Vector's ]] [[https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements|Desktop Improvements Project]] and the [[ https://www.mediawiki.org/wiki/Frontend_Architecture_Working_Group | Frontend Architecture Working Group's ]] initial [[ https://www.mediawiki.org/wiki/Vue.js | Vue.js ]] iterations pilot project by [[https://www.mediawiki.org/wiki/Readers/Web/Team|the Wikipedia Web team]] and collaborators. We hope that the new search functionality will meet or exceed the expectations of our users and that the new development workflows will be a milestone for improving developer productivity and happiness.
{F31551160 width=768, layout=center}
At a high level, the project objectives are:
- Establish infrastructure essential to the new development approach.
- Create an initial component library, build the new search form, and integrate it into _modern_ Vector.
- Identify or resolve points of friction and document lessons learned.
- Iterate on the above.
- Deploy.
- Answer the question: where do we go from here and how do we get there?
In general, tooling tasks are tagged #vue.js. Tasks prioritized for DIP are tagged #desktop_improvements.
=== Acceptance Criteria
[] Drop down results are suggested and updated on user input
[] Results must include:
- Page name
- Image (if available)
- Wikidata description (if available)
- Access to search results page
[] If a user presses enter or taps the "search pages containing..." result, Special:Search is shown
[] Results should have some level of HTTP caching. E.g., typing "f", "o", "o", <backspace> should show cached results for "fo" instead of having to wait for a new response.
[] Vue.js lessons learned are documented
[] If any shareable components (e.g., buttons) are made as part of this work, they're shareable (or a task is written to make them shareable).
[] Results must include an intelligent loading state (e.g., show placeholder cards when content is loading)
=== Questions
- How do we want to approach this work? A prototype? Start in Nearby? Something else?
- Where will the components live? Vector? A new repo? Somewhere else?
- Do we want to add the random die here?
- Do we want a more button-like presentation for "search pages containing" or should it look like a result as it does in the mock?
- What instrumentation is needed?
- What to do with the existing search widget on Special:Search?
- Do we want to taskify DRYing up other search implementations?
- Do we need an API for DWIM or will this be covered by Core API?
- Can we implement an OAUTH2 approach as part of this work instead of session cookie?
- Are changes to the language switcher necessary as part of this work>
=== References
- [[ https://www.mediawiki.org/wiki/User:JDrewniak_(WMF)/notes/Search_widgets_at_Wikimedia | Jan's cool search notes ]]
- [[ https://docs.google.com/document/d/1eigJWmai9l9hb46jRFm3FUwbrd2WOr2ApNByjMWAGOA/edit | Internal notes and ideas ]]