Show a default message if no notifications are available

Bug: T112251
Change-Id: Ia17c50a11ea0a49041795332ba79bd3cbda5b548

Resources.php

@@ -33,6 +33,7 @@ $wgResourceModules += array(
 	'ext.echo.ui' => $echoResourceTemplate + array(
 		'scripts' => array(
 			'ooui/mw.echo.ui.js',
+			'ooui/mw.echo.ui.PlaceholderOptionWidget.js',
 			'ooui/mw.echo.ui.NotificationsWidget.js',
 			'ooui/mw.echo.ui.NotificationOptionWidget.js',
 			'ooui/mw.echo.ui.NotificationBadgeWidget.js'
@@ -73,6 +74,7 @@ $wgResourceModules += array(
 			'echo-notification-message-text-only',
 			'echo-email-batch-bullet',
 			'echo-api-failure',
+			'echo-notification-placeholder',
 			'tooltip-pt-notifications-alert',
 			'tooltip-pt-notifications-message',
 			'mypreferences'

i18n/en.json

@@ -49,6 +49,7 @@
 	"echo-feedback": "Feedback",
 	"echo-quotation-marks": "\"$1\"",
 	"echo-api-failure": "Could not retrieve notifications Please try again. (Error $1)",
+	"echo-notification-placeholder": "There are no notifications.",
 	"notification-link-text-view-message": "View message",
 	"notification-link-text-view-mention": "View mention",
 	"notification-link-text-view-changes": "View changes",

i18n/qqq.json

@@ -70,6 +70,7 @@
 	"echo-feedback": "Text for a link that goes to a feedback survey shown at [[Special:Notifications]].\n{{Identical|Feedback}}",
 	"echo-quotation-marks": "Unused at this time.\n\n{{optional}}\nPuts the edit summary in quotation marks. Only translate if different than English.\n\nParameters:\n* $1 - ...",
 	"echo-api-failure": "Label for the text that notes an error in retrieving notifications for the Echo popup.\n$1 - The api error code.",
+	"echo-notification-placeholder": "Label for the text that appears if there are no notifications in the Echo popup.",
 	"notification-link-text-view-message": "Label for button that links to a message on your talk page.\n{{Identical|View message}}",
 	"notification-link-text-view-mention": "Label for button that links to a discussion where you were mentioned.",
 	"notification-link-text-view-changes": "Label for button that links to a \"diff\" view showing changes made to a page. This is an alternative to the wording in {{msg-mw|notification-link-text-view-edit}}, which serves essentially the same function.\n{{Identical|View changes}}",

modules/ooui/mw.echo.ui.NotificationBadgeWidget.js

@@ -223,13 +223,22 @@
 					// Update seen time
 					widget.notificationsModel.updateSeenTime();
 				} )
-				.fail( function ( errCode, errObj ) {
-					var info = OO.getProp( errObj, 'error', 'info' );
-					// Display the message only if there are no notifications
-					if ( widget.notificationsModel.isEmpty() ) {
-						widget.notificationsWidget.resetLoadingOption( mw.msg( 'echo-api-failure', errCode, info ) );
+				.then(
+					// Success
+					function () {
+						// Display the message only if there are no notifications
+						if ( widget.notificationsModel.isEmpty() ) {
+							widget.notificationsWidget.resetLoadingOption( mw.msg( 'echo-notification-placeholder' ) );
+						}
+					},
+					// Fail
+					function ( errCode ) {
+						// Display the message only if there are no notifications
+						if ( widget.notificationsModel.isEmpty() ) {
+							widget.notificationsWidget.resetLoadingOption( mw.msg( 'echo-api-failure', errCode ) );
+						}
 					}
-				} )
+				)
 				.always( function () {
 					// Pop pending
 					widget.popPending();

modules/ooui/mw.echo.ui.NotificationsWidget.js

@@ -22,10 +22,7 @@
 		mw.echo.ui.NotificationsWidget.parent.call( this, config );
 
 		// Dummy 'loading' option widget
-		this.loadingOptionWidget = new OO.ui.OptionWidget( {
-			data: null,
-			classes: [ 'mw-echo-ui-notificationsWidget-loadingOption' ]
-		} );
+		this.loadingOptionWidget = new mw.echo.ui.PlaceholderOptionWidget();
 		this.addItems( [ this.loadingOptionWidget ] );
 
 		// Events

modules/ooui/mw.echo.ui.PlaceholderOptionWidget.js

@@ -0,0 +1,24 @@
+( function ( mw, $ ) {
+	/**
+	 * Placeholder notification option widget for echo popup.
+	 *
+	 * @class
+	 * @extends OO.ui.OptionWidget
+	 *
+	 * @constructor
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.echo.ui.PlaceholderOptionWidget = function MwEchoUiPlaceholderOptionWidget( config ) {
+		// Parent constructor
+		mw.echo.ui.PlaceholderOptionWidget.parent.call( this, $.extend( { data: null }, config ) );
+
+		this.$element.addClass( 'mw-echo-ui-notificationsWidget-loadingOption' );
+	};
+
+	OO.inheritClass( mw.echo.ui.PlaceholderOptionWidget, OO.ui.OptionWidget );
+
+	mw.echo.ui.PlaceholderOptionWidget.static.selectable = false;
+	mw.echo.ui.PlaceholderOptionWidget.static.highlightable = false;
+	mw.echo.ui.PlaceholderOptionWidget.static.pressable = false;
+
+} )( mediaWiki, jQuery );