Revert "build: Update eslint-config-wikimedia to 0.22.1"

This reverts commit b72c648d21.

Reason for revert: Causes an issue with the search
(See https://phabricator.wikimedia.org/F35009362)

Change-Id: I09f7e5c9eab677bfd5a92cf2d8389d20a2d6e87a

package.json

@@ -33,7 +33,7 @@
 		"@wikimedia/types-wikimedia": "0.2.0",
 		"@wikimedia/wvui": "0.3.5",
 		"babel-loader": "8.0.6",
-		"eslint-config-wikimedia": "0.22.1",
+		"eslint-config-wikimedia": "0.20.0",
 		"grunt-banana-checker": "0.9.0",
 		"jest": "26.4.2",
 		"jest-fetch-mock": "3.0.3",

resources/skins.vector.es6/main.js

@@ -35,7 +35,6 @@ const main = () => {
 		// @ts-ignore
 		testGroup = stickyConfig ? stickyConfig.group : FEATURE_TEST_GROUP,
 		targetElement = stickyHeader.header,
-		// @ts-ignore
 		targetIntersection = stickyHeader.stickyIntersection,
 		isStickyHeaderAllowed = stickyHeader.isStickyHeaderAllowed() &&
 			testGroup !== 'unsampled' && AB.isInTestGroup( testGroup, FEATURE_TEST_GROUP );

resources/skins.vector.es6/stickyHeader.js

@@ -434,11 +434,11 @@ function isAllowedAction( action ) {
 }
 
 const
-	pageStickyIntersection = document.getElementById(
+	stickyIntersection = document.getElementById(
 		FIRST_HEADING_ID
 	),
-	pageUserMenu = document.getElementById( USER_MENU_ID ),
-	pageUserMenuStickyContainer = document.getElementsByClassName(
+	userMenu = document.getElementById( USER_MENU_ID ),
+	userMenuStickyContainer = document.getElementsByClassName(
 		STICKY_HEADER_USER_MENU_CONTAINER_CLASS
 	)[ 0 ],
 	allowedNamespace = isAllowedNamespace( mw.config.get( 'wgNamespaceNumber' ) ),
@@ -451,9 +451,9 @@ const
  */
 function isStickyHeaderAllowed() {
 	return !!header &&
-		!!pageStickyIntersection &&
-		!!pageUserMenu &&
-		pageUserMenuStickyContainer &&
+		!!stickyIntersection &&
+		!!userMenu &&
+		userMenuStickyContainer &&
 		allowedNamespace &&
 		allowedAction &&
 		'IntersectionObserver' in window;
@@ -463,19 +463,19 @@ function isStickyHeaderAllowed() {
  * @param {IntersectionObserver} observer
  */
 function initStickyHeader( observer ) {
-	if ( !isStickyHeaderAllowed() || !header || !pageUserMenu || !pageStickyIntersection ) {
+	if ( !isStickyHeaderAllowed() || !header || !userMenu || !stickyIntersection ) {
 		return;
 	}
 
 	makeStickyHeaderFunctional(
 		header,
-		pageUserMenu,
-		pageUserMenuStickyContainer,
+		userMenu,
+		userMenuStickyContainer,
 		observer,
-		pageStickyIntersection
+		stickyIntersection
 	);
 	setupSearchIfNeeded( header );
-	addVisualEditorHooks( pageStickyIntersection, observer );
+	addVisualEditorHooks( stickyIntersection, observer );
 
 	// Make sure ULS outside sticky header disables the sticky header behaviour.
 	// @ts-ignore
@@ -505,6 +505,6 @@ module.exports = {
 	initStickyHeader,
 	isStickyHeaderAllowed,
 	header,
-	pageStickyIntersection,
+	stickyIntersection,
 	STICKY_HEADER_EXPERIMENT_NAME
 };

resources/skins.vector.js/searchLoader.js

@@ -153,7 +153,7 @@ function initSearchLoader( document ) {
 	/**
 	 * 1. If we are in a browser that doesn't support ES6 fall back to non-JS version.
 	 * 2. Disable on Wikidata per T281318 until the REST API is ready.
-	 */
+	 **/
 	if ( isWikidata || mw.loader.getState( 'skins.vector.search' ) === null ) {
 		document.body.classList.remove(
 			'skin-vector-search-vue'

resources/skins.vector.search/App.vue

@@ -24,18 +24,16 @@
 		@submit="onSubmit"
 	>
 		<template #default>
-			<input
-				type="hidden"
+			<input type="hidden"
 				name="title"
 				:value="searchPageTitle"
 			>
-			<input
-				type="hidden"
+			<input type="hidden"
 				name="wprov"
 				:value="wprov"
 			>
 		</template>
-		<template #search-footer-text>
+		<template #search-footer-text="{ searchQuery }">
 			<span v-i18n-html:vector-searchsuggest-containing="[ searchQuery ]"></span>
 		</template>
 	</wvui-typeahead-search>
@@ -47,11 +45,36 @@ const wvui = require( 'wvui-search' ),
 	client = require( './restSearchClient.js' ),
 	instrumentation = require( './instrumentation.js' );
 
-// @vue/component
 module.exports = {
 	name: 'App',
-	components: {
-		WvuiTypeaheadSearch: wvui.WvuiTypeaheadSearch
+	components: wvui,
+	mounted() {
+		// access the element associated with the wvui-typeahead-search component
+		// eslint-disable-next-line no-jquery/variable-pattern
+		const wvuiSearchForm = this.$refs.searchForm.$el;
+
+		if ( this.autofocusInput ) {
+			// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
+			// or directive. This can be removed when its does.
+			wvuiSearchForm.querySelector( 'input' ).focus();
+		}
+	},
+	computed: {
+		/**
+		 * Allow wikis eg. Hebrew Wikipedia to replace the default search API client
+		 *
+		 * @return {module:restSearchClient~SearchClient}
+		 */
+		getClient: () => {
+			return client( mw.config );
+		},
+		language: () => {
+			return mw.config.get( 'wgUserLanguage' );
+		},
+		domain: () => {
+			// It might be helpful to allow this to be configurable in future.
+			return mw.config.get( 'wgVectorSearchHost', location.host );
+		}
 	},
 	props: {
 		id: {
@@ -72,38 +95,38 @@ module.exports = {
 		},
 		/** The keyboard shortcut to focus search. */
 		searchAccessKey: {
-			type: String,
-			default: ''
+			type: String
 		},
 		/** The access key informational tip for search. */
 		searchTitle: {
-			type: String,
-			default: ''
+			type: String
 		},
 		/** The ghost text shown when no search query is entered. */
 		searchPlaceholder: {
-			type: String,
-			default: ''
+			type: String
 		},
 		/**
 		 * The search query string taken from the server-side rendered input immediately before
 		 * client render.
 		 */
 		searchQuery: {
-			type: String,
-			default: ''
+			type: String
 		},
 		showThumbnail: {
-			type: Boolean
+			type: Boolean,
+			default: true
 		},
 		showDescription: {
-			type: Boolean
+			type: Boolean,
+			default: true
 		},
 		highlightQuery: {
-			type: Boolean
+			type: Boolean,
+			default: true
 		},
 		autoExpandWidth: {
-			type: Boolean
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -116,23 +139,6 @@ module.exports = {
 			instrumentation: instrumentation.listeners
 		};
 	},
-	computed: {
-		/**
-		 * Allow wikis eg. Hebrew Wikipedia to replace the default search API client
-		 *
-		 * @return {module:restSearchClient~SearchClient}
-		 */
-		getClient: () => {
-			return client( mw.config );
-		},
-		language: () => {
-			return mw.config.get( 'wgUserLanguage' );
-		},
-		domain: () => {
-			// It might be helpful to allow this to be configurable in future.
-			return mw.config.get( 'wgVectorSearchHost', location.host );
-		}
-	},
 	methods: {
 		/**
 		 * @param {SubmitEvent} event
@@ -142,17 +148,6 @@ module.exports = {
 
 			instrumentation.listeners.onSubmit( event );
 		}
-	},
-	mounted() {
-		// access the element associated with the wvui-typeahead-search component
-		// eslint-disable-next-line no-jquery/variable-pattern
-		const wvuiSearchForm = this.$refs.searchForm.$el;
-
-		if ( this.autofocusInput ) {
-			// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
-			// or directive. This can be removed when its does.
-			wvuiSearchForm.querySelector( 'input' ).focus();
-		}
 	}
 };
 </script>

stories/types.js

@@ -25,7 +25,7 @@
  * @property {ResourceLoaderSkinModuleLogos} data-logos as configured,
  *  the return value of ResourceLoaderSkinModule::getAvailableLogos.
  * @property {string} msg-sitetitle alternate text for wordmark
- *  href the url to navigate to on click.
+	href the url to navigate to on click.
  * @property {string} msg-sitesubtitle alternate text for tagline.
  */
 

tests/jest/__snapshots__/App.test.js.snap

@@ -8,10 +8,13 @@ exports[`App renders a typeahead search component 1`] = `
   client="[object Object]"
   domain="localhost"
   formaction=""
+  highlightquery="true"
   id="searchform"
   initialinputvalue=""
   placeholder="Search MediaWiki"
   searchpagetitle="Special:Search"
+  showdescription="true"
+  showthumbnail="true"
   suggestionslabel="searchresults"
   title="search"
   urlgenerator="[object Object]"