Per T248405 we are close to releasing our first feature written using Vue.js, a port of the MachineVision extension.
@AnneT and I both feel that there are a lot of advantages to working this way, including:
- Faster development
- Easier to write tests for UI components
- Cleaner and more readable code (esp. when using Vuex, which allows you to separate UI state and business logic from presentational components); this should make it easier to re-design interface elements where necessary, something that seems relevant as we prototype new features without being 100% sure of where we'll end up
Now that the MachineVision port has been launched, it seems like a good time to return to this project.
In order to replicate the capabilities that currently exist on Special:MediaSearch, it seems like we would need the following set of components:
- Search Input
- Basic "search" Button
- "X" button to clear
- Loading Indicator
- A "Results Grid" that could accommodate different styles (image grid, list for audio/video/categories); each tab would have a different instance of this component
- One or more "Results Item" components (image, video, audio, category, etc)
In addition to the components, we'd need to implement the following features:
- Parse URL params on page load and watch them for changes
- Replace server-generated search UI with client-rendered one (server-side stuff will probably stay in OOUI PHP for now)
- Each tab needs to be able to hang on to its own results as the user moves between. This probably means each ResultsGrid can make its own API requests
- Clear all results in all tabs when the user clicks the "X" button
- Load more results on scroll and when the user returns to a tab that has more results to display. Eventually we probably want to paginate some how like how Google does
- Ensure things continue to work at a basic level with JS disabled (we have this now, so just ensure we don't break it)
Vuex is used to store results, but local state will be used in places where additional data needs to be requested from the API for an individual file (in the upcoming Quickview feature).
Design QA (taken from https://phabricator.wikimedia.org/T256158#6297406)
- We need to make sure we have a hover state that indicates that the search result unit, card, etc. is clickable.
- Can we somehow remove File: and Category: from the names and categories we are showing?
- In the current state, the video grid has about 5 videos per row at that viewport size, Could we try 4 (3?) to allow the filename to not wrap into so many lines so it's easier to read quickly?
Below are updated screenshots of the UI as it currently stands the initial Vue.js patch: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseMediaInfo/+/610918. The UI includes some updated designs for individual result elements, but QuickView will be left for a follow-up patch. Autocomplete and filter tools have been removed for the time being but will be re-introduced in a later patch.