Add extends warning to reference dialog

To warn users when they are editing a sub-reference we
add a warning containing the text of the parent reference.
This is hidden behind a feature flag.

Bug: T247922
Change-Id: I3749683d8a18e502bf16e5bd5f2fe385581625be

extension.json

@@ -156,6 +156,7 @@
 				"cite-ve-dialog-reference-editing-reused",
 				"cite-ve-dialog-reference-editing-reused-long",
 				"cite-ve-dialog-reference-editing-extends",
+				"cite-ve-dialog-reference-editing-extends-long",
 				"cite-ve-dialog-reference-options-group-label",
 				"cite-ve-dialog-reference-options-group-placeholder",
 				"cite-ve-dialog-reference-options-name-label",

modules/ve-cite/i18n/en.json

@@ -37,6 +37,7 @@
 	"cite-ve-dialog-reference-editing-reused": "This reference is used {{PLURAL:$1|once|2=twice|$1 times}} on this page.",
 	"cite-ve-dialog-reference-editing-reused-long": "This reference is used {{PLURAL:$1|once|2=twice|$1 times}} on this page. Changes made here will be applied in all places where this reference is reused.",
 	"cite-ve-dialog-reference-editing-extends": "This is an extension of another reference.",
+	"cite-ve-dialog-reference-editing-extends-long": "This is an extension of another reference \"$1\".",
 	"cite-ve-dialog-reference-options-group-label": "Use this group",
 	"cite-ve-dialog-reference-options-group-placeholder": "General references",
 	"cite-ve-dialog-reference-options-name-label": "Re-use by this name",

modules/ve-cite/i18n/qqq.json

@@ -51,6 +51,7 @@
 	"cite-ve-dialog-reference-editing-reused": "Text shown in reference context menu when editing a reference that is used multiple times. This is a shorter version of {{msg-mw|cite-ve-dialog-reference-editing-reused-long}}.\n\nParameters:\n* $1 - Number of times used. This is always greater than 1.\n\nNote that the explicit '2' value is useful in English, but not necessarily for other languages. Don't translate the 2 value if it's not useful for your language.",
 	"cite-ve-dialog-reference-editing-reused-long": "Text shown at the top of the reference dialog when editing a reference that is used multiple times. This is a more detailed version of {{msg-mw|cite-ve-dialog-reference-editing-reused}}.\n\nParameters:\n* $1 - Number of times used. This is always greater than 1.\n\nNote that the explicit '2' value is useful in English, but not necessarily for other languages. Don't translate the 2 value if it's not useful for your language.",
 	"cite-ve-dialog-reference-editing-extends": "Text shown in reference context menu when editing a reference that extends another reference.",
+	"cite-ve-dialog-reference-editing-extends-long": "Text shown at the top of the reference dialog when editing a reference that extends another reference. This is a more detailed version of {{msg-mw|cite-ve-dialog-reference-editing-extends}}.\n\nParameter:\n* $1 – the name of the parent reference",
 	"cite-ve-dialog-reference-options-group-label": "Label for the reference group input",
 	"cite-ve-dialog-reference-options-group-placeholder": "Placeholder for the reference group input",
 	"cite-ve-dialog-reference-options-name-label": "Label for the reference name input",

modules/ve-cite/ve.ui.MWReferenceDialog.js

@@ -261,8 +261,8 @@ ve.ui.MWReferenceDialog.prototype.useReference = function ( ref ) {
 	this.referenceGroupInput.setValue( this.originalGroup );
 	this.referenceGroupInput.setDisabled( false );
 
-	var group = this.getFragment().getDocument().getInternalList()
+	var list = this.getFragment().getDocument().getInternalList();
-		.getNodeGroup( this.referenceModel.getListGroup() );
+	var group = list.getNodeGroup( this.referenceModel.getListGroup() );
 	var nodes = ve.getProp( group, 'keyedNodes', this.referenceModel.getListKey() );
 	var usages = nodes ? nodes.filter( function ( node ) {
 		return !node.findParent( ve.dm.MWReferencesListNode );
@@ -271,6 +271,14 @@ ve.ui.MWReferenceDialog.prototype.useReference = function ( ref ) {
 	this.reuseWarning.toggle( usages > 1 )
 		.setLabel( mw.msg( 'cite-ve-dialog-reference-editing-reused-long', usages ) );
 
+	this.extendsWarning.toggle( !!this.referenceModel.extendsRef );
+
+	if ( this.referenceModel.extendsRef !== undefined ) {
+		var index = list.keys.indexOf( 'literal/' + this.referenceModel.extendsRef );
+		var parentRef = list.getItemNode( index ).element.attributes.originalHtml;
+		this.extendsWarning.setLabel( mw.msg( 'cite-ve-dialog-reference-editing-extends-long', parentRef ) );
+	}
+
 	return this;
 };
 
@@ -291,7 +299,13 @@ ve.ui.MWReferenceDialog.prototype.initialize = function () {
 	this.reuseWarning = new OO.ui.MessageWidget( {
 		inline: true,
 		icon: 'alert',
-		classes: [ 've-ui-mwReferenceDialog-reuseWarning' ]
+		classes: [ 've-ui-mwReferenceDialog-warning' ]
+	} );
+
+	this.extendsWarning = new OO.ui.MessageWidget( {
+		inline: true,
+		icon: 'alert',
+		classes: [ 've-ui-mwReferenceDialog-warning' ]
 	} );
 
 	var citeCommands = Object.keys( ve.init.target.getSurface().commandRegistry.registry ).filter( function ( command ) {
@@ -331,7 +345,7 @@ ve.ui.MWReferenceDialog.prototype.initialize = function () {
 
 	// Initialization
 	this.panels.addItems( [ this.editPanel, this.searchPanel ] );
-	this.editPanel.$element.append( this.reuseWarning.$element, this.contentFieldset.$element, this.optionsFieldset.$element );
+	this.editPanel.$element.append( 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 );

modules/ve-cite/ve.ui.MWReferenceDialog.less

@@ -5,7 +5,7 @@
  * @license MIT
  */
 
-.ve-ui-mwReferenceDialog-reuseWarning {
+.ve-ui-mwReferenceDialog-warning {
 	font-weight: normal;
 	margin-bottom: 1em;
 }