Commit Graph

8 Commits

Author SHA1 Message Date
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
Nicholas Ray 8eba1da250 Silence eslint compat/compat for search performance instrumentation
Eslint is throwing compat warnings on every commit in Vector. This
commit silences those warnings.

Change-Id: I0e914c6179745415e916fadd382d86baa72e3e63
2021-05-05 14:37:35 -06:00
Sam Smith 746315bb5b Add search widget treatment A/B test
If the VectorSearchTreatmentABTest config variable is truthy and the
user is loged in, then pick the Core treatment (defined in the
mediawiki.searchSuggest RL module) or Vector's Vue.js-based treatment of
the search widget based on their user ID. If not, then fall back to
picking the treatment based on VectorUseWvuiSearch.

Supporting changes:

* Update initSearchLoader() in skins.vector.js/searchLoader.js to check
  whether the body.skin-vector-search-vue exists

* Remove wgVectorUseWvuiSearch from the skins.vector.js RL module's config

* Update the performance-related metrics collection to check which
  module is being loaded rather that use the above

Bug: T261647
Change-Id: Idc978392f5db14f0ae2b06ade0175fe534f4ae70
2021-01-26 12:02:01 +00:00
Nicholas Ray 53f49c5c64 Rename `wgVectorUseCoreSearch` to `wgVectorUseWvuiSearch`
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.

Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
2021-01-22 16:25:46 -07:00
jdlrobson dce24c9784 Development: Allow us to test search with different API hosts
By default the API uses location.host as the host, however during
development it is useful to test against production wikis

For example to test against English Wikipedia:
$wgVectorSearchHost = 'en.wikipedia.org';

Note: Links when clicked will not take the user to the target page, and
instead will take the user to the search results page with a link to
create the page.

The following config can be used to workaround that page:
$wgDisableTextSearch = true;
$wgSearchForwardUrl = "/w/index.php?title=$1";

Change-Id: I5fbac7f54844d7a9d6976007bc0d0ff9938b9f2b
2020-12-08 15:22:45 -08:00
Jan Drewniak bd83398659 Integrate WVUI search into Vector
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.

This module creates a new Vue app using the WVUI
search widget for the new search experience.

The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.

In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.

Vue is also added as a dev-dependency to help with
type-checking.

Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js

Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
2020-12-08 13:27:12 -08:00
Nicholas Ray 8cf278d305 Add client-side performance metrics for searchLoader
As part of comparing Vue search with legacy search, we need to track how
long it takes to lazy load the wvui library. A similar metric was added
to measuring the mediawiki.searchSuggest module in
I0fa6b8904bd43c87a68e9161f00d686a0e588966.

This commit adds the following metrics which will only be used in our
synthetic tests. We are not doing RUM tests at this time.

To test locally, add the following to your LocalSettings.php and append
the query param `useskinversion=2` e.g.
(http://localhost:8181/wiki/Test?useskinversion=2):

```
$wgVectorUseCoreSearch = false;
```

Marks:

* mwVectorVueSearchLoadStart: Marks the start of loading the search
module.

* mwVectorVueSearchLoadEnd: Marks the end of loading the search
module.

Measures:

* mwVectorVueSearchLoadStartToLoadEnd: Measures the time it takes to
load the search module.

Bug: T251544
Change-Id: I14e44b45a66213821d69cd22395fedbae747da88
2020-10-09 13:26:28 -06:00
Jan Drewniak 1dad545f63 Adds loading indicator for new search module
Provides a loading indicator to show while the new Vue.js based
search widget loads. Given that the new widget will pull down the
entire Vue.js runtime, it's likely that there will be a delay
before the search suggestions appear. This loader is meant to
improve the perceived loading experience of the new widget.

Adds:
- New searchLoader.js file containing loading behaviour.
  - This overrides the code searchSuggest loading behaviour.
- New SearchBoxLoader.less file containing the loader styles.
- i18n message: 'vector-search-loader'.
- The Event type to jsdoc.json

Bug: T254695
Change-Id: I6b5f0a60018954e10b9e80792030b67b2ec33e5a
2020-09-08 13:59:41 +00:00