[Vue] migrate piwik-field and related directives (#18352)

* 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 converting form field directives

* 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

* migrate field-array

* fixing more UI test failures

* rebuild

* start converting multipairfield

* fix vue build

* why were these deleted?

* remove debug code

* first pass migrate multipairfield.vue

* move form-field code relevant to selects to FieldSelect.vue

* fix css class issue + update expected screenshots

* rebuild CoreHome

* move more of form-field.directive.js to new vue classes

* revert styling change

* finish converting last of form-field.directive.js code (completely untested)

* 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

* Fix for misaligned evolution trend icons (#18323)

* Aligned evolution trend icons, text tweak

* Update plugins/MultiSites/angularjs/dashboard/dashboard.directive.less

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

* apply review feedback

* Hide feedback banner in zen mode (#18329)

* [Vue] 4.6.0 fixes (#18334)

* feedback plugin may not be loaded

* fix copy paste

* async/await not supported

* built UMDs

* get local files to build

* built files

* get auto clearing behavior to work in site selector

* fix a couple more bugs

* use jQuery click for expand on click

* undo submodule change

* rebuild vue

* get vue files to run

* missing element

* more fixes

* get more fields working properly

* rebuild

* fix even more issues

* [Vue] use jQuery click for expand on click (#18341)

* use jQuery click for expand on click

* undo submodule change

* migrate piwik-field directive and fix some issues

* forgot to add migrated directive files and get demo.twig to work

* use event target

* make sure angularjs and vue do not share data

* fix ng model mapping

* fix a couple more issues

* fix a couple more bugs

* more fixes

* mimic existing behavior where an empty value will result in an extra field appearing in a select option list, but only at first

* another fix

* built vue files

* more fixes

* do not use UMD if vue/src is not present

* use non-minified angularjs if in development mode

* deprecate custom template file property

* remove angularjs properties in scope properties (ie, $$hashKey) otherwise vue will fail when it tries to process them

* fixing some more issues from ui tests

* more fixes

* fix form field issue + patch jquery so .trigger() will also trigger events added via addEventHandler()

* true bc fix

* get the jquery patch to work

* ignore polyfill map

* fix ng-model issue in report limit in report export directive

* full width property was not handled properly before in angularjs

* do not try and parseInt null values

* fix several more issues for tests

* fix some tests

* fix data binding

* fix css class

* fixing more ui test issues

* do not decode model value of site name in site selector, so it is always the same as what is in the DB

* 4.6.0-rc2

* more ng-model fixes

* rebuild

* html tweaks

* add timeout to test

* rebuild

* fix another UI test

* rebuild vue files

* update some expected screenshots

* fix more issues

* Revert "[Vue] do not decode model value of site name in site selector, so it is always matches the DB value (#18356)"

This reverts commit 8c7539f.

* update screenshots

* more fixes

* another fix + screenshot update

* more screenshot updates

* more fixes

* even more fixes

* another ui test fix

* more type fixes

* rebuilt vue JS

* couple more fixes

* undo debugging

* do not convert undefined to bool

* update screenshot

* another bool checking fix

* rebuild vue files

* more fixes

* initial site value in field is assumed to be encoded

* file headers and custom field component support

* get custom component field code to work

* rebuild vue

* allow using angularjs templateFile for custom field (for BC)

* get angularjs template embedding to work for rollupreporting at least

* deal with some in source TODO items

* fix a couple more issues

* Use separate div in modals to display notifications otherwise Vue will erase modal content when initializing NotificationGroup component.

* build again

* refactor some code and fix an issue with checkbox array field handling in angularjs

* more fixes

* another fix

* even more fixes

* remove more todo

* hopefully the last changes

* update vue files

* update submodule

* revert debugging change + fix issue

* built vue files

* fix another select issue

* rebuild vue files

* fix broken refactor

* update two screenshots

* add some more timeouts and update screenshots

* fix site selector model binding

* rebuild vue

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* initiate initial ng-change ONLY for site selectors where this behavior applies

* update screenshots and try to fix random failure

* undo submodule change

* fix test

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: Ben Burgess <88810029+bx80@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

.gitignore

@@ -105,3 +105,5 @@ docker-compose.yml
 /plugins/*/vue/dist/*.common.js
 /plugins/*/vue/dist/*.map
 /plugins/*/vue/dist/*.development.*
+/plugins/CoreVue/polyfills/dist/MatomoPolyfills.min.js.map
+

CHANGELOG.md

@@ -4,6 +4,14 @@ This is the Developer Changelog for Matomo platform developers. All changes in o
 
 The Product Changelog at **[matomo.org/changelog](https://matomo.org/changelog)** lets you see more details about any Matomo release, such as the list of new guides and FAQs, security fixes, and links to all closed issues. 
 
+## Matomo 4.7.0
+
+### Deprecated APIs
+
+* The `piwik-field` and related directives have been converted to Vue and the `template-file` attribute is now considered deprecated and will be removed in Matomo 5. Instead,
+  the `component` property should be used to add a new form field, it should be an object with two properties that reference a Vue component, `plugin` and `name`, where `plugin`
+  is the plugin the Vue component is located in and `name` is the Vue name of the component's export. 
+
 ## Matomo 4.6.0
 
 ### New Framework

core/AssetManager/UIAssetFetcher/JScriptUIAssetFetcher.php

@@ -102,11 +102,15 @@ private function addUmdFilesIfDetected($plugins)
         foreach ($plugins as $plugin) {
             $devUmd = "plugins/$plugin/vue/dist/$plugin.development.umd.js";
             $minifiedUmd = "plugins/$plugin/vue/dist/$plugin.umd.min.js";
-
-            if (Development::isEnabled() && is_file(PIWIK_INCLUDE_PATH . '/' . $devUmd)) {
-                $this->fileLocations[$plugin] = $devUmd;
-            } else if (is_file(PIWIK_INCLUDE_PATH . '/' . $minifiedUmd)) {
-                $this->fileLocations[$plugin] = $minifiedUmd;
+            $umdSrcFolder = "plugins/$plugin/vue/src";
+
+            // in case there are dist files but no src files, which can happen during development
+            if (is_dir($umdSrcFolder)) {
+                if (Development::isEnabled() && is_file(PIWIK_INCLUDE_PATH . '/' . $devUmd)) {
+                    $this->fileLocations[$plugin] = $devUmd;
+                } else if (is_file(PIWIK_INCLUDE_PATH . '/' . $minifiedUmd)) {
+                    $this->fileLocations[$plugin] = $minifiedUmd;
+                }
             }
         }
     }

core/Settings/FieldConfig.php

@@ -123,9 +123,21 @@ class FieldConfig
      * "formField.value" angular model. For an example see "plugins/CorePluginsAdmin/angularjs/form-field/field-text.html"
      *
      * @var string
+     * @deprecated set $customFieldComponent to ['plugin' => 'MyPlugin', 'component' => 'MyComponentAsItIsExported']
      */
     public $customUiControlTemplateFile = '';
 
+    /**
+     * Defines a custom Vue component to use for the internal field UI control. This should be an array with two
+     * keys:
+     *
+     * - plugin: the name of the plugin that the UI control exists in.
+     * - name: the name of the export for the component in the plugin's Vue UMD module.
+     *
+     * @var string[]
+     */
+    public $customFieldComponent;
+
     /**
      * Name-value mapping of HTML attributes that will be added HTML form control, eg,
      * `array('size' => 3)`. Attributes will be escaped before outputting.

plugins/CoreAdminHome/angularjs/branding/branding.controller.js

@@ -105,4 +105,4 @@
             });
         };
     }
-})();
+})();

plugins/CoreAdminHome/angularjs/trackingcode/jstrackingcode.controller.js

@@ -191,4 +191,4 @@
             this.changeSite(false);
         }
     }
-})();
+})();

plugins/CoreHome/CoreHome.php

@@ -14,6 +14,7 @@
 use Piwik\Common;
 use Piwik\Container\StaticContainer;
 use Piwik\DbHelper;
+use Piwik\Development;
 use Piwik\IP;
 use Piwik\Piwik;
 use Piwik\Plugin\ArchivedMetric;
@@ -146,10 +147,10 @@ public function getStylesheetFiles(&$stylesheets)
         $stylesheets[] = "plugins/CoreHome/angularjs/progressbar/progressbar.directive.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/period-selector/period-selector.directive.less";
-        $stylesheets[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less";
+        $stylesheets[] = "plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/DropdownMenu/DropdownMenu.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/sparkline/sparkline.component.less";
-        $stylesheets[] = "plugins/CoreHome/angularjs/field-array/field-array.directive.less";
+        $stylesheets[] = "plugins/CoreHome/vue/src/FieldArray/FieldArray.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/Comparisons/Comparisons.less";
         $stylesheets[] = "plugins/CoreHome/stylesheets/vue-transitions.less";
     }
@@ -164,7 +165,11 @@ public function getJsFiles(&$jsFiles)
         $jsFiles[] = "node_modules/jquery.scrollto/jquery.scrollTo.min.js";
         $jsFiles[] = "node_modules/sprintf-js/dist/sprintf.min.js";
         $jsFiles[] = "node_modules/mousetrap/mousetrap.min.js";
-        $jsFiles[] = 'node_modules/angular/angular.min.js';
+
+        $devAngularJs = 'node_modules/angular/angular.js';
+        $jsFiles[] = Development::isEnabled() && is_file(PIWIK_INCLUDE_PATH . '/' . $devAngularJs)
+            ? $devAngularJs : 'node_modules/angular/angular.min.js';
+
         $jsFiles[] = "node_modules/angular-sanitize/angular-sanitize.min.js";
         $jsFiles[] = "node_modules/angular-animate/angular-animate.min.js";
         $jsFiles[] = "node_modules/angular-cookies/angular-cookies.min.js";
@@ -256,16 +261,11 @@ public function getJsFiles(&$jsFiles)
 
         $jsFiles[] = "plugins/CoreHome/angularjs/content-table/content-table.directive.js";
 
-
         $jsFiles[] = "plugins/CoreHome/angularjs/period-selector/period-selector.directive.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/period-selector/period-selector.controller.js";
 
-        $jsFiles[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js";
-        $jsFiles[] = "plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js";
-
-        $jsFiles[] = "plugins/CoreHome/angularjs/field-array/field-array.directive.js";
-        $jsFiles[] = "plugins/CoreHome/angularjs/field-array/field-array.controller.js";
-
+        // TODO: [Vue] used by RollUpReporting, has to be kept for now.
+        $jsFiles[] = "plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js";
 
         // we have to load these CoreAdminHome files here. If we loaded them in CoreAdminHome,
         // there would be JS errors as CoreAdminHome is loaded first. Meaning it is loaded before
@@ -284,8 +284,6 @@ public function getJsFiles(&$jsFiles)
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.controller.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/plugin-settings/plugin-settings.directive.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/form/form.directive.js";
-        $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js";
-        $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/field/field.directive.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/save-button/save-button.directive.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/plugins/plugin-filter.directive.js";
         $jsFiles[] = "plugins/CorePluginsAdmin/angularjs/plugins/plugin-management.directive.js";