From a5c52e48b730ed0d13fa2d1be666d97f1accfb1b Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 20 May 2022 19:10:36 -0400
Subject: [PATCH] feat(core): indicate when search results are from redirects

For REST API, search results will now indicate if they are from redirects.
The current implementation is that it will always show up, the logic to
trim redundant info will come later

Related: T303013
---
 .../skins.citizen.search/gateway/mwRestApi.js |  6 +++++
 .../skins.citizen.search.less                 | 15 +++++++++---
 resources/skins.citizen.search/typeahead.js   | 24 +++++++++++++++----
 skin.json                                     |  3 ++-
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/resources/skins.citizen.search/gateway/mwRestApi.js b/resources/skins.citizen.search/gateway/mwRestApi.js
index 6849dd47..d83d60b6 100644
--- a/resources/skins.citizen.search/gateway/mwRestApi.js
+++ b/resources/skins.citizen.search/gateway/mwRestApi.js
@@ -30,6 +30,12 @@ function convertDataToResults( data ) {
 			title: data[ i ].title,
 			description: data[ i ].description
 		};
+		// Redirect title
+		// Since 1.38
+		if ( data[ i ].matched_title ) {
+			results[ i ].matchedTitle = data[ i ].matched_title;
+		}
+
 		if ( data[ i ].thumbnail && data[ i ].thumbnail.url ) {
 			results[ i ].thumbnail = data[ i ].thumbnail.url;
 		}
diff --git a/resources/skins.citizen.search/skins.citizen.search.less b/resources/skins.citizen.search/skins.citizen.search.less
index 2b8fc36c..12024637 100644
--- a/resources/skins.citizen.search/skins.citizen.search.less
+++ b/resources/skins.citizen.search/skins.citizen.search.less
@@ -38,12 +38,21 @@
 		}
 
 		&__title {
+			display: flex;
+			align-items: center;
 			color: var( --color-base--emphasized );
 			font-weight: 700;
+			gap: 0.25rem;
+		}
 
-			&__highlight {
-				color: var( --color-base--subtle );
-			}
+		&__highlight {
+			color: var( --color-base--subtle );
+			font-weight: 500;
+		}
+
+		&__redirect {
+			color: var( --color-base );
+			font-size: 0.8125rem;
 		}
 
 		&__description {
diff --git a/resources/skins.citizen.search/typeahead.js b/resources/skins.citizen.search/typeahead.js
index 6fb1d882..55981899 100644
--- a/resources/skins.citizen.search/typeahead.js
+++ b/resources/skins.citizen.search/typeahead.js
@@ -145,18 +145,24 @@ function clearSuggestions() {
  */
 function getSuggestions( searchQuery ) {
 	const renderSuggestions = ( results ) => {
-		const prefix = 'citizen-typeahead-suggestion',
+		const
+			prefix = 'citizen-typeahead-suggestion',
 			template = document.getElementById( prefix + '-template' ),
 			fragment = document.createDocumentFragment(),
 			suggestionLinkPrefix = config.wgScriptPath + '/index.php?title=Special:Search&search=',
 			sanitizedSearchQuery = mw.html.escape( mw.util.escapeRegExp( searchQuery ) ),
 			regex = new RegExp( sanitizedSearchQuery, 'i' );
 
+		const highlightTitle = ( text ) => {
+			return text.replace( regex, '<span class="' + prefix + '__highlight">$&</span>' );
+		};
+
 		// 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?
 		results.forEach( ( result ) => {
-			const suggestion = template.content.cloneNode( true ),
+			const
+				suggestion = template.content.cloneNode( true ),
 				suggestionLink = suggestion.querySelector( '.' + prefix ),
 				suggestionThumbnail = suggestion.querySelector( '.' + prefix + '__thumbnail img' ),
 				suggestionTitle = suggestion.querySelector( '.' + prefix + '__title' ),
@@ -170,8 +176,18 @@ function getSuggestions( searchQuery ) {
 				suggestionThumbnail.setAttribute( 'src', result.thumbnail );
 			}
 
-			// Highlight title
-			suggestionTitle.innerHTML = result.title.replace( regex, '<span class="' + prefix + '__title__highlight">$&</span>' );
+			// Result is a redirect
+			// Show the redirect title and highlight it
+			if ( result.matchedTitle ) {
+				suggestionTitle.innerHTML = result.title +
+					'<span class="' + prefix + '__redirect">' +
+					mw.message( 'search-redirect', highlightTitle( result.matchedTitle ) ).plain() +
+					'</span>';
+			} else {
+				// Highlight title
+				suggestionTitle.innerHTML = highlightTitle( result.title );
+			}
+
 			suggestionDescription.textContent = result.description;
 
 			fragment.append( suggestion );
diff --git a/skin.json b/skin.json
index 14886847..58158258 100644
--- a/skin.json
+++ b/skin.json
@@ -231,7 +231,8 @@
 			],
 			"messages": [
 				"citizen-search-fulltext",
-				"citizen-search-fulltext-empty"
+				"citizen-search-fulltext-empty",
+				"search-redirect"
 			],
 			"targets": [
 				"desktop",