Page MenuHomePhabricator

Build initial version of TypeaheadSearch in Codex
Closed, ResolvedPublic

Description

As a first step in the process of migrating TypeaheadSearch from WVUI to Codex, we will build a version of TypeaheadSearch that matches the design and UX of the existing WVUI component. Future steps will include moving business logic into Vector (and, eventually, a separate library), implementing design and UX changes for consistency with the design system, and implementing changes to support the Wikidata use case.

Goals for this task
  • Recreate the UI and UX
  • Match current design, noting that in the current Vector implementation, the Vue component will replace and be "hydrated" by the server-rendered version, and we must avoid shifts in layout or style
  • Rename anything too specific, but be mindful of each change as it will affect the migration (e.g. prop names)
  • Use the CdxLookup component for text input and menu behavior
  • Narrow the scope of the TypeaheadSearch component by removing search client, results process, and URL generation code from the component
  • Be mindful of the future extension of this component to serve the Wikidata and other use cases
  • Note what we're removing from the WVUI version that will need to be re-implemented in Vector (and, eventually, a separate library within MediaWiki core)
Existing design and resources
Acceptance criteria
  • UI matches current design and implementation
  • UX matches current implementation
  • CdxTypeaheadSearch uses TextInput and Menu components
  • Variable and component names are MediaWiki-agnostic
  • Simple working demo provided
  • Future work is documented in Phabricator

Event Timeline

Change 756097 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [TypeaheadSearch]: Add initial iteration of TypeaheadSearch

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

@Michael @nray @Jdlrobson I've tagged you on a patch demonstrating a potential implementation of TypeaheadSearch in Codex. My goal here is to gather feedback about the feasibility of the approaches outlined there (please check out the commit message and patch comments for more specifics).

Some things that aren't covered by this patch:

  • Updates to TypeaheadSearch needed to cover the Wikidata use case (handling multiple languages, loading more results)
  • Moving the search client, URL-generation, and results-processing code from WVUI to somewhere else (although I'm keeping a running list of the things we'll need to re-implement in Vector or wherever)
  • I haven't tested this with the server-rendered version of the search bar in Vector, which will need to happen eventually so we can guarantee a seamless transition when the Vue app loads

Also note that the sub-components have been renamed, but the final names of these components are still up for debate.

You can view the component demos and docs for this patch here:

Is there a way to test Codex in mediawiki core (E.g. a gerrit patch that adds codex to mediawiki/core ) to see what the migration to this element would look like ?

Is there a way to test Codex in mediawiki core (E.g. a gerrit patch that adds codex to mediawiki/core ) to see what the migration to this element would look like ?

Yes – this patch (WIP) adds Codex to RL: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/753858
And this extension builds a Codex demo special page: https://gitlab.wikimedia.org/egardner/mediawiki-extensions-vuetest

See also some of the tasks related to: https://phabricator.wikimedia.org/T299956

Once the work on respective patches is further along we could build another sandbox page in the VueTest extension to showcase the Typeahead component working on-wiki in different configurations.

Change 756097 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: Add initial iteration of TypeaheadSearch

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

AnneT updated the task description. (Show Details)