From 69c34cdf0c1d2f2a63939ac6d8203566310aa143 Mon Sep 17 00:00:00 2001
From: Chao Geng <93526589+chaogeng77977@users.noreply.github.com>
Date: Sun, 17 Apr 2022 09:33:58 +0800
Subject: [PATCH] EE-2767 Correct sidebar hovering info (#6750)

---
 .../docker-sidebar/docker-sidebar.html        | 56 ++++++++++++++++---
 .../kubernetes-sidebar.html                   | 17 +++++-
 .../sidebar/sidebar-menu/sidebar-menu.html    |  8 ++-
 app/portainer/views/sidebar/sidebar.html      | 46 +++++++++------
 4 files changed, 101 insertions(+), 26 deletions(-)

diff --git a/app/docker/components/docker-sidebar/docker-sidebar.html b/app/docker/components/docker-sidebar/docker-sidebar.html
index ad5762461..8e4245eae 100644
--- a/app/docker/components/docker-sidebar/docker-sidebar.html
+++ b/app/docker/components/docker-sidebar/docker-sidebar.html
@@ -4,6 +4,7 @@
   icon-class="fa-tachometer-alt fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-dashboard"
+  title="Dashboard"
 >
   Dashboard
 </sidebar-menu-item>
@@ -17,7 +18,13 @@
   is-sidebar-open="$ctrl.isSidebarOpen"
   children-paths="[]"
 >
-  <sidebar-menu-item path="docker.templates.custom" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="dockerSidebar-customTemplates">
+  <sidebar-menu-item
+    path="docker.templates.custom"
+    path-params="{ endpointId: $ctrl.endpointId }"
+    class-name="sidebar-sublist"
+    data-cy="dockerSidebar-customTemplates"
+    title="Custom Templates"
+  >
     Custom Templates
   </sidebar-menu-item>
 </sidebar-menu>
@@ -29,6 +36,7 @@
   icon-class="fa-th-list fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-stacks"
+  title="Stacks"
 >
   Stacks
 </sidebar-menu-item>
@@ -40,23 +48,52 @@
   icon-class="fa-list-alt fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-services"
+  title="Services"
 >
   Services
 </sidebar-menu-item>
 
-<sidebar-menu-item path="docker.containers" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-cubes fa-fw" class-name="sidebar-list" data-cy="dockerSidebar-containers">
+<sidebar-menu-item
+  path="docker.containers"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  icon-class="fa-cubes fa-fw"
+  class-name="sidebar-list"
+  data-cy="dockerSidebar-containers"
+  title="Containers"
+>
   Containers
 </sidebar-menu-item>
 
-<sidebar-menu-item path="docker.images" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-clone fa-fw" class-name="sidebar-list" data-cy="dockerSidebar-images">
+<sidebar-menu-item
+  path="docker.images"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  icon-class="fa-clone fa-fw"
+  class-name="sidebar-list"
+  data-cy="dockerSidebar-images"
+  title="Images"
+>
   Images
 </sidebar-menu-item>
 
-<sidebar-menu-item path="docker.networks" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-sitemap fa-fw" class-name="sidebar-list" data-cy="dockerSidebar-networks">
+<sidebar-menu-item
+  path="docker.networks"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  icon-class="fa-sitemap fa-fw"
+  class-name="sidebar-list"
+  data-cy="dockerSidebar-networks"
+  title="Networks"
+>
   Networks
 </sidebar-menu-item>
 
-<sidebar-menu-item path="docker.volumes" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-hdd fa-fw" class-name="sidebar-list" data-cy="dockerSidebar-volumes">
+<sidebar-menu-item
+  path="docker.volumes"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  icon-class="fa-hdd fa-fw"
+  class-name="sidebar-list"
+  data-cy="dockerSidebar-volumes"
+  title="Volumes"
+>
   Volumes
 </sidebar-menu-item>
 
@@ -67,6 +104,7 @@
   icon-class="fa-file-code fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-configs"
+  title="Configs"
 >
   Configs
 </sidebar-menu-item>
@@ -78,6 +116,7 @@
   icon-class="fa-user-secret fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-secrets"
+  title="Secrets"
 >
   Secrets
 </sidebar-menu-item>
@@ -89,6 +128,7 @@
   icon-class="fa-history fa-fw"
   class-name="sidebar-list"
   data-cy="dockerSidebar-events"
+  title="Events"
 >
   Events
 </sidebar-menu-item>
@@ -109,11 +149,12 @@
     path-params="{ endpointId: $ctrl.endpointId }"
     class-name="sidebar-sublist"
     data-cy="dockerSidebar-setup"
+    title="Setup"
   >
     Setup
   </sidebar-menu-item>
 
-  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="dockerSidebar-registries">
+  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="dockerSidebar-registries" title="Registries">
     Registries
   </sidebar-menu-item>
 </sidebar-menu>
@@ -134,11 +175,12 @@
     path-params="{ endpointId: $ctrl.endpointId }"
     class-name="sidebar-sublist"
     data-cy="swarmSidebar-setup"
+    title="Setup"
   >
     Setup
   </sidebar-menu-item>
 
-  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="swarmSidebar-registries">
+  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="swarmSidebar-registries" title="Registries">
     Registries
   </sidebar-menu-item>
 </sidebar-menu>
diff --git a/app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html b/app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html
index abdc16274..487e62fbd 100644
--- a/app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html
+++ b/app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html
@@ -4,6 +4,7 @@
   icon-class="fa-tachometer-alt fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-dashboard"
+  title="Dashboard"
 >
   Dashboard
 </sidebar-menu-item>
@@ -14,6 +15,7 @@
   icon-class="fa-rocket fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-customTemplates"
+  title="Custom Templates"
 >
   Custom Templates
 </sidebar-menu-item>
@@ -24,6 +26,7 @@
   icon-class="fa-layer-group fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-namespaces"
+  title="Namespaces"
 >
   Namespaces
 </sidebar-menu-item>
@@ -34,6 +37,7 @@
   icon-class="fa-dharmachakra fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-helm"
+  title="Helm"
 >
   Helm
 </sidebar-menu-item>
@@ -44,6 +48,7 @@
   icon-class="fa-laptop-code fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-applications"
+  title="Applications"
 >
   Applications
 </sidebar-menu-item>
@@ -54,11 +59,19 @@
   icon-class="fa-file-code fa-fw"
   class-name="sidebar-list"
   data-cy="k8sSidebar-configurations"
+  title="ConfigMaps & Secrets"
 >
   ConfigMaps & Secrets
 </sidebar-menu-item>
 
-<sidebar-menu-item path="kubernetes.volumes" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-database fa-fw" class-name="sidebar-list" data-cy="k8sSidebar-volumes">
+<sidebar-menu-item
+  path="kubernetes.volumes"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  icon-class="fa-database fa-fw"
+  class-name="sidebar-list"
+  data-cy="k8sSidebar-volumes"
+  title="Volumes"
+>
   Volumes
 </sidebar-menu-item>
 
@@ -78,6 +91,7 @@
     path-params="{ id: $ctrl.endpointId }"
     class-name="sidebar-sublist"
     data-cy="k8sSidebar-setup"
+    title="Setup"
   >
     Setup
   </sidebar-menu-item>
@@ -88,6 +102,7 @@
     path-params="{ endpointId: $ctrl.endpointId }"
     class-name="sidebar-sublist"
     data-cy="k8sSidebar-registries"
+    title="Registries"
   >
     Registries
   </sidebar-menu-item>
diff --git a/app/portainer/components/sidebar/sidebar-menu/sidebar-menu.html b/app/portainer/components/sidebar/sidebar-menu/sidebar-menu.html
index 8b175bbc9..2105a917e 100644
--- a/app/portainer/components/sidebar/sidebar-menu/sidebar-menu.html
+++ b/app/portainer/components/sidebar/sidebar-menu/sidebar-menu.html
@@ -1,5 +1,11 @@
 <li class="sidebar-list sidebar-menu">
-  <sidebar-menu-item path="{{::$ctrl.path }}" path-params="$ctrl.pathParams" icon-class="{{::$ctrl.iconClass}}" data-cy="portainerSidebar-{{ ::$ctrl.label }}">
+  <sidebar-menu-item
+    path="{{::$ctrl.path }}"
+    path-params="$ctrl.pathParams"
+    icon-class="{{::$ctrl.iconClass}}"
+    data-cy="portainerSidebar-{{ ::$ctrl.label }}"
+    title="{{ ::$ctrl.label }}"
+  >
     <div class="sidebar-menu-head">
       <button ng-click="$ctrl.onClickArrow($event)" class="small sidebar-menu-indicator">
         <i class="fas" ng-class="$ctrl.isOpen() ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
diff --git a/app/portainer/views/sidebar/sidebar.html b/app/portainer/views/sidebar/sidebar.html
index a5198c0d4..b19d88380 100644
--- a/app/portainer/views/sidebar/sidebar.html
+++ b/app/portainer/views/sidebar/sidebar.html
@@ -9,7 +9,7 @@
   </div>
   <div class="sidebar-content">
     <ul class="sidebar">
-      <sidebar-menu-item path="portainer.home" icon-class="fa-home fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-home">Home</sidebar-menu-item>
+      <sidebar-menu-item path="portainer.home" icon-class="fa-home fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-home" title="Home">Home</sidebar-menu-item>
 
       <li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name">
         <span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }}
@@ -40,12 +40,18 @@
       </div>
 
       <sidebar-section title="Edge compute" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
-        <sidebar-menu-item path="edge.devices" icon-class="fas fa-laptop-code fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeDevices">
-          Edge Devices
-        </sidebar-menu-item>
-        <sidebar-menu-item path="edge.groups" icon-class="fa-object-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeGroups">Edge Groups</sidebar-menu-item>
-        <sidebar-menu-item path="edge.stacks" icon-class="fa-layer-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeStacks">Edge Stacks</sidebar-menu-item>
-        <sidebar-menu-item path="edge.jobs" icon-class="fa-clock fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeJobs">Edge Jobs</sidebar-menu-item>
+        <sidebar-menu-item path="edge.devices" icon-class="fas fa-laptop-code fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeDevices" title="Edge Devices"
+          >Edge Devices</sidebar-menu-item
+        >
+        <sidebar-menu-item path="edge.groups" icon-class="fa-object-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeGroups" title="Edge Groups"
+          >Edge Groups</sidebar-menu-item
+        >
+        <sidebar-menu-item path="edge.stacks" icon-class="fa-layer-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeStacks" title="Edge Stacks"
+          >Edge Stacks</sidebar-menu-item
+        >
+        <sidebar-menu-item path="edge.jobs" icon-class="fa-clock fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeJobs" title="Edge Jobs"
+          >Edge Jobs</sidebar-menu-item
+        >
       </sidebar-section>
 
       <sidebar-section ng-if="isAdmin || isTeamLeader" title="Settings">
@@ -56,8 +62,8 @@
           is-sidebar-open="toggle"
           children-paths="['portainer.users.user' ,'portainer.teams' ,'portainer.teams.team' ,'portainer.roles' ,'portainer.roles.role' ,'portainer.roles.new']"
         >
-          <sidebar-menu-item path="portainer.teams" class-name="sidebar-sublist" data-cy="portainerSidebar-teams">Teams</sidebar-menu-item>
-          <sidebar-menu-item path="portainer.roles" class-name="sidebar-sublist" data-cy="portainerSidebar-roles">Roles</sidebar-menu-item>
+          <sidebar-menu-item path="portainer.teams" class-name="sidebar-sublist" data-cy="portainerSidebar-teams" title="Teams">Teams</sidebar-menu-item>
+          <sidebar-menu-item path="portainer.roles" class-name="sidebar-sublist" data-cy="portainerSidebar-roles" title="Roles">Roles</sidebar-menu-item>
         </sidebar-menu>
 
         <div ng-if="isAdmin">
@@ -68,16 +74,18 @@
             is-sidebar-open="toggle"
             children-paths="['portainer.endpoints.endpoint', 'portainer.endpoints.new', 'portainer.endpoints.endpoint.access', 'portainer.groups', 'portainer.groups.group', 'portainer.groups.group.access', 'portainer.groups.new', 'portainer.tags']"
           >
-            <sidebar-menu-item path="portainer.groups" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointGroups">Groups</sidebar-menu-item>
-            <sidebar-menu-item path="portainer.tags" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointTags">Tags</sidebar-menu-item>
+            <sidebar-menu-item path="portainer.groups" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointGroups" title="Groups">Groups</sidebar-menu-item>
+            <sidebar-menu-item path="portainer.tags" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointTags" title="Tags">Tags</sidebar-menu-item>
           </sidebar-menu>
 
-          <sidebar-menu-item path="portainer.registries" icon-class="fa-database fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-registries">
-            Registries</sidebar-menu-item
+          <sidebar-menu-item path="portainer.registries" icon-class="fa-database fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-registries" title="Registries"
+            >Registries</sidebar-menu-item
           >
 
           <sidebar-menu label="Authentication logs" icon-class="fa-history fa-fw" path="portainer.authLogs" is-sidebar-open="toggle" children-paths="['portainer.activityLogs']">
-            <sidebar-menu-item path="portainer.activityLogs" class-name="sidebar-sublist" data-cy="portainerSidebar-activityLogs">Activity Logs</sidebar-menu-item>
+            <sidebar-menu-item path="portainer.activityLogs" class-name="sidebar-sublist" data-cy="portainerSidebar-activityLogs" title="Activity Logs"
+              >Activity Logs</sidebar-menu-item
+            >
           </sidebar-menu>
 
           <sidebar-menu
@@ -87,11 +95,15 @@
             is-sidebar-open="toggle"
             children-paths="['portainer.settings.authentication', 'portainer.settings.edgeCompute']"
           >
-            <sidebar-menu-item path="portainer.settings.authentication" class-name="sidebar-sublist" data-cy="portainerSidebar-authentication">Authentication</sidebar-menu-item>
-            <sidebar-menu-item path="portainer.settings.edgeCompute" class-name="sidebar-sublist" data-cy="portainerSidebar-edge-compute">Edge Compute</sidebar-menu-item>
+            <sidebar-menu-item path="portainer.settings.authentication" class-name="sidebar-sublist" data-cy="portainerSidebar-authentication" title="Authentication"
+              >Authentication</sidebar-menu-item
+            >
+            <sidebar-menu-item path="portainer.settings.edgeCompute" class-name="sidebar-sublist" data-cy="portainerSidebar-edge-compute" title="Edge Compute"
+              >Edge Compute</sidebar-menu-item
+            >
 
             <div class="sidebar-sublist">
-              <a href="https://www.portainer.io/community_help" target="_blank" data-cy="portainerSidebar-help">Help / About</a>
+              <a href="https://www.portainer.io/community_help" target="_blank" data-cy="portainerSidebar-help" title="Help / About">Help / About</a>
             </div>
           </sidebar-menu>
         </div>