WB with links

janfaracik · Feb 18, 2024 · 321c6a6 · 321c6a6
1 parent c11757d
commit 321c6a6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/core/src/main/resources/hudson/PluginManager/_table.js b/core/src/main/resources/hudson/PluginManager/_table.js
@@ -206,7 +206,7 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
 
     function populateEnableDisableInfo(pluginTR, infoContainer) {
       var pluginMetadata = pluginTR.jenkinsPluginMetadata;
-      infoContainer.classList.add("plugin-dependency-info")
+      infoContainer.classList.add("plugin-dependency-info");
 
       if (pluginTR.classList.contains("has-disabled-dependency")) {
         var dependenciesDiv = pluginMetadata.dependenciesDiv;
@@ -358,7 +358,7 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
 
       if (dependenciesDiv) {
         pluginTR.jenkinsPluginMetadata.dependencies = selectAll(
-          "span",
+          "a",
           dependenciesDiv,
         );
         pluginTR.jenkinsPluginMetadata.dependencyIds = processSpanSet(
@@ -367,7 +367,7 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
       }
       if (dependentsDiv) {
         pluginTR.jenkinsPluginMetadata.dependents = selectAll(
-          "span",
+          "a",
           dependentsDiv,
         );
         pluginTR.jenkinsPluginMetadata.dependentIds = processSpanSet(
@@ -386,21 +386,27 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
 
       // Handle mouse in/out of the enable/disable cell (left most cell).
       enableTD.addEventListener("mouseenter", function () {
-        const button = enableTD.querySelector(`[data-type="app-tooltip-wrapper"]`);
+        const button = enableTD.querySelector(
+          `[data-type="app-tooltip-wrapper"]`,
+        );
         const shinyNewDiv = document.createElement("div");
 
         if (populateEnableDisableInfo(pluginTR, shinyNewDiv)) {
+          button.setAttribute("data-tooltip-interactive", true);
           button.setAttribute("data-html-tooltip", shinyNewDiv.outerHTML);
           Behaviour.applySubtree(button, true);
         }
       });
 
       // Handle mouse in/out of the uninstall cell (right most cell).
       uninstallTD.addEventListener("mouseenter", function () {
-        const button = uninstallTD.querySelector(`[data-type="app-tooltip-wrapper"]`);
+        const button = uninstallTD.querySelector(
+          `[data-type="app-tooltip-wrapper"]`,
+        );
         const shinyNewDiv = document.createElement("div");
 
         if (populateUninstallInfo(pluginTR, shinyNewDiv)) {
+          button.setAttribute("data-tooltip-interactive", true);
           button.setAttribute("data-html-tooltip", shinyNewDiv.outerHTML);
           Behaviour.applySubtree(button, true);
         }

diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly
@@ -91,7 +91,7 @@ THE SOFTWARE.
                   data-plugin-id="${p.shortName}" data-plugin-name="${p.displayName}">
                   <td class="details">
                     <div class="plugin-name success-plugin">
-                      <a href="${p.url}" class="jenkins-table__link" target="_blank" rel="noopener noreferrer">
+                      <a href="${p.url}" id="${p.shortName}" style="scroll-margin-top: 175px" class="jenkins-table__link" target="_blank" rel="noopener noreferrer">
                         ${p.updateInfo.displayName?:p.displayName}
                         <span class="jenkins-label jenkins-label--tertiary" style="margin-left: 1ch;">
                           <span class="jenkins-visually-hidden">${%Version}</span>
@@ -196,13 +196,13 @@ THE SOFTWARE.
                             <j:if test="${p.hasMandatoryDependents() or p.hasImpliedDependents()}">
                               <div class="dependent-list">
                                 <j:forEach var="dependent" items="${p.mandatoryDependents}">
-                                  <span data-plugin-id="${dependent}"></span>
+                                  <a href="#${dependent}" data-plugin-id="${dependent}"></a>
                                 </j:forEach>
                                 <j:set var="impliedDependents" value="${p.impliedDependents}"/>
                                 <j:choose>
                                   <j:when test="${impliedDependents.size() lt 15}">
                                     <j:forEach var="dependent" items="${impliedDependents}">
-                                      <span data-plugin-id="${dependent}"></span>
+                                      <a href="#${dependent}" data-plugin-id="${dependent}"></a>
                                     </j:forEach>
                                   </j:when>
                                   <j:otherwise>
@@ -216,7 +216,7 @@ THE SOFTWARE.
                             <j:if test="${p.hasMandatoryDependencies()}">
                               <div class="dependency-list">
                                 <j:forEach var="dependency" items="${p.mandatoryDependencies}">
-                                  <span data-plugin-id="${dependency.shortName}"></span>
+                                  <a href="#${dependent}" data-plugin-id="${dependency.shortName}"></a>
                                 </j:forEach>
                               </div>
                             </j:if>

diff --git a/war/src/main/scss/pages/_plugin-manager.scss b/war/src/main/scss/pages/_plugin-manager.scss
@@ -1,3 +1,5 @@
+@use "../abstracts/mixins";
+
 #plugins {
   .app-plugin-manager__categories {
     margin: 0.5rem 0;
@@ -71,8 +73,6 @@
   .uninstall-state-info {
     float: right;
   }
-
-
 }
 
 .plugin-dependency-info {
@@ -92,12 +92,19 @@
     gap: 0.4375rem;
     flex-wrap: wrap;
 
-    span {
+    a {
+      @include mixins.item;
+
+      color: var(--text-color);
+      text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      background-color: color-mix(in srgb, var(--text-color-secondary) 7.5%, transparent);
-      border: 1px solid color-mix(in srgb, var(--text-color-secondary) 2%, transparent);
+      background-color: color-mix(
+        in sRGB,
+        var(--text-color-secondary) 7.5%,
+        transparent
+      );
       padding: 0.15rem 0.65rem;
       border-radius: 100px;
     }