RCFilters: Correct display of save filter popup

- Correct language in the 'apply' button
- Add a placeholder to the input
- Make the 'apply' button disabled if the input is empty
- Remove the use of the OOUI-built-in validation, since all
  we do is "validate" that the input isn't empty, and there's
  no need to show error mode (red border) for that, especially
  since the 'apply' button is disabled in that case.

Bug: T169042
Change-Id: I5e3600b1ac8e63d8a25c0540468fe42febfc3a70

languages/i18n/en.json

@@ -1360,7 +1360,8 @@
 	"rcfilters-savedqueries-unsetdefault": "Remove as default",
 	"rcfilters-savedqueries-remove": "Remove",
 	"rcfilters-savedqueries-new-name-label": "Name",
-	"rcfilters-savedqueries-apply-label": "Save settings",
+	"rcfilters-savedqueries-new-name-placeholder": "Describe the purpose of the filter",
+	"rcfilters-savedqueries-apply-label": "Create filter",
 	"rcfilters-savedqueries-cancel-label": "Cancel",
 	"rcfilters-savedqueries-add-new-title": "Save current filter settings",
 	"rcfilters-restore-default-filters": "Restore default filters",

languages/i18n/qqq.json

@@ -1550,9 +1550,10 @@
 	"rcfilters-savedqueries-unsetdefault": "Label for the menu option that unsets a quick filter as default in [[Special:RecentChanges]]",
 	"rcfilters-savedqueries-remove": "Label for the menu option that removes a quick filter as default in [[Special:RecentChanges]]\n{{Identical|Remove}}",
 	"rcfilters-savedqueries-new-name-label": "Label for the input that holds the name of the new saved filters in [[Special:RecentChanges]]\n{{Identical|Name}}",
-	"rcfilters-savedqueries-apply-label": "Label for the button to apply saving a new filter setting in [[Special:RecentChanges]]",
+	"rcfilters-savedqueries-new-name-placeholder": "Placeholder for the input that holds the name of the new saved filters in [[Special:RecentChanges]]",
+	"rcfilters-savedqueries-apply-label": "Label for the button to apply saving a new filter setting in [[Special:RecentChanges]]. This is for a small popup, please try to use a short string.",
 	"rcfilters-savedqueries-cancel-label": "Label for the button to cancel the saving of a new quick link in [[Special:RecentChanges]]\n{{Identical|Cancel}}",
-	"rcfilters-savedqueries-add-new-title": "Title for the popup to add new quick link in [[Special:RecentChanges]]",
+	"rcfilters-savedqueries-add-new-title": "Title for the popup to add new quick link in [[Special:RecentChanges]]. This is for a small popup, please try to use a short string.",
 	"rcfilters-restore-default-filters": "Label for the button that resets filters to defaults",
 	"rcfilters-clear-all-filters": "Title for the button that clears all filters",
 	"rcfilters-search-placeholder": "Placeholder for the filter search input.",

resources/Resources.php

@@ -1827,6 +1827,7 @@ return [
 			'rcfilters-savedqueries-unsetdefault',
 			'rcfilters-savedqueries-remove',
 			'rcfilters-savedqueries-new-name-label',
+			'rcfilters-savedqueries-new-name-placeholder',
 			'rcfilters-savedqueries-add-new-title',
 			'rcfilters-savedqueries-apply-label',
 			'rcfilters-savedqueries-cancel-label',

resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js

@@ -39,7 +39,7 @@
 		this.popup.$head.prepend( ( new OO.ui.IconWidget( { icon: 'unClip' } ) ).$element );
 
 		this.input = new OO.ui.TextInputWidget( {
-			validate: /\S/
+			placeholder: mw.msg( 'rcfilters-savedqueries-new-name-placeholder' )
 		} );
 		layout = new OO.ui.FieldLayout( this.input, {
 			label: mw.msg( 'rcfilters-savedqueries-new-name-label' ),
@@ -73,7 +73,10 @@
 		this.popup.connect( this, {
 			ready: 'onPopupReady'
 		} );
-		this.input.connect( this, { enter: 'onInputEnter' } );
+		this.input.connect( this, {
+			change: 'onInputChange',
+			enter: 'onInputEnter'
+		} );
 		this.input.$input.on( {
 			keyup: this.onInputKeyup.bind( this )
 		} );
@@ -81,6 +84,7 @@
 		this.applyButton.connect( this, { click: 'onApplyButtonClick' } );
 
 		// Initialize
+		this.applyButton.setDisabled( !this.input.getValue() );
 		this.$element
 			.addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
 	};
@@ -95,6 +99,15 @@
 		this.apply();
 	};
 
+	/**
+	 * Respond to input change event
+	 *
+	 * @param {string} value Input value
+	 */
+	mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
+		this.applyButton.setDisabled( !value );
+	};
+
 	/**
 	 * Respond to input keyup event, this is the way to intercept 'escape' key
 	 *
@@ -133,15 +146,16 @@
 	 * Apply and add the new quick link
 	 */
 	mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
-		var widget = this,
-			label = this.input.getValue();
+		var label = this.input.getValue();
 
-		this.input.getValidity()
-			.done( function () {
-				widget.controller.saveCurrentQuery( label );
-				widget.input.setValue( this.input, '' );
-				widget.emit( 'saveCurrent' );
-				widget.popup.toggle( false );
-			} );
+		// This condition is more for sanity-check, since the
+		// apply button should be disabled if the label is empty
+		if ( label ) {
+			this.controller.saveCurrentQuery( label );
+			this.input.setValue( this.input, '' );
+			this.popup.toggle( false );
+
+			this.emit( 'saveCurrent' );
+		}
 	};
 }( mediaWiki ) );