From de2b3f7a593c8eea2e131dd568e643e8aa75fa6e Mon Sep 17 00:00:00 2001
From: MusikAnimal <musikanimal@gmail.com>
Date: Wed, 28 Aug 2024 22:11:35 -0400
Subject: [PATCH] mediawiki.special.block: make submit destructive and use old
 messages

SpecialBlock calls HTMLForm::setSubmitDestructive(). This patch applies
that to the new Vue version of Special:Block.

Additionally, since we're not going to enable multiblocks in the initial
launch, the submit button message is changed to as it was before. "Save
block" is questionable even for multiblocks. It will likely be a while
before we iron out the UI for multiblocks, so we might as well remove
now-unused 'block-save' message.

The "[username] is already blocked" message is now also surfaced, i.e.
browsing to [[Special:Block/someblockuser]]. Like the old Special:Block,
changes to the block target field won't re-query to see if the user is
already blocked (though that would be a fine improvement). However
*unlike* the old Special:Block, such changes do make the message
disappear.

Bug: T373572
Change-Id: Iceaedbb1e3496c52b49a2b96d65445da45261b9f
---
 includes/specials/SpecialBlock.php            |  4 +++
 languages/i18n/en.json                        |  1 -
 languages/i18n/qqq.json                       |  1 -
 resources/Resources.php                       |  7 +++-
 .../mediawiki.special.block/SpecialBlock.vue  | 27 ++++++++++----
 .../components/UserLookup.vue                 |  9 ++---
 tests/jest/jest.setup.js                      |  7 ++++
 .../SpecialBlock.setup.js                     | 30 ++++++++++++++++
 .../SpecialBlock.test.js                      | 36 +++++++------------
 .../UserLookup.test.js                        | 31 ++++++++++++++++
 .../includes/specials/SpecialBlockTest.php    | 20 +++++++++++
 11 files changed, 135 insertions(+), 38 deletions(-)
 create mode 100644 tests/jest/mediawiki.special.block/SpecialBlock.setup.js
 create mode 100644 tests/jest/mediawiki.special.block/UserLookup.test.js

diff --git a/includes/specials/SpecialBlock.php b/includes/specials/SpecialBlock.php
index db30aa004a2..ab2c07387a7 100644
--- a/includes/specials/SpecialBlock.php
+++ b/includes/specials/SpecialBlock.php
@@ -152,6 +152,10 @@ class SpecialBlock extends FormSpecialPage {
 
 		if ( $this->useCodex ) {
 			$this->getOutput()->addModules( 'mediawiki.special.block.codex' );
+			$this->codexFormData[ 'blockAlreadyBlocked' ] = $this->alreadyBlocked;
+			$this->codexFormData[ 'blockTargetUser' ] = $this->target instanceof UserIdentity ?
+				$this->target->getName() :
+				$this->target ?? null;
 			$this->getOutput()->addJsConfigVars( $this->codexFormData );
 		}
 	}
diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index e80381565f1..9b49cde9f9a 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -2693,7 +2693,6 @@
 	"block-user-label": "Which user do you want to block?",
 	"block-user-description": "A user can be a username, IP address, or an IP range.",
 	"block-user-placeholder": "Start typing a user...",
-	"block-save": "Save block",
 	"block-target": "Username, IP address, or IP range:",
 	"block-target-placeholder": "UserName, 1.1.1.42, or 1.1.1.42/16",
 	"unblockip": "Unblock user",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 01ebba4b2e4..4e7a986168e 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -2956,7 +2956,6 @@
 	"block-user-label": "Label for the input for specifying the user of a block on [[Special:Block]]",
 	"block-user-description": "Description for the input for specifying the user of a block on [[Special:Block]]",
 	"block-user-placeholder": "Placeholder text for the input specifying the user of a block on [[Special:Block]]",
-	"block-save": "Label for submit button on block form [[Special:Block]]",
 	"block-target": "Label for the input for specifying the target of a block on [[Special:Block]]",
 	"block-target-placeholder": "Placeholder text for the input specifying the target of a block on [[Special:Block]]",
 	"unblockip": "Used as title and legend for the form in [[Special:Unblock]].",
diff --git a/resources/Resources.php b/resources/Resources.php
index 06d5281fd0c..468d21efeee 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2279,20 +2279,25 @@ return [
 			'block-options-description',
 			'block-reason',
 			'block-reason-other',
-			'block-save',
 			'block-user-description',
 			'block-user-label',
 			'block-user-placeholder',
 			'blocklist-type-opt-partial',
 			'blocklist-type-opt-sitewide',
 			'colon-separator',
+			'block-user-label',
+			'block-user-description',
+			'block-user-placeholder',
+			'ipbsubmit',
 			'htmlform-optional-flag',
 			'htmlform-selectorother-other',
 			'ipb-action-create',
 			'ipb-action-move',
 			'ipb-action-upload',
+			'ipb-change-block',
 			'ipb-disableusertalk',
 			'ipb-hardblock',
+			'ipb-needreblock',
 			'ipb-partial-help',
 			'ipb-sitewide-help',
 			'ipbcreateaccount',
diff --git a/resources/src/mediawiki.special.block/SpecialBlock.vue b/resources/src/mediawiki.special.block/SpecialBlock.vue
index c01c758bb45..2d7fc453e97 100644
--- a/resources/src/mediawiki.special.block/SpecialBlock.vue
+++ b/resources/src/mediawiki.special.block/SpecialBlock.vue
@@ -1,5 +1,15 @@
 <template>
-	<user-lookup v-model="targetUser"></user-lookup>
+	<cdx-message
+		v-if="targetUser && alreadyBlocked"
+		type="error"
+		inline
+	>
+		{{ $i18n( 'ipb-needreblock', targetUser ).text() }}
+	</cdx-message>
+	<user-lookup
+		v-model="targetUser"
+		@input="alreadyBlocked = false"
+	></user-lookup>
 	<target-active-blocks></target-active-blocks>
 	<target-block-log></target-block-log>
 	<block-type-field
@@ -25,18 +35,18 @@
 	></block-details-field>
 	<hr class="mw-block-hr">
 	<cdx-button
-		action="progressive"
+		action="destructive"
 		weight="primary"
 		@click="handleSubmit"
 		class="mw-block-submit"
 	>
-		{{ $i18n( 'block-save' ).text() }}
+		{{ submitBtnMsg }}
 	</cdx-button>
 </template>
 
 <script>
 const { defineComponent, ref } = require( 'vue' );
-const { CdxButton } = require( '@wikimedia/codex' );
+const { CdxButton, CdxMessage } = require( '@wikimedia/codex' );
 const UserLookup = require( './components/UserLookup.vue' );
 const TargetActiveBlocks = require( './components/TargetActiveBlocks.vue' );
 const TargetBlockLog = require( './components/TargetBlockLog.vue' );
@@ -56,10 +66,11 @@ module.exports = exports = defineComponent( {
 		ExpiryField,
 		ReasonField,
 		BlockDetailsField,
-		CdxButton
+		CdxButton,
+		CdxMessage
 	},
 	setup() {
-		const targetUser = ref( '' );
+		const targetUser = ref( mw.config.get( 'blockTargetUser' ) );
 		const expiry = ref( {} );
 
 		const blockPartialOptions = mw.config.get( 'partialBlockActionOptions' ) ?
@@ -206,9 +217,13 @@ module.exports = exports = defineComponent( {
 				} );
 		}
 
+		const alreadyBlocked = mw.config.get( 'blockAlreadyBlocked' );
+
 		return {
 			targetUser,
 			expiry,
+			alreadyBlocked,
+			submitBtnMsg: mw.message( alreadyBlocked ? 'ipb-change-block' : 'ipbsubmit' ).text(),
 			handleSubmit,
 			blockDetailsOptions,
 			blockDetailsSelected,
diff --git a/resources/src/mediawiki.special.block/components/UserLookup.vue b/resources/src/mediawiki.special.block/components/UserLookup.vue
index a9f4e2474dd..e980cf6e2e6 100644
--- a/resources/src/mediawiki.special.block/components/UserLookup.vue
+++ b/resources/src/mediawiki.special.block/components/UserLookup.vue
@@ -2,6 +2,7 @@
 	<cdx-field :is-fieldset="true">
 		<cdx-lookup
 			v-model:selected="wrappedModel"
+			v-model:input-value="wrappedModel"
 			name="wpTarget"
 			:menu-items="menuItems"
 			:start-icon="cdxIconSearch"
@@ -36,7 +37,7 @@ module.exports = exports = defineComponent( {
 	],
 	setup( props, { emit } ) {
 		const menuItems = ref( [] );
-		const currentSearchTerm = ref( '' );
+		const currentSearchTerm = ref( props.modelValue || '' );
 		const wrappedModel = useModelWrapper(
 			toRef( props, 'modelValue' ),
 			emit
@@ -54,7 +55,6 @@ module.exports = exports = defineComponent( {
 			const api = new mw.Api();
 
 			const params = {
-				origin: '*',
 				action: 'query',
 				format: 'json',
 				formatversion: 2,
@@ -96,13 +96,10 @@ module.exports = exports = defineComponent( {
 					}
 
 					// Build an array of menu items.
-					const results = data.allusers.map( ( result ) => ( {
+					menuItems.value = data.allusers.map( ( result ) => ( {
 						label: result.name,
 						value: result.name
 					} ) );
-
-					// Update menuItems.
-					menuItems.value = results;
 				} )
 				.catch( () => {
 					// On error, set results to empty.
diff --git a/tests/jest/jest.setup.js b/tests/jest/jest.setup.js
index 5aa5690e309..d55cd1c9a90 100644
--- a/tests/jest/jest.setup.js
+++ b/tests/jest/jest.setup.js
@@ -31,6 +31,12 @@ config.global.directives = {
 	}
 };
 
+function ApiMock() {}
+ApiMock.prototype.get = jest.fn();
+ApiMock.prototype.post = jest.fn();
+ApiMock.prototype.postWithEditToken = jest.fn();
+ApiMock.prototype.postWithToken = jest.fn();
+
 function RestMock() {}
 RestMock.prototype.get = jest.fn();
 
@@ -41,6 +47,7 @@ TitleMock.prototype.getUrl = jest.fn();
 
 // Mock the mw global object.
 const mw = {
+	Api: ApiMock,
 	log: {
 		error: jest.fn(),
 		warn: jest.fn()
diff --git a/tests/jest/mediawiki.special.block/SpecialBlock.setup.js b/tests/jest/mediawiki.special.block/SpecialBlock.setup.js
new file mode 100644
index 00000000000..012a5434cc5
--- /dev/null
+++ b/tests/jest/mediawiki.special.block/SpecialBlock.setup.js
@@ -0,0 +1,30 @@
+/**
+ * Mock calls to mw.config.get().
+ * The default implementation correlates to the SpecialBlock::codexFormData property in PHP.
+ *
+ * @param {Object} [config]
+ */
+function mockMwConfigGet( config = {} ) {
+	const mockConfig = Object.assign( {
+		blockAlreadyBlocked: false,
+		blockTargetUser: null,
+		blockAllowsEmailBan: true,
+		blockAllowsUTEdit: true,
+		blockAutoblockExpiry: '1 day',
+		blockDefaultExpiry: 'infinite',
+		blockHideUser: true,
+		blockExpiryOptions: {
+			infinite: 'infinite',
+			'Other time:': 'other'
+		},
+		blockReasonOptions: [
+			{ label: 'block-reason-1', value: 'block-reason-1' },
+			{ label: 'block-reason-2', value: 'block-reason-2' }
+		]
+	}, config );
+	mw.config.get.mockImplementation( ( key ) => mockConfig[ key ] );
+}
+
+module.exports = {
+	mockMwConfigGet
+};
diff --git a/tests/jest/mediawiki.special.block/SpecialBlock.test.js b/tests/jest/mediawiki.special.block/SpecialBlock.test.js
index 2bcc7551451..599e0c7b608 100644
--- a/tests/jest/mediawiki.special.block/SpecialBlock.test.js
+++ b/tests/jest/mediawiki.special.block/SpecialBlock.test.js
@@ -1,31 +1,21 @@
 'use strict';
 
 const { mount } = require( '@vue/test-utils' );
-
-// Mock calls to mw.config.get.
-// This correlates to the SpecialBlock::codexFormData property in PHP.
-const mockConfig = {
-	blockAllowsEmailBan: true,
-	blockAllowsUTEdit: true,
-	blockAutoblockExpiry: '1 day',
-	blockDefaultExpiry: 'infinite',
-	blockHideUser: true,
-	blockExpiryOptions: {
-		infinite: 'infinite',
-		'Other time:': 'other'
-	},
-	blockReasonOptions: [
-		{ label: 'block-reason-1', value: 'block-reason-1' },
-		{ label: 'block-reason-2', value: 'block-reason-2' }
-	]
-};
-mw.config.get.mockImplementation( ( key ) => mockConfig[ key ] );
-
+const { mockMwConfigGet } = require( './SpecialBlock.setup.js' );
 const SpecialBlock = require( '../../../resources/src/mediawiki.special.block/SpecialBlock.vue' );
 
 describe( 'SpecialBlock', () => {
-	it( 'should show a submit button with the correct text', () => {
-		const wrapper = mount( SpecialBlock );
-		expect( wrapper.find( 'button.cdx-button' ).text() ).toBe( 'block-save' );
+	it( 'should show a banner and a submit button with text based on if user is already blocked', () => {
+		mockMwConfigGet();
+		let wrapper = mount( SpecialBlock );
+		expect( wrapper.find( 'button.cdx-button' ).text() ).toStrictEqual( 'ipbsubmit' );
+		mockMwConfigGet( {
+			blockAlreadyBlocked: true,
+			blockTargetUser: 'ExampleUser'
+		} );
+		wrapper = mount( SpecialBlock );
+		expect( wrapper.find( '.cdx-message__content' ).text() )
+			.toStrictEqual( 'ipb-needreblock:[ExampleUser]' );
+		expect( wrapper.find( 'button.cdx-button' ).text() ).toStrictEqual( 'ipb-change-block' );
 	} );
 } );
diff --git a/tests/jest/mediawiki.special.block/UserLookup.test.js b/tests/jest/mediawiki.special.block/UserLookup.test.js
new file mode 100644
index 00000000000..e85a1df0e42
--- /dev/null
+++ b/tests/jest/mediawiki.special.block/UserLookup.test.js
@@ -0,0 +1,31 @@
+'use strict';
+
+const { nextTick } = require( 'vue' );
+const { mount } = require( '@vue/test-utils' );
+const UserLookup = require( '../../../resources/src/mediawiki.special.block/components/UserLookup.vue' );
+
+describe( 'UserLookup', () => {
+	it( 'should update menu items based on the API response', async () => {
+		mw.Api.prototype.get = jest.fn().mockResolvedValue( {
+			query: {
+				allusers: [
+					{ name: 'UserLookup1' },
+					{ name: 'UserLookup2' }
+				]
+			}
+		} );
+		const wrapper = mount( UserLookup, {
+			props: { modelValue: 'UserLookup' }
+		} );
+		const input = wrapper.find( '.cdx-text-input__input' );
+		expect( input.element.value ).toBe( 'UserLookup' );
+		const listBox = wrapper.find( '.cdx-menu__listbox' );
+		// "No results"
+		expect( listBox.element.children ).toHaveLength( 1 );
+		await input.trigger( 'input' );
+		await nextTick();
+		expect( listBox.element.children ).toHaveLength( 2 );
+		expect( listBox.element.children[ 0 ].textContent ).toBe( 'UserLookup1' );
+		expect( listBox.element.children[ 1 ].textContent ).toBe( 'UserLookup2' );
+	} );
+} );
diff --git a/tests/phpunit/includes/specials/SpecialBlockTest.php b/tests/phpunit/includes/specials/SpecialBlockTest.php
index 563407aa4d0..d9bbc8f73c2 100644
--- a/tests/phpunit/includes/specials/SpecialBlockTest.php
+++ b/tests/phpunit/includes/specials/SpecialBlockTest.php
@@ -57,6 +57,7 @@ class SpecialBlockTest extends SpecialPageTestBase {
 		$this->overrideConfigValues( [
 			MainConfigNames::BlockAllowsUTEdit => true,
 			MainConfigNames::EnablePartialActionBlocks => true,
+			MainConfigNames::UseCodexSpecialBlock => false,
 		] );
 		$page = $this->newSpecialPage();
 		$wrappedPage = TestingAccessWrapper::newFromObject( $page );
@@ -72,11 +73,30 @@ class SpecialBlockTest extends SpecialPageTestBase {
 		$this->assertArrayHasKey( 'PreviousTarget', $fields );
 		$this->assertArrayHasKey( 'Confirm', $fields );
 		$this->assertArrayHasKey( 'EditingRestriction', $fields );
+		$this->assertArrayNotHasKey( 'options-messages', $fields['EditingRestriction'] );
+		$this->assertArrayNotHasKey( 'option-descriptions-messages', $fields['EditingRestriction'] );
 		$this->assertArrayHasKey( 'PageRestrictions', $fields );
 		$this->assertArrayHasKey( 'NamespaceRestrictions', $fields );
 		$this->assertArrayHasKey( 'ActionRestrictions', $fields );
 	}
 
+	/**
+	 * @covers ::getFormFields
+	 */
+	public function testGetFormFieldsCodex(): void {
+		$this->overrideConfigValues( [
+			MainConfigNames::BlockAllowsUTEdit => true,
+			MainConfigNames::EnablePartialActionBlocks => true,
+			MainConfigNames::UseCodexSpecialBlock => true,
+		] );
+		$page = $this->newSpecialPage();
+		$wrappedPage = TestingAccessWrapper::newFromObject( $page );
+		$fields = $wrappedPage->getFormFields();
+		$this->assertIsArray( $fields );
+		$this->assertArrayHasKey( 'options-messages', $fields[ 'EditingRestriction' ] );
+		$this->assertArrayHasKey( 'option-descriptions-messages', $fields[ 'EditingRestriction' ] );
+	}
+
 	/**
 	 * @covers ::getFormFields
 	 */