add tooltip resource ID to UI items in tree (relates to #335)

Ouranosinc · Feb 1, 2022 · 40aaa67 · 40aaa67
1 parent 08bf6fb
commit 40aaa67
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>