MWParameterPage: Show the field's example if it exists

Also appending both the default value and the example value to the
field description. The input placeholder will show the default
value, the example value, or nothing.

Related to TemplateData change I9e2d66a805e25 but works without.

Bug: T53049
Change-Id: I4e5e57546f6d3c22e778ba061a5344ddee085c17

VisualEditor.php

@@ -1388,6 +1388,7 @@ $wgResourceModules += array(
 			'mediawiki.language',
 		),
 		'messages' => array(
+			'quotation-marks',
 			'visualeditor-dialog-template-title',
 			'visualeditor-dialog-transclusion-add-content',
 			'visualeditor-dialog-transclusion-add-param',
@@ -1400,6 +1401,8 @@ $wgResourceModules += array(
 			'visualeditor-dialog-transclusion-multiple-mode',
 			'visualeditor-dialog-transclusion-no-template-description',
 			'visualeditor-dialog-transclusion-options',
+			'visualeditor-dialog-transclusion-param-default',
+			'visualeditor-dialog-transclusion-param-example',
 			'visualeditor-dialog-transclusion-param-info',
 			'visualeditor-dialog-transclusion-param-info-missing',
 			'visualeditor-dialog-transclusion-placeholder',
@@ -1421,7 +1424,6 @@ $wgResourceModules += array(
 			'visualeditor-parameter-search-more',
 			'visualeditor-parameter-search-no-unused',
 			'visualeditor-parameter-search-unknown',
-			'quotation-marks',
 		),
 		'targets' => array( 'desktop', 'mobile' ),
 	),

extension.json

@@ -1408,6 +1408,7 @@
 				"mediawiki.language"
 			],
 			"messages": [
+				"quotation-marks",
 				"visualeditor-dialog-template-title",
 				"visualeditor-dialog-transclusion-add-content",
 				"visualeditor-dialog-transclusion-add-param",
@@ -1420,6 +1421,8 @@
 				"visualeditor-dialog-transclusion-multiple-mode",
 				"visualeditor-dialog-transclusion-no-template-description",
 				"visualeditor-dialog-transclusion-options",
+				"visualeditor-dialog-transclusion-param-default",
+				"visualeditor-dialog-transclusion-param-example",
 				"visualeditor-dialog-transclusion-param-info",
 				"visualeditor-dialog-transclusion-param-info-missing",
 				"visualeditor-dialog-transclusion-placeholder",
@@ -1440,8 +1443,7 @@
 				"visualeditor-parameter-input-placeholder",
 				"visualeditor-parameter-search-more",
 				"visualeditor-parameter-search-no-unused",
-				"visualeditor-parameter-search-unknown",
-				"quotation-marks"
+				"visualeditor-parameter-search-unknown"
 			],
 			"targets": [
 				"desktop",

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

@@ -126,6 +126,15 @@ ve.dm.MWParameterModel.prototype.getDefaultValue = function () {
 	return this.template.getSpec().getParameterDefaultValue( this.name );
 };
 
+/**
+ * Get default parameter value.
+ *
+ * @returns {string} Default parameter value
+ */
+ve.dm.MWParameterModel.prototype.getExampleValue = function () {
+	return this.template.getSpec().getParameterExampleValue( this.name );
+};
+
 /**
  * Get automatic parameter value.
  *

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

@@ -209,6 +209,18 @@ ve.dm.MWTemplateSpecModel.prototype.getParameterDefaultValue = function ( name )
 	return this.params[name]['default'];
 };
 
+/**
+ * Get a parameter example value.
+ *
+ * @param {string} name Parameter name
+ * @param {string} [lang] Language to get description
+ * @returns {string} Example parameter value
+ */
+ve.dm.MWTemplateSpecModel.prototype.getParameterExampleValue = function ( name, lang ) {
+	var value = this.params[name].example;
+	return ve.isPlainObject( value ) ? OO.ui.getLocalValue( value, lang ) : value;
+};
+
 /**
  * Get a parameter auto value.
  *

modules/ve-mw/i18n/en.json

@@ -201,6 +201,8 @@
 	"visualeditor-dialog-transclusion-multiple-mode": "Show options",
 	"visualeditor-dialog-transclusion-no-template-description": "{{GENDER:$3|You are adding}} the \"$1\" template to this page. It doesn't yet have a description, but there might be some information on the <a $2>template's page</a>.",
 	"visualeditor-dialog-transclusion-options": "Options",
+	"visualeditor-dialog-transclusion-param-default": "Default value: $1",
+	"visualeditor-dialog-transclusion-param-example": "Example value: $1",
 	"visualeditor-dialog-transclusion-param-info": "Field description",
 	"visualeditor-dialog-transclusion-param-info-missing": "No field description available",
 	"visualeditor-dialog-transclusion-placeholder": "Add a template",

modules/ve-mw/i18n/qqq.json

@@ -210,6 +210,8 @@
 	"visualeditor-dialog-transclusion-multiple-mode": "Label for button that shows advanced options in transclusion dialog",
 	"visualeditor-dialog-transclusion-no-template-description": "Message to user that no template information is available for the template.\n\nParameters:\n* $1 - the title of the template\n* $2 - contains attributes for the link to the template's page. e.g. 'target=\"_blank\" href=\"...\"'\n* $3 - user object for GENDER.",
 	"visualeditor-dialog-transclusion-options": "Label for section with options for templates, content or parameters.\n{{Identical|Options}}",
+	"visualeditor-dialog-transclusion-param-default": "Label for parameter's default value in the template dialog. $1 - Parameter's default value.",
+	"visualeditor-dialog-transclusion-param-example": "Label for parameter's example value in the template dialog. $1 - Parameter's example value.",
 	"visualeditor-dialog-transclusion-param-info": "Title of button that hides and shows parameter descriptions",
 	"visualeditor-dialog-transclusion-param-info-missing": "Title of button that hides and shows parameter descriptions when no description is available",
 	"visualeditor-dialog-transclusion-placeholder": "Label for section with options for adding a new template to a multi part transclusion.\n{{Identical|Add template}}",

modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js

@@ -17,7 +17,8 @@
  * @param {Object} [config] Configuration options
  */
 ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) {
-	var paramName = parameter.getName(),
+	var placeholder = null,
+		paramName = parameter.getName(),
 		page = this;
 
 	// Configuration initialization
@@ -32,6 +33,7 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 	this.parameter = parameter;
 	this.spec = parameter.getTemplate().getSpec();
 	this.defaultValue = parameter.getDefaultValue();
+	this.exampleValue = parameter.getExampleValue();
 
 	this.$info = this.$( '<div>' );
 	this.$actions = this.$( '<div>' );
@@ -39,11 +41,16 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 	this.$field = this.$( '<div>' );
 	this.$more = this.$( '<div>' );
 	this.$description = this.$( '<div>' );
+	if ( this.defaultValue ) {
+		placeholder = ve.msg( 'visualeditor-dialog-transclusion-param-default', this.defaultValue );
+	} else if ( this.exampleValue ) {
+		placeholder = ve.msg( 'visualeditor-dialog-transclusion-param-example', this.exampleValue );
+	}
 	this.valueInput = new OO.ui.TextInputWidget( {
 		$: this.$,
 		multiline: true,
 		autosize: true,
-		placeholder: this.defaultValue
+		placeholder: placeholder
 	} )
 		.setValue( this.parameter.getValue() )
 		.connect( this, { change: 'onValueInputChange' } );
@@ -151,6 +158,27 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 				)
 		);
 	}
+
+	if ( this.defaultValue ) {
+		this.$description.append(
+			this.$( '<p>' )
+				.addClass( 've-ui-mwParameterPage-description-default' )
+				.text(
+					ve.msg( 'visualeditor-dialog-transclusion-param-default', this.defaultValue )
+				)
+		);
+	}
+
+	if ( this.exampleValue ) {
+		this.$description.append(
+			this.$( '<p>' )
+				.addClass( 've-ui-mwParameterPage-description-example' )
+				.text(
+					ve.msg( 'visualeditor-dialog-transclusion-param-example', this.exampleValue )
+				)
+		);
+	}
+
 	if ( this.$description.text().trim() === '' ) {
 		this.infoButton
 			.setDisabled( true )