Show site selector as text only when only one site is available (#16972)

* Show site selector as text only when only one site is available

* updates expected UI files

* hide site selector from header when there is only one website overall

6 files changed, 33 insertions, 7 deletions

diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js b/plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js
index e2985c2f50..fb25fb5176 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js
@@ -23,7 +23,8 @@
             updateWebsitesList: updateWebsitesList,
             searchSite: searchSite,
             loadSite: loadSite,
-            loadInitialSites: loadInitialSites
+            loadInitialSites: loadInitialSites,
+            hasMultipleSites: hasMultipleSites
         };
 
         return model;
@@ -122,8 +123,13 @@
             }
 
             searchSite('%').then(function () {
-                initialSites = model.sites
+                initialSites = model.sites;
+                model.isInitialized = true
             });
         }
+
+        function hasMultipleSites() {
+            return initialSites && initialSites.length > 1;
+        }
     }
 })();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js b/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
index e06ed185fc..1e0d16344c 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
@@ -13,6 +13,8 @@
 
         $scope.model = siteSelectorModel;
 
+        $scope.model.loadInitialSites();
+
         $scope.autocompleteMinSites = AUTOCOMPLETE_MIN_SITES;
         $scope.activeSiteId = piwik.idSite;
 
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
index e35937b4c2..8954b20426 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.html
@@ -1,6 +1,6 @@
 <div piwik-focus-anywhere-but-here="view.showSitesList=false"
      class="siteSelector piwikSelector borderedControl"
-     ng-class="{'expanded': view.showSitesList}">
+     ng-class="{'expanded': view.showSitesList, 'disabled': !model.hasMultipleSites()}">
 
     <script type="text/ng-template" id="siteselector_allsiteslink.html">
         <div ng-click="switchSite({idsite: 'all', name: allSitesText}, $event);view.showSitesList=false;"
@@ -13,10 +13,10 @@
 
     <input ng-if="inputName" type="hidden" name="{{ inputName }}" ng-value="selectedSite.id"/>
 
-    <a ng-click="view.showSitesList=!view.showSitesList; view.showSitesList && !model.isLoading && model.loadInitialSites();"
+    <a ng-click="model.hasMultipleSites() && (view.showSitesList=!view.showSitesList) && !model.isLoading && model.loadInitialSites();"
        piwik-onenter="view.showSitesList=!view.showSitesList; view.showSitesList && !model.isLoading && model.loadInitialSites();"
        href="javascript:void(0)"
-       title="{{ 'CoreHome_ChangeCurrentWebsite'|translate:((selectedSite.name || model.firstSiteName)) }}"
+       ng-attr-title="{{ model.hasMultipleSites() ? _pk_translate('CoreHome_ChangeCurrentWebsite', (selectedSite.name || model.firstSiteName)) : '' }}"
        ng-class="{'loading': model.isLoading}"
        class="title" tabindex="4">
         <span class="icon icon-arrow-bottom"
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
index f3bbcb2a22..48700196c2 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.directive.less
@@ -167,3 +167,19 @@
   white-space: normal;
   text-align: left;
 }
+
+.siteSelector.disabled {
+  a.title {
+    cursor: default !important;
+
+    .icon {
+      display: none !important;
+    }
+  }
+
+  &.borderedControl {
+    &:hover {
+      background-color: @theme-color-background-base!important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/plugins/CoreHome/templates/_siteSelectHeader.twig b/plugins/CoreHome/templates/_siteSelectHeader.twig
index a1dd8e1f4a..fd02c9ec5d 100644
--- a/plugins/CoreHome/templates/_siteSelectHeader.twig
+++ b/plugins/CoreHome/templates/_siteSelectHeader.twig
@@ -1,3 +1,5 @@
+{% if not isSingleSite %}
 <div class="top_bar_sites_selector piwikTopControl">
     <div piwik-siteselector show-selected-site="true" show-all-sites-item="{{ isMultiSitesEnabled ? 'true' : 'false' }}" class="sites_autocomplete"></div>
 </div>
+{% endif %}
diff --git a/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png b/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png
index 58c4dc3cc6..bdabdcc3b2 100644
--- a/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png
+++ b/plugins/Morpheus/tests/UI/expected-screenshots/Morpheus_load.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f8f6009eb0af31e96c7df196e5d7e2d88a0eb265f2f69a9051d3fa56490de09b
-size 1666022
+oid sha256:eb7c3bf2681e8aeaa54d403be9882c0f6f7e8f3cfffee9e851da23029a818de5
+size 1667809