mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
ce77018b7c
[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
110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
/* global RestResult, SearchResult */
|
|
/** @module restSearchClient */
|
|
|
|
const fetchJson = require( './fetch.js' );
|
|
const urlGenerator = require( './urlGenerator.js' );
|
|
|
|
/**
|
|
* @typedef {Object} RestResponse
|
|
* @property {RestResult[]} pages
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} SearchResponse
|
|
* @property {string} query
|
|
* @property {SearchResult[]} results
|
|
*/
|
|
|
|
/**
|
|
* Nullish coalescing operator (??) helper
|
|
*
|
|
* @param {any} a
|
|
* @param {any} b
|
|
* @return {any}
|
|
*/
|
|
function nullish( a, b ) {
|
|
return ( a !== null && a !== undefined ) ? a : b;
|
|
}
|
|
|
|
/**
|
|
* @param {MwMap} config
|
|
* @param {string} query
|
|
* @param {RestResponse} restResponse
|
|
* @param {boolean} showDescription
|
|
* @return {SearchResponse}
|
|
*/
|
|
function adaptApiResponse( config, query, restResponse, showDescription ) {
|
|
const urlGeneratorInstance = urlGenerator( config );
|
|
return {
|
|
query,
|
|
results: restResponse.pages.map( ( page ) => {
|
|
const thumbnail = page.thumbnail;
|
|
return {
|
|
id: page.id,
|
|
value: page.id,
|
|
label: page.title,
|
|
key: page.key,
|
|
title: page.title,
|
|
description: showDescription ? page.description : undefined,
|
|
url: urlGeneratorInstance.generateUrl( page ),
|
|
thumbnail: thumbnail ? {
|
|
url: thumbnail.url,
|
|
width: nullish( thumbnail.width, undefined ),
|
|
height: nullish( thumbnail.height, undefined )
|
|
} : undefined
|
|
};
|
|
} )
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @typedef {Object} AbortableSearchFetch
|
|
* @property {Promise<SearchResponse>} fetch
|
|
* @property {Function} abort
|
|
*/
|
|
|
|
/**
|
|
* @callback fetchByTitle
|
|
* @param {string} query The search term.
|
|
* @param {string} domain The base URL for the wiki without protocol. Example: 'sr.wikipedia.org'.
|
|
* @param {number} [limit] Maximum number of results.
|
|
* @return {AbortableSearchFetch}
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} SearchClient
|
|
* @property {fetchByTitle} fetchByTitle
|
|
*/
|
|
|
|
/**
|
|
* @param {MwMap} config
|
|
* @return {SearchClient}
|
|
*/
|
|
function restSearchClient( config ) {
|
|
const customClient = config.get( 'wgVectorSearchClient' );
|
|
return customClient || {
|
|
/**
|
|
* @type {fetchByTitle}
|
|
*/
|
|
fetchByTitle: ( q, domain, limit = 10, showDescription = true ) => {
|
|
const params = { q, limit };
|
|
const url = '//' + domain + config.get( 'wgScriptPath' ) + '/rest.php/v1/search/title?' + $.param( params );
|
|
const result = fetchJson( url, {
|
|
headers: {
|
|
accept: 'application/json'
|
|
}
|
|
} );
|
|
const searchResponsePromise = result.fetch
|
|
.then( ( /** @type {RestResponse} */ res ) => {
|
|
return adaptApiResponse( config, q, res, showDescription );
|
|
} );
|
|
return {
|
|
abort: result.abort,
|
|
fetch: searchResponsePromise
|
|
};
|
|
}
|
|
};
|
|
}
|
|
|
|
module.exports = restSearchClient;
|