Added code to have activeTab for no-data screen via url param (matomo…

…-org#21022) * Added code to have activeTab for no-data screen via url param, #PG-2928 * built vue files * Vue files updated and tests added * Fix for tracking code to be selected * Updated UI screenshot * Removed activeTab query param * UI test fix * Applied PR suggestion --------- Co-authored-by: AltamashShaikh <[email protected]>
DavertMik · Jul 20, 2023 · 254774e · 254774e
1 parent a4c3e30
commit 254774e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/plugins/SitesManager/Controller.php b/plugins/SitesManager/Controller.php
@@ -296,6 +296,8 @@ private function getActiveTabOnLoad($templateData)
             $tabToDisplay = 'vue';
         } else if (!empty($templateData['jsFramework']) && $templateData['jsFramework'] === SitesManager::JS_FRAMEWORK_REACT && Manager::getInstance()->isPluginActivated('TagManager')) {
             $tabToDisplay = 'react';
+        } else if (!empty($templateData['consentManagerName'])) {
+            $tabToDisplay = 'consentManager';
         }
 
         return $tabToDisplay;

diff --git a/plugins/SitesManager/templates/_siteWithoutDataTabs.twig b/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
@@ -1,6 +1,18 @@
 <script type="text/javascript">
     $(document).ready(function(){
-        $('.tabs').tabs();
+        $('.tabs').tabs({
+            'onShow': function (element) {
+                var id = element.getAttribute('id');
+                if (!id) {
+                    return;
+                }
+                window.CoreHome.MatomoUrl.updateHash({...window.CoreHome.MatomoUrl.hashParsed.value, activeTab: id})
+            }
+        });
+        var selectedTab = window.CoreHome.MatomoUrl.hashParsed.value.activeTab;
+        if (selectedTab) {
+            M.Tabs.getInstance($('.tabs')).select(selectedTab);
+        }
     });
 </script>
 
@@ -10,7 +22,7 @@
     <div class="col s12 tabs-row">
         <ul class="tabs no-data-screen-ul-tabs">
             <li class="tab col {{ columnClass }}"><a {% if siteType != constant('Piwik\\Plugins\\SitesManager\\SitesManager::SITE_TYPE_UNKNOWN') and (consentManagerName == false) and (activeTab == '') %} class="active" {% endif %} href="#integrations">{{ 'SitesManager_Integrations'|translate }}</a></li>
-            <li class="tab col {{ columnClass }}"><a {% if (siteType == constant('Piwik\\Plugins\\SitesManager\\SitesManager::SITE_TYPE_UNKNOWN') and (activeTab == '')) or consentManagerName %} class="active" {% endif %} href="#tracking-code">{{ 'CoreAdminHome_TrackingCode'|translate }}</a></li>
+            <li class="tab col {{ columnClass }}"><a {% if (siteType == constant('Piwik\\Plugins\\SitesManager\\SitesManager::SITE_TYPE_UNKNOWN') and (activeTab == '') or activeTab == 'consentManager') %} class="active" {% endif %} href="#tracking-code">{{ 'CoreAdminHome_TrackingCode'|translate }}</a></li>
             <li class="tab col {{ columnClass }}"><a href="#mtm">{{ 'SitesManager_SiteWithoutDataMatomoTagManager'|translate }}</a></li>
             {% if gtmUsed %}
                 <li class="tab col s2"><a {% if activeTab == 'gtm' %} class="active" {% endif %} href="#google-tag-manager">{{ 'SitesManager_SiteWithoutDataGoogleTagManager'|translate }}</a></li>

diff --git a/tests/UI/expected-screenshots/EmptySite_CloudflareOverGTM_emptySiteDashboard.png b/tests/UI/expected-screenshots/EmptySite_CloudflareOverGTM_emptySiteDashboard.png
diff --git a/tests/UI/specs/EmptySite_CloudflareOverGTM_spec.js b/tests/UI/specs/EmptySite_CloudflareOverGTM_spec.js
@@ -0,0 +1,24 @@
+/*!
+ * 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_CloudflareOverGTM", function () {
+
+    this.fixture = "Piwik\\Tests\\Fixtures\\EmptySiteWithSiteContentDetectionGTM";
+
+    const generalParams = 'idSite=1&period=day&date=2010-01-03';
+
+    it('should show the tracking code if the website has no recorded data and GTM guide', async function () {
+        const urlToTest = "?" + generalParams + "&module=CoreHome&action=index#cloudflare";
+        await page.goto(urlToTest);
+
+        const pageElement = await page.$('.page');
+        expect(await pageElement.screenshot()).to.matchImage('emptySiteDashboard');
+    });
+
+});