Add back button to the transclusion dialog

Bug: T272354
Change-Id: I08c4a7db6239b485439bf547e3e8b4d6f7aeede8

extension.json

@@ -182,6 +182,10 @@
 			"description": "Temporary flag to enable inline parameter descriptions in the transclusion dialog.",
 			"value": false
 		},
+		"VisualEditorTransclusionDialogBackButton": {
+			"description": "Temporary flag to enable the back button in the transclusion dialog when inserting a new template. (T272354)",
+			"value": false
+		},
 		"VisualEditorTransclusionDialogNewSidebar": {
 			"description": "Temporary flag to enable the new sidebar in the transclusion dialog.",
 			"value": false

includes/VisualEditorHooks.php

@@ -1050,6 +1050,7 @@ class VisualEditorHooks {
 			'transclusionDialogSuggestedValues' => $veConfig->get( 'VisualEditorTransclusionDialogSuggestedValues' ),
 			'transclusionDialogInlineDescriptions' =>
 				$veConfig->get( 'VisualEditorTransclusionDialogInlineDescriptions' ),
+			'transclusionDialogBackButton' => $veConfig->get( 'VisualEditorTransclusionDialogBackButton' ),
 			'transclusionDialogNewSidebar' => $veConfig->get( 'VisualEditorTransclusionDialogNewSidebar' ),
 			'cirrusSearchLookup' => $extensionRegistry->isLoaded( 'CirrusSearch' )
 				&& $veConfig->get( 'VisualEditorTemplateSearchImprovements' ),

modules/ve-mw/dm/models/ve.dm.MWTransclusionModel.js

@@ -568,4 +568,14 @@
 		}
 	};
 
+	/**
+	 * Resets the model's state.
+	 */
+	ve.dm.MWTransclusionModel.prototype.reset = function () {
+		this.parts = [];
+		this.uid = 0;
+		this.requests = [];
+		this.queue = [];
+	};
+
 }() );

modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js

@@ -20,6 +20,8 @@ ve.ui.MWTransclusionDialog = function VeUiMWTransclusionDialog( config ) {
 
 	// Properties
 	this.mode = null;
+	this.closeButton = null;
+	this.backButton = null;
 
 	// Temporary override while feature flag is in place.
 	this.isBigger = mw.config.get( 'wgVisualEditorConfig' ).transclusionDialogInlineDescriptions;
@@ -46,6 +48,12 @@ ve.ui.MWTransclusionDialog.static.actions = ve.ui.MWTemplateDialog.static.action
 		// HACK: Will be set later, but we want measurements to be accurate in the mean time, this
 		// will not be needed when T93290 is resolved
 		label: $( document.createTextNode( '\u00a0' ) )
+	},
+	{
+		action: 'back',
+		label: OO.ui.deferMsg( 'visualeditor-dialog-action-goback' ),
+		modes: [ 'edit', 'insert' ],
+		flags: [ 'safe', 'back' ]
 	}
 ] );
 
@@ -177,6 +185,7 @@ ve.ui.MWTransclusionDialog.prototype.onReplacePart = function ( removed, added )
 
 	single = this.isSingleTemplateTransclusion();
 	this.actions.setAbilities( { mode: single } );
+	this.updateActionSet();
 };
 
 /**
@@ -328,6 +337,12 @@ ve.ui.MWTransclusionDialog.prototype.addPart = function ( part ) {
  * @inheritdoc
  */
 ve.ui.MWTransclusionDialog.prototype.getActionProcess = function ( action ) {
+	if ( action === 'back' ) {
+		return new OO.ui.Process( function () {
+			this.resetDialog();
+		}, this );
+	}
+
 	if ( action === 'mode' ) {
 		return new OO.ui.Process( function () {
 			this.setMode( this.mode === 'single' ? 'multiple' : 'single' );
@@ -337,6 +352,51 @@ ve.ui.MWTransclusionDialog.prototype.getActionProcess = function ( action ) {
 	return ve.ui.MWTransclusionDialog.super.prototype.getActionProcess.call( this, action );
 };
 
+/**
+ * Update the widgets in the dialog's action bar.
+ */
+ve.ui.MWTransclusionDialog.prototype.updateActionSet = function () {
+	var veConfig = mw.config.get( 'wgVisualEditorConfig' ),
+		backButton = this.actions.get( { flags: [ 'back' ] } ).pop();
+
+	if ( backButton ) {
+		// Todo: this won't be needed if https://gerrit.wikimedia.org/r/c/oojs/ui/+/686439 is resolved
+		this.backButton = backButton;
+	}
+
+	if ( veConfig.transclusionDialogBackButton ) {
+		var closeButton = this.actions.get( { flags: [ 'close' ] } ).pop(),
+			parts = this.transclusionModel && this.transclusionModel.getParts(),
+			isInitialPage = parts && parts.length === 1 && parts[ 0 ] instanceof ve.dm.MWTemplatePlaceholderModel,
+			isInsertMode = this.getMode() === 'insert';
+
+		if ( closeButton ) {
+			// Todo: this won't be needed if https://gerrit.wikimedia.org/r/c/oojs/ui/+/686439 is resolved
+			this.closeButton = closeButton;
+		}
+
+		this.closeButton.toggle( !isInsertMode || isInitialPage );
+		this.backButton.toggle( isInsertMode && !isInitialPage );
+	} else {
+		backButton.toggle( false );
+	}
+};
+
+/**
+ * Revert the dialog back to its initial state.
+ */
+ve.ui.MWTransclusionDialog.prototype.resetDialog = function () {
+	var target = this;
+	this.transclusionModel.reset();
+	this.bookletLayout.clearPages();
+	this.transclusionModel
+		.addPart( new ve.dm.MWTemplatePlaceholderModel( this.transclusionModel ), 0 )
+		.done( function () {
+			target.setMode( 'single' );
+			target.updateModeActionState();
+		} );
+};
+
 /**
  * @inheritdoc
  */