Use the default edit dialog to create a sub-ref

There's no need to open another dialog to set the additional
details when creating a sub-reference. We can just use the edit
panel that's already added to the ReferenceDialog.

In the edit panel I assume that whenever it is loaded with a
reference that uses the extends attribute and has no content
then the panel is used to create a sub-ref.

Note: SetExtendsContentDialog is still used for the Citoid flow.

Bug: T375156
Change-Id: I8cb3663f2f45a807b1d00f543ae13e8c5f53c6d8

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

@@ -103,20 +103,21 @@ ve.ui.MWReferenceDialog.prototype.onReuseSearchResultsExtends = function ( origi
 	newRef.extendsRef = originalRef.getListKey();
 	newRef.group = originalRef.getGroup();
 
-	this.getManager()
+	this.actions.setMode( 'insert' );
-		.openWindow( 'setExtendsContent', {
+	this.panels.setItem( this.editPanel );
-			originalRef: originalRef,
+	this.title.setLabel( ve.msg( 'cite-ve-dialog-reference-title-add-details' ) );
-			newRef: newRef,
-			internalList: this.getFragment().getDocument().getInternalList()
-		} )
-		.closing.then( ( data ) => {
-			if ( data && data.action && data.action === 'insert' ) {
-				newRef.insertInternalItem( this.getFragment().getSurface() );
-				newRef.insertReferenceNode( this.getFragment() );
 
-				this.close( { action: 'extends-choose' } );
+	const docRefs = ve.dm.MWDocumentReferences.static.refsForDoc(
-			}
+		this.getFragment().getDocument()
-		} );
+	);
+	this.editPanel.setDocumentReferences( docRefs );
+
+	this.actions.setAbilities( { insert: false } );
+
+	this.editPanel.setReferenceForEditing( newRef );
+	this.editPanel.setReadOnly( this.isReadOnly() );
+
+	this.trackedInputChange = false;
 };
 
 /**

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

@@ -41,6 +41,13 @@ ve.ui.MWReferenceEditPanel = function VeUiMWReferenceEditPanel( config ) {
 	 * @member {string|null}
 	 */
 	this.originalGroup = null;
+	/**
+	 * If the edit panel is used to insert a sub-reference
+	 *
+	 * @member {boolean}
+	 * @private
+	 */
+	this.isInsertingSubRef = false;
 
 	// Create content editor
 	this.referenceTarget = ve.init.target.createTargetWidget(
@@ -216,6 +223,7 @@ ve.ui.MWReferenceEditPanel.prototype.setDocumentReferences = function ( docRefs
  */
 ve.ui.MWReferenceEditPanel.prototype.setReferenceForEditing = function ( ref ) {
 	this.referenceModel = ref;
+	this.isInsertingSubRef = ref.extendsRef && !ref.getDocument().data.hasContent();
 
 	this.setFormFieldsFromRef( ref );
 	this.updateReuseWarningFromRef( ref );
@@ -240,6 +248,12 @@ ve.ui.MWReferenceEditPanel.prototype.getReferenceFromEditing = function () {
 ve.ui.MWReferenceEditPanel.prototype.setFormFieldsFromRef = function ( ref ) {
 	this.referenceTarget.setDocument( ref.getDocument() );
 
+	if ( this.isInsertingSubRef ) {
+		this.referenceTarget.getSurface().setPlaceholder(
+			ve.msg( 'cite-ve-dialog-reference-editing-add-details-placeholder' )
+		);
+	}
+
 	this.optionsFieldset.toggle( !ref.extendsRef );
 
 	this.originalGroup = ref.getGroup();
@@ -274,7 +288,10 @@ ve.ui.MWReferenceEditPanel.prototype.updateExtendsWarningFromRef = function ( re
 			.getInternalModelNode( ref.extendsRef );
 		this.extendsWarning.setLabel(
 			$( '<p>' )
-				.text( ve.msg( 'cite-ve-dialog-reference-editing-extends' ) )
+				.text( ve.msg( this.isInsertingSubRef ?
+					'cite-ve-dialog-reference-editing-add-details' :
+					'cite-ve-dialog-reference-editing-extends'
+				) )
 				.append( parentNode ?
 					new ve.ui.MWPreviewElement( parentNode, { useView: true } ).$element :
 					$( '<div>' )
@@ -282,6 +299,7 @@ ve.ui.MWReferenceEditPanel.prototype.updateExtendsWarningFromRef = function ( re
 						.text( ve.msg( 'cite-ve-dialog-reference-missing-parent-ref' ) )
 				)
 		);
+		this.extendsWarning.setIcon( this.isInsertingSubRef ? null : 'alert' );
 		this.extendsWarning.toggle( true );
 	} else {
 		this.extendsWarning.toggle( false );