Refine repeatable list Add button

Author: janfaracik

core/src/main/resources/lib/form/hetero-list.jelly

@@ -154,7 +154,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 type="button" class="jenkins-button hetero-list-add" menualign="${attrs.menuAlign}" suffix="${attrs.name}"><l:icon src="symbol-add"/>${attrs.addCaption?:'%Add'}
         </button>
       </div>
     </j:if>

core/src/main/resources/lib/form/repeatable.jelly

@@ -23,7 +23,7 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout">
   <st:documentation> <![CDATA[
     Repeatable blocks used to present UI where the user can configure multiple entries
     of the same kind (see the Java installations configuration in the system config.)
@@ -143,6 +143,7 @@ THE SOFTWARE.
     </div>
     <j:if test="${!empty(items) and !attrs.noAddButton and attrs.enableTopButton}">
       <button type="button" class="jenkins-button repeatable-add repeatable-add-top">
+        <l:icon src="symbol-add"/>
         ${attrs.add?:'%Add'}
       </button>
     </j:if>
@@ -173,6 +174,7 @@ THE SOFTWARE.
     <div class="repeatable-insertion-point" />
     <j:if test="${!attrs.noAddButton}">
       <button type="button" class="jenkins-button repeatable-add">
+        <l:icon src="symbol-add"/>
         ${attrs.add?:'%Add'}
       </button>
     </j:if>

src/main/js/components/dropdowns/hetero-list.js

@@ -167,6 +167,23 @@ function generateButtons() {
 
       let oneEach = e.classList.contains("one-each");
 
+      /**
+       * Disable the Add button if there are no more items to add
+       */
+      function toggleButtonState() {
+        const templateCount = templates.length;
+        const selectedCount = [...e.children].filter((e) =>
+          e.classList.contains("repeated-chunk"),
+        ).length;
+
+        btn.disabled = oneEach && selectedCount === templateCount;
+      }
+      const observer = new MutationObserver(() => {
+        toggleButtonState();
+      });
+      observer.observe(e, { childList: true });
+      toggleButtonState();
+
       generateDropDown(btn, (instance) => {
         let menuItems = [];
         for (let i = 0; i < templates.length; i++) {
@@ -196,7 +213,7 @@ function generateButtons() {
 
 function createFilter(menu) {
   const filterInput = createElementFromHtml(`
-    <input class="jenkins-dropdown__filter-input" placeholder="Filter" spellcheck="false" type="search"/>
+    <input class="jenkins-input jenkins-search__input jenkins-dropdown__filter-input" placeholder="Filter" spellcheck="false" type="search"/>
   `);
 
   filterInput.addEventListener("input", (event) =>

src/main/scss/components/_buttons.scss

@@ -230,8 +230,7 @@
   }
 }
 
-.advanced-button,
-.hetero-list-add {
+.advanced-button {
   svg {
     width: 0.875rem;
     height: 0.875rem;

src/main/scss/components/_dropdowns.scss

@@ -68,19 +68,18 @@ $dropdown-padding: 0.375rem;
   &__filter {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 1.2ch;
     padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--input-border);
+    border-bottom: var(--jenkins-border);
 
     &-input {
-      &:focus {
-        outline: none;
-      }
-
-      width: 100%;
-      border: none;
-      color: var(--text-color-secondary);
-      background-color: unset;
+      outline: none !important;
+      border: none !important;
+      background-color: unset !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      min-height: 0 !important;
+      border-radius: 0 !important;
     }
 
     svg {
@@ -118,11 +117,11 @@ $dropdown-padding: 0.375rem;
   &__disabled {
     color: var(--text-color-secondary) !important;
     font-size: 0.8125rem;
-    opacity: 0.8;
+    opacity: 0.5;
     display: inline-flex;
     align-items: center;
     margin: 0;
-    cursor: default;
+    cursor: not-allowed;
   }
 
   &__item {