Add fallback template description with link to template page

Shown when there's no template data.

Someday in the future, we will support adding a description inline. Not
yet. Calm down.

Change-Id: I18c0a591b60de53bc124d82c688d71d30ad1d5dd

VisualEditor.php

@@ -922,6 +922,7 @@ $wgResourceModules += array(
 			'visualeditor-dialog-transclusion-insert-transclusion',
 			'visualeditor-dialog-transclusion-loading',
 			'visualeditor-dialog-transclusion-multiple-mode',
+			'visualeditor-dialog-transclusion-no-template-description',
 			'visualeditor-dialog-transclusion-options',
 			'visualeditor-dialog-transclusion-placeholder',
 			'visualeditor-dialog-transclusion-remove-content',

modules/ve-mw/i18n/en.json

@@ -119,6 +119,7 @@
     "visualeditor-dialog-transclusion-insert-transclusion": "Insert transclusion",
     "visualeditor-dialog-transclusion-loading": "Loading...",
     "visualeditor-dialog-transclusion-multiple-mode": "Show options",
+    "visualeditor-dialog-transclusion-no-template-description": "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-placeholder": "New template",
     "visualeditor-dialog-transclusion-remove-content": "Remove content",

modules/ve-mw/i18n/qqq.json

@@ -124,6 +124,7 @@
     "visualeditor-dialog-transclusion-insert-transclusion": "Label for button in the transclusion dialog while in multiple mode that closes the dialog inserts a transclusion",
     "visualeditor-dialog-transclusion-loading": "Label for the apply button in the transclusion dialog while it is disabled and loading",
     "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\n* $1 is the title of the template.\n* $2 contains attributes for the link to the template's page.",
     "visualeditor-dialog-transclusion-options": "Label for section with options for templates, content or parameters.\n{{Identical|Options}}",
     "visualeditor-dialog-transclusion-placeholder": "Label for section with options for adding a new template to a multi part transclusion",
     "visualeditor-dialog-transclusion-remove-content": "Label for button that removes content between transclusion parts",
@@ -233,4 +234,4 @@
     "visualeditor-wikitext-warning": "Contents of notification displayed when Wikitext has been detected.\n\nRefers to:\n* {{msg-mw|Visualeditor-wikitext-warning-link}}\n* {{msg-mw|Visualeditor-ca-editsource}}",
     "visualeditor-wikitext-warning-link": "Link to page describing what Wikitext is.\n\nUsed in:\n* {{msg-mw|Visualeditor-wikitext-warning}}.",
     "visualeditor-wikitext-warning-title": "Title of notification displayed when Wikitext has been detected"
-}
+}

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

@@ -5,6 +5,8 @@
  * @license The MIT License (MIT); see LICENSE.txt
  */
 
+/*global mw */
+
 /**
  * MediaWiki transclusion dialog template page.
  *
@@ -17,6 +19,8 @@
  * @param {Object} [config] Configuration options
  */
 ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) {
+	var title;
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );
 
@@ -24,6 +28,7 @@ ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) {
 	this.template = template;
 	this.spec = template.getSpec();
 	this.$more = this.$( '<div>' );
+	this.$description = this.$( '<div>' );
 	this.removeButton = new OO.ui.ButtonWidget( {
 			'$': this.$,
 			'frameless': true,
@@ -36,8 +41,7 @@ ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) {
 	this.infoFieldset = new OO.ui.FieldsetLayout( {
 		'$': this.$,
 		'label': this.spec.getLabel(),
-		'icon': 'template',
+		'icon': 'template'
-		'$content': this.$( '<div>' ).text( this.spec.getDescription() || '' )
 	} );
 	this.addButton = new OO.ui.ButtonWidget( {
 			'$': this.$,
@@ -49,6 +53,20 @@ ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) {
 		.connect( this, { 'click': 'onAddButtonClick' } );
 
 	// Initialization
+	this.$description.addClass( 've-ui-mwTemplatePage-description' );
+	if ( this.spec.getDescription() ) {
+		this.$description.text( this.spec.getDescription() );
+	} else {
+		title = new mw.Title( this.template.getTitle() );
+		this.$description
+			.addClass( 've-ui-mwTemplatePage-description-missing' )
+			.append( ve.msg(
+				'visualeditor-dialog-transclusion-no-template-description',
+				title.getName(),
+				ve.getHtmlAttributes( { 'target': '_blank', 'href': title.getUrl() } )
+			) );
+	}
+	this.infoFieldset.$element.append( this.$description );
 	this.$more
 		.addClass( 've-ui-mwTemplatePage-more' )
 		.append( this.addButton.$element );

modules/ve-mw/ui/styles/ve.ui.MWPage.css

@@ -119,6 +119,10 @@
 	display: block;
 }
 
+.ve-ui-mwTemplatePage-description-missing {
+	font-style: italic;
+}
+
 /* ve.ui.MWTransclusionContentPage */
 
 .ve-ui-mwTransclusionContentPage .oo-ui-textInputWidget {