[Vue] migrate notifications directive & service + UI.Notifications (#18225)

* migrating RateFeature and ReviewLinks + adding AjaxHelper.fetch utility method (all untested)

* get ratefeature component to work, modify matomodialog component to use v-model, add event parameters to createAngularAdapter, allow translate to use variadic args or one string array + rebuild

* remove ratefeature angularjs files

* rebuild + make vue mapping property optional in createANgularJsAdapter

* migrate enrichedheadline and get to work

* fix test

* fix translate

* fix another translate issue & migrate contentblock directive

* fix anchor links, not including the "/" causes angularjs to fail (also on 4.x-dev)

* update expected screenshots

* fix ui test

* fix some test failures

* fix nested transclude issue

* remove content block files

* fix icon spacing that occurs due to angularjs inserting empty comments in between nodes while vue 3 does not

* update some screenshots

* update screenshot (actually fixes an alignment issue)

* update screenshot

* first pass at converting comparisons service/component

* get new code to build and load without error in the UI

* debugging

* getting basic functionaltiy to work

* Update _dataTable.twig

* fix UI test failure + URL encoding/angularjs issue causing back button to not work

* fix order of operations issue

* built vue files

* using ref in setup() is not needed to access this.$refs

* Convert comparisons service angularjs tests to comparison store typescript tests.

* migrate piwik-date-picker directive

* migrate date range picker component (changed invalid date in input handling to just reset back to the previous date since it was easier in vue to do that)

* migrate period-date-picker component (using composition api more when easier for migration)

* convert piwik-expand-onclick directive to vue directive

* migrate expand on hover directive to vue directive

* fix variable reference

* build

* Add materialize-css @types and migrate piwik-dropdown-menu.

* migrate focus-anywhere-but-here directive to vue directive

* migrate focus-if directive

* migrate menudropdown directive

* forgot to remove old files

* built vue files

* first pass at migrating notification directive, notification service and parts of UI.Notification to Vue

* rewrite URL handling to use computed properties in a URL store + do the same for other dependent data in the comparison store to allow vues to subscribe to the properties for changes to global state

* fix some tests

* some more fixes

* more fixes + disallow modifications to MatomoUrl state

* get angularjs unit tests to pass + fix a couple more issues

* another fix

* fix bad merge

* self review + fixes

* remove old fix as it may not be needed anymore

* empty string is not a valid date + do not report invalid date exception just rethrow

* update screenshots and try to fix random failure

* use jquery $destroy event instead of scope one since the scope one is broadcasted

* rangeChange event must be triggered once on mount

* initialize startDateText/endDateText correctly

* use jquery $destroy event instead of angularjs one

* built vue files

* fix menudropdown.directive.js reference

* load vue in installation/updater & correctly make focusanywherebuthere stateful

* correctly implement stateful directives for ExpandOnClick/ExpandOnHover

* less tweak (angularjs comment removal)

* fix submenu check

* quick type fix

* load vue in installation workflow

* add broadcast.js to Installation workflow + do not fail in pk_translate if no translations are loaded

* update expected screenshots (spacing of arrow changed because of angularjs comment no longer being there)

* start moving Notification class code to notifications store

* fix prop type

* fix html escaping

* built vue files

* get toast and other transitions to work + fix broken toast

* move all of notification.js to NotificationStore

* wait for angular to be initialized to post events to avoid loading race condition

* get scroll to notification to work + get initialization of notification groups to work

* correct unmount + remove notifications service file

* fix some test failures

* re add accidentally removed (?) file

* remove no longer needed file

* Add CoreHome UMD in CoreUpdater/Installation.

* self review

* fix type + add default value

* remove file from JS list

* fix test

* fix UI tests

* set correct type in users manager notification and allow scope values to be transformed in createAngularAdapter

* built vue files

* get focus-if to work and remove debugging return;

* rebuilt vue

* built vue files

Co-authored-by: sgiehl <stefan@matomo.org>

6 files changed, 1 insertions, 264 deletions

diff --git a/plugins/CoreHome/angularjs/notification/notification.controller.js b/plugins/CoreHome/angularjs/notification/notification.controller.js
deleted file mode 100644
index 80497e940f..0000000000
--- a/plugins/CoreHome/angularjs/notification/notification.controller.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').controller('NotificationController', NotificationController);
-
-    NotificationController.$inject = ['piwikApi'];
-
-    function NotificationController(piwikApi) {
-        /**
-         * Marks a persistent notification as read so it will not reappear on the next page
-         * load.
-         */
-        this.markNotificationAsRead = function (notificationId) {
-            if (!notificationId) {
-                return;
-            }
-
-            piwikApi.withTokenInUrl();
-            piwikApi.post(
-                { // GET params
-                    module: 'CoreHome',
-                    action: 'markNotificationAsRead'
-                },
-                { // POST params
-                    notificationId: notificationId
-                }
-            );
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.html b/plugins/CoreHome/angularjs/notification/notification.directive.html
deleted file mode 100644
index 82138156f1..0000000000
--- a/plugins/CoreHome/angularjs/notification/notification.directive.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="notification system">
-    <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 -->
-    <div ng-transclude></div>
-
-</div>
diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.js b/plugins/CoreHome/angularjs/notification/notification.directive.js
deleted file mode 100644
index 51ff0d4819..0000000000
--- a/plugins/CoreHome/angularjs/notification/notification.directive.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Directive to show a notification.
- *
- * Note: using this directive is preferred over the Notification class (which uses jquery
- * exclusively).
- *
- * Supports the following attributes:
- *
- * * **context**: Either 'success', 'error', 'info', 'warning'
- * * **type**: Either 'toast', 'persistent', 'transient'
- * * **noclear**: If truthy, no clear button is displayed. For persistent notifications, has no effect.
- *
- * Usage:
- *
- *     <div piwik-notification context="success" type="persistent" noclear="true">
- *         <strong>Info: </strong>My notification message.
- *     </div>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikNotification', piwikNotification);
-
-    piwikNotification.$inject = ['piwik', '$timeout'];
-
-    function piwikNotification(piwik, $timeout) {
-        return {
-            restrict: 'A',
-            scope: {
-                notificationId: '@?',
-                title: '@?notificationTitle', // TODO: shouldn't need this since the title can be specified within
-                                              //       HTML of the node that uses the directive.
-                context: '@?',
-                type: '@?',
-                noclear: '@?',
-                toastLength: '@?'
-            },
-            transclude: true,
-            templateUrl: 'plugins/CoreHome/angularjs/notification/notification.directive.html?cb=' + piwik.cacheBuster,
-            controller: 'NotificationController',
-            controllerAs: 'notification',
-            link: function (scope, element) {
-                scope.toastLength = scope.toastLength || 12 * 1000;
-
-                if (scope.notificationId) {
-                    closeExistingNotificationHavingSameIdIfNeeded(scope.notificationId, element);
-                }
-
-                if (scope.context) {
-                    element.children('.notification').addClass('notification-' + scope.context);
-                }
-
-                if (scope.type == 'persistent') {
-                    // otherwise it is never possible to dismiss the notification
-                    scope.noclear = false;
-                }
-
-                if ('toast' == scope.type) {
-                    addToastEvent();
-                }
-
-                if (!scope.noclear) {
-                    addCloseEvent();
-                }
-
-                function addToastEvent() {
-                    $timeout(function () {
-                        element.fadeOut('slow', function() {
-                            element.remove();
-                        });
-                    }, scope.toastLength);
-                }
-
-                function addCloseEvent() {
-                    element.on('click', '.close', function (event) {
-                        if (event && event.delegateTarget) {
-                            angular.element(event.delegateTarget).remove();
-                        }
-                    });
-                }
-
-                function closeExistingNotificationHavingSameIdIfNeeded(id, notificationElement) {
-                    // TODO: instead of doing a global query for notification, there should be a notification-container
-                    //       directive that manages notifications.
-                    var notificationStillExists = !!notificationElement.parents('body').length;
-                    var existingNode = angular.element('[notification-id=' + id + ']').not(notificationElement);
-                    if (notificationStillExists && existingNode && existingNode.length) {
-                        existingNode.remove();
-                    }
-                }
-            }
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/notification/notification.directive.less b/plugins/CoreHome/angularjs/notification/notification.directive.less
deleted file mode 100644
index ae372d74b6..0000000000
--- a/plugins/CoreHome/angularjs/notification/notification.directive.less
+++ /dev/null
@@ -1,69 +0,0 @@
-.system.notification {
-  .alert;
-
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
-  border: 0 !important;
-
-  p:not(:first-child) {
-    margin-top: 1em;
-  }
-
-  // We have to use !important because the default button style is crazy
-  .close {
-    position: relative;
-    top: -5px;
-    right: -10px;
-    padding: 0 !important;
-    background: transparent !important;
-    border: none !important;
-    float: right;
-    font-size: 20px !important;
-    font-weight: bold;
-    line-height: 20px !important;
-    color: inherit !important;
-    opacity: 0.3;
-    filter: alpha(opacity=30);
-  }
-
-  &.notification-success {
-    .alert-success;
-    color: #eef6ef !important;
-    background-color: @color-green-piwik !important;
-    &:before, p, a {
-      color: #eef6ef;
-    }
-  }
-  &.notification-warning {
-    .alert-warning;
-    background-color: #f57c00;
-    color: #fbf7f1 !important;
-    &:before, p, a {
-      color: #fbf7f1;
-    }
-  }
-  &.notification-danger,
-  &.notification-error {
-    .alert-danger;
-    color: #fdf0f2 !important;
-    background-color: #e53935;
-    &:before, p, a {
-      color: #fdf0f2;
-    }
-  }
-  &.notification-info {
-    .alert-info;
-    color: #f3feff !important;
-    background-color: #00bcd4;
-    &:before, p, a {
-      color: #f3feff;
-    }
-  }
-
-  .help-notification &.notification-info {
-    background-color: @theme-color-help-background-color;
-
-    &:before {
-      content: "\e61f";
-    }
-  }
-}
diff --git a/plugins/CoreHome/angularjs/notification/notification.service.js b/plugins/CoreHome/angularjs/notification/notification.service.js
deleted file mode 100644
index 637af734fa..0000000000
--- a/plugins/CoreHome/angularjs/notification/notification.service.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').factory('notifications', NotificationFactory);
-
-    NotificationFactory.$inject = [];
-
-    function NotificationFactory() {
-
-        return {
-            parseNotificationDivs: parseNotificationDivs,
-            clearTransientNotifications: clearTransientNotifications,
-        };
-
-        function parseNotificationDivs() {
-            var UI = require('piwik/UI');
-
-            var $notificationNodes = $('[data-role="notification"]');
-
-            $notificationNodes.each(function (index, notificationNode) {
-                $notificationNode = $(notificationNode);
-                var attributes = $notificationNode.data();
-                var message    = $notificationNode.html();
-
-                if (message) {
-                    var notification   = new UI.Notification();
-                    attributes.animate = false;
-                    notification.show(message, attributes);
-                }
-
-                $notificationNodes.remove();
-            });
-        }
-
-        function clearTransientNotifications() {
-            $('[piwik-notification][type=transient]').each(function () {
-                var $element = angular.element(this);
-                $element.scope().$destroy();
-                $element.remove();
-            });
-        }
-    }
-
-    angular.module('piwikApp').run(['notifications', function (notifications) {
-        $(function () {
-            notifications.parseNotificationDivs();
-        });
-    }]);
-})();
diff --git a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
index 0c34f1e666..949d85a9b0 100644
--- a/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
+++ b/plugins/CoreHome/angularjs/reporting-menu/reportingmenu.controller.js
@@ -93,7 +93,7 @@
 
             var prefix = '<strong>' + _pk_translate('CoreHome_ReportingCategoryHelpPrefix', [category.name, subcategory.name]) + '</strong><br/>';
 
-            var options = { context: 'info', id: 'reportingmenu-help', type: 'persistent', noclear: true };
+            var options = { context: 'info', id: 'reportingmenu-help', type: 'transient', noclear: true };
             options['class'] = 'help-notification';
 
             notification.show(prefix + subcategory.help, options);