From 1164f67f4081737ec9dd8174b199f7d521099fc8 Mon Sep 17 00:00:00 2001
From: Thiemo Kreuz <thiemo.kreuz@wikimedia.de>
Date: Wed, 14 Jul 2021 09:31:42 +0200
Subject: [PATCH] Tweaks and cleanups to template parameter search

Notably:
* Include parameter aliases, labels and descriptions in the
  search.
* Don't use a possibly outdated search index, but live data.
* Clear filter when a new checkbox is added.

Bug: T272481
Change-Id: Ie90a803af6178a8bb6de370a0f8e079800d9f8a2
---
 .../dm/models/ve.dm.MWTemplateSpecModel.js    |  4 ++
 ....ui.MWTransclusionOutlineTemplateWidget.js | 57 ++++++++++---------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js b/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js
index 6d16c7237f..bdf5678086 100644
--- a/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js
+++ b/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js
@@ -301,6 +301,8 @@ ve.dm.MWTemplateSpecModel.prototype.getParameterType = function ( name ) {
 };
 
 /**
+ * Warning, this does not return a copy. Don't manipulate the returned array.
+ *
  * @param {string} name Parameter name or alias
  * @return {string[]} Alternate parameter names
  */
@@ -365,6 +367,8 @@ ve.dm.MWTemplateSpecModel.prototype.getParameterDeprecationDescription = functio
  * lifetime of this object, but have been removed from the linked {@see ve.dm.MWTemplateModel} in
  * the meantime.
  *
+ * The returned array is a copy, i.e. it's safe to manipulate.
+ *
  * @return {string[]} Primary parameter names
  */
 ve.dm.MWTemplateSpecModel.prototype.getKnownParameterNames = function () {
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
index 18ca400e17..b54fb2d4ea 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
@@ -25,7 +25,6 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe
 	} );
 
 	var widget = this;
-	this.paramNames = [];
 	var checkboxes = this.templateModel
 		.getAllParametersOrdered()
 		.filter( function ( paramName ) {
@@ -33,7 +32,6 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe
 			return paramName;
 		} )
 		.map( function ( paramName ) {
-			widget.paramNames.push( paramName );
 			return widget.createCheckbox( paramName );
 		} );
 
@@ -101,6 +99,7 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.onAddParameter = function (
 	if ( checkbox ) {
 		checkbox.setSelected( true, true );
 	} else if ( paramName ) {
+		this.searchWidget.setValue( '' );
 		this.parameters.addItems(
 			[ this.createCheckbox( paramName ) ],
 			this.templateModel.getAllParametersOrdered().indexOf( paramName )
@@ -153,35 +152,39 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.onAddParameterButtonClick =
 };
 
 /**
- * Handles a parameter filter change event
+ * Narrows the list of checkboxes down to parameters that match the user's input. The search
+ * algorithm is modelled after {@see ve.ui.MWParameterSearchWidget.buildIndex}. We search the
+ * parameter's primary name, aliases, label, and description. But not e.g. the example value.
  *
- * @param {string} data user input
+ * @param {string} query user input
  */
-ve.ui.MWTransclusionOutlineTemplateWidget.prototype.onFilterChange = function ( data ) {
+ve.ui.MWTransclusionOutlineTemplateWidget.prototype.onFilterChange = function ( query ) {
+	var spec = this.templateModel.getSpec(),
+		checkboxes = this.parameters,
+		nothingFound = true;
 
-	var widget = this;
-	this.infoWidget.toggle( false );
+	query = query.trim().toLowerCase();
 
-	// hide all parameter names
-	this.paramNames.forEach( function ( name ) {
-		var paramCheckbox = widget.parameters.findItemFromData( name );
-		paramCheckbox.toggle( false );
+	// Note: We can't really cache this because the list of know parameters can change any time
+	this.templateModel.getAllParametersOrdered().forEach( function ( paramName ) {
+		var checkbox = checkboxes.findItemFromData( paramName );
+		if ( !checkbox ) {
+			return;
+		}
+
+		var placesToSearch = [
+			spec.getPrimaryParameterName( paramName ),
+			spec.getParameterLabel( paramName ),
+			spec.getParameterDescription( paramName )
+		].concat( spec.getParameterAliases( paramName ) );
+
+		var foundSomeMatch = placesToSearch.some( function ( term ) {
+			return term && term.toLowerCase().indexOf( query ) !== -1;
+		} );
+
+		checkbox.toggle( foundSomeMatch );
+		nothingFound = nothingFound && !foundSomeMatch;
 	} );
 
-	// find matches
-	data = data.toLowerCase();
-	var matches = this.paramNames.filter( function ( paramName ) {
-		return paramName.toLowerCase().indexOf( data ) !== -1;
-	} );
-
-	// display matches only
-	matches.forEach( function ( match ) {
-		var paramCheckbox = widget.parameters.findItemFromData( match );
-		paramCheckbox.toggle( true );
-	} );
-
-	// handle no results
-	if ( matches.length === 0 ) {
-		this.infoWidget.toggle( true );
-	}
+	this.infoWidget.toggle( nothingFound );
 };