From 2ffbf1fa66359c8d1070a7eaa3253016f9b23d9a Mon Sep 17 00:00:00 2001
From: mareikeheuer <mareike.heuer@wikimedia.de>
Date: Mon, 1 Jul 2024 20:04:06 +0200
Subject: [PATCH] Display extends warning message when editing a reference

MVP implementation for adding a warning when editing a reference
that's the extension of another. In the current approach we're
just using the elements .text() like we do when you create an
extended reference.

Bug: T247922
Change-Id: I2fc574152059937b4aa3fc25ee486d363cc809d5
---
 modules/ve-cite/ve.ui.MWReferenceDialog.js    | 33 +++++++++++++++++--
 modules/ve-cite/ve.ui.MWReferenceDialog.less  |  3 +-
 .../ve-cite/ve.ui.MWReferenceDialog.test.js   |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/modules/ve-cite/ve.ui.MWReferenceDialog.js b/modules/ve-cite/ve.ui.MWReferenceDialog.js
index 69cccd2a5..646fe5275 100644
--- a/modules/ve-cite/ve.ui.MWReferenceDialog.js
+++ b/modules/ve-cite/ve.ui.MWReferenceDialog.js
@@ -249,6 +249,7 @@ ve.ui.MWReferenceDialog.prototype.setReferenceForEditing = function ( ref ) {
 
 	this.setFormFieldsFromRef( this.referenceModel );
 	this.updateReuseWarningFromRef( this.referenceModel );
+	this.updateExtendsWarningFromRef( this.referenceModel );
 
 	return this;
 };
@@ -284,6 +285,24 @@ ve.ui.MWReferenceDialog.prototype.updateReuseWarningFromRef = function ( ref ) {
 		.setLabel( mw.msg( 'cite-ve-dialog-reference-editing-reused-long', usages ) );
 };
 
+/**
+ * @private
+ * @param {ve.dm.MWReferenceModel} ref
+ */
+ve.ui.MWReferenceDialog.prototype.updateExtendsWarningFromRef = function ( ref ) {
+	if ( ref.extendsRef ) {
+		const list = this.getFragment().getDocument().getInternalList();
+		const itemNode = list.getItemNode( list.keys.indexOf( ref.extendsRef ) );
+		const parentRefText = new ve.ui.MWPreviewElement( itemNode, { useView: true } ).$element.text();
+		// TODO extends i18n
+		this.extendsWarning.setLabel(
+			`This is an extension of another reference: ${ parentRefText }`
+		);
+	}
+
+	this.extendsWarning.toggle( !!ref.extendsRef );
+};
+
 /**
  * @override
  */
@@ -304,8 +323,16 @@ ve.ui.MWReferenceDialog.prototype.initialize = function () {
 		classes: [ 've-ui-mwReferenceDialog-reuseWarning' ]
 	} );
 
+	// Icon message widget
+	this.extendsWarning = new OO.ui.MessageWidget( {
+		icon: 'alert',
+		inline: true,
+		classes: [ 've-ui-mwReferenceDialog-extendsWarning' ]
+	} );
+
 	const citeCommands = Object.keys( ve.init.target.getSurface().commandRegistry.registry )
 		.filter( ( command ) => command.indexOf( 'cite-' ) !== -1 );
+
 	this.referenceTarget = ve.init.target.createTargetWidget(
 		{
 			includeCommands: this.constructor.static.includeCommands,
@@ -343,7 +370,7 @@ ve.ui.MWReferenceDialog.prototype.initialize = function () {
 
 	this.panels.addItems( [ this.editPanel, this.searchPanel ] );
 	this.editPanel.$element.append(
-		this.reuseWarning.$element, this.contentFieldset.$element, this.optionsFieldset.$element );
+		this.reuseWarning.$element, this.extendsWarning.$element, this.contentFieldset.$element, this.optionsFieldset.$element );
 	this.optionsFieldset.addItems( [ this.referenceGroupField ] );
 	this.searchPanel.$element.append( this.search.$element );
 	this.$body.append( this.panels.$element );
@@ -402,7 +429,9 @@ ve.ui.MWReferenceDialog.prototype.getSetupProcess = function ( data ) {
 		.next( () => {
 			this.panels.setItem( this.editPanel );
 			if ( this.selectedNode instanceof ve.dm.MWReferenceNode ) {
-				this.setReferenceForEditing( ve.dm.MWReferenceModel.static.newFromReferenceNode( this.selectedNode ) );
+				this.setReferenceForEditing(
+					ve.dm.MWReferenceModel.static.newFromReferenceNode( this.selectedNode )
+				);
 			} else {
 				this.setReferenceForEditing( new ve.dm.MWReferenceModel( this.getFragment().getDocument() ) );
 				this.actions.setAbilities( { done: false, insert: false } );
diff --git a/modules/ve-cite/ve.ui.MWReferenceDialog.less b/modules/ve-cite/ve.ui.MWReferenceDialog.less
index 70fa58092..d3c7ebb8e 100644
--- a/modules/ve-cite/ve.ui.MWReferenceDialog.less
+++ b/modules/ve-cite/ve.ui.MWReferenceDialog.less
@@ -5,7 +5,8 @@
  * @license MIT
  */
 
-.ve-ui-mwReferenceDialog-reuseWarning {
+.ve-ui-mwReferenceDialog-reuseWarning,
+.ve-ui-mwReferenceDialog-extendsWarning {
 	font-weight: normal;
 	margin-bottom: 1em;
 }
diff --git a/tests/qunit/ve-cite/ve.ui.MWReferenceDialog.test.js b/tests/qunit/ve-cite/ve.ui.MWReferenceDialog.test.js
index c357b044b..2bf76d4dd 100644
--- a/tests/qunit/ve-cite/ve.ui.MWReferenceDialog.test.js
+++ b/tests/qunit/ve-cite/ve.ui.MWReferenceDialog.test.js
@@ -7,6 +7,7 @@ QUnit.test( 'setReferenceForEditing', ( assert ) => {
 
 	dialog.referenceGroupInput = new ve.ui.MWReferenceGroupInputWidget( {} );
 	dialog.reuseWarning = new OO.ui.MessageWidget();
+	dialog.extendsWarning = new OO.ui.MessageWidget();
 
 	// XXX: This is a regression test with a fragile setup. Please feel free to delete this test
 	// when you feel like it doesn't make sense to update it.