[Vue] migrate siteselector directive and quick-access directive (#18292)

* 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

* start migrating siteselector

* small addition

* migrate rest of site selector code + make some breaking changes to function signatures in createAngularJsAdapter

* disable webpack asset size hints/warnings + get siteselector code to build

* fixing some bugs

* fix some more issues (allow specifing require in createAngularJsAdapter and make AjaxHelper promises abortable)

* get npm test to pass

* a couple more fixes

* remove existing files

* convert quick-access directive and use shared code/state with site selector

* remove site selector model

* fix more issues and get UI tests to pass for quickaccess

* remove debugging code / todo

* fix initial value

* add back a $timeout()

* fixing tests, the post blur scope.$apply()s are apparently required for angularjs to function properly

* fixing more UI test failures

* rebuild

* fix vue build

* why were these deleted?

* remove debug code

* fix css class issue + update expected screenshots

* rebuild CoreHome

* revert styling change

* built vue files

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

* rebuilt vue

* should not need to specify type there

* built CoreHome

* built vue files

* apply review feedback

* get auto clearing behavior to work in site selector

* fix a couple more bugs

* rebuild vue

* escape htmle entities in site name

* tweak

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

1 files changed, 39 insertions, 34 deletions

diff --git a/plugins/CoreHome/javascripts/broadcast.js b/plugins/CoreHome/javascripts/broadcast.js
index de6af9a996..fe3b262b32 100644
--- a/plugins/CoreHome/javascripts/broadcast.js
+++ b/plugins/CoreHome/javascripts/broadcast.js
@@ -314,7 +314,7 @@ var broadcast = {
      * @param {array} paramsToRemove Optional parameters to remove from the URL.
      * @return {void}
      */
-    propagateNewPage: function (str, showAjaxLoading, strHash, paramsToRemove) {
+    propagateNewPage: function (str, showAjaxLoading, strHash, paramsToRemove, wholeNewUrl) {
         // abort all existing ajax requests
         globalAjaxQueue.abort();
 
@@ -337,61 +337,66 @@ var broadcast = {
         }
 
         var oldUrl = currentSearchStr + currentHashStr;
+        var newUrl;
 
-        // remove all array query params that are currently set. if we don't do this the array parameters we add
-        // just get added to the existing parameters.
-        params_vals.forEach(function (param) {
+        if (!wholeNewUrl) {
+          // remove all array query params that are currently set. if we don't do this the array parameters we add
+          // just get added to the existing parameters.
+          params_vals.forEach(function (param) {
             if (/\[]=/.test(decodeURIComponent(param))) {
-                var paramName = decodeURIComponent(param).split('[]=')[0];
-                removeParam(paramName);
+              var paramName = decodeURIComponent(param).split('[]=')[0];
+              removeParam(paramName);
             }
-        });
+          });
 
-        // remove parameters if needed
-        paramsToRemove.forEach(function (paramName) {
+          // remove parameters if needed
+          paramsToRemove.forEach(function (paramName) {
             removeParam(paramName);
-        });
+          });
 
-        // update/add parameters based on whether the parameter is an array param or not
-        params_vals.forEach(function (param) {
-            if(!param.length) {
-                return; // updating with empty string would destroy some values
+          // update/add parameters based on whether the parameter is an array param or not
+          params_vals.forEach(function (param) {
+            if (!param.length) {
+              return; // updating with empty string would destroy some values
             }
 
             if (/\[]=/.test(decodeURIComponent(param))) { // array param value
-                currentSearchStr = broadcast.addArrayParamValue(param, currentSearchStr);
+              currentSearchStr = broadcast.addArrayParamValue(param, currentSearchStr);
 
-                if (currentHashStr.length !== 0) {
-                    currentHashStr = broadcast.addArrayParamValue(param, currentHashStr);
-                }
+              if (currentHashStr.length !== 0) {
+                currentHashStr = broadcast.addArrayParamValue(param, currentHashStr);
+              }
             } else {
-                // update both the current search query and hash string
-                currentSearchStr = broadcast.updateParamValue(param, currentSearchStr);
+              // update both the current search query and hash string
+              currentSearchStr = broadcast.updateParamValue(param, currentSearchStr);
 
-                if (currentHashStr.length !== 0) {
-                    currentHashStr = broadcast.updateParamValue(param, currentHashStr);
-                }
+              if (currentHashStr.length !== 0) {
+                currentHashStr = broadcast.updateParamValue(param, currentHashStr);
+              }
             }
-        });
+          });
 
-        var updatedUrl = new RegExp('&updated=([0-9]+)');
-        var updatedCounter = updatedUrl.exec(currentSearchStr);
-        if (!updatedCounter) {
+          var updatedUrl = new RegExp('&updated=([0-9]+)');
+          var updatedCounter = updatedUrl.exec(currentSearchStr);
+          if (!updatedCounter) {
             currentSearchStr += '&updated=1';
-        } else {
+          } else {
             updatedCounter = 1 + parseInt(updatedCounter[1]);
             currentSearchStr = currentSearchStr.replace(new RegExp('(&updated=[0-9]+)'), '&updated=' + updatedCounter);
-        }
+          }
 
-        if (strHash && currentHashStr.length != 0) {
+          if (strHash && currentHashStr.length != 0) {
             var params_hash_vals = strHash.split("&");
             for (var i = 0; i < params_hash_vals.length; i++) {
-                currentHashStr = broadcast.updateParamValue(params_hash_vals[i], currentHashStr);
+              currentHashStr = broadcast.updateParamValue(params_hash_vals[i], currentHashStr);
             }
-        }
+          }
 
-        // Now load the new page.
-        var newUrl = currentSearchStr + currentHashStr;
+          // Now load the new page.
+          newUrl = currentSearchStr + currentHashStr;
+        } else {
+          newUrl = wholeNewUrl;
+        }
 
         var $rootScope = piwikHelper.getAngularDependency('$rootScope');
         if ($rootScope) {