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

includes/Hooks.php

@@ -39,6 +39,19 @@ class Hooks {
 		];
 	}
 
+	/**
+	 * Passes config variables to skins.vector.search ResourceLoader module.
+	 * @param ResourceLoaderContext $context
+	 * @param Config $config
+	 * @return array
+	 */
+	public static function getVectorWvuiSearchResourceLoaderConfig(
+		ResourceLoaderContext $context,
+		Config $config
+	) {
+		return $config->get( 'VectorWvuiSearchOptions' );
+	}
+
 	/**
 	 * BeforePageDisplayMobile hook handler
 	 *
@@ -354,7 +367,11 @@ class Hooks {
 				],
 				"packageFiles" => [
 					"resources/skins.vector.search/skins.vector.search.js",
-					"resources/skins.vector.search/App.vue"
+					"resources/skins.vector.search/App.vue",
+					[
+						"name" => "resources/skins.vector.search/config.json",
+						"callback" => "Vector\\Hooks::getVectorWvuiSearchResourceLoaderConfig"
+					]
 				],
 				"dependencies" => [
 					"wvui"

resources/skins.vector.search/App.vue

@@ -14,6 +14,8 @@
 			:button-label="$i18n( 'search' ).escaped()"
 			:form-action="action"
 			:search-language="language"
+			:show-thumbnail="showThumbnail"
+			:show-description="showDescription"
 		>
 			<input type="hidden"
 				name="title"
@@ -80,6 +82,14 @@ module.exports = {
 		 */
 		searchQuery: {
 			type: String
+		},
+		showThumbnail: {
+			type: Boolean,
+			default: true
+		},
+		showDescription: {
+			type: Boolean,
+			default: true
 		}
 	}
 };

resources/skins.vector.search/config.json.d.ts

@@ -0,0 +1,3 @@
+// Placeholder for ResourceLoader Virutal Config which is populated from the server.
+// See `VectorWvuiSearchOptions` config in Vector/skin.json for the options that are included.
+export {};

resources/skins.vector.search/skins.vector.search.js

@@ -1,6 +1,7 @@
 var
 	Vue = require( 'vue' ).default || require( 'vue' ),
-	App = require( './App.vue' );
+	App = require( './App.vue' ),
+	config = require( './config.json' );
 
 /**
  * @param {HTMLElement} searchForm
@@ -18,14 +19,17 @@ function initApp( searchForm, search ) {
 		 */
 		render: function ( createElement ) {
 			return createElement( App, {
-				props: {
+				props: $.extend( {
 					autofocusInput: search === document.activeElement,
 					action: searchForm.getAttribute( 'action' ),
 					searchAccessKey: search.getAttribute( 'accessKey' ),
 					searchTitle: search.getAttribute( 'title' ),
 					searchPlaceholder: search.getAttribute( 'placeholder' ),
 					searchQuery: search.value
-				}
+				},
+				// Pass additional config from server.
+				config
+				)
 			} );
 		}
 	} );

skin.json

@@ -198,6 +198,12 @@
 		"VectorUseCoreSearch": {
 			"value": true
 		},
+		"VectorWvuiSearchOptions": {
+			"value": {
+				"showThumbnail": true,
+				"showDescription": true
+			}
+		},
 		"VectorDefaultSidebarVisibleForAuthorisedUser": {
 			"value": true
 		},