Refactor plugin details modal using Vue (matomo-org#22055)

* Add translations

* Pass 'has some admin access' down to components

* Allow CTA container to optionally only display relevant actions (and not notifications or links)

* Pass number of users down to view components

* Reimplement plugin details modal in Vue

* Use MissingReqsNotice component directly

* Remove crypto dependency as simpler mechanism can be used

* Add target blank to content links

* Fix getting latest version mechanism to prevent tabs breaking

Incorrect use of pop removed the last version from the list and it was not available for subsequent use.

* Use root reference when filtering for matching elements inside setTimeout callback

* Add types

* Hide More details button from plugin CTA when displayed in modal

Remove showActionsOnly flag and replace it with inModal flag as PO agreed to display the same actions
in the modal as on the plugin card, except the More details button which would open the modal so it
wouldn't make sense to display that.

* Implement plugin details modal redesign

* Make links from URLs and emails in the extra support information

* Remove unused computed property

* Fix license spelling in variable and method names

* Remove number of users from Marketplace as product variant selection for free trials is automatic in the backend

* Add email validity check to author information section

* Rearrange code to remove some of the max line length lint exceptions

* Move component state definition to the component file

* Unify email sanitisation for author and supporting metadata

* Add types for iframeResizer

* Merge HelpLink and MoreDetailsButton components into MoreDetailsAction

Both components were doing the same thing in a different form of a link (text vs button),
so these got merged with props to control the button block look and the label.

* Adjust action links within CTA container to only appear when not presented in a modal

* Improve responsive behaviour on smaller screens

* Ensure there's no empty text in CTA link actions

* Update dist files

* Remove "min-height" to prevent huge modals on huge screens

* Update selectors for marketplace UI modal tests

* Keep minimal UI tests for old modal

* Update expected screenshots

---------

Co-authored-by: Marc Neudert <[email protected]>

package.json

@@ -47,6 +47,7 @@
     "vue": "^3.2.6"
   },
   "devDependencies": {
+    "@types/iframe-resizer": "^3.5.13",
     "@types/jest": "^26.0.24",
     "@types/materialize-css": "^1.0.11",
     "@types/mousetrap": "^1.6.8",

plugins/Marketplace/Marketplace.php

@@ -72,6 +72,7 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'CorePluginsAdmin_ThemesDescription';
         $translationKeys[] = 'CorePluginsAdmin_ViewAllMarketplacePlugins';
         $translationKeys[] = 'CoreUpdater_UpdateTitle';
+        $translationKeys[] = 'General_Documentation';
         $translationKeys[] = 'General_Download';
         $translationKeys[] = 'General_Downloads';
         $translationKeys[] = 'General_Help';
@@ -154,6 +155,31 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'Marketplace_UploadZipFile';
         $translationKeys[] = 'Marketplace_ViewSubscriptions';
         $translationKeys[] = 'Mobile_LoadingReport';
+        $translationKeys[] = 'Marketplace_AddToCart';
+        $translationKeys[] = 'Marketplace_Authors';
+        $translationKeys[] = 'Marketplace_AutoUpdateDisabledWarning';
+        $translationKeys[] = 'Marketplace_ByXDevelopers';
+        $translationKeys[] = 'Marketplace_ClickToCompletePurchase';
+        $translationKeys[] = 'Marketplace_CurrentNumPiwikUsers';
+        $translationKeys[] = 'Marketplace_Developer';
+        $translationKeys[] = 'Marketplace_FeaturedPlugin';
+        $translationKeys[] = 'Marketplace_LastCommitTime';
+        $translationKeys[] = 'Marketplace_LastUpdated';
+        $translationKeys[] = 'Marketplace_License';
+        $translationKeys[] = 'Marketplace_MultiServerEnvironmentWarning';
+        $translationKeys[] = 'Marketplace_NumDownloadsLatestVersion';
+        $translationKeys[] = 'Marketplace_PluginKeywords';
+        $translationKeys[] = 'Marketplace_PluginLicenseExceededDescription';
+        $translationKeys[] = 'Marketplace_PluginLicenseMissingDescription';
+        $translationKeys[] = 'Marketplace_PluginWebsite';
+        $translationKeys[] = 'Marketplace_PriceExclTax';
+        $translationKeys[] = 'Marketplace_Reviews';
+        $translationKeys[] = 'Marketplace_Screenshots';
+        $translationKeys[] = 'Marketplace_ShownPriceIsExclTax';
+        $translationKeys[] = 'Marketplace_TryFreeTrialTitle';
+        $translationKeys[] = 'CorePluginsAdmin_Activity';
+        $translationKeys[] = 'CorePluginsAdmin_Version';
+        $translationKeys[] = 'CorePluginsAdmin_Websites';
     }
 
     /**

plugins/Marketplace/stylesheets/marketplace.less

@@ -345,6 +345,10 @@
     .footer-message {
         margin-top: 30px;
     }
+
+    .modal {
+        background-color: #fff;
+    }
 }