[Vue] Migrate content-block, enriched-headline, rate-feature + related (#18166)

* 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

* Update _dataTable.twig

* fix order of operations issue

* built vue files

* fix variable reference

* built vue files

* make sure absolute paths are not used in polyfill source map

* trigger build

* trigger another build

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

6 files changed, 0 insertions, 313 deletions

diff --git a/plugins/CoreHome/angularjs/content-block/content-block.directive.html b/plugins/CoreHome/angularjs/content-block/content-block.directive.html
deleted file mode 100644
index 547ea79878..0000000000
--- a/plugins/CoreHome/angularjs/content-block/content-block.directive.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="card">
-    <div class="card-content">
-        <h2 ng-if="contentTitle && !feature && !helpUrl && !helpText" class="card-title">{{contentTitle}}</h2>
-        <h2 ng-if="contentTitle && (feature || helpUrl || helpText)" class="card-title"
-              piwik-enriched-headline feature-name="{{feature}}" help-url="{{helpUrl}}" inline-help="{{ helpText }}">
-            {{contentTitle}}</h2>
-        <div ng-transclude>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/content-block/content-block.directive.js b/plugins/CoreHome/angularjs/content-block/content-block.directive.js
deleted file mode 100644
index d803bb98c5..0000000000
--- a/plugins/CoreHome/angularjs/content-block/content-block.directive.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Usage:
- * <div piwik-content-block>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikContentBlock', piwikContentBlock);
-
-    piwikContentBlock.$inject = ['piwik'];
-
-    function piwikContentBlock(piwik){
-
-        var adminContent = null;
-
-        return {
-            restrict: 'A',
-            replace: true,
-            transclude: true,
-            scope: {
-                contentTitle: '@',
-                feature: '@',
-                helpUrl: '@',
-                helpText: '@',
-                anchor: '@?'
-            },
-            templateUrl: 'plugins/CoreHome/angularjs/content-block/content-block.directive.html?cb=' + piwik.cacheBuster,
-            controllerAs: 'contentBlock',
-            compile: function (element, attrs) {
-
-                if (attrs.feature === 'true') {
-                    attrs.feature = true;
-                }
-
-                return function (scope, element, attrs) {
-                    if (scope.anchor) {
-                        var anchor = $('<a></a>').attr('id', scope.anchor);
-                        element.prepend(anchor);
-                    }
-
-                    var inlineHelp = element.find('[ng-transclude] > .contentHelp');
-                    if (inlineHelp.length) {
-                        scope.helpText = inlineHelp.html();
-                        inlineHelp.remove();
-                    }
-
-                    if (scope.feature && (scope.feature===true || scope.feature ==='true')) {
-                        scope.feature = scope.contentTitle;
-                    }
-
-                    if (adminContent === null) {
-                        // cache admin node for further content blocks
-                        adminContent = $('#content.admin');
-                    }
-
-                    var contentTopPosition = false;
-
-                    if (adminContent.length) {
-                        contentTopPosition = adminContent.offset().top;
-                    }
-
-                    if (contentTopPosition || contentTopPosition === 0) {
-                        var parents = element.parentsUntil('.col', '[piwik-widget-loader]');
-                        var topThis;
-                        if (parents.length) {
-                            // when shown within the widget loader, we need to get the offset of that element
-                            // as the widget loader might be still shown. Would otherwise not position correctly
-                            // the widgets on the admin home page
-                            topThis = parents.offset().top;
-                        } else {
-                            topThis = element.offset().top;
-                        }
-
-                        if ((topThis - contentTopPosition) < 17) {
-                            // we make sure to display the first card with no margin-top to have it on same as line as
-                            // navigation
-                            element.css('marginTop', '0');
-                        }
-                    }
-                };
-            }
-        };
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html
deleted file mode 100644
index 4907525499..0000000000
--- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="enrichedHeadline"
-    ng-mouseenter="view.showIcons=true" ng-mouseleave="view.showIcons=false">
-    <div ng-show="!editUrl" class="title" ng-transclude tabindex="6"></div>
-    <a ng-show="editUrl" class="title" href="{{ editUrl }}"
-       title="{{ 'CoreHome_ClickToEditX'|translate:(featureName|escape) }}"
-       ng-transclude ></a>
-
-    <span ng-show="view.showIcons || view.showInlineHelp" class="iconsBar">
-        <a ng-if="helpUrl && !inlineHelp"
-           rel="noreferrer noopener"
-           target="_blank"
-           href="{{ helpUrl }}"
-           title="{{ 'CoreHome_ExternalHelp'|translate }}"
-           class="helpIcon"><span class="icon-help"></span></a>
-
-        <a ng-if="inlineHelp"
-           title="{{ (reportGenerated ? 'General_HelpReport' : 'General_Help' )|translate }}"
-           ng-click="view.showInlineHelp=!view.showInlineHelp"
-           class="helpIcon" ng-class="{ 'active': view.showInlineHelp }"><span class="icon-info"></span></a>
-
-        <div class="ratingIcons"
-             piwik-rate-feature
-             title="{{ featureName }}"></div>
-    </span>
-
-    <div class="inlineHelp" ng-show="view.showInlineHelp">
-        <div ng-bind-html="inlineHelp"></div>
-        <a ng-if="helpUrl"
-           rel="noreferrer noopener"
-           target="_blank"
-           href="{{ helpUrl }}"
-           class="readMore">{{ 'General_MoreDetails'|translate }}</a>
-    </div>
-</div>
diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js
deleted file mode 100644
index 6280736cf7..0000000000
--- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Usage:
- *
- * <h2 piwik-enriched-headline>All Websites Dashboard</h2>
- * -> uses "All Websites Dashboard" as featurename
- *
- * <h2 piwik-enriched-headline feature-name="All Websites Dashboard">All Websites Dashboard (Total: 309 Visits)</h2>
- * -> custom featurename
- *
- * <h2 piwik-enriched-headline help-url="http://piwik.org/guide">All Websites Dashboard</h2>
- * -> shows help icon and links to external url
- *
- * <h2 piwik-enriched-headline edit-url="index.php?module=Foo&action=bar&id=4">All Websites Dashboard</h2>
- * -> makes the headline clickable linking to the specified url
- *
- * <h2 piwik-enriched-headline inline-help="inlineHelp">Pages report</h2>
- * -> inlineHelp specified via a attribute shows help icon on headline hover
- *
- * <h2 piwik-enriched-headline>All Websites Dashboard
- *     <div class="inlineHelp">My <strong>inline help</strong></div>
- * </h2>
- * -> alternative definition for inline help
- * -> shows help icon to display inline help on click. Note: You can combine inlinehelp and help-url
- *
- * * <h2 piwik-enriched-headline report-generated="generated time">Pages report</h2>
- * -> reportGenerated specified via this attribute shows a clock icon with a tooltip which activated by hover
- * -> the tooltip shows the value of the attribute
- */
-(function () {
-    angular.module('piwikApp').directive('piwikEnrichedHeadline', piwikEnrichedHeadline);
-
-    piwikEnrichedHeadline.$inject = ['$document', 'piwik', '$filter', '$parse', 'piwikPeriods'];
-
-    function piwikEnrichedHeadline($document, piwik, $filter, $parse, piwikPeriods){
-        var defaults = {
-            helpUrl: '',
-            editUrl: '',
-        };
-
-        return {
-            transclude: true,
-            restrict: 'A',
-            scope: {
-                helpUrl: '@',
-                editUrl: '@',
-                reportGenerated: '@?',
-                featureName: '@',
-                inlineHelp: '@?',
-            },
-            templateUrl: 'plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html?cb=' + piwik.cacheBuster,
-            compile: function (element, attrs) {
-
-                for (var index in defaults) {
-                    if (!attrs[index]) { attrs[index] = defaults[index]; }
-                }
-
-                return function (scope, element, attrs) {
-                    if (!scope.inlineHelp) {
-
-                        var helpNode = $('[ng-transclude] .inlineHelp', element);
-
-                        if ((!helpNode || !helpNode.length) && element.next()) {
-                            // hack for reports :(
-                            helpNode = element.next().find('.reportDocumentation');
-                        }
-
-                        if (helpNode && helpNode.length) {
-
-                            // hackish solution to get binded html of p tag within the help node
-                            // at this point the ng-bind-html is not yet converted into html when report is not
-                            // initially loaded. Using $compile doesn't work. So get and set it manually
-                            var helpParagraph = $('p[ng-bind-html]', helpNode);
-
-                            if (helpParagraph.length) {
-                                helpParagraph.html($parse(helpParagraph.attr('ng-bind-html')));
-                            }
-
-                            if ($.trim(helpNode.text())) {
-                                scope.inlineHelp = $.trim(helpNode.html());
-                            }
-                            helpNode.remove();
-                        }
-                    }
-
-                    if (!attrs.featureName) {
-                        attrs.featureName = $.trim(element.find('.title').first().text());
-                    }
-
-                    if (scope.reportGenerated && piwikPeriods.parse(piwik.period, piwik.currentDateString).containsToday()) {
-                        element.find('.report-generated').first().tooltip({
-                            track: true,
-                            content: scope.reportGenerated,
-                            items: 'div',
-                            show: false,
-                            hide: false
-                        });
-
-
-                    }
-                };
-            }
-        };
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less
deleted file mode 100644
index 878372c857..0000000000
--- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less
+++ /dev/null
@@ -1,69 +0,0 @@
-.inlineHelp {
-    display: none;
-}
-
-[piwik-enriched-headline] {
-    visibility: hidden;
-    height: 47px;
-}
-
-[piwik-enriched-headline].ng-isolate-scope {
-    visibility: visible;
-    height: auto;
-}
-
-.enrichedHeadline {
-    min-height: 22px;
-
-    a.title {
-        cursor: pointer;
-    }
-
-    .title {
-        display: inline-block;
-    }
-
-    .inlineHelp {
-        display: block;
-        background: #F7F7F7;
-        font-size: 12px;
-        line-height: 1.1;
-        font-weight: normal;
-        border: 1px solid #E4E5E4;
-        margin: 10px 0 10px 0;
-        padding: 10px;
-        border-radius: 2px;
-
-        .readMore {
-            margin-top: 10px;
-            display: inline-block;
-            font-weight: bold;
-        }
-    }
-
-    .iconsBar {
-        line-height: 1 !important;
-    }
-
-    .ratingIcons {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    .helpIcon {
-        cursor: pointer;
-        display: inline-block;
-        margin: 0 0 -1px 4px;
-        opacity: 0.4;
-        font-size: 16px;
-        color: @theme-color-text-light !important;
-
-        &:hover, &.active {
-            color: @theme-color-help-background-color !important;
-            opacity: 0.9;
-            text-decoration: none;
-        }
-    }
-}
-
-
diff --git a/plugins/CoreHome/angularjs/enrichedheadline/help.png b/plugins/CoreHome/angularjs/enrichedheadline/help.png
deleted file mode 100644
index c5174cdf63..0000000000
--- a/plugins/CoreHome/angularjs/enrichedheadline/help.png
+++ /dev/null