Adjustments according to new no data page layout (#691)

* Adjustments for new no data page layout

* Move test from core

* adjust method details

* Simplify and clean up vue components for tracking code

* cleanup & fixes

* Use CopyToClipboard directive instead of SelectOnFocus

* updates expected UI test files

SiteContentDetection/SpaPwa.php

@@ -20,10 +20,15 @@ class SpaPwa extends SiteContentDetectionAbstract
 {
     public static function getName(): string
     {
-        return 'SPA / PWA';
+        return 'Single Page Application';
     }
 
-    public static function getContentType(): string
+    public static function getIcon(): string
+    {
+        return './plugins/TagManager/images/spa.png';
+    }
+
+    public static function getContentType(): int
     {
         return self::TYPE_JS_FRAMEWORK;
     }
@@ -38,11 +43,6 @@ public function isDetected(?string $data = null, ?array $headers = null): bool
         return false;
     }
 
-    public function shouldShowInstructionTab(SiteContentDetector $detector = null): bool
-    {
-        return true;
-    }
-
     public function renderInstructionsTab(SiteContentDetector $detector): string
     {
         $model = StaticContainer::get('Piwik\Plugins\TagManager\Model\Container');

TagManager.php

@@ -16,6 +16,7 @@
 use Piwik\Log;
 use Piwik\Piwik;
 use Piwik\Plugin;
+use Piwik\Plugins\SitesManager\SiteContentDetection\ReactJs;
 use Piwik\Plugin\Manager;
 use Piwik\Plugins\TagManager\Access\Capability\PublishLiveContainer;
 use Piwik\Plugins\TagManager\Access\Capability\TagManagerWrite;
@@ -33,6 +34,7 @@
 use Piwik\Plugins\TagManager\Model\Container\ContainerIdGenerator;
 use Piwik\Plugins\TagManager\Model\Salt;
 use Piwik\Site;
+use Piwik\SiteContentDetector;
 use Piwik\View;
 use Piwik\Context;
 use Piwik\Log\LoggerInterface;
@@ -273,17 +275,18 @@ public function addTagManagerCode(&$out)
 
     public function setTagManagerCode(&$out)
     {
-        $newContent = '';
+        $newContent = '<h2>' . Piwik::translate('SitesManager_StepByStepGuide') . '</h2>';
         $this->addTagManagerCode($newContent);
         $out = $newContent;
     }
 
-    public function embedReactTagManagerTrackingCode(&$out)
+    public function embedReactTagManagerTrackingCode(&$out, SiteContentDetector $detector)
     {
         Piwik::checkUserHasSomeViewAccess();
         $model = $this->getContainerModel();
         $view = new View("@TagManager/trackingCodeReact");
         $view->action = Piwik::getAction();
+        $view->wasDetected = $detector->wasDetected(ReactJs::getId());
         $view->showContainerRow = $model->getNumContainersTotal() > 1;
         $out .= $view->render();
     }
@@ -426,10 +429,8 @@ public function getClientSideTranslationKeys(&$result)
         $result[] = 'TagManager_ConfigureEnvironmentsSuperUser';
         $result[] = 'TagManager_WantToDeployThisChangeCreateVersion';
         $result[] = 'TagManager_ConfigureWhenTagDoes';
-        $result[] = 'TagManager_CustomizeTracking';
         $result[] = 'TagManager_ViewContainerDashboard';
         $result[] = 'TagManager_NoMatomoConfigFoundForContainer';
-        $result[] = 'TagManager_CustomizeTrackingTeaser';
         $result[] = 'TagManager_PublishLiveEnvironmentCapabilityRequired';
         $result[] = 'TagManager_CapabilityPublishLiveContainer';
         $result[] = 'TagManager_VersionAlreadyPublishedToAllEnvironments';

lang/en.json

@@ -272,8 +272,6 @@
         "CustomRequestProcessingVariableName": "Custom Request Processing Function",
         "CustomRequestProcessingVariableDescription": "A custom function to use with a Matomo Tracker that can transform all tracking requests.",
         "CustomVariables": "Custom variables",
-        "CustomizeTracking": "Customize Tracking",
-        "CustomizeTrackingTeaser": "Want to configure the Matomo tracking for this container? Here is a list of existing Matomo configurations in this container:",
         "DashboardHelp1": "How does the \"Tag Manager → Dashboard\" page help me?",
         "DashboardHelp2": "The Tag Manager Dashboard provides an instant overview of both the names and quantity of tags, triggers, variables and versions of container configurations that have been created in your Matomo Tag Manager.",
         "DashboardHelp3": "Within the Tag Manager Dashboard, you also can edit or create new tags, triggers, variables and versions.",

templates/trackingCodeReact.twig

@@ -1,9 +1,21 @@
+<h2>{{ 'SitesManager_StepByStepGuide'|translate }}</h2>
+
+{% if wasDetected %}
+<div class="system notification notification-info">
+    {{ 'SitesManager_ReactDetected'|translate(
+        '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/guide/tag-manager/">',
+        '</a>',
+        '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-start-tracking-data-with-matomo-on-websites-that-use-react/">',
+        '</a>'
+    )|raw }}
+</div>
+{% endif %}
+
 <p>{{'TagManager_SiteWithoutDataReactIntro'|translate}}</p>
 <br>
 <p>{{'SitesManager_SiteWithoutDataCloudflareFollowStepsIntro'|translate}}</p>
 <div
         vue-entry="TagManager.TrackingSPAPage"
-        current-action="{{ action|json_encode }}"
         show-container-row="{{ showContainerRow|json_encode }}"
         js-framework="react"
 >

templates/trackingSPA.twig

@@ -1,10 +1,11 @@
+<h2>{{ 'SitesManager_StepByStepGuide'|translate }}</h2>
+
 <p>{{ 'SitesManager_SiteWithoutDataSPADescription'|translate('<a href="https://matomo.org/guide/tag-manager/" target="_blank" rel="noreferrer noopener">', '</a>', '<a href="https://developer.matomo.org/guides/spa-tracking" target="_blank" rel="noreferrer noopener">', '</a>')|raw }}</p>
 <br>
 <p>{{ 'SitesManager_SiteWithoutDataCloudflareFollowStepsIntro'|translate }}</p>
 <div
-        vue-entry="TagManager.TrackingSPAPage"
-        current-action="{{ action|json_encode }}"
-        show-container-row="{{ showContainerRow|json_encode }}"
+    vue-entry="TagManager.TrackingSPAPage"
+    show-container-row="{{ showContainerRow|json_encode }}"
 >
 </div>
 <br>

tests/UI/EmptySite_React_spec.js

@@ -0,0 +1,35 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * Screenshot integration tests.
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("EmptySite_React", function () {
+
+  this.fixture = "Piwik\\Tests\\Fixtures\\EmptySite";
+
+  const generalParams = 'idSite=1&period=day&date=2010-01-03';
+
+  it('should show the tracking code if the website has no recorded data and React guide', async function () {
+
+    testEnvironment.detectedContentDetections = ['ReactJs'];
+    testEnvironment.connectedConsentManagers = [];
+    testEnvironment.save();
+
+    const urlToTest = "?" + generalParams + "&module=CoreHome&action=index#?" + generalParams + '&activeTab=ReactJs';
+    await page.goto(urlToTest);
+    await page.waitForSelector('#start-tracking-details .codeblock', {visible: true});
+    await page.evaluate(function () {
+      // since containerID will be random and keeps changing
+      var selector = $('#start-tracking-details .codeblock');
+      selector.text(selector.text().replace(/http(.*)container_(.*).js/g, 'http://localhost/js/container_test123.js'));
+    });
+
+    const pageElement = await page.$('.page');
+    expect(await pageElement.screenshot()).to.matchImage('emptySiteDashboard');
+  });
+
+});