[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>

1 files changed, 17 insertions, 158 deletions

diff --git a/plugins/CoreHome/javascripts/notification.js b/plugins/CoreHome/javascripts/notification.js
index da3216048f..f55b6504eb 100644
--- a/plugins/CoreHome/javascripts/notification.js
+++ b/plugins/CoreHome/javascripts/notification.js
@@ -6,192 +6,51 @@
  */
 
 (function ($, require) {
-
     var exports = require('piwik/UI');
 
     /**
-     * Creates a new notifications.
-     *
-     * Example:
-     * var UI = require('piwik/UI');
-     * var notification = new UI.Notification();
-     * notification.show('My Notification Message', {title: 'Low space', context: 'warning'});
+     * @deprecated
      */
     var Notification = function () {
-        this.$node = null;
+        this.notificationId = null;
     };
 
     /**
-     * Makes the notification visible.
-     *
-     * @param    {string}  message    The actual message that will be displayed. Must be set.
-     * @param    {Object}  [options]
-     * @param    {string}  [options.id]         Only needed for persistent notifications. The id will be sent to the
-     *                                          frontend once the user closes the notifications. The notification has to
-     *                                          be registered/notified under this name
-     * @param    {string}  [options.title]      The title of the notification. For instance the plugin name.
-     * @param    {bool}    [options.animate=true]     If enabled, the notification will be faded in.
-     * @param    {string}  [options.context=warning]  Context of the notification: 'info', 'warning', 'success' or
-     *                                                'error'
-     * @param    {string}  [options.type=transient]   The type of the notification: Either 'toast' or 'transitent'
-     * @param    {bool}    [options.noclear=false]    If set, the close icon is not displayed.
-     * @param    {object}  [options.style]            Optional style/css dictionary. For instance {'display': 'inline-block'}
-     * @param    {string}  [options.placeat]          By default, the notification will be displayed in the "stats bar".
-     *                                                You can specify any other CSS selector to place the notifications
-     *                                                wherever you want.
+     * @deprecated use NotificationsStore.show() in CoreHome Vue module
      */
     Notification.prototype.show = function (message, options) {
-        checkMessage(message);
         options = checkOptions(options);
-
-        var template = generateNotificationHtmlMarkup(options, message);
-        this.$node   = placeNotification(template, options);
+        options.noclear = !! options.noclear;
+        this.notificationId = window.CoreHome.NotificationsStore.show($.extend({ message: message }, options));
     };
 
     /**
-     * Removes a previously shown notification having the given notification id.
-     *
-     *
-     * @param {string}  notificationId   The id of a notification that was previously registered.
+     * @deprecated use NotificationsStore.remove() in CoreHome Vue module
      */
     Notification.prototype.remove = function (notificationId) {
-        $('[piwik-notification][notification-id=' + notificationId + ']').remove();
+        window.CoreHome.NotificationsStore.remove(notificationId);
     };
 
-    Notification.prototype.scrollToNotification = function () {
-        if (this.$node) {
-            piwikHelper.lazyScrollTo(this.$node, 250);
+  /**
+   * @deprecated use NotificationsStore.scrollToNotification() in CoreHome Vue module
+   */
+  Notification.prototype.scrollToNotification = function () {
+        if (this.notificationId) {
+            window.CoreHome.NotificationsStore.scrollToNotification(this.notificationId);
         }
     };
 
     /**
-     * Shows a notification at a certain point with a quick upwards animation.
-     *
-     * TODO: if the materializecss version matomo uses is updated, should use their toasts.
-     *
-     * @type {Notification}
-     * @param    {string}  message    The actual message that will be displayed. Must be set.
-     * @param    {Object}  options
-     * @param    {string}  options.placeat          Where to place the notification. Required.
-     * @param    {string}  [options.id]         Only needed for persistent notifications. The id will be sent to the
-     *                                          frontend once the user closes the notifications. The notification has to
-     *                                          be registered/notified under this name
-     * @param    {string}  [options.title]      The title of the notification. For instance the plugin name.
-     * @param    {string}  [options.context=warning]  Context of the notification: 'info', 'warning', 'success' or
-     *                                                'error'
-     * @param    {string}  [options.type=transient]   The type of the notification: Either 'toast' or 'transitent'
-     * @param    {bool}    [options.noclear=false]    If set, the close icon is not displayed.
-     * @param    {object}  [options.style]            Optional style/css dictionary. For instance {'display': 'inline-block'}
+     * @deprecated use NotificationsStore.toast() in CoreHome Vue module
      */
     Notification.prototype.toast = function (message, options) {
-        checkMessage(message);
         options = checkOptions(options);
-
-        var $placeat = $(options.placeat);
-        if (!$placeat.length) {
-            throw new Error("A valid selector is required for the placeat option when using Notification.toast().");
-        }
-
-        var $template = $(generateNotificationHtmlMarkup(options, message)).hide();
-        $('body').append($template);
-
-        compileNotification($template);
-
-        $template.css({
-            position: 'absolute',
-            left: $placeat.offset().left,
-            top: $placeat.offset().top
-        });
-        setTimeout(function () {
-            $template.animate(
-                {
-                    top: $placeat.offset().top - $template.height()
-                },
-                {
-                    duration: 300,
-                    start: function () {
-                        $template.show();
-                    }
-                }
-            );
-        });
+        options.noclear = !! options.noclear;
+        window.CoreHome.NotificationsStore.toast($.extend({ message: message }, options));
     };
 
     exports.Notification = Notification;
 
-    function generateNotificationHtmlMarkup(options, message) {
-        var attributeMapping = {
-                id: 'notification-id',
-                title: 'notification-title',
-                context: 'context',
-                type: 'type',
-                noclear: 'noclear',
-                class: 'class',
-                toastLength: 'toast-length'
-            },
-            html = '<div piwik-notification';
-
-        for (var key in attributeMapping) {
-            if (attributeMapping.hasOwnProperty(key)
-                && options[key]
-            ) {
-                html += ' ' + attributeMapping[key] + '="' + options[key].toString().replace(/"/g, "&quot;") + '"';
-            }
-        }
-
-        html += '><div ng-non-bindable>' + message + '</div></div>';
-
-        return html;
-    }
-
-    function compileNotification($node) {
-        angular.element(document).injector().invoke(function ($compile, $rootScope) {
-            $compile($node)($rootScope.$new(true));
-        });
-    }
-
-    function placeNotification(template, options) {
-        var $notificationNode = $(template);
-
-        // compile the template in angular
-        compileNotification($notificationNode);
-
-        if (options.style) {
-            $notificationNode.css(options.style);
-        }
-
-        var notificationPosition = '#notificationContainer';
-        var method = 'append';
-        if (options.placeat) {
-            notificationPosition = options.placeat;
-        } else {
-            // If a modal is open, we want to make sure the error message is visible and therefore show it within the opened modal
-            var modalSelector = '.modal.open .modal-content';
-            var modalOpen = $(modalSelector);
-            if (modalOpen.length) {
-                notificationPosition = modalSelector;
-                method = 'prepend';
-            }
-        }
-
-        $notificationNode = $notificationNode.hide();
-        $(notificationPosition)[method]($notificationNode);
-
-        if (false === options.animate) {
-            $notificationNode.show();
-        } else {
-            $notificationNode.fadeIn(1000);
-        }
-
-        return $notificationNode;
-    }
-
-    function checkMessage(message) {
-        if (!message) {
-            throw new Error('No message given, cannot display notification');
-        }
-    }
-
     function checkOptions(options) {
         if (options && !$.isPlainObject(options)) {
             throw new Error('Options has the wrong format, cannot display notification');
@@ -201,4 +60,4 @@
         return options;
     }
 
-})(jQuery, require);
\ No newline at end of file
+})(jQuery, require);