feat(core): hide redirect message in search results when not needed

If either the title or redirect title is a substring of the other,
hide the redirect.

Related: T303013
This commit is contained in:
alistair3149 2022-05-20 19:48:07 -04:00
parent a5c52e48b7
commit 726a348369
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 18 additions and 2 deletions

View file

@ -42,7 +42,6 @@
align-items: center;
color: var( --color-base--emphasized );
font-weight: 700;
gap: 0.25rem;
}
&__highlight {
@ -51,6 +50,7 @@
}
&__redirect {
margin-left: 0.25rem;
color: var( --color-base );
font-size: 0.8125rem;
}

View file

@ -157,6 +157,22 @@ function getSuggestions( searchQuery ) {
return text.replace( regex, '<span class="' + prefix + '__highlight">$&</span>' );
};
// Check if the redirect is useful
// See T303013
const isRedirectUseful = ( title, matchedTitle ) => {
// Change to lowercase then remove space and dashes
const cleanup = ( text ) => {
return text.toLowerCase().replace( /-|\s/g, '' );
};
title = cleanup( title );
matchedTitle = cleanup( matchedTitle );
// eslint thinks it is an array
// eslint-disable-next-line no-restricted-syntax
return !( title.includes( matchedTitle ) || matchedTitle.includes( title ) );
};
// Maybe there is a cleaner way?
// Maybe there is a faster way compared to multiple querySelector?
// Should I just use regular for loop for faster performance?
@ -178,7 +194,7 @@ function getSuggestions( searchQuery ) {
// Result is a redirect
// Show the redirect title and highlight it
if ( result.matchedTitle ) {
if ( result.matchedTitle && isRedirectUseful( result.title, result.matchedTitle ) ) {
suggestionTitle.innerHTML = result.title +
'<span class="' + prefix + '__redirect">' +
mw.message( 'search-redirect', highlightTitle( result.matchedTitle ) ).plain() +