Page MenuHomePhabricator

Integrate wvui-search-form into Vector
Closed, ResolvedPublic8 Estimated Story Points

Description

T260065 provided an initial integration of WVUI into Vector with the component available at the time, wvui-input. The complete search component is nearing completion in T256041 and must be reintegrated. The final mocks show a complete search form, not just an input and dropdown.

This integration faces many of the same challenges identified in T260065:

  • The server-rendered HTML is generated with PHP, not Vue.js. Client hydration is very delicate and expects an exact version of the client HTML to be provided in the server-side render.
  • The searchSatisfaction client instrumentation loads on every pageview and alters the DOM whenever the form is submitted.
  • Per T249306, the search experience does not load until the user focus on the search form which means the user is likely to be actively typing their query when dependency loading completes. In other words, focus state, selection state, and input value must be preserved. If the DOM changes, the CSS transition styles cause the focus to flicker.
  • Per T254695, we want the transition to be seamless and perceived as prompt.
  • Other JavaScript, such as UniversalLanguageSelector's Input Methods (also called "input tools") load by default on some wiki (on user input focus!) and bind to the inputs. Another example is the DWIM gadget which is a default on hewiki.
  • Input value and focus states must be persisted on hydration.
  • Search input and results are Vue.js powered. The input has a submit button and the results are generated on the fly. The structure of the input itself differs from Vector's SSR and requires multiple elements.
  • The styling of the component before (SSR) and after client hydration (JavaScript) must be correct:

This is how the search input currently looks like before the wvui component is lazy-loaded:

But this is how the wvui component currently looks like:

In order to make the transition from old to WVUI search as seamless as possible, we will need to reconcile the styling differences (e.g. magnifying glass needs to be in same location in both, input box should be same size, etc.).

The implementation provided in T256041 can be modified as wanted but the expected that the final implementation in Vector will at least directly include either the whole search form, wvui-search-form (the input, dropdown, button and hidden form elements in a single component), or a composition of the pieces wanted including wvui-typeahead-search (the input and dropdown in a single component) and wvui-button depending on any difficulties encountered in integration.

Acceptance criteria

  • Fallback component is looking exactly the same to hydrated component.
  • The server rendered HTML is updated to the new client HTML. This will likely require splitting the Legacy and Latest Mustache templates. This is probably a good distinct patch to write if the approach makes sense.
  • The state of the SSR form is passed to the client rendered form. This includes the button label and input field value. The focus state should be retained automatically by the Vue.js renderer if client hydration is performed without error.
  • The needed WVUI client styles for the search form are made available for the server rendered experience. These styles are currently bundled into skins.vector.search.css but skin.json needs to be revised to actually include them on SSR. All WVUI styles should be well isolated by classname so there shouldn't be a conflict. This is probably another distinct patch if the approach makes sense.
  • Legacy mode only needs to support Legacy search but Latest mode must support Legacy and Latest (Vue.js) search so as to allow for rollback as needed.
  • searchSatisfaction client instrumentation doesn't explode.
  • The pre-library loading indicator (T254695) functionality is preserved.

Event Timeline

ovasileva set the point value for this task to 8.Oct 7 2020, 4:44 PM
ovasileva added a subscriber: ovasileva.

Estimating as XL, but will come back when we have more info on the state of performance review

Points that were raised during today's "WVUI-Vector Integration Syncaroo" meeting:

  • Could we use vue-ssr to render the component into a Mustache partial that Vector can include?
  • How are we going to get just the styles that we need into Vector in order to style the SSR'd form?

Quoting @Jdrewniak:

Getting the CSS just right - How do we get the WVUI styles into Vector? Copy pasta? In App.vue, we require the CSS, bundle it with webpack, write it to disk, tell resourceloader to load it on pageload.

Change 642037 had a related patch set uploaded (by Jdlrobson; owner: Jdrewniak):
[mediawiki/skins/Vector@master] [POC] Using WVUI via ResourceLoader

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

Change 642916 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] [POC] Isomorphic Vue.js rendering via Mustache templates.

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

Change 642916 abandoned by Jdrewniak:
[mediawiki/skins/Vector@master] [POC] Isomorphic Vue.js rendering via Mustache templates.

Reason:
As a proof of concept, building Mustache templates via vue-server-renderer works, but it's a very round-about way of solving this problem and has a high maintenance burden. It technically introduces a build step. So we're going to work around this issue for the Vue case-study by manually managing the input focus() instead.

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

Change 643712 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Update Vector search icon

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

Change 643726 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Add WVUI as a vendor library in Vector

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

Change 643712 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Update Vector search icon

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

Change 643726 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Add WVUI as a vendor library in Vector

Reason:
See: https://gerrit.wikimedia.org/r/c/mediawiki/core/ /641052

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

Change 642037 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Integrate WVUI search into Vector

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

Change 647229 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Improve visual similarities between Vector and WVUI search forms.

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

Change 647229 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Improve visual similarities between Vector and WVUI search forms.

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

Per standup, we'll do QA in its own separate task. I've captured the remaining core work in the to be estimated/scheduled T271353 .

nray reassigned this task from nray to Jdrewniak.
nray added a subscriber: nray.