Update mark notification as read method (#17518)

* update mark notification as read method

* Ensure notificationId is passed correctly to markNotificationAsRead

* Adds notification UI tests

Co-authored-by: sgiehl <[email protected]>

plugins/CoreHome/Controller.php

@@ -11,6 +11,7 @@
 use Exception;
 use Piwik\API\Request;
 use Piwik\Common;
+use Piwik\DataTable\Renderer\Json;
 use Piwik\Date;
 use Piwik\FrontController;
 use Piwik\Notification\Manager as NotificationManager;
@@ -42,7 +43,7 @@ public function __construct(Translator $translator)
 
         parent::__construct();
     }
-    
+
     public function getDefaultAction()
     {
         return 'redirectToCoreHomeIndex';
@@ -156,8 +157,14 @@ public function showInContext()
 
     public function markNotificationAsRead()
     {
+        Piwik::checkUserHasSomeViewAccess();
+        $this->checkTokenInUrl();
+
         $notificationId = Common::getRequestVar('notificationId');
         NotificationManager::cancel($notificationId);
+
+        Json::sendHeaderJSON();
+        return json_encode(true);
     }
 
     protected function getDefaultIndexView()

plugins/CoreHome/angularjs/notification/notification.controller.js

@@ -14,12 +14,12 @@
          * Marks a persistent notification as read so it will not reappear on the next page
          * load.
          */
-        this.markNotificationAsRead = function () {
-            var notificationId = this.notificationId;
+        this.markNotificationAsRead = function (notificationId) {
             if (!notificationId) {
                 return;
             }
 
+            piwikApi.withTokenInUrl();
             piwikApi.post(
                 { // GET params
                     module: 'CoreHome',

plugins/CoreHome/angularjs/notification/notification.directive.html

@@ -1,5 +1,5 @@
 <div class="notification system">
-    <button type="button" class="close" data-dismiss="alert" ng-if="!noclear" ng-click="notification.markNotificationAsRead()">&times;</button>
+    <button type="button" class="close" data-dismiss="alert" ng-if="!noclear" ng-click="notification.markNotificationAsRead(notificationId)">&times;</button>
     <strong ng-if="title">{{ title }}</strong>
 
     <!-- ng-transclude causes directive child elements to be added here -->

plugins/CoreHome/config/test.php

@@ -0,0 +1,38 @@
+<?php
+
+use Piwik\Notification;
+
+return [
+    'observers.global' => DI\add([
+        [
+            'Request.dispatch',
+            DI\value(
+                function () {
+                    if (!empty($_GET['setNotifications']) && $_GET['setNotifications'] == 1) {
+                        // trigger some notification
+                        $notification          = new Notification('This is a persistent test notification');
+                        $notification->title   = 'Warning:';
+                        $notification->context = Notification::CONTEXT_WARNING;
+                        $notification->type    = Notification::TYPE_PERSISTENT;
+                        $notification->flags   = Notification::FLAG_CLEAR;
+                        Notification\Manager::notify('NotificationFixture_persistent_warning', $notification);
+
+                        $notification          = new Notification('This is another persistent test notification');
+                        $notification->title   = 'Error:';
+                        $notification->context = Notification::CONTEXT_ERROR;
+                        $notification->type    = Notification::TYPE_PERSISTENT;
+                        $notification->flags   = Notification::FLAG_CLEAR;
+                        Notification\Manager::notify('NotificationFixture_persistent_error', $notification);
+
+                        $notification          = new Notification('This is transient test notification');
+                        $notification->title   = 'Error:';
+                        $notification->context = Notification::CONTEXT_ERROR;
+                        $notification->type    = Notification::TYPE_TRANSIENT;
+                        $notification->flags   = Notification::FLAG_CLEAR;
+                        Notification\Manager::notify('NotificationFixture_transient_error', $notification);
+                    }
+                }
+            ),
+        ],
+    ]),
+];

plugins/CoreHome/tests/UI/Notifications_spec.js

@@ -0,0 +1,52 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * Dashboard screenshot tests.
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe('Notifications', function () {
+    this.timeout(0);
+
+    this.fixture = "Piwik\\Tests\\Fixtures\\OneVisit";
+
+    var url = "?module=CoreAdminHome&action=home&idSite=1&period=day&date=yesterday";
+
+    it('should show notifications', async function () {
+        await page.goto(url + '&setNotifications=1');
+        await page.waitForNetworkIdle();
+
+        var elem = await page.waitForSelector('#notificationContainer');
+
+        expect(await elem.screenshot()).to.matchImage('loaded');
+    });
+
+    it('should still show persistent notifications on reload', async function () {
+        await page.goto(url);
+        await page.waitForNetworkIdle();
+
+        var elem = await page.waitForSelector('#notificationContainer');
+
+        expect(await elem.screenshot()).to.matchImage('reloaded');
+    });
+
+    it('should close a notification', async function () {
+        await page.click('.notification:first-child .close');
+        await page.waitForNetworkIdle();
+
+        var elem = await page.waitForSelector('#notificationContainer');
+
+        expect(await elem.screenshot()).to.matchImage('close');
+    });
+
+    it('should still be closed on reload', async function () {
+        await page.reload();
+        await page.waitForNetworkIdle();
+
+        var elem = await page.waitForSelector('#notificationContainer');
+
+        expect(await elem.screenshot()).to.matchImage('close_reload');
+    });
+});