From 96e89280ef0d72db4674eecf01e3c67fb76b310f Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 30 Jun 2017 09:46:42 -0700
Subject: [PATCH] RCFilters: Trim spaces in saved query names

Make sure to trim the spaces before saving, and also to verify that
names that contain spaces-only are considered empty.

Also make sure that the same behavior is working when saved queries
are edited - but since the save query button may be disabled, make
sure that any blur event on the input gets us out of the edit mode
either after save or without saving (if the string is invalid)

Bug: T169273
Change-Id: I16da9fcde0bf6be2b854243d7facc80d2860e458
---
 ...filters.ui.SaveFiltersPopupButtonWidget.js |  4 +-
 ...w.rcfilters.ui.SavedLinksListItemWidget.js | 54 ++++++++++++-------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
index 62f7aee7cc..dfb188d7f8 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
@@ -105,6 +105,8 @@
 	 * @param {string} value Input value
 	 */
 	mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
+		value = value.trim();
+
 		this.applyButton.setDisabled( !value );
 	};
 
@@ -146,7 +148,7 @@
 	 * Apply and add the new quick link
 	 */
 	mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
-		var label = this.input.getValue();
+		var label = this.input.getValue().trim();
 
 		// This condition is more for sanity-check, since the
 		// apply button should be disabled if the label is empty
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index 7ce9b6afff..b6b20eeb1a 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -81,8 +81,11 @@
 		this.menu.connect( this, {
 			choose: 'onMenuChoose'
 		} );
-		this.saveButton.connect( this, { click: 'onSaveButtonClick' } );
-		this.editInput.connect( this, { enter: 'onEditInputEnter' } );
+		this.saveButton.connect( this, { click: 'save' } );
+		this.editInput.connect( this, {
+			change: 'onInputChange',
+			enter: 'save'
+		} );
 		this.editInput.$input.on( {
 			blur: this.onInputBlur.bind( this ),
 			keyup: this.onInputKeyup.bind( this )
@@ -204,22 +207,6 @@
 		this.menu.toggle( false );
 	};
 
-	/**
-	 * Respond to save button click
-	 */
-	mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onSaveButtonClick = function () {
-		this.emit( 'edit', this.editInput.getValue() );
-		this.toggleEdit( false );
-	};
-
-	/**
-	 * Respond to input enter event
-	 */
-	mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onEditInputEnter = function () {
-		this.emit( 'edit', this.editInput.getValue() );
-		this.toggleEdit( false );
-	};
-
 	/**
 	 * Respond to input keyup event, this is the way to intercept 'escape' key
 	 *
@@ -239,10 +226,39 @@
 	 * Respond to blur event on the input
 	 */
 	mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onInputBlur = function () {
-		this.emit( 'edit', this.editInput.getValue() );
+		this.save();
+
+		// Whether the save succeeded or not, the input-blur event
+		// means we need to cancel editing mode
 		this.toggleEdit( false );
 	};
 
+	/**
+	 * Respond to input change event
+	 *
+	 * @param {string} value Input value
+	 */
+	mw.rcfilters.ui.SavedLinksListItemWidget.prototype.onInputChange = function ( value ) {
+		value = value.trim();
+
+		this.saveButton.setDisabled( !value );
+	};
+
+	/**
+	 * Save the name of the query
+	 *
+	 * @param {string} [value] The value to save
+	 * @fires edit
+	 */
+	mw.rcfilters.ui.SavedLinksListItemWidget.prototype.save = function () {
+		var value = this.editInput.getValue().trim();
+
+		if ( value ) {
+			this.emit( 'edit', value );
+			this.toggleEdit( false );
+		}
+	};
+
 	/**
 	 * Toggle edit mode on this widget
 	 *
-- 
2.20.1