From b7728ddda5f1f9912f9c0c7a5c7d3da2a02d62bc Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Thu, 30 Sep 2021 15:52:16 -0500
Subject: [PATCH] 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
---
 i18n/en.json                          |  1 +
 i18n/qqq.json                         |  1 +
 resources/skins.vector.search/App.vue | 22 +++++++++++++---------
 skin.json                             |  2 +-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index 32d16cacc..b19b35103 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -30,6 +30,7 @@
 	"vector-jumptocontent": "Jump to content",
 	"vector-more-actions": "More",
 	"vector-search-loader": "Loading search suggestions",
+	"vector-searchsuggest-containing": "Search for pages containing <strong class=\"wvui-typeahead-search__suggestions__footer__text__query\">$1</strong>",
 	"vector-intro-page": "Help:Introduction",
 	"vector-anon-user-menu-pages": "Pages for logged out editors",
 	"vector-anon-user-menu-pages-learn": "learn more",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 08d07af1d..ccd233ff9 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -39,6 +39,7 @@
 	"vector-view-viewsource": "Tab label in the Vector skin.\n{{Identical|View source}}",
 	"vector-jumptonavigation": "Accessibility link for jumping to the navigation links. Visually hidden by default.\n\nSee also\n* {{msg-mw|Navigation}}",
 	"vector-jumptosearch": "Accessibility link for jumping to the site search. Visually hidden by default.\n\nSee also\n* {{msg-mw|Search}}",
+	"vector-searchsuggest-containing": "Label used in the special item of the search suggestions list which gives the user an option to perform a full text search for the term. Used in the WVUI typeahead search component.",
 	"vector-jumptocontent": "Accessibility link for jumping to the content and skipping the navigation. Visually hidden by default.",
 	"vector-more-actions": "Label in the Vector skin's menu for the less-important or rarer actions which are not shown as tabs (like moving the page, or for sysops deleting or protecting the page), as well as (for users with a narrow viewing window in their browser) the less-important tab actions which the user's browser is unable to fit in. {{Identical|More}}",
 	"vector-search-loader": "Text to display below search input while the search suggestion module is loading",
diff --git a/resources/skins.vector.search/App.vue b/resources/skins.vector.search/App.vue
index 61301febe..cbd3af2da 100644
--- a/resources/skins.vector.search/App.vue
+++ b/resources/skins.vector.search/App.vue
@@ -4,7 +4,6 @@
 		ref="searchForm"
 		:client="getClient"
 		:domain="domain"
-		:footer-search-text="$i18n( 'searchsuggest-containing' ).text()"
 		:suggestions-label="$i18n( 'searchresults' ).text()"
 		:accesskey="searchAccessKey"
 		:title="searchTitle"
@@ -23,14 +22,19 @@
 		@suggestion-click="instrumentation.onSuggestionClick"
 		@submit="onSubmit"
 	>
-		<input type="hidden"
-			name="title"
-			:value="searchPageTitle"
-		>
-		<input type="hidden"
-			name="wprov"
-			:value="wprov"
-		>
+		<template #default>
+			<input type="hidden"
+				name="title"
+				:value="searchPageTitle"
+			>
+			<input type="hidden"
+				name="wprov"
+				:value="wprov"
+			>
+		</template>
+		<template #search-footer-text="{ searchQuery }">
+			<span v-i18n-html:vector-searchsuggest-containing="[ searchQuery ]"></span>
+		</template>
 	</wvui-typeahead-search>
 </template>
 
diff --git a/skin.json b/skin.json
index 32c676d3b..1db0fc2f6 100644
--- a/skin.json
+++ b/skin.json
@@ -111,7 +111,7 @@
 			"messages": [
 				"searchbutton",
 				"searchresults",
-				"searchsuggest-containing"
+				"vector-searchsuggest-containing"
 			]
 		},
 		"skins.vector.styles.legacy": {