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:
- [[ https://phabricator.wikimedia.org/T249298 | Establish infrastructure essential to the new development approach ]].
- [[ https://phabricator.wikimedia.org/T249299 | Create an initial component library, build the new search form, and integrate it into //latest// Vector ]].
- Identify or resolve points of friction and document lessons learned. The result is that using Vue.js at Wikimedia is either practical or the steps needed to make it practical are identified.
- [[ https://phabricator.wikimedia.org/T249297 | Deploy to production test wikis ]].
- Iterate on the above.
- Deliver a search experience that delights //latest// Vector users.
- [[ https://phabricator.wikimedia.org/T249305 | Answer the question ]]: where do we go from here and how do we get there? This is an important next step for Vue.js toolchain adoption in MediaWiki (see T241180).
The project is currently slated for completion by July 1st, 2020. This date may change as the initial MediaWiki integration iterations were always known to be one of the trickiest parts of framework adoption. (For additional context, simply [[ https://phabricator.wikimedia.org/T241180 | picking a framework ]] took more than 10 people more than six months and the Web team is tiny.) Lastly, the ongoing pandemic continues to put schedules in flux.
---
The work is organized such that most tooling tasks are tagged #vue.js (many //could// additionally be tagged #technical-debt). Prioritized tasks are also tagged #desktop_improvements. Second tier epics are not arranged in proper dependency order to avoid the dependency tree becoming uncomfortably wide. The intended order of execution is something like: [[ https://phabricator.wikimedia.org/T249298 | scaffolding ]], [[ https://phabricator.wikimedia.org/T249299 | build ]], [[ https://phabricator.wikimedia.org/T249297 | deploy ]], iterate, and [[ https://phabricator.wikimedia.org/T249305 | postmortem ]].
---
=== 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 ]]