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

14 files changed, 32 insertions, 24 deletions

diff --git a/plugins/Installation/Controller.php b/plugins/Installation/Controller.php
index 099496728c..a26a42fe1b 100644
--- a/plugins/Installation/Controller.php
+++ b/plugins/Installation/Controller.php
@@ -17,10 +17,12 @@ use Piwik\Container\StaticContainer;
 use Piwik\DataAccess\ArchiveTableCreator;
 use Piwik\Db;
 use Piwik\DbHelper;
+use Piwik\Development;
 use Piwik\Filesystem;
 use Piwik\Option;
 use Piwik\Piwik;
 use Piwik\Plugin\Manager;
+use Piwik\Plugins\CoreVue\CoreVue;
 use Piwik\Plugins\Diagnostics\DiagnosticService;
 use Piwik\Plugins\LanguagesManager\LanguagesManager;
 use Piwik\Plugins\SitesManager\API as APISitesManager;
@@ -556,13 +558,18 @@ class Controller extends \Piwik\Plugin\ControllerAdmin
             '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',
             'plugins/Morpheus/javascripts/piwikHelper.js',
+            "plugins/CoreHome/javascripts/broadcast.js",
         );
 
+        CoreVue::addJsFilesTo($files);
+
+        $coreHomeUmd = Development::isEnabled() ? 'CoreHome.umd.js' : 'CoreHome.umd.min.js';
+        $files[] = "plugins/CoreHome/vue/dist/$coreHomeUmd";
+
         if (defined('PIWIK_TEST_MODE') && PIWIK_TEST_MODE
             && file_exists(PIWIK_DOCUMENT_ROOT . '/tests/resources/screenshot-override/override.js')) {
             $files[] = 'tests/resources/screenshot-override/override.js';
diff --git a/plugins/Installation/templates/layout.twig b/plugins/Installation/templates/layout.twig
index 05ebebd008..6a8e5be08f 100644
--- a/plugins/Installation/templates/layout.twig
+++ b/plugins/Installation/templates/layout.twig
@@ -6,6 +6,7 @@
     <meta name="google" content="notranslate">
     <title>Matomo {{ piwikVersion }} &rsaquo; {{ 'Installation_Installation'|translate }}</title>
 
+    <script>window.piwik = {};</script>
     <link rel="stylesheet" type="text/css" href="index.php?module=Installation&action=getInstallationCss"/>
     <script type="text/javascript" src="index.php?module=Installation&action=getInstallationJs"></script>
 
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_congrats.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_congrats.png
index 09484df48d..b9cf3b197e 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_congrats.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_congrats.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:419c0aab43421ffd4e266e882d774dd0852420066ec493f7a8c3bb18489ab72b
-size 238482
+oid sha256:5b323f6efdbe5eb7d974bd5c8373ac6025ed1ee85cde2613169be49f64100c66
+size 238486
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_created.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_created.png
index abc3f12601..9787932fb2 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_created.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_created.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0fb592393904c7bfe7c6eb25e5724c0220d244ef8e58bdcaa05d6e4c70758215
+oid sha256:60290f6a6ecb90a3fcb4dbb23c8ba56dc71daca33179aac37df7b460df407409
 size 45937
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup.png
index 7fd7ea1a70..a3f2f51afe 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3478dc4c3f94c76436d0cdec26954f2bcb155689f0ca12dcc57a60a0e4a7b2fe
-size 57339
+oid sha256:d93cce14d8524d53ba35b81621e6fba03f9a2d2495cd2c311bbab7823790a397
+size 57342
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup_fail.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup_fail.png
index 7c6def5e70..438e52b4fa 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup_fail.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_db_setup_fail.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:07dcc84c6269d0fbd62705f61a79f13c496b4186aa6e2fa240238299ae427065
-size 66569
+oid sha256:67f3860a138e73acc9b05021651032c62eaeeb9375cacb290e68994a285542d4
+size 66572
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
index 9949dbf9a5..78b77b5b62 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d2f2db5abff964e2831016bb755ae8eef582d4ec58e0aa5789d4372679a9841
-size 240512
+oid sha256:b0ae5f7581cef949c2580b10c09ca3f3d712206e66e015f41b665437b860baca
+size 240519
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website.png
index 4fd6c64772..ef83cc8557 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:71f9f3ec237041d08e9e969c0650ebf884ed8f0f6fbe549e305e92cf910df261
-size 79017
+oid sha256:f6d9f99d0e1af35cd3298495b5bd7a0bd06abb8515abac17533d9039a68aecb9
+size 79019
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website_fail.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website_fail.png
index b615ba3885..1e9f311160 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website_fail.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_setup_website_fail.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:49ca3ce1148257b04c92b2fdb343813e7bad1b1cbc73965b3bf70b388a706fed
-size 83895
+oid sha256:762600e40190b8e5d88383ef8cd3e39b374734e6850d6d2c0f57c537dd6b7ce6
+size 83896
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_start.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_start.png
index 45bac029a5..7c03cb2fac 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_start.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_start.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59131ec24e226f041ecd2504a18079889da876134013e9798d066d6a99234c50
-size 52552
+oid sha256:fb9e4bdb29bb124a7eb5472e762dc6eea486cc1a4afee7a68c65cd717e35fad0
+size 52554
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser.png
index 2b8e3da94a..8f45bb2b36 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:74cd83a2193242d515f0c0808ba34469be6469cd9ed376212d8c084f3e580e9a
-size 96619
+oid sha256:dec55a0fbcbfdc98d2efdd01415db4fc21d3b3a2a89cb46bdbafdb8421e897b2
+size 96621
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
index 2768e71815..b1945444f4 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_de.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f40e5b80761ea5bc925f39287276426d164322affc4ce3f21a28d0dda3da00e
-size 112859
+oid sha256:c0c8420bc76c7a66c29f55a66dd0bd5ef5db223a42439695ed001e8d11febed0
+size 112864
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_fail.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_fail.png
index 336fa5c425..e240402fdb 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_fail.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_superuser_fail.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5f9b9d2f22de6f1a90adf0987bfee64527d31452c9b213a37a44f7aa8b94770a
-size 110900
+oid sha256:7f9fbbab42c25797d0974ca3b5e22f48ab10d93a9a8878fc0a570d0caa4994ad
+size 110899
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_system_check.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_system_check.png
index 71dfe71834..20afd7ed95 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_system_check.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_system_check.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f9633f41731d10927024857da1e781a4c8e9c0b605ecfb170eb372f42ca5f0f
-size 276019
+oid sha256:9ddfc2753e52b4b95088c1e7af002feb721a72cb994a69408bfbe4d296c5813f
+size 276022