[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 8c7539f073e7a49311cbe6dc2474eb1bbfb8718d.

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

1 files changed, 8 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e3b755d28..2f9774b8c4 100644
--- a/CHANGELOG.md
+++ b/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