From 31c317308c8d31ff836809bcefcd36fba96319e0 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Tue, 8 Feb 2022 08:41:14 -0800
Subject: [PATCH] Do not use the SkinMinervaReplaceNotificationsBadge hook to
 add Echo

Based on work done in I7b9cf401936be2421d0ad4efe963486404d50e6a
we switch to the standard notifications menu for Echo generation

Bug: T301263
Change-Id: Id611cc07aebfb94e50bde8902cbc0627393fa926
---
 includes/Skins/Header.mustache                |   7 +-
 includes/Skins/SkinMinerva.php                | 121 ++++++++++++++----
 .../anonTalkMessage.less                      |   7 +
 3 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/includes/Skins/Header.mustache b/includes/Skins/Header.mustache
index 856e61493..35ee30ba5 100644
--- a/includes/Skins/Header.mustache
+++ b/includes/Skins/Header.mustache
@@ -22,8 +22,11 @@
 		{{/data-search-box}}
 		<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
 			{{^is-anon}}
-					<div class="minerva-user-notifications" id="pt-notifications-alert">
-						{{{html-minerva-user-notifications}}}
+					<div class="minerva-user-notifications"
+						id="pt-notifications-alert">
+						{{#data-portlets.data-notifications}}
+						<ul>{{{html-items}}}</ul>
+						{{/data-portlets.data-notifications}}
 					</div>
 			{{/is-anon}}
 			{{#html-minerva-user-menu}}{{{html-minerva-user-menu}}}{{/html-minerva-user-menu}}
diff --git a/includes/Skins/SkinMinerva.php b/includes/Skins/SkinMinerva.php
index 3d331168a..e8039fce8 100644
--- a/includes/Skins/SkinMinerva.php
+++ b/includes/Skins/SkinMinerva.php
@@ -22,7 +22,6 @@ namespace MediaWiki\Minerva\Skins;
 
 use Action;
 use ExtensionRegistry;
-use Hooks as MWHooks;
 use Html;
 use Language;
 use MediaWiki\Linker\LinkTarget;
@@ -51,6 +50,15 @@ use Title;
  * @ingroup Skins
  */
 class SkinMinerva extends SkinMustache {
+	private const NOTIFICATION_BUTTON_CLASSES = [
+		'user-button',
+		'mw-ui-button',
+		'mw-ui-quiet',
+		'mw-ui-icon',
+		'mw-ui-icon-element',
+		'mw-ui-icon-wikimedia-bellOutline-base20'
+	];
+
 	/** @const LEAD_SECTION_NUMBER integer which corresponds to the lead section
 	 * in editing mode
 	 */
@@ -130,6 +138,74 @@ class SkinMinerva extends SkinMustache {
 		return $pageActionsDirector->buildMenu( $sidebar['TOOLBOX'], $actions );
 	}
 
+	/**
+	 * A notification icon that links to Special:Mytalk when Echo is not installed.
+	 * Consider upstreaming this to core or removing at a future date.
+	 *
+	 * @return array
+	 */
+	private function getNotificationFallbackButton() {
+		return [
+			'link-class' => [
+				'mw-ui-icon',
+				'mw-ui-icon-element',
+				'mw-ui-icon-wikimedia-bellOutline-base20',
+				'mw-ui-button',
+				'mw-ui-quiet'
+			],
+			'href' => SpecialPage::getTitleFor( 'Mytalk' )->getLocalURL(
+				[ 'returnto' => $this->getTitle()->getPrefixedText() ]
+			),
+		];
+	}
+
+	/**
+	 * Minerva differs from other skins in that for users with unread notifications
+	 * instead of a bell with a small square indicating the number of notifications
+	 * it shows a red circle with a number inside. Ideally Vector and Minerva would
+	 * be treated the same but we'd need to talk to a designer about consolidating these
+	 * before making such a decision.
+	 *
+	 * @param array $alert
+	 * @return array
+	 */
+	private function getNotificationCircleButton( array $alert ) {
+		$alertCount = $alert['data']['counter-num'] ?? 0;
+		$alert['html'] =
+			Html::rawElement( 'div', [ 'class' => 'circle' ],
+				Html::element( 'span', [
+					'data-notification-count' => $alertCount,
+				], $alertCount )
+			);
+		$alert['class'] = 'notification-count notification-unseen mw-echo-unseen-notifications';
+		$alert['link-class'] = array_merge(
+			$alert['link-class'],
+			self::NOTIFICATION_BUTTON_CLASSES
+		);
+		return $alert;
+	}
+
+	/**
+	 * Removes the OOUI icon class and adds Minerva notification classes.
+	 *
+	 * @param array $alert
+	 * @return array
+	 */
+	private function getNotificationButton( array $alert ) {
+		$linkClass = $alert['link-class'];
+		$linkClass = array_merge(
+			$linkClass,
+			self::NOTIFICATION_BUTTON_CLASSES
+		);
+		$alert['link-class'] = array_filter(
+			$linkClass,
+			static function ( $class ) {
+				return $class !== 'oo-ui-icon-bellOutline';
+			}
+		);
+		return $alert;
+	}
+
 	/**
 	 * Caches content navigation urls locally for use inside getTemplateData
 	 *
@@ -151,6 +227,23 @@ class SkinMinerva extends SkinMustache {
 			unset( $contentNavigationUrls['namespaces']['special'] );
 		}
 		$this->contentNavigationUrls = $contentNavigationUrls;
+		if ( $this->getUser()->isRegistered() ) {
+			// Unset notice icon. Minerva only shows one entry point to notifications.
+			// This can be reconsidered with a solution to https://phabricator.wikimedia.org/T142981
+			unset( $contentNavigationUrls['notifications']['notifications-notice'] );
+			// Shown to logged in users when Echo is not installed:
+			if ( count( $contentNavigationUrls['notifications'] ) === 0 ) {
+				$contentNavigationUrls['notifications']['mytalks'] = $this->getNotificationFallbackButton();
+			} else {
+				$alert = $contentNavigationUrls['notifications']['notifications-alert'] ?? null;
+				if ( $alert ) {
+					// @phan-suppress-next-line PhanTypeMismatchDimFetch False positive
+					$alertCount = $alert['data']['counter-num'] ?? 0;
+					$contentNavigationUrls['notifications']['notifications-alert'] = $alertCount > 0 ?
+						$this->getNotificationCircleButton( $alert ) : $this->getNotificationButton( $alert );
+				}
+			}
+		}
 	}
 
 	/**
@@ -185,7 +278,6 @@ class SkinMinerva extends SkinMustache {
 			}
 			return $data + [
 				'array-minerva-banners' => $this->prepareBanners( $data['html-site-notice'] ),
-				'html-minerva-user-notifications' => $this->prepareUserNotificationsButton( $this->getNewtalks() ),
 				'data-minerva-main-menu' => $this->getMainMenu()->getMenuData(
 					$nav,
 					$this->buildSidebar()
@@ -412,31 +504,6 @@ class SkinMinerva extends SkinMustache {
 		return MediaWikiServices::getInstance()->getService( 'Minerva.SkinUserPageHelper' );
 	}
 
-	/**
-	 * Prepares the user button.
-	 * @param string $newTalks New talk page messages for the current user
-	 * @return string
-	 */
-	protected function prepareUserNotificationsButton( $newTalks ) {
-		$user = $this->getUser();
-		if ( $user->isRegistered() ) {
-			$currentTitle = $this->getTitle();
-			$notificationsMsg = $this->msg( 'mobile-frontend-user-button-tooltip' )->text();
-			$notificationIconClass = MinervaUI::iconClass( 'bellOutline-base20',
-				'element', '', 'wikimedia' );
-			$badge = Html::element( 'a', [
-				'class' => $notificationIconClass,
-				'href' => SpecialPage::getTitleFor( 'Mytalk' )->getLocalURL(
-					[ 'returnto' => $currentTitle->getPrefixedText() ]
-				),
-			], $notificationsMsg );
-			MWHooks::run( 'SkinMinervaReplaceNotificationsBadge',
-				[ $user, $currentTitle, &$badge ] );
-			return $badge;
-		}
-		return '';
-	}
-
 	/**
 	 * Get a history link which describes author and relative time of last edit
 	 * @param Title $title The Title object of the page being viewed
diff --git a/resources/skins.minerva.base.styles/anonTalkMessage.less b/resources/skins.minerva.base.styles/anonTalkMessage.less
index a9f563582..6c691a5d7 100644
--- a/resources/skins.minerva.base.styles/anonTalkMessage.less
+++ b/resources/skins.minerva.base.styles/anonTalkMessage.less
@@ -13,6 +13,13 @@ div.minerva-anon-talk-message {
 	}
 }
 
+// Hide the alert provided by Echo,
+// as there is no space for it in header.
+// stylelint-disable-next-line selector-max-id
+#pt-talk-alert {
+	display: none;
+}
+
 // Hide on all non-main namespaces
 .ns-0 .minerva-anon-talk-message {
 	display: none;