From f5c8c26c511a84e0310e49c39d96b168f2abc352 Mon Sep 17 00:00:00 2001
From: Basil Crow <me@basilcrow.com>
Date: Mon, 21 Aug 2023 19:26:30 -0700
Subject: [PATCH] Revert "Replace hetero-list YUI button and menu with new
 style button and tippy.js menu (#8340)"

This reverts commit c1a6c6c9ddf432e8eae3db68d3ee13c1f762d785.
---
 .../filter-menu-button/filter-menu-button.js  |  70 +++++
 .../main/resources/lib/form/hetero-list.jelly |   5 +-
 .../lib/form/hetero-list/hetero-list.js       | 201 +++++++++++++
 .../test/java/lib/form/HeteroListTest.java    |   8 +-
 .../js/components/dropdowns/hetero-list.js    | 276 ------------------
 war/src/main/js/components/dropdowns/index.js |   2 -
 .../main/js/components/dropdowns/templates.js |   9 +-
 war/src/main/js/components/dropdowns/utils.js |   9 +-
 war/src/main/js/util/keyboard.js              |  50 +---
 war/src/main/js/util/symbols.js               |   2 -
 war/src/main/scss/modules/buttons.scss        |   3 +-
 war/src/main/scss/modules/dropdowns.scss      |  46 +--
 12 files changed, 292 insertions(+), 389 deletions(-)
 create mode 100644 core/src/main/resources/lib/form/filter-menu-button/filter-menu-button.js
 create mode 100644 core/src/main/resources/lib/form/hetero-list/hetero-list.js
 delete mode 100644 war/src/main/js/components/dropdowns/hetero-list.js

diff --git a/core/src/main/resources/lib/form/filter-menu-button/filter-menu-button.js b/core/src/main/resources/lib/form/filter-menu-button/filter-menu-button.js
new file mode 100644
index 000000000000..e81ccc43fe7a
--- /dev/null
+++ b/core/src/main/resources/lib/form/filter-menu-button/filter-menu-button.js
@@ -0,0 +1,70 @@
+// prettier-ignore
+window.createFilterMenuButton = function (
+  button,
+  menu,
+  menuAlignment,
+  menuMinScrollHeight
+) {
+  var MIN_NUM_OPTIONS = 5;
+  var menuButton = new YAHOO.widget.Button(button, {
+    type: "menu",
+    menu: menu,
+    menualignment: menuAlignment,
+    menuminscrollheight: menuMinScrollHeight,
+  });
+
+  var filter = _createFilterMenuButton(menuButton._menu);
+
+  menuButton._menu.element.appendChild(filter);
+  menuButton._menu.showEvent.subscribe(function () {
+    _applyFilterKeyword(menuButton._menu, filter.firstElementChild);
+    filter.style.display =
+      _getItemList(menuButton._menu).children.length >= MIN_NUM_OPTIONS
+        ? ""
+        : "NONE";
+  });
+  menuButton._menu.setInitialFocus = function () {
+    setTimeout(function () {
+      filter.firstElementChild.focus();
+    }, 0);
+  };
+
+  return menuButton;
+};
+
+function _createFilterMenuButton(menu) {
+  const filterInput = document.createElement("input");
+  filterInput.classList.add("jenkins-input");
+  filterInput.setAttribute("placeholder", "Filter");
+  filterInput.setAttribute("spellcheck", "false");
+  filterInput.setAttribute("type", "search");
+
+  filterInput.addEventListener("input", (event) =>
+    _applyFilterKeyword(menu, event.currentTarget),
+  );
+  filterInput.addEventListener("keypress", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  });
+
+  const filterContainer = document.createElement("div");
+  filterContainer.appendChild(filterInput);
+
+  return filterContainer;
+}
+
+function _applyFilterKeyword(menu, filterInput) {
+  const filterKeyword = (filterInput.value || "").toLowerCase();
+  const itemList = _getItemList(menu);
+  let item, match;
+  for (item of itemList.children) {
+    match = item.innerText.toLowerCase().includes(filterKeyword);
+    item.style.display = match ? "" : "NONE";
+  }
+  menu.align();
+}
+
+function _getItemList(menu) {
+  return menu.body.children[0];
+}
diff --git a/core/src/main/resources/lib/form/hetero-list.jelly b/core/src/main/resources/lib/form/hetero-list.jelly
index b817c936c4e8..66fe2dd91773 100644
--- a/core/src/main/resources/lib/form/hetero-list.jelly
+++ b/core/src/main/resources/lib/form/hetero-list.jelly
@@ -107,6 +107,8 @@ THE SOFTWARE.
     </d:tag>
   </d:taglib>
 
+  <st:adjunct includes="lib.form.hetero-list.hetero-list"/>
+
   <j:set var="targetType" value="${attrs.targetType?:it.class}"/>
   <div class="jenkins-form-item hetero-list-container ${hasHeader?'with-drag-drop':''} ${attrs.oneEach?'one-each':''} ${attrs.honorOrder?'honor-order':''}">
     <!-- display existing items -->
@@ -154,8 +156,7 @@ THE SOFTWARE.
 
     <j:if test="${!readOnlyMode}">
       <div>
-        <button type="button" class="jenkins-button hetero-list-add" menualign="${attrs.menuAlign}" suffix="${attrs.name}">${attrs.addCaption?:'%Add'}<l:icon src="symbol-chevron-down"/>
-        </button>
+        <input type="button" value="${attrs.addCaption?:'%Add'}" class="hetero-list-add" menualign="${attrs.menuAlign}" suffix="${attrs.name}"/>
       </div>
     </j:if>
   </div>
diff --git a/core/src/main/resources/lib/form/hetero-list/hetero-list.js b/core/src/main/resources/lib/form/hetero-list/hetero-list.js
new file mode 100644
index 000000000000..a51423bf6e0b
--- /dev/null
+++ b/core/src/main/resources/lib/form/hetero-list/hetero-list.js
@@ -0,0 +1,201 @@
+// @include lib.form.filter-menu-button.filter-menu-button
+
+// do the ones that extract innerHTML so that they can get their original HTML before
+// other behavior rules change them (like YUI buttons.)
+Behaviour.specify(
+  "DIV.hetero-list-container",
+  "hetero-list",
+  -100,
+  function (e) {
+    if (isInsideRemovable(e)) {
+      return;
+    }
+
+    // components for the add button
+    var menu = document.createElement("SELECT");
+    // In case nested content also uses hetero-list
+    var btn = Array.from(e.querySelectorAll("INPUT.hetero-list-add")).pop();
+    if (!btn) {
+      return;
+    }
+    YAHOO.util.Dom.insertAfter(menu, btn);
+
+    var prototypes = e.lastElementChild;
+    while (!prototypes.classList.contains("prototypes")) {
+      prototypes = prototypes.previousElementSibling;
+    }
+    var insertionPoint = prototypes.previousElementSibling; // this is where the new item is inserted.
+
+    // extract templates
+    var templates = [];
+    var children = prototypes.children;
+    for (var i = 0; i < children.length; i++) {
+      var n = children[i];
+      var name = n.getAttribute("name");
+      var tooltip = n.getAttribute("tooltip");
+      var descriptorId = n.getAttribute("descriptorId");
+      // YUI Menu interprets this <option> text node as HTML, so let's escape it again!
+      var title = n.getAttribute("title");
+      if (title) {
+        title = escapeHTML(title);
+      }
+      menu.options[i] = new Option(title, "" + i);
+      templates.push({
+        html: n.innerHTML,
+        name: name,
+        tooltip: tooltip,
+        descriptorId: descriptorId,
+      });
+    }
+    prototypes.remove();
+
+    // Initialize drag & drop for this component
+    var withDragDrop = registerSortableDragDrop(e);
+
+    var menuAlign = btn.getAttribute("menualign") || "tl-bl";
+
+    var menuButton = createFilterMenuButton(
+      btn,
+      menu,
+      menuAlign.split("-"),
+      250,
+    );
+    // copy class names
+    for (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) {
+      var item = args[1];
+      if (item.cfg.getProperty("disabled")) {
+        return;
+      }
+      var t = templates[parseInt(item.value)];
+
+      var nc = document.createElement("div");
+      nc.className = "repeated-chunk";
+      nc.setAttribute("name", t.name);
+      nc.setAttribute("descriptorId", t.descriptorId);
+      nc.innerHTML = t.html;
+      nc.style.opacity = "0";
+
+      renderOnDemand(
+        nc.querySelector("div.config-page"),
+        function () {
+          function findInsertionPoint() {
+            // given the element to be inserted 'prospect',
+            // and the array of existing items 'current',
+            // and preferred ordering function, return the position in the array
+            // the prospect should be inserted.
+            // (for example 0 if it should be the first item)
+            function findBestPosition(prospect, current, order) {
+              function desirability(pos) {
+                var count = 0;
+                for (var i = 0; i < current.length; i++) {
+                  if (i < pos == order(current[i]) <= order(prospect)) {
+                    count++;
+                  }
+                }
+                return count;
+              }
+
+              var bestScore = -1;
+              var bestPos = 0;
+              for (var i = 0; i <= current.length; i++) {
+                var d = desirability(i);
+                if (bestScore <= d) {
+                  // prefer to insert them toward the end
+                  bestScore = d;
+                  bestPos = i;
+                }
+              }
+              return bestPos;
+            }
+
+            var current = Array.from(e.children).filter(function (e) {
+              return e.matches("DIV.repeated-chunk");
+            });
+
+            function o(did) {
+              if (did instanceof Element) {
+                did = did.getAttribute("descriptorId");
+              }
+              for (var i = 0; i < templates.length; i++) {
+                if (templates[i].descriptorId == did) {
+                  return i;
+                }
+              }
+              return 0; // can't happen
+            }
+
+            var bestPos = findBestPosition(t.descriptorId, current, o);
+            if (bestPos < current.length) {
+              return current[bestPos];
+            } else {
+              return insertionPoint;
+            }
+          }
+          var referenceNode = e.classList.contains("honor-order")
+            ? findInsertionPoint()
+            : insertionPoint;
+          referenceNode.parentNode.insertBefore(nc, referenceNode);
+
+          // Initialize drag & drop for this component
+          if (withDragDrop) {
+            registerSortableDragDrop(nc);
+          }
+
+          new YAHOO.util.Anim(
+            nc,
+            {
+              opacity: { to: 1 },
+            },
+            0.2,
+            YAHOO.util.Easing.easeIn,
+          ).animate();
+
+          Behaviour.applySubtree(nc, true);
+          ensureVisible(nc);
+          layoutUpdateCallback.call();
+        },
+        true,
+      );
+    });
+
+    menuButton.getMenu().renderEvent.subscribe(function () {
+      // hook up tooltip for menu items
+      var items = menuButton.getMenu().getItems();
+      for (i = 0; i < items.length; i++) {
+        var t = templates[i].tooltip;
+        if (t != null) {
+          applyTooltip(items[i].element, t);
+        }
+      }
+    });
+
+    // does this container already has a configured instance of the specified descriptor ID?
+    function has(id) {
+      return (
+        e.querySelector('DIV.repeated-chunk[descriptorId="' + id + '"]') != null
+      );
+    }
+
+    if (e.classList.contains("one-each")) {
+      menuButton.getMenu().showEvent.subscribe(function () {
+        var items = menuButton.getMenu().getItems();
+        for (i = 0; i < items.length; i++) {
+          items[i].cfg.setProperty("disabled", has(templates[i].descriptorId));
+        }
+      });
+    }
+  },
+);
+
+Behaviour.specify("DIV.dd-handle", "hetero-list", -100, function (e) {
+  e.addEventListener("mouseover", function () {
+    this.closest(".repeated-chunk").classList.add("hover");
+  });
+  e.addEventListener("mouseout", function () {
+    this.closest(".repeated-chunk").classList.remove("hover");
+  });
+});
diff --git a/test/src/test/java/lib/form/HeteroListTest.java b/test/src/test/java/lib/form/HeteroListTest.java
index c3ed3c748193..0a57e38f9f23 100644
--- a/test/src/test/java/lib/form/HeteroListTest.java
+++ b/test/src/test/java/lib/form/HeteroListTest.java
@@ -49,7 +49,7 @@
 import org.htmlunit.html.HtmlButton;
 import org.htmlunit.html.HtmlElementUtil;
 import org.htmlunit.html.HtmlPage;
-import org.htmlunit.javascript.host.html.HTMLButtonElement;
+import org.htmlunit.javascript.host.html.HTMLAnchorElement;
 import org.jenkinsci.Symbol;
 import org.junit.Rule;
 import org.junit.Test;
@@ -75,9 +75,9 @@ public void xssPrevented_heteroList_usingDescriptorDisplayName() throws Exceptio
         HtmlPage page = wc.goTo("root");
 
         page.executeJavaScript("document.querySelector('.hetero-list-add').click();");
-        Object result = page.executeJavaScript("document.querySelector('.jenkins-dropdown__item')").getJavaScriptResult();
-        assertThat(result, instanceOf(HTMLButtonElement.class));
-        HTMLButtonElement menuItem = (HTMLButtonElement) result;
+        Object result = page.executeJavaScript("document.querySelector('.yuimenuitem a')").getJavaScriptResult();
+        assertThat(result, instanceOf(HTMLAnchorElement.class));
+        HTMLAnchorElement menuItem = (HTMLAnchorElement) result;
         String menuItemContent = menuItem.getInnerHTML();
         assertThat(menuItemContent, not(containsString("<")));
     }
diff --git a/war/src/main/js/components/dropdowns/hetero-list.js b/war/src/main/js/components/dropdowns/hetero-list.js
deleted file mode 100644
index 955d7d80afb9..000000000000
--- a/war/src/main/js/components/dropdowns/hetero-list.js
+++ /dev/null
@@ -1,276 +0,0 @@
-import behaviorShim from "@/util/behavior-shim";
-import Templates from "@/components/dropdowns/templates";
-import Utils from "@/components/dropdowns/utils";
-import * as Symbols from "@/util/symbols";
-import { createElementFromHtml } from "@/util/dom";
-import tippy from "tippy.js";
-
-function init() {
-  generateButtons();
-  generateHandles();
-}
-
-function generateHandles() {
-  behaviorShim.specify("DIV.dd-handle", "hetero-list", -100, function (e) {
-    e.addEventListener("mouseover", function () {
-      this.closest(".repeated-chunk").classList.add("hover");
-    });
-    e.addEventListener("mouseout", function () {
-      this.closest(".repeated-chunk").classList.remove("hover");
-    });
-  });
-}
-
-function generateButtons() {
-  behaviorShim.specify(
-    "DIV.hetero-list-container",
-    "hetero-list-new",
-    -100,
-    function (e) {
-      if (isInsideRemovable(e)) {
-        return;
-      }
-
-      let btn = Array.from(e.querySelectorAll("BUTTON.hetero-list-add")).pop();
-      if (!btn) {
-        let oldbtn = Array.from(
-          e.querySelectorAll("INPUT.hetero-list-add"),
-        ).pop();
-        if (!oldbtn) {
-          return;
-        }
-        btn = document.createElement("button");
-        btn.setAttribute("type", "button");
-        btn.classList.add("hetero-list-add", "jenkins-button");
-        btn.innerText = oldbtn.getAttribute("value");
-        if (oldbtn.hasAttribute("suffix")) {
-          btn.setAttribute("suffix", oldbtn.getAttribute("suffix"));
-        }
-        let chevron = createElementFromHtml(Symbols.CHEVRON_DOWN);
-        btn.appendChild(chevron);
-        oldbtn.parentNode.appendChild(btn);
-        oldbtn.remove();
-      }
-
-      let prototypes = e.lastElementChild;
-      while (!prototypes.classList.contains("prototypes")) {
-        prototypes = prototypes.previousElementSibling;
-      }
-      let insertionPoint = prototypes.previousElementSibling; // this is where the new item is inserted.
-
-      let templates = [];
-      let children = prototypes.children;
-      for (let i = 0; i < children.length; i++) {
-        let n = children[i];
-        let name = n.getAttribute("name");
-        let tooltip = n.getAttribute("tooltip");
-        let descriptorId = n.getAttribute("descriptorId");
-        let title = n.getAttribute("title");
-        templates.push({
-          html: n.innerHTML,
-          name: name,
-          tooltip: tooltip,
-          descriptorId: descriptorId,
-          title: title,
-        });
-      }
-      prototypes.remove();
-      let withDragDrop = registerSortableDragDrop(e);
-
-      function insert(instance, index) {
-        var t = templates[parseInt(index)];
-        var nc = document.createElement("div");
-        nc.className = "repeated-chunk";
-        nc.setAttribute("name", t.name);
-        nc.setAttribute("descriptorId", t.descriptorId);
-        nc.innerHTML = t.html;
-        nc.style.opacity = "0";
-
-        instance.hide();
-
-        renderOnDemand(
-          nc.querySelector("div.config-page"),
-          function () {
-            function findInsertionPoint() {
-              // given the element to be inserted 'prospect',
-              // and the array of existing items 'current',
-              // and preferred ordering function, return the position in the array
-              // the prospect should be inserted.
-              // (for example 0 if it should be the first item)
-              function findBestPosition(prospect, current, order) {
-                function desirability(pos) {
-                  var count = 0;
-                  for (var i = 0; i < current.length; i++) {
-                    if (i < pos == order(current[i]) <= order(prospect)) {
-                      count++;
-                    }
-                  }
-                  return count;
-                }
-
-                var bestScore = -1;
-                var bestPos = 0;
-                for (var i = 0; i <= current.length; i++) {
-                  var d = desirability(i);
-                  if (bestScore <= d) {
-                    // prefer to insert them toward the end
-                    bestScore = d;
-                    bestPos = i;
-                  }
-                }
-                return bestPos;
-              }
-
-              var current = Array.from(e.children).filter(function (e) {
-                return e.matches("DIV.repeated-chunk");
-              });
-
-              function o(did) {
-                if (did instanceof Element) {
-                  did = did.getAttribute("descriptorId");
-                }
-                for (var i = 0; i < templates.length; i++) {
-                  if (templates[i].descriptorId == did) {
-                    return i;
-                  }
-                }
-                return 0; // can't happen
-              }
-
-              var bestPos = findBestPosition(t.descriptorId, current, o);
-              if (bestPos < current.length) {
-                return current[bestPos];
-              } else {
-                return insertionPoint;
-              }
-            }
-            var referenceNode = e.classList.contains("honor-order")
-              ? findInsertionPoint()
-              : insertionPoint;
-            referenceNode.parentNode.insertBefore(nc, referenceNode);
-
-            // Initialize drag & drop for this component
-            if (withDragDrop) {
-              registerSortableDragDrop(nc);
-            }
-
-            new YAHOO.util.Anim(
-              nc,
-              {
-                opacity: { to: 1 },
-              },
-              0.2,
-              YAHOO.util.Easing.easeIn,
-            ).animate();
-
-            Behaviour.applySubtree(nc, true);
-            ensureVisible(nc);
-            layoutUpdateCallback.call();
-          },
-          true,
-        );
-      }
-
-      function has(id) {
-        return (
-          e.querySelector('DIV.repeated-chunk[descriptorId="' + id + '"]') !=
-          null
-        );
-      }
-
-      let oneEach = e.classList.contains("one-each");
-
-      generateDropDown(btn, (instance) => {
-        let menuItems = [];
-        for (let i = 0; i < templates.length; i++) {
-          let n = templates[i];
-          let disabled = oneEach && has(n.descriptorId);
-          let type = disabled ? "DISABLED" : "button";
-          let item = {
-            label: n.title,
-            onClick: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              insert(instance, i);
-            },
-            type: type,
-          };
-          menuItems.push(item);
-        }
-        const menuContainer = document.createElement("div");
-        const menu = Utils.generateDropdownItems(menuItems, true);
-        menuContainer.appendChild(createFilter(menu));
-        menuContainer.appendChild(menu);
-        instance.setContent(menuContainer);
-      });
-    },
-  );
-}
-
-function createFilter(menu) {
-  const filterInput = createElementFromHtml(`
-    <input class="jenkins-dropdown__filter-input" placeholder="Filter" spellcheck="false" type="search"/>
-  `);
-
-  filterInput.addEventListener("input", (event) =>
-    applyFilterKeyword(menu, event.currentTarget),
-  );
-  filterInput.addEventListener("click", (event) => event.stopPropagation());
-  filterInput.addEventListener("keydown", (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  });
-
-  const filterContainer = createElementFromHtml(`
-    <div class="jenkins-dropdown__filter">
-      <div class="jenkins-dropdown__item__icon">
-        ${Symbols.FUNNEL}
-      </div>
-    </div>
-  `);
-  filterContainer.appendChild(filterInput);
-  return filterContainer;
-}
-
-function applyFilterKeyword(menu, filterInput) {
-  const filterKeyword = (filterInput.value || "").toLowerCase();
-  let items = menu.querySelectorAll(
-    ".jenkins-dropdown__item, .jenkins-dropdown__disabled",
-  );
-  for (let item of items) {
-    let match = item.innerText.toLowerCase().includes(filterKeyword);
-    item.style.display = match ? "inline-flex" : "none";
-  }
-}
-
-function generateDropDown(button, callback) {
-  tippy(
-    button,
-    Object.assign({}, Templates.dropdown(), {
-      appendTo: undefined,
-      onCreate(instance) {
-        if (instance.loaded) {
-          return;
-        }
-        instance.popper.addEventListener("click", () => {
-          instance.hide();
-        });
-        instance.popper.addEventListener("keydown", () => {
-          if (event.key === "Escape") {
-            instance.hide();
-          }
-        });
-      },
-      onShow(instance) {
-        callback(instance);
-        button.dataset.expanded = "true";
-      },
-      onHide() {
-        button.dataset.expanded = "false";
-      },
-    }),
-  );
-}
-
-export default { init };
diff --git a/war/src/main/js/components/dropdowns/index.js b/war/src/main/js/components/dropdowns/index.js
index 472c548e0425..c01fe1dc62a0 100644
--- a/war/src/main/js/components/dropdowns/index.js
+++ b/war/src/main/js/components/dropdowns/index.js
@@ -1,13 +1,11 @@
 import Jumplists from "@/components/dropdowns/jumplists";
 import InpageJumplist from "@/components/dropdowns/inpage-jumplist";
 import OverflowButton from "@/components/dropdowns/overflow-button";
-import HeteroLists from "@/components/dropdowns/hetero-list";
 
 function init() {
   Jumplists.init();
   InpageJumplist.init();
   OverflowButton.init();
-  HeteroLists.init();
 }
 
 export default { init };
diff --git a/war/src/main/js/components/dropdowns/templates.js b/war/src/main/js/components/dropdowns/templates.js
index 4729973de654..d20ae72674a0 100644
--- a/war/src/main/js/components/dropdowns/templates.js
+++ b/war/src/main/js/components/dropdowns/templates.js
@@ -70,7 +70,7 @@ function menuItem(options) {
     `);
 
   if (options.onClick) {
-    item.addEventListener("click", (event) => options.onClick(event));
+    item.addEventListener("click", () => options.onClick());
   }
 
   return item;
@@ -94,17 +94,10 @@ function placeholder(label) {
   );
 }
 
-function disabled(label) {
-  return createElementFromHtml(
-    `<p class="jenkins-dropdown__disabled">${label}</p>`,
-  );
-}
-
 export default {
   dropdown,
   menuItem,
   heading,
   separator,
   placeholder,
-  disabled,
 };
diff --git a/war/src/main/js/components/dropdowns/utils.js b/war/src/main/js/components/dropdowns/utils.js
index dce5c96fdb06..8636d82befbd 100644
--- a/war/src/main/js/components/dropdowns/utils.js
+++ b/war/src/main/js/components/dropdowns/utils.js
@@ -38,12 +38,9 @@ function generateDropdown(element, callback) {
 /*
  * Generates the contents for the dropdown
  */
-function generateDropdownItems(items, compact) {
+function generateDropdownItems(items) {
   const menuItems = document.createElement("div");
   menuItems.classList.add("jenkins-dropdown");
-  if (compact === true) {
-    menuItems.classList.add("jenkins-dropdown--compact");
-  }
 
   items
     .map((item) => {
@@ -55,10 +52,6 @@ function generateDropdownItems(items, compact) {
         return Templates.separator();
       }
 
-      if (item.type === "DISABLED") {
-        return Templates.disabled(item.label);
-      }
-
       const menuItem = Templates.menuItem(item);
 
       if (item.subMenu != null) {
diff --git a/war/src/main/js/util/keyboard.js b/war/src/main/js/util/keyboard.js
index 0196d8992f83..3e44eb32fd11 100644
--- a/war/src/main/js/util/keyboard.js
+++ b/war/src/main/js/util/keyboard.js
@@ -13,21 +13,6 @@ export default function makeKeyboardNavigable(
   hasKeyboardPriority = () =>
     window.getComputedStyle(container).visibility === "visible",
 ) {
-  window.addEventListener("keyup", (e) => {
-    let items = Array.from(itemsFunc());
-    let selectedItem = items.find((a) => a.classList.contains(selectedClass));
-    if (container && hasKeyboardPriority(container)) {
-      if (e.key === "Tab") {
-        if (items.includes(document.activeElement)) {
-          if (selectedItem) {
-            selectedItem.classList.remove(selectedClass);
-          }
-          selectedItem = document.activeElement;
-          selectedItem.classList.add(selectedClass);
-        }
-      }
-    }
-  });
   window.addEventListener("keydown", (e) => {
     let items = Array.from(itemsFunc());
     let selectedItem = items.find((a) => a.classList.contains(selectedClass));
@@ -50,7 +35,10 @@ export default function makeKeyboardNavigable(
           selectedItem = items[0];
         }
 
-        scrollAndSelect(selectedItem, selectedClass, items);
+        if (selectedItem !== null) {
+          selectedItem.scrollIntoView(false);
+          selectedItem.classList.add(selectedClass);
+        }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
 
@@ -67,10 +55,12 @@ export default function makeKeyboardNavigable(
           selectedItem = items[items.length - 1];
         }
 
-        scrollAndSelect(selectedItem, selectedClass, items);
+        if (selectedItem !== null) {
+          selectedItem.scrollIntoView(false);
+          selectedItem.classList.add(selectedClass);
+        }
       } else if (e.key === "Enter") {
-        if (selectedItem) {
-          e.preventDefault();
+        if (selectedItem !== null) {
           selectedItem.click();
         }
       } else {
@@ -79,25 +69,3 @@ export default function makeKeyboardNavigable(
     }
   });
 }
-
-function scrollAndSelect(selectedItem, selectedClass, items) {
-  if (selectedItem !== null) {
-    if (!isInViewport(selectedItem)) {
-      selectedItem.scrollIntoView(false);
-    }
-    selectedItem.classList.add(selectedClass);
-    if (items.includes(document.activeElement)) {
-      selectedItem.focus();
-    }
-  }
-}
-
-function isInViewport(element) {
-  const rect = element.getBoundingClientRect();
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= window.innerHeight &&
-    rect.right <= window.innerWidth
-  );
-}
diff --git a/war/src/main/js/util/symbols.js b/war/src/main/js/util/symbols.js
index 2181f40448c1..696feb709da8 100644
--- a/war/src/main/js/util/symbols.js
+++ b/war/src/main/js/util/symbols.js
@@ -3,5 +3,3 @@ export const SUCCESS = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512
 export const WARNING = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z" fill='currentColor'/></svg>`;
 export const ERROR = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z" fill='currentColor'/></svg>`;
 export const CLOSE = `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>`;
-export const CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Chevron Down</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"/></svg>`;
-export const FUNNEL = `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M35.4 87.12l168.65 196.44A16.07 16.07 0 01208 294v119.32a7.93 7.93 0 005.39 7.59l80.15 26.67A7.94 7.94 0 00304 440V294a16.07 16.07 0 014-10.44L476.6 87.12A14 14 0 00466 64H46.05A14 14 0 0035.4 87.12z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>`;
diff --git a/war/src/main/scss/modules/buttons.scss b/war/src/main/scss/modules/buttons.scss
index 0368549deb7d..cfa3633b18d8 100644
--- a/war/src/main/scss/modules/buttons.scss
+++ b/war/src/main/scss/modules/buttons.scss
@@ -254,8 +254,7 @@
   }
 }
 
-.advanced-button,
-.hetero-list-add {
+.advanced-button {
   svg {
     width: 0.875rem;
     height: 0.875rem;
diff --git a/war/src/main/scss/modules/dropdowns.scss b/war/src/main/scss/modules/dropdowns.scss
index f9f9bff57151..1db8d89f3ecf 100644
--- a/war/src/main/scss/modules/dropdowns.scss
+++ b/war/src/main/scss/modules/dropdowns.scss
@@ -3,6 +3,7 @@
 $dropdown-padding: 0.4rem;
 
 .tippy-box[data-theme~="dropdown"] {
+  padding: $dropdown-padding;
   border-radius: 15px;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
@@ -38,40 +39,7 @@ $dropdown-padding: 0.4rem;
 }
 
 .jenkins-dropdown {
-  display: flex;
-  flex-direction: column;
-  padding: $dropdown-padding;
-
-  &--compact {
-    > .jenkins-dropdown__item,
-    > .jenkins-dropdown__disabled {
-      padding: 0 0.6rem;
-      min-height: 30px !important;
-    }
-  }
-
-  &__filter {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--input-border);
-
-    &-input {
-      &:focus {
-        outline: none;
-      }
-
-      width: 100%;
-      border: none;
-      color: var(--text-color-secondary);
-      background-color: unset;
-    }
-
-    svg {
-      margin-top: 2px;
-    }
-  }
+  display: contents;
 
   &__separator {
     position: relative;
@@ -107,16 +75,6 @@ $dropdown-padding: 0.4rem;
     opacity: 0.8;
   }
 
-  &__disabled {
-    color: var(--text-color-secondary) !important;
-    font-size: 0.8125rem;
-    opacity: 0.8;
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-    cursor: default;
-  }
-
   &__item {
     --item-background--hover: var(--button-background--hover);
     --item-background--active: var(--button-background--active);