Implement new layout for no data screen

config/environment/ui-test.php

@@ -1,9 +1,12 @@
 <?php
 
+use Piwik\Container\Container;
 use Piwik\Container\StaticContainer;
 use Piwik\Plugins\Diagnostics\Diagnostic\FileIntegrityCheck;
 use Piwik\Plugins\Diagnostics\Diagnostic\PhpVersionCheck;
 use Piwik\Plugins\Diagnostics\Diagnostic\RequiredPrivateDirectories;
+use Piwik\SiteContentDetector;
+use Piwik\Tests\Framework\Mock\FakeSiteContentDetector;
 
 return [
 
@@ -46,6 +49,14 @@ public function write(string $key, string $content): void
         return $config;
     }),
 
+    // avoid any site content detection checks
+    SiteContentDetector::class  => \Piwik\DI::decorate(function ($previous, Container $c) {
+        $detectedContentDetections = $c->get('test.vars.detectedContentDetections') ?: [];
+        $connectedConsentManagers = $c->get('test.vars.connectedConsentManagers') ?: [];
+
+        return new FakeSiteContentDetector($detectedContentDetections, $connectedConsentManagers);
+    }),
+
     'observers.global' => \Piwik\DI::add([
 
         // removes port from all URLs to the test Piwik server so UI tests will pass no matter

core/SiteContentDetector.php

@@ -216,10 +216,10 @@ public function wasDetected(string $detectionClassId): bool
     /**
      * Returns an array containing ids of all detected detections of the given type
      *
-     * @param string $type One of the SiteContentDetectionAbstract::TYPE_* constants
+     * @param int $type One of the SiteContentDetectionAbstract::TYPE_* constants
      * @return array
      */
-    public function getDetectsByType(string $type): array
+    public function getDetectsByType(int $type): array
     {
         $detected = [];
 

lang/en.json

@@ -430,6 +430,7 @@
         "SelectYesIfYouWantToSendEmailsViaServer": "Select \"Yes\" if you want or have to send e-mail via a named server instead of the local mail function",
         "Settings": "Settings",
         "Shipping": "Shipping",
+        "Share": "Share",
         "Show": "show",
         "SingleWebsitesDashboard": "Single Website dashboard",
         "SmallTrafficYouCanLeaveDefault": "For small traffic websites, you can leave the default %s seconds, and access all reports in real time.",

plugins/CoreAdminHome/lang/en.json

@@ -136,6 +136,7 @@
         "SystemPluginSettings": "System Plugin Settings",
         "TrackAGoal": "Track a goal",
         "TrackingCode": "Tracking Code",
+        "JavaScriptCode": "JavaScript Code",
         "TrackingCodeIntro": "Matomo offers you various ways to embed the tracking code for your website, mobile app, and even for any device or application.",
         "TrackingFailureAuthenticationProblem": "Request was not authenticated but authentication was required.",
         "TrackingFailureAuthenticationSolution": "Set or correct a \"token_auth\" in your tracking request.",

plugins/CoreAdminHome/stylesheets/trackingCodeGenerator.less

@@ -7,6 +7,10 @@
     margin-top: 2rem;
     margin-bottom: 1.5rem;
 
+    #start-tracking-details[data-method="Matomo"] & {
+      margin-top: 1rem;
+    }
+
     a {
       text-decoration: none !important;
       color: @color-green-matomo;
@@ -17,8 +21,3 @@
     }
   }
 }
-
-.site-without-data #matomo li .trackingCodeAdvancedOptions .advance-option {
-  margin-top: 1rem;
-  margin-left: 1.25rem
-}

plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue

@@ -7,7 +7,7 @@
 <template>
   <div class="widgetLoader">
     <ActivityIndicator
-      :loading-message="loadingMessage"
+      :loading-message="finalLoadingMessage"
       :loading="loading"
     />
     <div v-show="loadingFailed">
@@ -65,6 +65,7 @@ export default defineComponent({
   props: {
     widgetParams: Object,
     widgetName: String,
+    loadingMessage: String,
   },
   components: {
     ActivityIndicator,
@@ -86,7 +87,11 @@ export default defineComponent({
     },
   },
   computed: {
-    loadingMessage() {
+    finalLoadingMessage() {
+      if (this.loadingMessage) {
+        return this.loadingMessage;
+      }
+
       if (!this.widgetName) {
         return translate('General_LoadingData');
       }

plugins/Installation/tests/UI/Installation_spec.js

@@ -12,7 +12,7 @@ var fs = require('fs'),
 describe("Installation", function () {
     this.timeout(0);
 
-    this.fixture = "Piwik\\Tests\\Fixtures\\DisableSiteContentDetection";
+    this.fixture = "Piwik\\Tests\\Fixtures\\EmptySite";
 
     before(function () {
         testEnvironment.testUseMockAuth = 0;

plugins/JsTrackerInstallCheck/vue/src/JsTrackerInstallCheck/JsTrackerInstallCheck.less

@@ -8,7 +8,6 @@ div.jsTrackerInstallCheck {
   }
 
   .test-error,.success-message,.loadingPiwik,.testInstallFields {
-    margin-left: 1.5rem;
     margin-bottom: 0;
   }
 

plugins/Login/tests/UI/Invite_spec.js

@@ -45,7 +45,7 @@ describe('Invite', function () {
       $('#login_form_submit').click();
     });
     // should show site without data page
-    await page.waitForNetworkIdle();
-    await page.waitForSelector('.site-without-data');
+    await page.waitForSelector('#site-without-data', {visible: true});
+    await page.evaluate(() => window.stop()); // stop ongoing requests
   });
 });

plugins/Morpheus/stylesheets/main.less

@@ -89,6 +89,26 @@ p {
   }
 }
 
+.list-style-decimal {
+  list-style: none;
+  counter-reset: steplist;
+  display: table;
+  width: 100%;
+
+  > li {
+    counter-increment: steplist;
+    display: table-row;
+  }
+
+  > li::before {
+    content: counter(steplist) ".";
+    display: table-cell;
+    text-align: left;
+    padding-right: 5px;
+    width: 0;
+  }
+}
+
 #content .card-content {
   p {
     color: @theme-color-text;

plugins/PrivacyManager/tests/UI/PrivacyManager_ConsentManager_spec.js

@@ -10,13 +10,21 @@
 describe("PrivacyManager_ConsentManager", function () {
     this.timeout(0);
 
-    this.fixture = "Piwik\\Tests\\Fixtures\\EmptySiteWithSiteContentDetection";
+    this.fixture = "Piwik\\Tests\\Fixtures\\EmptySite";
 
     var generalParams = 'idSite=1&period=day&date=2017-01-02',
         urlBase = '?module=PrivacyManager&' + generalParams + '&action=';
 
     before(function () {
         testEnvironment.pluginsToLoad = ['PrivacyManager'];
+        testEnvironment.detectedContentDetections = ['Osano'];
+        testEnvironment.connectedConsentManagers = ['Osano'];
+        testEnvironment.save();
+    });
+
+    after(function () {
+        testEnvironment.detectedContentDetections = [];
+        testEnvironment.connectedConsentManagers = [];
         testEnvironment.save();
     });