Update Marketplace to work with new API (#10799)

* starting to port marketplace to piwik 3

* updating tests

* fix translation key

* fix various issues

* use material select

* fix plugin upload

* deprecate license_homepage plugin metadata and link to a LICENSE[.md|.txt] file if found (#10756)

* deprecate license_homepage plugin metadata, and link to a LICENSE[.md|.txt] file if found

* Make license view HTML only without menu

* fix tests and update

* fix some links did not work

* we need to show warnings even when plugin is installed, not only when activated. otherwise it is not clear why something is not downloadable

* fix install was not working

* improved responsiveness of marketplace

* fix more tests

* fix search was shown when only a few plugins are there

* fix ui tests

* fix some translations

* fix tests and remove duplicated test

4 files changed, 283 insertions, 0 deletions

diff --git a/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js b/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js
new file mode 100644
index 0000000000..15a3cfa6cc
--- /dev/null
+++ b/plugins/Marketplace/angularjs/licensekey/licensekey.controller.js
@@ -0,0 +1,63 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('PiwikMarketplaceLicenseController', PiwikMarketplaceLicenseController);
+
+    PiwikMarketplaceLicenseController.$inject = ['piwik', 'piwikApi'];
+
+    function PiwikMarketplaceLicenseController(piwik, piwikApi) {
+
+        this.licenseKey = '';
+        this.enableUpdate = false;
+        this.isUpdating = false;
+
+        var self = this;
+
+        function updateLicenseKey(action, licenseKey, onSuccessMessage)
+        {
+
+            piwikApi.withTokenInUrl();
+            piwikApi.post({
+                module: 'API',
+                method: 'Marketplace.' + action,
+                format: 'JSON'
+            }, {licenseKey: licenseKey}).then(function (response) {
+                self.isUpdating = false;
+
+                if (response && response.value) {
+                    var UI = require('piwik/UI');
+                    var notification = new UI.Notification();
+                    notification.show(onSuccessMessage, {context: 'success'});
+
+                    piwik.helper.redirect();
+                }
+            }, function () {
+                self.isUpdating = false;
+            });
+        }
+
+        this.updatedLicenseKey = function () {
+            this.enableUpdate = !!this.licenseKey;
+        };
+
+        this.updateLicense = function () {
+            this.enableUpdate = false;
+            this.isUpdating = true;
+
+            updateLicenseKey('saveLicenseKey', this.licenseKey, _pk_translate('Marketplace_LicenseKeyActivatedSuccess'));
+        };
+
+        this.removeLicense = function () {
+            piwik.helper.modalConfirm('#confirmRemoveLicense', {yes: function () {
+                self.enableUpdate = false;
+                self.isUpdating = true;
+                updateLicenseKey('deleteLicenseKey', '', _pk_translate('Marketplace_LicenseKeyDeletedSuccess'));
+            }});
+        };
+
+    }
+})();
\ No newline at end of file
diff --git a/plugins/Marketplace/angularjs/marketplace/marketplace.controller.js b/plugins/Marketplace/angularjs/marketplace/marketplace.controller.js
new file mode 100644
index 0000000000..0f55e6da31
--- /dev/null
+++ b/plugins/Marketplace/angularjs/marketplace/marketplace.controller.js
@@ -0,0 +1,23 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('PiwikMarketplaceController', PiwikMarketplaceController);
+
+    PiwikMarketplaceController.$inject = ['piwik'];
+
+    function PiwikMarketplaceController(piwik) {
+        // remember to keep controller very simple. Create a service/factory (model) if needed
+
+        this.changePluginSort = function () {
+            piwik.broadcast.propagateNewPage('query=&sort=' + this.pluginSort);
+        };
+
+        this.changePluginType = function () {
+            piwik.broadcast.propagateNewPage('query=&show=' + this.pluginType);
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/Marketplace/angularjs/marketplace/marketplace.directive.js b/plugins/Marketplace/angularjs/marketplace/marketplace.directive.js
new file mode 100644
index 0000000000..96812865d6
--- /dev/null
+++ b/plugins/Marketplace/angularjs/marketplace/marketplace.directive.js
@@ -0,0 +1,132 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <div piwik-marketplace>
+ */
+(function () {
+
+    angular.module('piwikApp').directive('piwikMarketplace', piwikMarketplace);
+
+    piwikMarketplace.$inject = ['piwik', '$timeout'];
+
+    function piwikMarketplace(piwik, $timeout){
+
+        return {
+            restrict: 'A',
+            compile: function (element, attrs) {
+
+                return function (scope, element, attrs) {
+
+                    $timeout(function () {
+
+
+                        $('.installAllPaidPlugins').click(function (event) {
+                            event.preventDefault();
+
+                            piwikHelper.modalConfirm('#installAllPaidPluginsAtOnce');
+                        });
+
+                        $('.uploadPlugin').click(function (event) {
+                            event.preventDefault();
+
+                            piwikHelper.modalConfirm('#installPluginByUpload', {});
+                        });
+
+
+                        $('#uploadPluginForm').submit(function (event) {
+
+                            var $zipFile = $('[name=pluginZip]');
+                            var fileName = $zipFile.val();
+
+                            if (!fileName || '.zip' != fileName.slice(-4)) {
+                                event.preventDefault();
+                                alert(_pk_translate('CorePluginsAdmin_NoZipFileSelected'));
+                            }
+                        });
+
+                        // Keeps the plugin descriptions the same height
+                        $('.marketplace .plugin .description').dotdotdot({
+                            after: 'a.more',
+                            watch: 'window'
+                        });
+
+                        function syncMaxHeight2 (selector) {
+
+                            if (!selector) {
+                                return;
+                            }
+
+                            var $nodes = $(selector);
+
+                            if (!$nodes || !$nodes.length) {
+                                return;
+                            }
+
+                            var maxh3 = null;
+                            var maxMeta = null;
+                            var maxFooter = null;
+                            var nodesToUpdate = [];
+                            var lastTop = 0;
+                            $nodes.each(function (index, node) {
+                                var $node = $(node);
+                                var top   = $node.offset().top;
+
+                                if (lastTop !== top) {
+                                    nodesToUpdate = [];
+                                    lastTop = top;
+                                    maxh3 = null;
+                                    maxMeta = null;
+                                    maxFooter = null;
+                                }
+
+                                nodesToUpdate.push($node);
+
+                                var heightH3 = $node.find('h3').height();
+                                var heightMeta = $node.find('.metadata').height();
+                                var heightFooter = $node.find('.footer').height();
+
+                                if (!maxh3) {
+                                    maxh3 = heightH3;
+                                } else if (maxh3 < heightH3) {
+                                    maxh3 = heightH3;
+                                }
+
+                                if (!maxMeta) {
+                                    maxMeta = heightMeta;
+                                } else if (maxMeta < heightMeta) {
+                                    maxMeta = heightMeta;
+                                }
+
+                                if (!maxFooter) {
+                                    maxFooter = heightFooter;
+                                } else if (maxFooter < heightFooter) {
+                                    maxFooter = heightFooter;
+                                }
+
+                                $.each(nodesToUpdate, function (index, $node) {
+                                    if (maxh3) {
+                                        $node.find('h3').height(maxh3 + 'px');
+                                    }
+                                    if (maxMeta) {
+                                        $node.find('.metadata').height(maxMeta + 'px');
+                                    }
+                                    if (maxFooter) {
+                                        $node.find('.footer').height(maxFooter + 'px');
+                                    }
+                                });
+                            });
+                        }
+                        syncMaxHeight2('.marketplace .plugin');
+
+                    });
+                };
+            }
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/Marketplace/angularjs/plugins/plugin-name.directive.js b/plugins/Marketplace/angularjs/plugins/plugin-name.directive.js
new file mode 100644
index 0000000000..aeaacea5b7
--- /dev/null
+++ b/plugins/Marketplace/angularjs/plugins/plugin-name.directive.js
@@ -0,0 +1,65 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <div piwik-plugin-name="MyPluginName" [data-activeplugintab="changelog"]>
+ */
+(function () {
+
+    broadcast.addPopoverHandler('browsePluginDetail', function (value) {
+        var pluginName = value;
+        var activeTab  = null;
+
+        if (-1 !== value.indexOf('!')) {
+            activeTab  = value.substr(value.indexOf('!') + 1);
+            pluginName = value.substr(0, value.indexOf('!'));
+        }
+
+        var url = 'module=Marketplace&action=pluginDetails&pluginName=' + encodeURIComponent(pluginName);
+
+        if (activeTab) {
+            url += '&activeTab=' + encodeURIComponent(activeTab);
+        }
+
+        Piwik_Popover.createPopupAndLoadUrl(url, 'details');
+    });
+
+    angular.module('piwikApp').directive('piwikPluginName', piwikPluginName);
+
+    piwikPluginName.$inject = ['piwik'];
+
+    function piwikPluginName(piwik){
+
+        return {
+            restrict: 'A',
+            compile: function (element, attrs) {
+
+                return function (scope, element, attrs) {
+
+                    var pluginName = attrs.piwikPluginName;
+                    var activeTab = attrs.activeplugintab;
+
+                    if (!pluginName) {
+                        return;
+                    }
+
+                    element.on('click', function (event) {
+                        event.preventDefault();
+
+                        if (activeTab) {
+                            pluginName += '!' + activeTab;
+                        }
+
+                        broadcast.propagateNewPopoverParameter('browsePluginDetail', pluginName);
+                    });
+
+                };
+            }
+        };
+    }
+})();
\ No newline at end of file