From ff91cd7e3ab204086a0394ee4b998a3a15a239aa Mon Sep 17 00:00:00 2001
From: Markus Winter <m.winter@sap.com>
Date: Tue, 8 Oct 2024 01:48:24 +0200
Subject: [PATCH] Reimplement the UI for `LabelAxis` (#213)

The `LabelAxis` configuration was using YUI TreeView. As YUI is very old and
deprecated we should remove this. This generates the complete configure page in
Jelly and just add some small JavasCript to show/hide the lists with labels.

Show the description as tooltip instead of adding it in brackets after the
label name. The description can contain HTML, so we need to safeguard it with
the markup formatter.
---
 pom.xml                                       |  4 ++
 src/main/java/hudson/matrix/LabelAxis.java    | 64 +++++++++++++------
 .../hudson/matrix/LabelAxis/config.jelly      | 50 +++++++++++----
 .../hudson/matrix/LabelAxis/label-axis.css    | 27 ++++++++
 .../hudson/matrix/LabelAxis/label-axis.js     | 16 +++++
 .../MatrixProject/configure-entries.jelly     |  5 --
 6 files changed, 129 insertions(+), 37 deletions(-)
 create mode 100644 src/main/resources/hudson/matrix/LabelAxis/label-axis.css
 create mode 100644 src/main/resources/hudson/matrix/LabelAxis/label-axis.js

diff --git a/pom.xml b/pom.xml
index 4b077ce2..a30ce143 100644
--- a/pom.xml
+++ b/pom.xml
@@ -51,6 +51,10 @@
             <groupId>org.jenkins-ci.plugins</groupId>
             <artifactId>script-security</artifactId>
         </dependency>
+        <dependency>
+            <groupId>io.jenkins.plugins</groupId>
+            <artifactId>ionicons-api</artifactId>
+        </dependency>
 
         <dependency>
             <groupId>org.jenkins-ci.main</groupId>
diff --git a/src/main/java/hudson/matrix/LabelAxis.java b/src/main/java/hudson/matrix/LabelAxis.java
index eae12501..f0fd987f 100644
--- a/src/main/java/hudson/matrix/LabelAxis.java
+++ b/src/main/java/hudson/matrix/LabelAxis.java
@@ -24,17 +24,17 @@
 package hudson.matrix;
 
 import hudson.Extension;
+import java.io.IOException;
+import java.util.Set;
 import jenkins.model.Jenkins;
 import hudson.model.labels.LabelAtom;
-import org.apache.commons.lang.StringUtils;
+import org.kohsuke.accmod.Restricted;
+import org.kohsuke.accmod.restrictions.NoExternalUse;
 import org.kohsuke.stapler.DataBoundConstructor;
 
 import java.util.ArrayList;
 import java.util.List;
 
-import static hudson.Functions.htmlAttributeEscape;
-import static hudson.Functions.jsStringEscape;
-
 /**
  * {@link Axis} that selects label expressions.
  *
@@ -56,16 +56,9 @@ public String getValueString() {
         return String.join("/", getValues());
     }
 
-    public String getValueStringHtmlEscaped() {
-        final List<String> values = getValues();
-        StringBuilder str = new StringBuilder();
-        for (String value : values) {
-            if (str.length() > 0) {
-                str.append('/');
-            }
-            str.append(htmlAttributeEscape(value));
-        }
-        return str.toString();
+    @Restricted(NoExternalUse.class)
+    public boolean isChecked(String name) {
+        return getValues().contains(name);
     }
 
     @Extension
@@ -85,13 +78,42 @@ public boolean isInstantiable() {
             return !j.getNodes().isEmpty() || !j.clouds.isEmpty();
         }
 
-        public String buildLabelCheckBox(LabelAtom la) {
-            final String escapedName = jsStringEscape(htmlAttributeEscape(la.getName()));
-            final String escapedDescription = jsStringEscape(StringUtils.isEmpty(la.getDescription()) ? "" :
-                    htmlAttributeEscape(la.getDescription()));
-            return "<input type='checkbox' name='values' json='" +
-                    escapedName + "' " + "/><label class='attach-previous'>" + escapedName +
-                    " (" + escapedDescription + ")</label>";
+        @Restricted(NoExternalUse.class)
+        public LabelLists getLabelLists() {
+            return new LabelLists();
+        }
+
+        @Restricted(NoExternalUse.class)
+        public String getSaveDescription(LabelAtom labelAtom) throws IOException {
+            // remove line breaks as html tooltip will replace linebreaks with </br>.
+            // This ensures that the description is displayed in the same way as on the label
+            return Jenkins.get().getMarkupFormatter().translate(labelAtom.getDescription()).
+                    replaceAll("\r", "").replaceAll("\n", "");
+        }
+    }
+
+    @Restricted(NoExternalUse.class)
+    public static class LabelLists {
+        private List<LabelAtom> machines = new ArrayList<>();
+        private List<LabelAtom> labels = new ArrayList<>();
+
+        public LabelLists() {
+            Set<LabelAtom> labelsAtoms = Jenkins.get().getLabelAtoms();
+            labelsAtoms.forEach(atom -> {
+                if (atom.isSelfLabel()) {
+                    machines.add(atom);
+                } else {
+                    labels.add(atom);
+                }
+            });
+        }
+
+        public List<LabelAtom> getMachines() {
+            return machines;
+        }
+
+        public List<LabelAtom> getLabels() {
+            return labels;
         }
     }
 }
diff --git a/src/main/resources/hudson/matrix/LabelAxis/config.jelly b/src/main/resources/hudson/matrix/LabelAxis/config.jelly
index 01066ef2..d2ad6d19 100644
--- a/src/main/resources/hudson/matrix/LabelAxis/config.jelly
+++ b/src/main/resources/hudson/matrix/LabelAxis/config.jelly
@@ -27,17 +27,45 @@ THE SOFTWARE.
     <f:textbox default="label" />
   </f:entry>
   <f:entry title="${%Node/Label}" field="labels">
-    <div class="yahooTree labelAxis-tree" style="border: 1px solid gray; height: 10em; overflow:auto;" values="${instance.valueStringHtmlEscaped}" />
-    <st:adjunct includes="hudson.matrix.LabelAxis.label-axis-resources"/>
-    <f:invisibleEntry>
-      <span class="label-axis-i18n" data-i18n-labels="${%Labels}" data-i18n-individual-nodes="${%Individual nodes}"/>
-      <div class="label-axis-data-container">
-        <j:forEach var="l" items="${app.labelAtoms}">
-          <span data-label-atom="${l}"
-                data-label-checkbox="${descriptor.buildLabelCheckBox(l)}"
-                data-label="${l.isSelfLabel()?'machines':'labels'}"/>
-        </j:forEach>
+    <div class="jenkins-input" >
+      <j:set var="labelLists" value="${descriptor.labelLists}"/>
+      <j:set var="machines" value="${labelLists.machines}"/>
+      <j:set var="labels" value="${labelLists.labels}"/>
+      <div class="mp-label-axis">
+        <j:if test="${labels.size() gt 0}">
+          <div class="mp-label-axis__container">
+            <div class="jenkins-form-label">${%Labels}
+              <button type="button" class="jenkins-button mp-label-axis__button" data-hidden="true">
+                <l:icon src="symbol-chevron-down-outline plugin-ionicons-api" class="icon-sm"/>
+              </button>
+            </div>
+            <div class="jenkins-!-margin-left-3 mp-label-axis__list jenkins-hidden">
+              <j:forEach var="l" items="${labels}">
+                <div data-html-tooltip="${descriptor.getSaveDescription(l)}" class="mp-label-axis__tooltip">
+                  <f:checkbox name="values" title="${l.name}" checked="${instance.isChecked(l.name)}" json="${l.name}"/>
+                </div>
+              </j:forEach>
+            </div>
+          </div>
+        </j:if>
+        <j:if test="${machines.size() gt 0}">
+          <div class="mp-label-axis__container">
+            <div class="jenkins-form-label">${%Individual Agents}
+              <button type="button" class="jenkins-button mp-label-axis__button" data-hidden="true">
+                <l:icon src="symbol-chevron-down-outline plugin-ionicons-api" class="icon-sm"/>
+              </button>
+            </div>
+            <div class="jenkins-!-margin-left-3 mp-label-axis__list jenkins-hidden">
+              <j:forEach var="l" items="${machines}">
+                <div data-html-tooltip="${descriptor.getSaveDescription(l)}" class="mp-label-axis__tooltip">
+                  <f:checkbox name="values" title="${l.name}" checked="${instance.isChecked(l.name)}" json="${l.name}"/>
+                </div>
+              </j:forEach>
+            </div>
+          </div>
+        </j:if>
       </div>
-    </f:invisibleEntry>
+    </div>
   </f:entry>
+  <st:adjunct includes="hudson.matrix.LabelAxis.label-axis"/>
 </j:jelly>
diff --git a/src/main/resources/hudson/matrix/LabelAxis/label-axis.css b/src/main/resources/hudson/matrix/LabelAxis/label-axis.css
new file mode 100644
index 00000000..74857f04
--- /dev/null
+++ b/src/main/resources/hudson/matrix/LabelAxis/label-axis.css
@@ -0,0 +1,27 @@
+.mp-label-axis__button {
+  min-height: 20px;
+  height: 20px;
+  padding: 0.5rem 0.3rem;
+}
+
+.mp-label-axis__button[data-hidden=false] {
+  rotate: 180deg;
+}
+
+.mp-label-axis__container > .jenkins-form-label {
+  display:flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.mp-label-axis {
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.mp-label-axis__tooltip {
+  width: fit-content;
+}
diff --git a/src/main/resources/hudson/matrix/LabelAxis/label-axis.js b/src/main/resources/hudson/matrix/LabelAxis/label-axis.js
new file mode 100644
index 00000000..60da299b
--- /dev/null
+++ b/src/main/resources/hudson/matrix/LabelAxis/label-axis.js
@@ -0,0 +1,16 @@
+Behaviour.specify(".mp-label-axis__button", "mp-label-container", 0, function(btn) {
+  btn.addEventListener("click", function(evt) {
+    const container = btn.closest(".mp-label-axis__container");
+    if (container) {
+      const labelList = container.querySelector(".mp-label-axis__list");
+      if (labelList) {
+        labelList.classList.toggle("jenkins-hidden");
+        if (btn.dataset.hidden === "true") {
+          btn.dataset.hidden = "false";
+        } else {
+          btn.dataset.hidden = "true";
+        }
+      }
+    }
+  });
+});
diff --git a/src/main/resources/hudson/matrix/MatrixProject/configure-entries.jelly b/src/main/resources/hudson/matrix/MatrixProject/configure-entries.jelly
index 9c6bed92..da6a902d 100644
--- a/src/main/resources/hudson/matrix/MatrixProject/configure-entries.jelly
+++ b/src/main/resources/hudson/matrix/MatrixProject/configure-entries.jelly
@@ -59,11 +59,6 @@ THE SOFTWARE.
   <p:config-trigger/>
 
   <f:section title="${%Configuration Matrix}">
-    <!-- Needed for LabelAxis, but including these from LabelAxis/config.jelly is too late -->
-    <l:yui module="treeview" />
-    <link rel="stylesheet" type="text/css"
-          href="${rootURL}/scripts/yui/treeview/assets/skins/sam/treeview.css" />
-
     <f:block>
       <f:hetero-list name="axis" hasHeader="true"
                      descriptors="${descriptor.axisDescriptors}"