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.
+ 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(`
-
-
- ${Symbols.FUNNEL}
-
-
${label}
`,
- );
-}
-
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 = `Chevron Down