Update 'Add credentials' dropdown button (#551)

Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com>
jenkinsci · Oct 6, 2024 · f0a2ed0 · f0a2ed0
1 parent 4003ed3
commit f0a2ed0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 80 deletions.
diff --git a/pom.xml b/pom.xml
@@ -88,8 +88,7 @@
     <dependencies>
       <dependency>
         <groupId>io.jenkins.tools.bom</groupId>
-        <artifactId>bom-2.426.x</artifactId>
-        <!-- when updating remove the bouncycastle-api override -->
+        <artifactId>bom-2.452.x</artifactId>
         <version>3208.vb_21177d4b_cd9</version>
         <scope>import</scope>
         <type>pom</type>
@@ -110,7 +109,6 @@
     <dependency>
         <groupId>org.jenkins-ci.plugins</groupId>
         <artifactId>bouncycastle-api</artifactId>
-        <version>2.30.1.78.1-248.ve27176eb_46cb_</version>
     </dependency>
     <!-- test dependencies -->
     <dependency>

diff --git a/src/main/resources/lib/credentials/select.jelly b/src/main/resources/lib/credentials/select.jelly
@@ -24,7 +24,7 @@
  -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:t="/lib/hudson">
+         xmlns:f="/lib/form" xmlns:t="/lib/hudson" xmlns:dd="/lib/layout/dropdowns">
   <st:documentation>
     A <code>select</code> control that supports the data binding and AJAX updates with support for adding credentials.
     Your descriptor should have the 'doFillXyzItems' method, which returns a StandardListBoxModel
@@ -114,46 +114,34 @@
       <j:set var="storeItems" value="${selectHelper.getStoreItems(context, includeUser)}"/>
       <j:choose>
         <j:when test="${selectHelper.hasCreatePermission(context, includeUser) and storeItems != null and !storeItems.isEmpty()}">
-          <button class="credentials-add-menu hetero-list-add jenkins-!-margin-top-2" menualign="${attrs.menuAlign}"
-                  suffix="${attrs.name}">
-            <l:icon src="symbol-add"/>
-            ${%Add}
-          </button>
-          <div class="credentials-add-menu-items yuimenu">
-            <div class="bd">
-            <ul class="first-of-type">
+          <l:overflowButton icon="symbol-add"
+                            text="${%Add}"
+                            tooltip="${null}"
+                            clazz="jenkins-!-margin-top-2 credentials-add-menu">
             <j:forEach var="storeItem" items="${storeItems}">
-              <j:choose>
-                <j:when test="${storeItem.enabled}">
-                  <li class="yuimenuitem" data-url="${request.contextPath}/${storeItem.url}/dialog">
-                    <span class="yuimenuitemlabel" tooltip="${storeItem.description}">
-                      <l:icon class="${storeItem.iconClassName} icon-sm"/>
-                      ${storeItem.displayName}
-                    </span>
-                  </li>
-                </j:when>
-                <j:otherwise>
-                  <li class="yuimenuitem" disabled="disabled">
-                    <span class="yuimenuitemlabel" tooltip="${storeItem.description}" disabled="disabled">
-                      <l:icon class="${storeItem.iconClassName} icon-sm"/>
-                      ${storeItem.displayName}
-                    </span>
-                  </li>
-                </j:otherwise>
-              </j:choose>
+              <dd:custom>
+                <button class="jenkins-dropdown__item"
+                        tooltip="${storeItem.description}"
+                        data-type="credentials-add-store-item"
+                        data-url="${request.contextPath}/${storeItem.url}/dialog"
+                        disabled="${storeItem.enabled ? null : true}">
+                  <div class="jenkins-dropdown__item__icon">
+                    <l:icon src="${storeItem.iconClassName} icon-sm" />
+                  </div>
+                  ${storeItem.displayName}
+                </button>
+              </dd:custom>
             </j:forEach>
-            </ul>
-            </div>
-          </div>
+          </l:overflowButton>
         </j:when>
         <j:otherwise>
-          <button class="credentials-add jenkins-!-margin-top-2">
+          <button class="jenkins-button credentials-add jenkins-!-margin-top-2"
+                  type="button">
             <l:icon src="symbol-add"/>
             ${%Add}
           </button>
         </j:otherwise>
       </j:choose>
-
     </div>
     <j:if test="${attrs.expressionAllowed}">
       <div class="credentials-select-content-param ${paramValue?'credentials-select-content-active':'credentials-select-content-inactive'}">

diff --git a/src/main/resources/lib/credentials/select/select.js b/src/main/resources/lib/credentials/select/select.js
@@ -127,49 +127,14 @@ window.credentials.addSubmit = function (_) {
     }
 };
 
-Behaviour.specify("BUTTON.credentials-add-menu", 'credentials-select', -99, function(e) {
-    var btn = e;
-    var menu = btn.nextElementSibling;
-    while (menu && !menu.matches('DIV.credentials-add-menu-items')) {
-        menu = menu.nextElementSibling;
-    }
-    if (menu) {
-        var menuAlign = (btn.getAttribute("menualign") || "tl-bl");
-
-        var menuButton = new YAHOO.widget.Button(btn, {
-            type: "menu",
-            menu: menu,
-            menualignment: menuAlign.split("-"),
-            menuminscrollheight: 250
-        });
-        // copy class names
-        for (var i = 0; i < btn.classList.length; i++) {
-            menuButton._button.classList.add(btn.classList.item(i));
-        }
-        menuButton._button.setAttribute("suffix", btn.getAttribute("suffix"));
-        menuButton.getMenu().clickEvent.subscribe(function (type, args, value) {
-            var item = args[1];
-            if (item.cfg.getProperty("disabled")) {
-                return;
-            }
-            window.credentials.add(item.srcElement.getAttribute('data-url'));
-        });
-        // YUI menu will not parse disabled when using DIV-LI only when using SELECT-OPTION
-        // but SELECT-OPTION doesn't support images, so we need to catch the rendering and roll our
-        // own disabled attribute support
-        menuButton.getMenu().beforeShowEvent.subscribe(function(type,args,value){
-            var items = this.getItems();
-            for (var i = 0; i < items.length; i++) {
-                if (items[i].srcElement.getAttribute('disabled')) {
-                    items[i].cfg.setProperty('disabled', true);
-                }
-            }
-        });
-    }
-    e=null;
+Behaviour.specify("[data-type='credentials-add-store-item']", 'credentials-add-store-item', -99, function(e) {
+    e.addEventListener("click", function (event) {
+        window.credentials.add(event.target.dataset.url);
+    });
+    e = null;
 });
 Behaviour.specify("BUTTON.credentials-add", 'credentials-select', 0, function (e) {
-    makeButton(e, e.disabled ? null : window.credentials.add);
+    e.addEventListener("click", window.credentials.add);
     e = null; // avoid memory leak
 });
 Behaviour.specify("DIV.credentials-select-control", 'credentials-select', 100, function (d) {

diff --git a/src/test/java/com/cloudbees/plugins/credentials/CredentialsSelectHelperTest.java b/src/test/java/com/cloudbees/plugins/credentials/CredentialsSelectHelperTest.java
@@ -10,9 +10,7 @@
 import org.htmlunit.html.HtmlButton;
 import org.htmlunit.html.HtmlForm;
 import org.htmlunit.html.HtmlInput;
-import org.htmlunit.html.HtmlListItem;
 import org.htmlunit.html.HtmlPage;
-import org.htmlunit.html.HtmlSpan;
 import org.junit.Rule;
 import org.junit.Test;
 import org.jvnet.hudson.test.JenkinsRule;
@@ -26,10 +24,15 @@ public class CredentialsSelectHelperTest {
     public void doAddCredentialsFromPopupWorksAsExpected() throws Exception {
         try (JenkinsRule.WebClient wc = j.createWebClient()) {
             HtmlPage htmlPage = wc.goTo("credentials-selection");
+
             HtmlButton addCredentialsButton = htmlPage.querySelector(".credentials-add-menu");
+            // The 'click' event doesn't fire a 'mouseenter' event causing the menu not to show, so let's fire one
+            addCredentialsButton.fireEvent("mouseenter");
             addCredentialsButton.click();
-            HtmlListItem li = htmlPage.querySelector(".credentials-add-menu-items li");
-            li.click();
+
+            HtmlButton jenkinsCredentialsOption = htmlPage.querySelector(".jenkins-dropdown__item");
+            jenkinsCredentialsOption.click();
+
             wc.waitForBackgroundJavaScript(4000);
             HtmlForm form = htmlPage.querySelector("#credentials-dialog-form");