From db3121edabf051fd890ae454223e13baf3449af2 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 1 Apr 2024 21:32:16 +0100
Subject: [PATCH 1/5] Init

---
 .../resources/hudson/model/View/newJob.jelly  |  26 +--
 .../hudson/model/View/newJob.properties       |   1 +
 war/src/main/js/add-item.js                   |  34 +---
 war/src/main/js/widgets/add/addform.scss      | 176 ++++--------------
 4 files changed, 56 insertions(+), 181 deletions(-)

diff --git a/core/src/main/resources/hudson/model/View/newJob.jelly b/core/src/main/resources/hudson/model/View/newJob.jelly
index f4f89e42af96..f0fd8d85ceaa 100644
--- a/core/src/main/resources/hudson/model/View/newJob.jelly
+++ b/core/src/main/resources/hudson/model/View/newJob.jelly
@@ -32,30 +32,34 @@ THE SOFTWARE.
       <script src="${resURL}/jsbundles/add-item.js" type="text/javascript" defer="true" />
     </l:header>
 
+    <l:breadcrumb title="${%NewJob(it.newPronoun)}" />
+
     <l:main-panel>
     <div id="add-item-panel" style="display: none;">
+      <h1>${%NewJob(it.newPronoun)}</h1>
           <form method="post" action="createItem" name="createItem" id="createItem">
             <div class="header">
               <div class="add-item-name">
-                <label for="name" class="h3">${%ItemName.label}</label>
+                <label for="name" class="jenkins-form-label">${%ItemName.label}</label>
                 <input name="name" class="jenkins-input" id="name" data-valid="false" type="text" tabindex="0" />
-                <div class="input-help">&#187; ${%ItemName.help}</div>
                 <div id="itemname-required" class="input-validation-message input-message-disabled">&#187; ${%ItemName.validation.required}</div>
                 <div id="itemname-invalid" class="input-validation-message input-message-disabled"></div>
                 <div id="itemtype-required" class="input-validation-message input-message-disabled">&#187; ${%ItemType.validation.required}</div>
               </div>
             </div>
 
+            <br/>
+
+            <div class="jenkins-form-label">${%ItemType.label}</div>
             <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
 
+            <br/>
+
             <j:if test="${!empty(app.items)}">
               <div class="item-copy">
-                <p class="description">${%CopyOption.description}</p>
+                <p class="jenkins-form-label">${%CopyOption.description}</p>
                 <div class="add-item-copy">
                   <input type="radio" name="mode" value="copy" />
-                  <div class="icon">
-                    <img src="${resURL}/images/48x48/copy.png" />
-                  </div>
                   <label>${%CopyOption.label}</label>
                   <j:set var="descriptor" value="${it.descriptor}" />
                   <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
@@ -63,11 +67,11 @@ THE SOFTWARE.
               </div>
             </j:if>
 
-            <div class="footer">
-              <div class="btn-decorator">
-                <st:include page="newJobButtonBar.jelly"/>
-              </div>
-            </div>
+            <br/>
+
+            <s:bottomButtonBar>
+              <st:include page="newJobButtonBar.jelly"/>
+            </s:bottomButtonBar>
           </form>
       </div>
     </l:main-panel>
diff --git a/core/src/main/resources/hudson/model/View/newJob.properties b/core/src/main/resources/hudson/model/View/newJob.properties
index 4aa1ef73d683..c08fa1cdfe34 100644
--- a/core/src/main/resources/hudson/model/View/newJob.properties
+++ b/core/src/main/resources/hudson/model/View/newJob.properties
@@ -2,6 +2,7 @@ NewJob=New {0}
 JobName={0} name
 ItemName.help=Required field
 ItemName.label=Enter an item name
+ItemType.label=Select an item type
 ItemName.validation.required=This field cannot be empty, please enter a valid name
 ItemType.validation.required=Please select an item type
 CopyOption.placeholder=Type to autocomplete
diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
index 62244731adde..59b20dde64a1 100644
--- a/war/src/main/js/add-item.js
+++ b/war/src/main/js/add-item.js
@@ -70,33 +70,9 @@ $.when(getItems()).done(function (data) {
     }
 
     function hideInputHelp(context) {
-      $(".input-help", context).addClass("input-message-disabled");
     }
 
     function showInputHelp(context) {
-      $(".input-help", context).removeClass("input-message-disabled");
-    }
-
-    // About Scroll-linked effect: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
-    function doSticky() {
-      var decorator = $("form .footer .btn-decorator");
-      var pos = decorator.offset();
-      var vpH = $(window).height();
-      if (pos.top >= vpH) {
-        decorator.css({ position: "fixed" });
-      }
-
-      $(window).scroll(function () {
-        var footer = $("form .footer");
-        var ref1 = decorator.offset().top + decorator.outerHeight();
-        var ref2 = footer.offset().top + footer.outerHeight();
-        var vpH = $(window).height();
-        if (ref2 > vpH + $(window).scrollTop()) {
-          decorator.css({ position: "fixed" });
-        } else if (ref2 - 1 <= ref1) {
-          decorator.css({ position: "absolute" });
-        }
-      });
     }
 
     function enableSubmit(status) {
@@ -173,6 +149,9 @@ $.when(getItems()).done(function (data) {
       item.setAttribute("role", "radio");
       item.setAttribute("aria-checked", "false");
 
+      var iconDiv = drawIcon(elem);
+      item.appendChild(iconDiv);
+
       var label = item.appendChild(document.createElement("label"));
 
       var radio = label.appendChild(document.createElement("input"));
@@ -189,9 +168,6 @@ $.when(getItems()).done(function (data) {
       desc.className = "desc";
       desc.innerHTML = checkForLink(elem.description);
 
-      var iconDiv = drawIcon(elem);
-      item.appendChild(iconDiv);
-
       function select(e) {
         e.preventDefault();
         cleanCopyFromOption();
@@ -228,7 +204,6 @@ $.when(getItems()).done(function (data) {
         iconDiv.className = "icon";
 
         var img1 = document.createElement("img");
-        img1.className = elem.iconClassName + " icon-xlg";
         img1.src = elem.iconQualifiedUrl;
         iconDiv.appendChild(img1);
 
@@ -373,8 +348,5 @@ $.when(getItems()).done(function (data) {
 
     // Disable the submit button
     enableSubmit(false);
-
-    // Do sticky the form buttons
-    doSticky();
   });
 });
diff --git a/war/src/main/js/widgets/add/addform.scss b/war/src/main/js/widgets/add/addform.scss
index 27b47f9425f7..fda493e53365 100644
--- a/war/src/main/js/widgets/add/addform.scss
+++ b/war/src/main/js/widgets/add/addform.scss
@@ -1,72 +1,14 @@
+@use "../../../scss/abstracts/mixins";
+
 #add-item-panel {
-  max-width: 950px;
+  max-width: 850px;
   margin: auto;
 
-  form > .header {
-    position: relative;
-    border: 1px solid var(--input-border);
-    border-bottom: none;
-    background: var(--light-grey);
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    z-index: 5;
-  }
-
-  form > .footer {
-    position: relative;
-    border: 1px solid var(--input-border);
-    border-top: none;
-    background: var(--light-grey);
-    height: 110px;
-
-    .btn-decorator {
-      position: absolute;
-      bottom: 0px;
-      padding: 20px 30px;
-      width: auto;
-      border-top-right-radius: 10px;
-      border: 1px solid var(--add-item-btn-decorator-border-color);
-      background: var(--add-item-btn-decorator-bg-color);
-      text-align: center;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-
-      input[type="checkbox"] {
-        width: auto;
-        min-width: auto;
-        margin-right: 0px;
-      }
-    }
-  }
-
-  .add-item-name {
-    padding: 20px;
-
-    label {
-      position: relative;
-      padding-bottom: 10px;
-    }
-  }
-
   .item-copy {
     position: relative;
-    border: 1px solid var(--input-border);
-    border-top: none;
-    padding: 20px;
-    background-color: var(--light-grey);
-
-    p.description {
-      font-size: var(--font-size-base);
-      margin-top: 0;
-    }
 
     .add-item-copy {
       position: relative;
-      padding-left: 58px;
-
-      /* This is needed because <s:textbox /> included YUI styles and we need to override this one */
-      font-family: var(--font-family-sans) !important;
 
       input[type="radio"] {
         display: none;
@@ -80,27 +22,15 @@
       input {
         font-size: inherit;
       }
-
-      .icon {
-        left: 0;
-        top: 0;
-      }
     }
   }
 
   .add-item-name,
   .add-item-copy {
-    .input-help {
-      color: #666;
-      font-style: italic;
-      font-size: var(--font-size-sm);
-      padding-top: 2px;
-    }
-
     .input-validation-message {
-      color: red;
+      color: var(--error-color);
       padding-top: 2px;
-      font-weight: bold;
+      font-weight: 500;
     }
 
     .input-message-disabled {
@@ -109,34 +39,19 @@
   }
 
   .icon {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    height: 48px;
-    width: 48px;
-    background: var(--input-color);
-    border: 1px solid #6699cc;
-    border-radius: 50%;
-    opacity: 0.9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
 
     img {
       position: relative;
+      width: 100%;
+      height: 100%;
     }
   }
 
-  .icon:before {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 24px;
-    border-top-left-radius: 24px;
-    border-top-right-radius: 24px;
-    background: #c0d8e2;
-  }
-
   .default-icon {
     position: absolute;
     left: 10px;
@@ -213,13 +128,7 @@
   }
 
   .categories {
-    border: 1px solid var(--input-border);
-    background-color: var(--very-light-grey);
-
     .category {
-      border-bottom: 1px solid var(--input-border);
-      padding: 10px;
-
       .header {
         padding: 0 20px;
 
@@ -232,30 +141,21 @@
           margin-top: 5px;
         }
       }
-    }
 
-    .category:last-child {
-      border-bottom: none;
+      .desc {
+        color: var(--text-color-secondary);
+      }
     }
   }
 
   .categories.flat {
     .category {
-      padding: 0 10px;
       border-bottom: none;
 
       .header {
         display: none;
       }
     }
-
-    .category:first-child {
-      padding: 10px 10px 0 10px;
-    }
-
-    .category:last-child {
-      padding: 0 10px 10px 10px;
-    }
   }
 }
 
@@ -269,43 +169,37 @@
 }
 
 .j-item-options {
-  li:hover,
-  li:focus {
-    border-color: var(--input-border);
-    background: var(--light-bg-color--hover);
-    outline: 0;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 
   li.active {
-    cursor: text;
-    background-color: var(--background);
-    border-color: var(--input-border);
-    box-shadow: inset 999rem 0 var(--background);
-    -webkit-touch-callout: text;
-    user-select: text;
-    transition: 0.5s;
-
-    .icon {
-      opacity: 1;
+    &::before {
+      background: var(--item-background--hover);
     }
   }
 
   li {
+    @include mixins.item;
+
     -webkit-touch-callout: none;
     user-select: none;
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    padding: 10px 10px 10px 68px;
+    padding: 0.75rem 1rem;
     min-height: 68px;
-    margin: 2px 0;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.25rem 1rem;
+
+    .icon {
+      grid-row: span 2;
+    }
 
     label {
       display: block;
-      font-size: var(--font-size-base);
-      font-weight: bold;
+      font-size: var(--font-size-sm);
+      font-weight: 500;
       color: var(--text-color);
-      padding-bottom: 5px;
       cursor: pointer;
 
       input {
@@ -315,5 +209,9 @@
         display: none;
       }
     }
+
+    .desc {
+      grid-column: 2;
+    }
   }
 }

From 1e4c5b66a6755ece33c6cba0ec341b17c4aa4e0c Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Mon, 1 Apr 2024 21:34:40 +0100
Subject: [PATCH 2/5] Remove br

---
 .../main/resources/hudson/model/View/newJob.jelly    | 12 ++++--------
 war/src/main/js/widgets/add/addform.scss             |  6 ++++++
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/core/src/main/resources/hudson/model/View/newJob.jelly b/core/src/main/resources/hudson/model/View/newJob.jelly
index f0fd8d85ceaa..98c9d8096073 100644
--- a/core/src/main/resources/hudson/model/View/newJob.jelly
+++ b/core/src/main/resources/hudson/model/View/newJob.jelly
@@ -48,12 +48,10 @@ THE SOFTWARE.
               </div>
             </div>
 
-            <br/>
-
-            <div class="jenkins-form-label">${%ItemType.label}</div>
-            <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
-
-            <br/>
+            <div>
+              <div class="jenkins-form-label">${%ItemType.label}</div>
+              <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
+            </div>
 
             <j:if test="${!empty(app.items)}">
               <div class="item-copy">
@@ -67,8 +65,6 @@ THE SOFTWARE.
               </div>
             </j:if>
 
-            <br/>
-
             <s:bottomButtonBar>
               <st:include page="newJobButtonBar.jelly"/>
             </s:bottomButtonBar>
diff --git a/war/src/main/js/widgets/add/addform.scss b/war/src/main/js/widgets/add/addform.scss
index fda493e53365..962450829091 100644
--- a/war/src/main/js/widgets/add/addform.scss
+++ b/war/src/main/js/widgets/add/addform.scss
@@ -4,6 +4,12 @@
   max-width: 850px;
   margin: auto;
 
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-padding);
+  }
+
   .item-copy {
     position: relative;
 

From 11f07ac078059bfa674956f2f79a403de728bc1c Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 2 Apr 2024 09:16:27 +0100
Subject: [PATCH 3/5] Remove unused functions

---
 war/src/main/js/add-item.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
index 59b20dde64a1..c3a718d3f589 100644
--- a/war/src/main/js/add-item.js
+++ b/war/src/main/js/add-item.js
@@ -59,7 +59,6 @@ $.when(getItems()).done(function (data) {
         $(messageId, context).text("» " + message);
       }
       cleanValidationMessages(context);
-      hideInputHelp(context);
       $(messageId).removeClass("input-message-disabled");
     }
 
@@ -69,12 +68,6 @@ $.when(getItems()).done(function (data) {
         .addClass("input-message-disabled");
     }
 
-    function hideInputHelp(context) {
-    }
-
-    function showInputHelp(context) {
-    }
-
     function enableSubmit(status) {
       var btn = $("form .footer .btn-decorator button[type=submit]");
       if (status === true) {
@@ -279,7 +272,6 @@ $.when(getItems()).done(function (data) {
             );
           } else {
             cleanValidationMessages(".add-item-name");
-            showInputHelp(".add-item-name");
             setFieldValidationStatus("name", true);
             if (getFormValidationStatus()) {
               enableSubmit(true);

From 7af4749f3f11ac436c5bc2933bb2807d51047529 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 2 Apr 2024 22:37:50 +0100
Subject: [PATCH 4/5] Remove div class assertion

---
 test/src/test/java/hudson/model/ViewTest.java | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/test/src/test/java/hudson/model/ViewTest.java b/test/src/test/java/hudson/model/ViewTest.java
index 99a7a75d9ed3..26ce3cc516ce 100644
--- a/test/src/test/java/hudson/model/ViewTest.java
+++ b/test/src/test/java/hudson/model/ViewTest.java
@@ -29,7 +29,6 @@
 import static org.hamcrest.MatcherAssert.assertThat;
 import static org.hamcrest.Matchers.containsString;
 import static org.hamcrest.Matchers.equalTo;
-import static org.hamcrest.Matchers.hasItem;
 import static org.hamcrest.Matchers.instanceOf;
 import static org.hamcrest.Matchers.is;
 import static org.hamcrest.Matchers.not;
@@ -64,7 +63,6 @@
 import java.net.HttpURLConnection;
 import java.net.URLEncoder;
 import java.nio.charset.StandardCharsets;
-import java.util.Arrays;
 import java.util.Collection;
 import java.util.HashMap;
 import java.util.List;
@@ -902,13 +900,6 @@ public void newJob_iconClassName() throws Exception {
 
         HtmlPage page = wc.goTo("view/all/newJob");
 
-        Object resultClassNames = page.executeJavaScript("document.querySelector('.hudson_model_FreeStyleProject .icon img').className").getJavaScriptResult();
-        assertThat(resultClassNames, instanceOf(String.class));
-        String resultClassNamesString = (String) resultClassNames;
-        List<String> resultClassNamesList = Arrays.asList(resultClassNamesString.split(" "));
-        assertThat(resultClassNamesList, hasItem("icon-xlg"));
-        assertThat(resultClassNamesList, hasItem("icon-freestyle-project"));
-
         Object resultSrc = page.executeJavaScript("document.querySelector('.hudson_model_FreeStyleProject .icon img').src").getJavaScriptResult();
         assertThat(resultSrc, instanceOf(String.class));
         String resultSrcString = (String) resultSrc;

From 8738507961fb080f275bc27e80a51e09b090d5e0 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:35:08 +0100
Subject: [PATCH 5/5] Increase gap between items

---
 war/src/main/js/widgets/add/addform.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/war/src/main/js/widgets/add/addform.scss b/war/src/main/js/widgets/add/addform.scss
index 962450829091..ecd284250b1a 100644
--- a/war/src/main/js/widgets/add/addform.scss
+++ b/war/src/main/js/widgets/add/addform.scss
@@ -177,7 +177,7 @@
 .j-item-options {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 5px;
 
   li.active {
     &::before {