Convert Special:AbuseFilter/tools to use OOUI

Bug: T132284
Change-Id: I139b30399f83d43c4da565b25726d8786d02d1ef

.eslintrc.json

@@ -5,6 +5,7 @@
 		"jquery": true
 	},
 	"globals": {
-		"mediaWiki": false
+		"mediaWiki": false,
+		"OO": false
 	}
 }

includes/Views/AbuseFilterViewTools.php

@@ -3,6 +3,7 @@
 class AbuseFilterViewTools extends AbuseFilterView {
 	function show() {
 		$out = $this->getOutput();
+		$out->enableOOUI();
 		$user = $this->getUser();
 		$request = $this->getRequest();
 
@@ -18,14 +19,13 @@ class AbuseFilterViewTools extends AbuseFilterView {
 		$eval = '';
 		$eval .= AbuseFilter::buildEditBox( $request->getText( 'wpTestExpr' ), 'wpTestExpr' );
 
-		$eval .= Xml::tags( 'p', null,
-			Xml::element( 'input',
-			[
-				'type' => 'button',
-				'id' => 'mw-abusefilter-submitexpr',
-				'value' => $this->msg( 'abusefilter-tools-submitexpr' )->text() ]
-			)
-		);
+		$eval .=
+			Xml::tags( 'p', null,
+				new OOUI\ButtonInputWidget( [
+					'label' => $this->msg( 'abusefilter-tools-submitexpr' )->text(),
+					'id' => 'mw-abusefilter-submitexpr'
+				] )
+			);
 		$eval .= Xml::element( 'p', [ 'id' => 'mw-abusefilter-expr-result' ], ' ' );
 
 		$eval = Xml::fieldset( $this->msg( 'abusefilter-tools-expr' )->text(), $eval );
@@ -34,23 +34,21 @@ class AbuseFilterViewTools extends AbuseFilterView {
 		$out->addModules( 'ext.abuseFilter.tools' );
 
 		// Hacky little box to re-enable autoconfirmed if it got disabled
-		$rac = '';
-		$rac .= Xml::inputLabel(
-			$this->msg( 'abusefilter-tools-reautoconfirm-user' )->text(),
-			'wpReAutoconfirmUser',
-			'reautoconfirm-user',
-			45
-		);
-		$rac .= ' ';
-		$rac .= Xml::element(
-			'input',
-			[
-				'type' => 'button',
-				'id' => 'mw-abusefilter-reautoconfirmsubmit',
-				'value' => $this->msg( 'abusefilter-tools-reautoconfirm-submit' )->text()
-			]
-		);
-		$rac = Xml::fieldset( $this->msg( 'abusefilter-tools-reautoconfirm' )->text(), $rac );
-		$out->addHTML( $rac );
+		$formDescriptor = [
+			'RestoreAutoconfirmed' => [
+				'label-message' => 'abusefilter-tools-reautoconfirm-user',
+				'type' => 'user',
+				'name' => 'wpReAutoconfirmUser',
+				'id' => 'reautoconfirm-user',
+				'infusable' => true
+			],
+		];
+		$htmlForm = HTMLForm::factory( 'ooui', $formDescriptor, $this->getContext() );
+		$htmlForm->setWrapperLegendMsg( 'abusefilter-tools-reautoconfirm' )
+			->setSubmitTextMsg( 'abusefilter-tools-reautoconfirm-submit' )
+			->setSubmitName( 'wpReautoconfirmSubmit' )
+			->setSubmitId( 'mw-abusefilter-reautoconfirmsubmit' )
+			->prepareForm()
+			->displayForm( false );
 	}
 }

modules/ext.abuseFilter.tools.js

@@ -5,7 +5,7 @@
  * @author Marius Hoch <hoo@online.de>
  */
 
-( function ( mw, $ ) {
+( function ( mw, $, OO ) {
 	'use strict';
 
 	/**
@@ -16,7 +16,7 @@
 	function doExprSubmit() {
 		var expr = $( '#wpTestExpr' ).val(),
 			api = new mw.Api();
-		$( this ).injectSpinner( 'abusefilter-expr' );
+		$( this ).injectSpinner( { id: 'abusefilter-expr', size: 'large' } );
 
 		api.post( {
 			action: 'abusefilterevalexpression',
@@ -81,16 +81,18 @@
 	 * Submits a call to reautoconfirm a user.
 	 * @context HTMLElement
 	 * @param {jQuery.Event} e
+	 * @return {boolean}
 	 */
 	function doReautoSubmit() {
-		var name = $( '#reautoconfirm-user' ).val(),
+		var nameField = OO.ui.infuse( $( '#reautoconfirm-user' ) ),
+			name = nameField.getValue(),
 			api;
 
 		if ( name === '' ) {
-			return;
+			return false;
 		}
 
-		$( this ).injectSpinner( 'abusefilter-reautoconfirm' );
+		$( this ).injectSpinner( { id: 'abusefilter-reautoconfirm', size: 'large' } );
 
 		api = new mw.Api();
 		api.post( {
@@ -100,10 +102,11 @@
 		} )
 			.done( processReautoconfirm )
 			.fail( processReautoconfirmFailure );
+		return false;
 	}
 
 	$( document ).ready( function () {
 		$( '#mw-abusefilter-submitexpr' ).click( doExprSubmit );
 		$( '#mw-abusefilter-reautoconfirmsubmit' ).click( doReautoSubmit );
 	} );
-}( mediaWiki, jQuery ) );
+}( mediaWiki, jQuery, OO ) );