[Vue] remove angularjs libraries from matomo (#19502)

* revert back to suffixing an underscore

* avoid random failure

* built vue files

* add missing vue-entry property + add missing translations

* fixing UI tests locally

* update screenshots

* update CustomAlerts submodule

* add missing translations

* fix spacing

* couple fixes

* more ui test fixes

* make sure installation umd is loaded during installation (as well as translations)

* couple small UI test fixes

* Fix component name case.

* built vue files

* do not use html_attr to escape and in UI tests replace path with escaped slashes so json data gets replaced

* move UploadPluginDialog to CorePluginsAdmin so it will be available when internet access is not available and the Marketplace plugin is deactivated

* correct typing for feedback question input

* update screenshots

* revert last tweak

* styling tweak

* update screenshots and styling tweak

* fix attribute

* Allow composer plugins for dev dependency codesniffer to fix travis builds.

* keep dependent class and rename

* styling tweaks

* update expected screenshot

* update screenshots

* comma spacing tweak

* update screenshots + fix v-show condition

* some small fixes

* fix styling and formatting issues

* fix spacing issue

* fix property name

* update expected screenshots

* get to load in UI

* getting dashboard settings control to work

* styling tweaks

* fix html attribute output for singlemetricview

* fix vue-entry elements

* update expected screenshot

* fixing UI test issues, reintroduce compileAngularComponents (will remove calls in CoreHome PR)

* move function to correct class

* fix order of array elements

* fixing some more issues

* hide the dashboard manager on initial display as before

* styling fixes

* fix styles for widgetized glossary

* update expected screenshots

* fixing DashboardManager UI test that previously used the uiControlObject property

* update device detection demo to be accurate

* update expected screenshots

* fix race condition in dashboard ajax requests/aborts

* start removing angularjs from CoreHome

* remove more angularjs code

* remove angularjs from CustomDimensions plugin

* removing some angularjs files

* remove use of history service, the use of $location from MatomoUrl and the piwikApi service

* remove angularjs service module and filters

* removing more angularjs references

* remove more angular related code, including getAngularDependency()

* update submodules to vue-remove-angularjs branches

* try replacing angularjs expression parsing w/ mathjs/number

* logical operator fixes

* only import what is needed for math.js

* remove some functionality

* optimize math.js use

* convert zen mode code, add --bail option and some output to vue:build

* remove ng-app directive in twig layouts

* ajaxhelper.adapter.ts still required for vanilla ajaxHelper() object

* remove ng-cloak use

* fix datatableactions.vue errors

* do not propagate id param in vue-entry uses

* remove pointless defer

* get zen mode to work, fix couple issues in headermessage vue-entry usage

* move more data table action icon code to vue component from dataTable.js + fix use of angular in ui test JS override code

* couple more data table actions fixes

* UI test fixes + ng-non-bindable no longer needed

* fix more test issues + update some screenshots

* remove another use of isAngularRenderingThePage

* revert screenshot change

* fixing more issues

* move inline script to vue directive + fix a couple vue warnings

* built vue files

* remove inline script in system check widget

* fix some more datatableactions issues

* use VueEntryContainer in _singleWidget.twig

* remove unused inline script from _donate.twig

* update expected screenshots

* fix hide flat icon code

* updating screenshots and try to fix random failure

* fix numeric conversion

* update expected screenshots

* update screenshots

* use common method to load umd file

* get languages dropdown to work

* only add menu translations if installed

* make sure datatableactions vue entry is completely rendered before initing datatable

* correct enriched-headline selector

* update VisitorGenerator submodule

* do not load menu translations during updater as well

* update expected screenshots

* update screenshot

* remove anglarjs libraries

* get code to build w/o angularjs

* update submodule

* update expected screenshot

* remove angular from tsconfig.json

* update submodule

* update submodule

* remove duplicate translations

* remove angularjs from legalnotice

* merge related fixes

* remove angluar mappings

* remove packages/scripts for angularjs unit tests that ran in karma

* remove references to angular in core directory

* rename AngularJS tests suite to ClientTests

* remove angularjs specific escaping in polyfill file

* remove angularjs references in source code/comments + remove unneeded BC code

* remove more angularjs references/deprecated code

* remove more references to angularjs in test files/local docs

* remove templateFile from expected test files

* remove .only() and more <templateFile> occurrences in test files

* update submodule

* update submodule

* update submodule

* submodule update

* fix phpcs

* update changelog and travis scripts

* fix failing test

* fix latest available version styling

* built vue files

* built vue files

* fix test

* submodule

* update expected test files

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: sgiehl <sgiehl@users.noreply.github.com>

.eslintignore

@@ -1,7 +1,6 @@
 tests/
 tmp/
 plugins/*/javascripts/
-plugins/*/angularjs/
 plugins/*/tests/UI/
 plugins/*/vue/dist/**/*.js
 js/*.js

.gitattributes

@@ -57,4 +57,3 @@ tests/ export-ignore
 .scrutinizer.yml export-ignore
 .travis.yml export-ignore
 PULL_REQUEST_TEMPLATE export-ignore
-/libs/bower_components/angular-mocks export-ignore

.gitignore

@@ -79,11 +79,6 @@ php_errors.log
 /.docker
 docker-compose.yml
 /node_modules/*
-!/node_modules/angular
-!/node_modules/angular-animate
-!/node_modules/angular-cookies
-!/node_modules/angular-mocks
-!/node_modules/angular-sanitize
 !/node_modules/chroma-js
 !/node_modules/iframe-resizer
 !/node_modules/jquery
@@ -94,7 +89,6 @@ docker-compose.yml
 !/node_modules/jquery.scrollto
 !/node_modules/materialize-css
 !/node_modules/mousetrap
-!/node_modules/ng-dialog
 !/node_modules/qrcodejs2
 !/node_modules/sprintf-js
 !/node_modules/visibilityjs

.travis.yml

@@ -62,7 +62,7 @@ matrix:
             - nginx
             - coreutils
     - php: 7.2
-      env: TEST_SUITE=AngularJSTests MYSQL_ADAPTER=PDO_MYSQL SKIP_COMPOSER_INSTALL=1
+      env: TEST_SUITE=ClientTests MYSQL_ADAPTER=PDO_MYSQL SKIP_COMPOSER_INSTALL=1
       sudo: false
       addons: false
     # All tests after another

CHANGELOG.md

@@ -8,9 +8,11 @@ The Product Changelog at **[matomo.org/changelog](https://matomo.org/changelog)*
 
 ### Breaking Changes
 
-* Plugin names are now limited to 60 characters. If you used to have a plugin with a longer name, you might need to rename it.
+* AngularJS has been completely removed from the code base, existing AngularJS code will no longer work. It is recommended to convert that code to Vue.
+* The `Common::fixLbrace()` function has been removed. It was only necessary for AngularJS and no longer needs to be used.
 * The deprecated `JSON2` API format has now been removed. We recommend switching to the `JSON` renderer, which behaves the same.
 * The javascript event `piwikPageChange`, which is triggered when a reporting page is loaded, has been renamed to `matomoPageChange`. Ensure to update your implementation if you rely on it.
+* Plugin names are now limited to 60 characters. If you used to have a plugin with a longer name, you might need to rename it.
 
 ### New APIs
 

LEGALNOTICE

@@ -229,10 +229,6 @@ THIRD-PARTY COMPONENTS AND LIBRARIES
 	Link: https://github.com/symfony/Console
 	License: MIT (Expat)
 
-	Name: AngularJS
-	Link: https://github.com/angular/angular.js
-	License: MIT (Expat)
-
 	Name: Mousetrap
 	Link: https://github.com/ccampbell/mousetrap
 	License: Apache 2.0
@@ -273,11 +269,11 @@ THIRD-PARTY CONTENT
 	Notes:
 	- used in ImageGraph plugin
 
-	Name: plugins/Feedback/angularjs/ratefeature/thumbs-down.png
+	Name: plugins/Feedback/vue/src/RateFeature/thumbs-down.png
 	Link: https://www.iconfinder.com/icons/216428/down_thumbs_icon
 	License: Creative Commons (Attribution-Share Alike 3.0 Unported)
 
-	Name: plugins/Feedback/angularjs/ratefeature/thumbs-up.png
+	Name: plugins/Feedback/vue/src/RateFeature/thumbs-up.png
 	Link: https://www.iconfinder.com/icons/216429/thumbs_up_icon
 	License: Creative Commons (Attribution-Share Alike 3.0 Unported)
 

core/API/DocumentationGenerator.php

@@ -50,7 +50,7 @@ public function __construct()
      */
     public function getApiDocumentationAsString($outputExampleUrls = true)
     {
-        list($toc, $str) = $this->generateDocumentation($outputExampleUrls, $prefixUrls = '', $displayTitlesAsAngularDirective = true);
+        list($toc, $str) = $this->generateDocumentation($outputExampleUrls, $prefixUrls = '', $displayTitlesAsEnrichedHeadline = true);
 
         return "<div vue-entry=\"CoreHome.ContentBlock\" content-title='Quick access to APIs' id='topApiRef' name='topApiRef'>
 				$toc</div>
@@ -66,7 +66,7 @@ public function getApiDocumentationAsString($outputExampleUrls = true)
      */
     public function getApiDocumentationAsStringForDeveloperReference($outputExampleUrls = true, $prefixUrls = '')
     {
-        list($toc, $str) = $this->generateDocumentation($outputExampleUrls, $prefixUrls, $displayTitlesAsAngularDirective = false);
+        list($toc, $str) = $this->generateDocumentation($outputExampleUrls, $prefixUrls, $displayTitlesAsEnrichedHeadline = false);
 
         return "<h2 id='topApiRef' name='topApiRef'>Quick access to APIs</h2>
 				$toc
@@ -78,11 +78,11 @@ protected function prepareModuleToDisplay($moduleName)
         return "<a href='#$moduleName'>$moduleName</a><br/>";
     }
 
-    protected function prepareMethodToDisplay($moduleName, $info, $methods, $class, $outputExampleUrls, $prefixUrls, $displayTitlesAsAngularDirective)
+    protected function prepareMethodToDisplay($moduleName, $info, $methods, $class, $outputExampleUrls, $prefixUrls, $displayTitlesAsEnrichedHeadline)
     {
         $str = '';
         $str .= "\n<a name='$moduleName' id='$moduleName'></a>";
-        if($displayTitlesAsAngularDirective) {
+        if($displayTitlesAsEnrichedHeadline) {
             $str .= "<div vue-entry=\"CoreHome.ContentBlock\" content-title='Module " . $moduleName . "'>";
         } else {
             $str .= "<h2>Module " . $moduleName . "</h2>";
@@ -105,7 +105,7 @@ protected function prepareMethodToDisplay($moduleName, $info, $methods, $class,
             $str .= "</div>\n";
         }
 
-        if($displayTitlesAsAngularDirective) {
+        if($displayTitlesAsEnrichedHeadline) {
             $str .= "</div>";
         }
 
@@ -354,10 +354,10 @@ protected function getParametersString($class, $name)
     /**
      * @param $outputExampleUrls
      * @param $prefixUrls
-     * @param $displayTitlesAsAngularDirective
+     * @param $displayTitlesAsEnrichedHeadline
      * @return array
      */
-    protected function generateDocumentation($outputExampleUrls, $prefixUrls, $displayTitlesAsAngularDirective)
+    protected function generateDocumentation($outputExampleUrls, $prefixUrls, $displayTitlesAsEnrichedHeadline)
     {
         $str = $toc = '';
 
@@ -393,7 +393,7 @@ protected function generateDocumentation($outputExampleUrls, $prefixUrls, $displ
 
             foreach ($toDisplay as $moduleName => $methods) {
                 $toc .= $this->prepareModuleToDisplay($moduleName);
-                $str .= $this->prepareMethodToDisplay($moduleName, $info, $methods, $class, $outputExampleUrls, $prefixUrls, $displayTitlesAsAngularDirective);
+                $str .= $this->prepareMethodToDisplay($moduleName, $info, $methods, $class, $outputExampleUrls, $prefixUrls, $displayTitlesAsEnrichedHeadline);
             }
         }
         return array($toc, $str);

core/AssetManager/UIAssetFetcher.php

@@ -155,28 +155,17 @@ public function getTheme()
         "libs/bower_components/materialize/dist/js/materialize.min.js" => "node_modules/materialize-css/dist/js/materialize.min.js",
         "libs/bower_components/jquery.scrollTo/jquery.scrollTo.min.js" => "node_modules/jquery.scrollto/jquery.scrollTo.min.js",
         "libs/bower_components/mousetrap/mousetrap.min.js" => "node_modules/mousetrap/mousetrap.min.js",
-        "libs/bower_components/angular/angular.min.js" => 'node_modules/angular/angular.min.js',
-        "libs/bower_components/angular-sanitize/angular-sanitize.min.js" => "node_modules/angular-sanitize/angular-sanitize.min.js",
-        "libs/bower_components/angular-animate/angular-animate.min.js" => "node_modules/angular-animate/angular-animate.min.js",
-        "libs/bower_components/angular-cookies/angular-cookies.min.js" => "node_modules/angular-cookies/angular-cookies.min.js",
-        "libs/bower_components/ngDialog/js/ngDialog.min.js" => "node_modules/ng-dialog/js/ngDialog.min.js",
         "libs/bower_components/jQuery.dotdotdot/src/js/jquery.dotdotdot.min.js" => "node_modules/jquery.dotdotdot/dist/jquery.dotdotdot.js",
         "libs/bower_components/visibilityjs/lib/visibility.core.js" => "node_modules/visibilityjs/lib/visibility.core.js",
         "libs/bower_components/iframe-resizer/js/iframeResizer.min.js" => "node_modules/iframe-resizer/js/iframeResizer.min.js",
         "libs/bower_components/qrcode.js/qrcode.js" => "node_modules/qrcodejs2/qrcode.min.js",
         "libs/bower_components/chroma-js/chroma.min.js" => "node_modules/chroma-js/chroma.min.js",
         "libs/jquery/jquery.browser.js" => "node_modules/jquery.browser/dist/jquery.browser.min.js",
-        "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js" => null,
-        "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js" => null,
-        "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js" => null,
         "libs/jquery/jquery.truncate.js" => null,
 
         "libs/jquery/themes/base/jquery-ui.min.css" => "node_modules/jquery-ui-dist/jquery-ui.min.css",
         "libs/bower_components/materialize/dist/css/materialize.min.css" => "node_modules/materialize-css/dist/css/materialize.min.css",
         "node_modules/jquery-ui-dist/jquery-ui.theme.min.css" => "node_modules/jquery-ui-dist/jquery-ui.theme.min.css",
-        "libs/bower_components/ngDialog/css/ngDialog.min.css" => null,
-        "libs/bower_components/ngDialog/css/ngDialog-theme-default.min.css" => null,
-        "plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less" => null,
     ];
 
     protected function mapBowerComponentFilesForBC(array &$fileLocations)

core/Common.php

@@ -580,38 +580,6 @@ public static function getRequestVar($varName, $varDefault = null, $varType = nu
         return $value;
     }
 
-    /**
-     * Replaces lbrace with an encoded entity to prevent angular from parsing the content
-     *
-     * @deprecated Will be removed, once the vue js migration is done
-     *
-     * @param $string
-     * @return array|string|string[]|null
-     */
-    public static function fixLbrace($string)
-    {
-        $chars = array('{', '{', '{', '{', '{', '{');
-
-        static $search;
-        static $replace;
-
-        if (!isset($search)) {
-            $search = array_map(function ($val) { return $val . $val; }, $chars);
-        }
-        if (!isset($replace)) {
-            $replace = array_map(function ($val) { return $val . '⁣' . $val; }, $chars);
-        }
-
-        $replacedString = is_null($string) ? $string : str_replace($search, $replace, $string);
-
-        // try to replace characters until there are no changes
-        if ($string !== $replacedString) {
-            return self::fixLbrace($replacedString);
-        }
-
-        return $string;
-    }
-
     /*
      * Generating unique strings
      */

core/Settings/FieldConfig.php

@@ -118,15 +118,6 @@ class FieldConfig
      */
     public $uiControl = null;
 
-    /**
-     * Defines a custom template file for a UI control. This file should render a UI control and expose the value in a
-     * "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:

core/Settings/FieldConfig/ArrayField.php

@@ -31,14 +31,6 @@ class ArrayField
      */
     public $uiControl = null;
 
-    /**
-     * Defines a custom template file for a UI control. This file should render a UI control and expose the value in a
-     * "formField.value" angular model. For an example see "plugins/CorePluginsAdmin/angularjs/form-field/field-text.html"
-     *
-     * @var string
-     */
-    public $customUiControlTemplateFile = '';
-
     /**
      * Array like ['plugin' => 'MyPlugin', 'component' => 'MyExportedCustomFieldComponent']. For an example see
      * "plugins/CorePluginsAdmin/vue/src/FormField/FieldText.vue"
@@ -79,7 +71,6 @@ public function toArray()
         return array(
             'title' => $this->title,
             'uiControl' => $this->uiControl,
-            'templateFile' => $this->customUiControlTemplateFile,
             'component' => $this->customFieldComponent,
             'availableValues' => $this->availableValues,
         );

core/Settings/FieldConfig/MultiPair.php

@@ -39,15 +39,6 @@ class MultiPair
      */
     public $uiControl = null;
 
-    /**
-     * Defines a custom template file for a UI control. This file should render a UI control and expose the value in a
-     * "formField.value" angular model. For an example see "plugins/CorePluginsAdmin/angularjs/form-field/field-text.html"
-     *
-     * @var string
-     * @deprecated use customFieldComponent instead
-     */
-    public $customUiControlTemplateFile = '';
-
     /**
      * Array like ['plugin' => 'MyPlugin', 'component' => 'MyExportedCustomFieldComponent']. For an example see
      * "plugins/CorePluginsAdmin/vue/src/FormField/FieldText.vue"
@@ -90,7 +81,6 @@ public function toArray()
             'key' => $this->key,
             'title' => $this->title,
             'uiControl' => $this->uiControl,
-            'templateFile' => $this->customUiControlTemplateFile,
             'component' => $this->customFieldComponent,
             'availableValues' => $this->availableValues,
         );

core/Twig.php

@@ -40,24 +40,14 @@ function piwik_format_number($string, $minFractionDigits, $maxFractionDigits)
     return $formatter->format($string, $minFractionDigits, $maxFractionDigits);
 }
 
-function piwik_fix_lbrace($string)
-{
-    return Common::fixLbrace($string);
-}
-
 function piwik_escape_filter(Environment $env, $string, $strategy = 'html', $charset = null, $autoescape = false) {
 
     $string = twig_escape_filter($env, $string, $strategy, $charset, $autoescape);
 
     switch ($strategy) {
-        case 'html':
-        case 'html_attr':
-            return piwik_fix_lbrace($string);
         case 'url':
             $encoded = rawurlencode('{');
             return str_replace('{{', $encoded . $encoded, $string);
-        case 'css':
-        case 'js':
         default:
             return $string;
     }
@@ -344,7 +334,7 @@ protected function addFilter_notification()
             $template .= '>';
 
             if (!empty($options['raw'])) {
-                $template .= piwik_fix_lbrace($message);
+                $template .= $message;
             } else {
                 $template .= piwik_escape_filter($twigEnv, $message, 'html');
             }
@@ -370,7 +360,7 @@ protected function addFilter_safeDecodeRaw()
 
             $string = SafeDecodeLabel::decodeLabelSafe($string);
 
-            return piwik_fix_lbrace($string);
+            return $string;
 
         }, array('is_safe' => array('all')));
         $this->twig->addFilter($rawSafeDecoded);

jest.config.js

@@ -12,5 +12,5 @@ module.exports = {
       tsconfig: 'tsconfig.spec.json',
     },
   },
-  setupFiles: ['./tests/angularjs/bootstrap.jest.js'],
+  setupFiles: ['./tests/client/bootstrap.jest.js'],
 };