From 40aaa67b9828f15ec584faf318572a48d704589f Mon Sep 17 00:00:00 2001
From: fmigneault <francis.charette.migneault@gmail.com>
Date: Tue, 1 Feb 2022 00:04:29 -0500
Subject: [PATCH] add tooltip resource ID to UI items in tree (relates to #335)

---
 CHANGES.rst                                   |  2 ++
 magpie/ui/home/static/style.css               | 28 +++++++++++++++++++
 .../ui/management/templates/edit_service.mako |  6 ++--
 .../ui/management/templates/tree_scripts.mako |  9 ++++--
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index 8838ab833..ecd8e6582 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -43,6 +43,8 @@ Features / Changes
   of new ``ServiceGeoserverWMS`` implementation. Access is granted if the ``User`` has access to **ALL** ``Resource``
   resolved from parsing the request.
 * Add auto-restore of previous scroll position in UI page following submitted form.
+* Add UI tooltip `Resource` ID to elements rendered in the ``Service`` and ``Permission`` hierarchy trees
+  (relates to `#335 <https://github.com/Ouranosinc/Magpie/issues/335>`_).
 
 Bug Fixes
 ~~~~~~~~~~~~~~~~~~~~~
diff --git a/magpie/ui/home/static/style.css b/magpie/ui/home/static/style.css
index 2f1ed4086..2300c0cc5 100644
--- a/magpie/ui/home/static/style.css
+++ b/magpie/ui/home/static/style.css
@@ -973,6 +973,34 @@ div.tree-button {
     display: none;
 }
 
+.tooltip-container {
+}
+
+.tooltip-container .tooltip-value {
+    border-bottom: 1px dotted black;
+}
+
+.tooltip-container .tooltip-text {
+    visibility: hidden;
+    text-align: center;
+    background-color: black;
+    color: white;
+    border-radius: 5px;
+    padding: 2px 4px;
+    opacity: 70%;
+    width: max-content;
+    /* position */
+    position: absolute;
+    z-index: 1;
+    margin-left: 0.5em;
+    margin-bottom: 1em;
+    margin-top: -0.1em;
+}
+
+.tooltip-container:hover .tooltip-text {
+    visibility: visible;
+}
+
 /* --- Header breadcrumb --- */
 
 ul.breadcrumb {
diff --git a/magpie/ui/management/templates/edit_service.mako b/magpie/ui/management/templates/edit_service.mako
index 2ccb39a57..bd05bdc01 100644
--- a/magpie/ui/management/templates/edit_service.mako
+++ b/magpie/ui/management/templates/edit_service.mako
@@ -246,9 +246,11 @@
 <%def name="render_item(key, value, level)">
     <div class="tree-item-value collapsible-tree-item">
         <span class="tree-item-label label label-info">${value["resource_type"]}</span>
-        <div class="tree-key">
-            ${value.get('resource_display_name', key)}
+        <div class="tree-key tooltip-container">
+            <span class="tooltip-value">${value.get('resource_display_name', key)}</span>
+            <span class="tooltip-text">Resource: ${value["id"]}</span>
         </div>
+
     </div>
     <div class="tree-item-buttons">
         <form id="resource_${value['id']}" action="${request.path}" method="post">
diff --git a/magpie/ui/management/templates/tree_scripts.mako b/magpie/ui/management/templates/tree_scripts.mako
index d24ef1993..24097808a 100644
--- a/magpie/ui/management/templates/tree_scripts.mako
+++ b/magpie/ui/management/templates/tree_scripts.mako
@@ -67,8 +67,9 @@
 <%def name="render_resource_permissions_item(key, value, level)">
     <div class="tree-item-value collapsible-tree-item">
         <span class="tree-item-label label label-info">${value["resource_type"]}</span>
-        <div class="tree-key">
-            ${value.get('resource_display_name', key)}
+        <div class="tree-key tooltip-container">
+            <span class="tooltip-value">${value.get('resource_display_name', key)}</span>
+            <span class="tooltip-text">Resource: ${value["id"]}</span>
         </div>
     </div>
     %for perm_name in permissions:
@@ -120,8 +121,10 @@
                 %endfor
             %endfor
         </select>
+
+        <!-- previous state of existing permissions to detect removal of permission vs already blank selectors -->
         %for perm_name in resource_info["permission_names"]:
-        <input type="hidden" name="resource_${resource_info['id']}" value="${perm_name}">
+            <input type="hidden" name="resource_${resource_info['id']}" value="${perm_name}">
         %endfor
         </label>