[Vue] migrate dropdown and related directives (#18214)

* 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

* 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)

* fix prop type

* built vue files

* re add accidentally removed (?) file

* remove no longer needed file

* Add CoreHome UMD in CoreUpdater/Installation.

* self review

* remove file from JS list

* fix UI tests

* apply review fixes

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

4 files changed, 13 insertions, 5 deletions

diff --git a/plugins/CoreUpdater/Controller.php b/plugins/CoreUpdater/Controller.php
index e647fcdb42..dcfb7532d7 100644
--- a/plugins/CoreUpdater/Controller.php
+++ b/plugins/CoreUpdater/Controller.php
@@ -14,6 +14,7 @@ use Piwik\Common;
 use Piwik\Config;
 use Piwik\DataTable\Renderer\Json;
 use Piwik\DbHelper;
+use Piwik\Development;
 use Piwik\Filechecks;
 use Piwik\FileIntegrity;
 use Piwik\Filesystem;
@@ -22,6 +23,7 @@ use Piwik\Nonce;
 use Piwik\Option;
 use Piwik\Piwik;
 use Piwik\Plugin\Manager as PluginManager;
+use Piwik\Plugins\CoreVue\CoreVue;
 use Piwik\Plugins\LanguagesManager\LanguagesManager;
 use Piwik\Plugins\Marketplace\Plugins;
 use Piwik\SettingsPiwik;
@@ -98,6 +100,7 @@ class Controller extends \Piwik\Plugin\Controller
             'node_modules/materialize-css/dist/js/materialize.min.js',
             "plugins/CoreHome/javascripts/materialize-bc.js",
             'plugins/Morpheus/javascripts/piwikHelper.js',
+            "plugins/CoreHome/javascripts/broadcast.js",
             'plugins/CoreUpdater/javascripts/updateLayout.js',
             'node_modules/angular/angular.min.js',
             'node_modules/angular-sanitize/angular-sanitize.min.js',
@@ -108,12 +111,16 @@ class Controller extends \Piwik\Plugin\Controller
             'plugins/CoreHome/angularjs/common/filters/filter.module.js',
             'plugins/CoreHome/angularjs/common/filters/translate.js',
             'plugins/CoreHome/angularjs/common/directives/directive.module.js',
-            'plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js',
             'plugins/CoreHome/angularjs/piwikApp.config.js',
             'plugins/CoreHome/angularjs/piwikApp.js',
             'plugins/Installation/javascripts/installation.js',
         );
 
+        CoreVue::addJsFilesTo($files);
+
+        $coreHomeUmd = Development::isEnabled() ? 'CoreHome.umd.js' : 'CoreHome.umd.min.js';
+        $files[] = "plugins/CoreHome/vue/dist/$coreHomeUmd";
+
         return AssetManager::compileCustomJs($files);
     }
 
diff --git a/plugins/CoreUpdater/templates/layout.twig b/plugins/CoreUpdater/templates/layout.twig
index 5593435c4f..a78aff6603 100644
--- a/plugins/CoreUpdater/templates/layout.twig
+++ b/plugins/CoreUpdater/templates/layout.twig
@@ -8,6 +8,7 @@
     <meta name="robots" content="noindex,nofollow">
     <meta name="google" content="notranslate">
 
+    <script>window.piwik = {};</script>
     <link rel="stylesheet" type="text/css" href="index.php?module=CoreUpdater&action=getUpdaterCss"/>
     <script type="text/javascript" src="index.php?module=CoreUpdater&action=getUpdaterJs"></script>
 
diff --git a/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main.png b/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main.png
index 0908ac8ef9..50221a34a2 100644
--- a/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main.png
+++ b/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:88d2b601b770783a3cb9a71357859c6bf7ef48775ce2b7e59412ad6abb8099a9
-size 348613
+oid sha256:ffe28867eeb1e4bc3315f74360d1b6966063b2b396b90d318469f7184f43eb78
+size 348576
diff --git a/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main_instance.png b/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main_instance.png
index 7e62977a0f..bb37df3ad0 100644
--- a/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main_instance.png
+++ b/plugins/CoreUpdater/tests/UI/expected-screenshots/CoreUpdaterDb_main_instance.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:abe28d78c7cf52bcfd71a3b77641db7dbcdb428157ba10d7f07ea59e324576d1
-size 350194
+oid sha256:33282b0571e22f4aa815f3c8d3062150b5f53591776101571d0536a07b44aa8b
+size 350156