Commit Graph

43 Commits

Author SHA1 Message Date
Roan Kattouw 5693594bd1 Remove $wgVectorSearchHost, replace with $wgVectorSearchApiUrl
This allows the URL to the other wiki's rest.php to be configured
exactly, rather than assuming that it has the same wgScriptPath as the
current wiki. This is necessary to make this feature work on PatchDemo,
where wgScriptPath looks like '/123abc456/w'.

$wgVectorSearchHost is removed, since nothing uses it except PatchDemo
(where it's broken) and development setups.

Bug: T319494
Change-Id: Ife042f4f683d366a31a642723746d4aa80774c03
2022-10-07 00:57:58 +00:00
Lucas Werkmeister 86c9693693 search: Reduce skins.vector.search module size
Change I765d3bbf89 pushes the module over the configured maximum allowed
size (3 KiB, see bundlesize.config.json); shave off some bytes elsewhere
to bring it below the limit again. IMHO all of these changes should be
acceptable:

* arrow functions are already used elsewhere in this module;
* using the mw.config.get() fallback argument is normal (it slightly
  changes behavior, but I don’t think explicitly setting the search
  client or URL generator to a falsy value and expecting to get the
  default behavior should be considered supported);
* not quoting [name="search"] matches [name=title] immediately above;
* using forEach() with a function reference is still readable (initApp()
  is now called with extra arguments, but that doesn’t matter).

Change-Id: I45dda26cb59279d91804b0c2bbf12174fa78ee12
2022-09-30 19:05:03 +02:00
Anne Tomasevich 8e04c79dba Remove dependency on `.cdx-typeahead-search--active` class
This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.

Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e
2022-09-01 16:42:11 -04:00
bwang 659a5244ac Handle pages without ids in typeahead search
Bug: T313658
Change-Id: I6cba07e5e49d0593280017590dfd7cadb825095a
2022-08-29 11:09:28 -05:00
Roan Kattouw 21b9dda2a2 search: Mark App.vue as being compatible with Vue 3
This doesn't change any behavior, it just suppresses a compatibility
warning and ensures that future changes to this file won't introduce
code that relies on Vue 2 compatibility features.

Change-Id: Id15af7d5d5035f59dc8f402f00d8f7f0d73a77f7
2022-07-19 16:23:06 -07:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar

[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
  accordingly
- Remove dependence on WVUI and use Codex instead, via the special
  `@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
  takes in props related to the search client or fetch start/end
  instrumentation. Instead, directly use the restSearchClient
  and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
  code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
  included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
  searchBox styling to prevent jankiness when the searchBox is replaced
  with the Codex TypeaheadSearch component

The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.

Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
2022-07-18 12:54:47 -07:00
Ed Sanders bf494b89fd build: Update eslint-config-wikimedia to 0.22.1
Change-Id: I25e0cf131c7d2ea53d362f4836a451b68cd31366
2022-05-17 23:40:46 +01:00
Jon Robson c73e551d49 Pass script path to URL generator
Bug: T288686
Change-Id: I4d4d27de2d52f3486e01c8c70bda1b9c03178a24
2022-03-23 10:37:39 -07:00
Jdlrobson f7a859bac5 Revert "build: Update eslint-config-wikimedia to 0.22.1"
This reverts commit b72c648d21.

Reason for revert: Causes an issue with the search
(See https://phabricator.wikimedia.org/F35009362)

Change-Id: I09f7e5c9eab677bfd5a92cf2d8389d20a2d6e87a
2022-03-16 23:40:42 +00:00
Ed Sanders b72c648d21 build: Update eslint-config-wikimedia to 0.22.1
Change-Id: If632697f7c3bb3fad6668d791d9408f7b7a3590b
2022-03-16 15:42:07 +00:00
bwang a560fb814a Add fetch tests from WVUI
Bug: T288686
Change-Id: Ifeb2e355482d3d5920c2535c89193cc4f36a13c9
2022-02-15 14:00:40 -06:00
bwang 3e92800bd6 Move REST search client out of WVUI into Vector
Bug: T288686
Depends-on: I4afc8c38dc9c51d55b46b766a1417b1266963482
Change-Id: Iac6023bb6edca5c8dddc3bfd362db727b2534946
2022-02-10 10:17:10 -06:00
Jon Robson 0c2981d772 Limit WVUI search to ES6 browsers
Rather than test for fetch, limit the code to ES6 browsers.

Depends-On: I96a03796628a74ace93579d45a582711400c09c1
Change-Id: I4ca10182491118e61e155f99c713d4cb1b4fc7f0
2022-02-09 22:10:11 +00:00
Nicholas Ray 76eb7caa2f Update typescript to latest (v4.5.5)
Vector's tsc version is currently reporting errors that the latest
typescript version doesn't report and vice versa. Upgrade to the latest
version to avoid these discrepancies.

Additionally:

Fix tsc errors that are now reported by updated version

Bug: T297614
Change-Id: I0eb67bcc1a5ce214fcf2d6f6433a5de3a845b6a6
2022-01-24 16:35:45 -07:00
Nicholas Ray 3028a4f9d8 Refactor search component expand behavior and add auto-expand-width prop to search component
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.

Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.

Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
2022-01-04 15:14:49 -07:00
jdlrobson bb0b3373c7 Mount search to parent node of search form
Follow up to 5dee570cb2.

It seems the mount works slightly different in that it creates a div,
appends by the App element to the element you give it, after
clearing all it's child nodes.

The previous behaviour was that the old element was /replaced/
by the App element.

Bug: T296889
Change-Id: Iee7493c032f4de5389207bba288a1a70e4cd14f3
2021-12-06 22:42:31 +00:00
jenkins-bot 4982868628 Merge "search: Prepare for Vue 3 migration" 2021-11-13 00:09:18 +00:00
bwang b196d68326 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: I8fb7761e60be330e58cd017872318fe3675c0be1
Change-Id: I9c946f85c3e4a603c362c3ea4b8016c585cdd212
2021-11-12 10:47:55 -06:00
Roan Kattouw 5dee570cb2 search: Prepare for Vue 3 migration
Port the initialization code for the Vue search to use Vue.createMwApp()
instead of new Vue( ... ). The former mimicks Vue 3's API for mounting
components.

Without this change, this code breaks in Vue 3 (even in compatibility
mode) because the compat support for new Vue(...) is imperfect. By the
time renderFn is called, the searchForm container has already been
emptied by Vue's internal mounting code.

Instead, inspect searchForm and generate the prop list before mounting,
then pass the props to createMwApp() and mount the component.

Bug: T294476
Depends-On: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23
Change-Id: I5b6e66051d97e75f8f03b8258894daba22525797
2021-11-05 15:53:34 -07:00
jenkins-bot 041496585b Merge "Revert "Use searchFooterText slot in typeahead search component"" 2021-10-13 15:01:39 +00:00
Bernard Wang 7575cf97a5 Revert "Use searchFooterText slot in typeahead search component"
This reverts commit b7728ddda5.

Reason for revert: Depends on WVUI release

Change-Id: If97551a8609433b569fbc88800a7bf9ffc137587
2021-10-13 14:34:08 +00:00
jenkins-bot 529ccd1a86 Merge "Use searchFooterText slot in typeahead search component" 2021-10-12 21:34:45 +00:00
bwang b7728ddda5 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: Ic92721d5aaf6b833c882a26e9a60b42ab91546fa
Change-Id: I34a184cc8f10172a7ebf67981731c3694d008446
2021-10-06 11:37:26 -05:00
jdlrobson 95e3271e79 Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e

Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
2021-10-05 21:53:09 +00:00
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 93745e4800 Add search to sticky header
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.

In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.

* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).

* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.

* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.

* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
jdlrobson 520dfd2260 Do not hard code Special:Search
Bug: T287540
Change-Id: I234acbaa2cce8f43653507b4298090c50451699d
2021-09-02 20:20:56 +00:00
jdlrobson aebb3fb522 Use the search title if configured
Allow commons to use Special:MediaSearch

Depends-On: 	I37b9d3a2b263f496a283f4bfdc769b7dc880ab06
Bug: T287540
Change-Id: I2a2463d704ef5b2264574cdf186836ba00a639f5
2021-08-05 15:45:41 +00:00
Roan Kattouw 02638ff59d Use the new wvui-search module from MW core
Depends-On: Ifa3abeab2a929e15597fa51b95b4442fe818ef31
Change-Id: I24712ca8e4d9558a17c029a4c59484dc0f5b8fad
2021-06-02 13:40:20 -07:00
jenkins-bot a15fd2eb80 Merge "search: Add option to disable highlighting query" 2021-06-02 19:21:30 +00:00
Sam Smith 2b05a6a203 search: Add option to disable highlighting query
... for the WVUI search autocomplete widget.

The VectorWvuiSearchOptions object is sent to the client whole and
already used as the base props for the app component constructed in the
skins.vector.search RL module. We also define the highlightQuery prop on
that component so that its value can be passed to the WVUI
typeahead-search component.

Bug: T281797
Depends-On: I142810c177b850ecd7015f835bb6630bae00a6ea
Depends-On: Ia5e14fb9d0073a5126a0918f7a94213c671e773a
Change-Id: I551414b111226e690f6a2bc69dabf5edc6fb0a96
2021-06-02 18:51:01 +00:00
Volker E 42216de481 Change search button msg key to `searchbutton`
Bug: T280405
Change-Id: Iea3bf40be029eaa330101b7b9a1bdea191d71416
2021-06-01 15:48:09 -07:00
Sam Smith 7f780961a6 search: Wire up submit event handler
Bug: T274869
Change-Id: I5fab22564fa2fe140858cc214aac017d7bd6c68e
2021-05-13 15:29:18 +01: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
Roan Kattouw 402b01e0ca search: Prevent double-escaping of messages passed to typeahead-search
The parameters passed to the typeahead-search Vue component don't need
to be escaped, they're already escaped by the Vue implementation. Use
.text() instead of .escaped() for the i18n messages passed to this
component, to prevent them from being escaped twice.

Change-Id: I5dcf442f6af181a99123bf7426743af01b097729
2021-04-29 11:34:48 -07:00
Sam Smith 9914d813d6 [search] Don't destroy #p-search element
The #p-search element is present in at least the Vector, Vector V2,
Timeless, and Monobook skins. This is because the HTML for the element
is generated in MediaWiki Core. At the very least, the
SearchSatisfaction instrument relies on the element always being
present.

Update the skins.vector.search module to simplify the App component
template so that it doesn't render a div#p-search element and mount that
component on the #searchform element instead.

Bug: T274869
Change-Id: Ifde679b62484fda7661fded2d978b78adac9f5da
2021-04-21 14:01:56 +01:00
jdlrobson 289f1d48f5 Gadgets can change the search API
```
mw.config.set('wgVectorSearchClient', {

   fetchByTitle: function( query, domain, limit ) {
      var xhr = fetch('http://' + domain + '/w/rest.php/v1/search/title?q=banana')
      .then(function (resp) {
          return resp.json();
      }).then(function (json) {
         return {
             results: json.pages
         }
      });
      return {
         fetch: xhr,
         abort: function() {}
      }
   }
})
```

This should be the absolute minimum to allow API clients to configure
the search. This should be considered an interim solution to buy us time to work out a more
elegant way to do this e.g. do this in the API itself…

Bug: T262566
Change-Id: Iac6f2551bed911980064dcb023193f800df0934f
2020-12-23 12:16:29 +00:00
jenkins-bot a9b47f57fb Merge "Development: Allow us to test search with different API hosts" 2020-12-09 00:14:43 +00:00
Nicholas Ray 3aaedcfe3c [search] Add Vue search performance instrumentation
This is almost identical to the instrumentation currently used in
production for mediawiki.searchSuggest -- the only differences being in
the nomenclature of variables, etc.

As part of comparing Vue search with legacy search, we need to track how
long it takes a keypress to load and render search results for Vue
search. This will only be used only in synthetic testing at this time
(Real user monitoring (RUM) is not in scope for this ticket).

To test locally, first enter characters in input. Then to see the
metrics recorded:

```
// View all marks
performance.getEntriesByType('mark');

// View all measures
performance.getEntriesByType('measure');
```

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

Measures:

* mwVectorVueSearchLoadStartToFirstRender: Measures the time it takes
from the start of loading the search module to the first render of results.

* mwVectorVueSearchQueryToRender: Measures the time it takes from
the start of the fetch to the render of search results.

Bug: T251544
Change-Id: I39200648a3a0a4079a132134d142ad8997c8962a
2020-12-08 23:41:28 +00:00
Sam Smith aa10668e6d [search] Instrument Vue.js-based search widget
Add event listeners and associated helpers to emit SearchSatisfaction
events via the `mediawiki.searchSuggest` protocol.

Bug: T257698
Change-Id: Ica040cd18d6c4bf8a1b1f607bb4647c7e8eb7108
2020-12-08 23:41:19 +00: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
Nicholas Ray e0c47dc462 Add Wvui Config to show/hide thumbnails and descriptions
Uses ResourceLoader's virtual config feature to get the config and pass
it down to Wvui's typeahead search component.

Disclaimer: I'm a typescript noob and am not sure if the
config.json.d.ts is correct although it seems to make tsc happy.

Bug: T260167
Change-Id: I2eced14c7df3b795b4de0e5149c2ca9fd598c7be
2020-12-08 13:28:42 -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