From 367a2e15e6f06869962685a3271d2a6bac58e8f9 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 8 Oct 2021 13:41:34 +0100
Subject: [PATCH 1/7] Update field, add back inline error

---
 core/src/main/resources/lib/form/entry.jelly         |  2 +-
 .../main/resources/lib/hudson/newFromList/form.jelly | 12 +++++-------
 war/src/main/less/base/style.less                    |  7 ++++---
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index c89086875bd1..4dddd1dc3ce1 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -69,7 +69,7 @@ THE SOFTWARE.
   <!-- expose this so that we can look up the @field value later from prepareDatabinding.jelly -->
   <j:set var="entry" value="${attrs}" />
   <j:set var="possiblyEscapedTitle" value="${escapeEntryTitleAndDescription ? h.escape(attrs.title) : attrs.title}" />
-  <div class='tr form-group'>
+  <div class='jenkins-form-item'>
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
         <div class="jenkins-form-label help-sibling">
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 92fef4eb164f..6822d99d3ac7 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -52,13 +52,11 @@ THE SOFTWARE.
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
   <s:form class="jenkins-form" method="post" id="createItemForm" action="${attrs.action?:'createItem'}" name="createItem">
-    <!-- View name field -->
-    <div class="jenkins-form-item">
-      <label for="name" class="jenkins-form-label">${attrs.nameTitle}</label>
+    <s:entry title="${attrs.nameTitle}">
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
-                 onchange="updateOk()" onkeyup="updateOk()" />
+                 onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
       <script>$('name').focus();</script>
-    </div>
+    </s:entry>
 
     <!-- View name field -->
     <div class="jenkins-form-item">
@@ -120,12 +118,12 @@ THE SOFTWARE.
         let nameInput = document.getElementById("name");
         let radios = form.querySelectorAll('input[type="radio"]');
 
-        if (nameInput.value.length == 0) {
+        if (nameInput.value.length === 0) {
           return true;
         }
 
         // this means we only have dummy checkboxes
-        if (radios.length == 2) {
+        if (radios.length === 2) {
           return true;
         }
 
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 802c82bac374..e79ea566f788 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -273,7 +273,6 @@ pre.console {
 }
 
 .setting-main {
-  margin-top: 0.25rem;
   width: 100%; /* try to make this column as big as possible. */
 }
 
@@ -577,9 +576,10 @@ label.attach-previous {
     padding-left: 20px;
     min-height: 16px;
     line-height: 16px;
-    background-image: url("../../images/16x16/error.png");
+    background-image: url("../../images/svgs/error.svg");
     background-position: left center;
     background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .error-inline {
@@ -593,10 +593,11 @@ label.attach-previous {
     padding-left: 20px;
     min-height: 16px;
     line-height: 16px;
-    background-image: url("../../images/16x16/warning.png");
+    background-image: url("../../images/svgs/warning.svg");
     background-size: 16px 16px;
     background-position: left center;
     background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .warning-inline {

From 5835e66ed7b2dcab4f497fca4b2a6fc09cd7eef7 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 8 Oct 2021 13:42:07 +0100
Subject: [PATCH 2/7] Update style.less

---
 war/src/main/less/base/style.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index e79ea566f788..dd54dce5fbde 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -594,7 +594,6 @@ label.attach-previous {
     min-height: 16px;
     line-height: 16px;
     background-image: url("../../images/svgs/warning.svg");
-    background-size: 16px 16px;
     background-position: left center;
     background-repeat: no-repeat;
     background-size: contain;

From b40ccad630f15b305aadca9a624debae8a2e7703 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 8 Oct 2021 15:13:35 +0100
Subject: [PATCH 3/7] Update hudson-behavior.js

---
 war/src/main/webapp/scripts/hudson-behavior.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index a27dbbd19da9..8fa80fe14fd6 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -355,7 +355,7 @@ function findAncestorClass(e, cssClass) {
 }
 
 function isTR(tr, nodeClass) {
-    return tr.tagName == 'TR' || tr.classList.contains(nodeClass || 'tr');
+    return tr.tagName == 'TR' || tr.classList.contains(nodeClass || 'tr') || tr.classList.contains('jenkins-form-item');
 }
 
 function findFollowingTR(node, className, nodeClass) {

From b5bfaa35819c80a5283a43e250126c19b5077ed3 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 8 Oct 2021 15:15:52 +0100
Subject: [PATCH 4/7] Add locale

---
 .../main/resources/jenkins/model/Jenkins/newView.properties    | 3 +--
 core/src/main/resources/lib/hudson/newFromList/form.properties | 2 ++
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 core/src/main/resources/lib/hudson/newFromList/form.properties

diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.properties b/core/src/main/resources/jenkins/model/Jenkins/newView.properties
index 354277144c16..499c94c6edaf 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/newView.properties
+++ b/core/src/main/resources/jenkins/model/Jenkins/newView.properties
@@ -1,3 +1,2 @@
 New\ View=New view
-View\ name=View name
-View\ type=View type
\ No newline at end of file
+View\ name=Name
\ No newline at end of file
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.properties b/core/src/main/resources/lib/hudson/newFromList/form.properties
new file mode 100644
index 000000000000..f4ac3cca2a62
--- /dev/null
+++ b/core/src/main/resources/lib/hudson/newFromList/form.properties
@@ -0,0 +1,2 @@
+View\ type=Type
+Create=Create
\ No newline at end of file

From 60e0040ef953ece8d80477609eeda754d3b92a8f Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Fri, 8 Oct 2021 15:29:34 +0100
Subject: [PATCH 5/7] Update entry.jelly

---
 core/src/main/resources/lib/form/entry.jelly | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index 4dddd1dc3ce1..e67f27c0b5cd 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -69,7 +69,7 @@ THE SOFTWARE.
   <!-- expose this so that we can look up the @field value later from prepareDatabinding.jelly -->
   <j:set var="entry" value="${attrs}" />
   <j:set var="possiblyEscapedTitle" value="${escapeEntryTitleAndDescription ? h.escape(attrs.title) : attrs.title}" />
-  <div class='jenkins-form-item'>
+  <div class="jenkins-form-item">
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
         <div class="jenkins-form-label help-sibling">

From 1e2b8c07af0a80a5a5f5c2a4179a2be761789b0f Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 10 Oct 2021 18:03:21 +0100
Subject: [PATCH 6/7] Update form.jelly

---
 core/src/main/resources/lib/hudson/newFromList/form.jelly | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 6822d99d3ac7..6e9d6b1b8e92 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -58,7 +58,6 @@ THE SOFTWARE.
       <script>$('name').focus();</script>
     </s:entry>
 
-    <!-- View name field -->
     <div class="jenkins-form-item">
       <fieldset class="jenkins-fieldset">
         <legend class="jenkins-form-label">

From dff84c519c789bc3778377e67a34abf7d23fd3f5 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 10 Oct 2021 20:54:34 +0100
Subject: [PATCH 7/7] Update new node page

---
 .../hudson/model/ComputerSet/new.jelly        |  2 +-
 .../jenkins/model/Jenkins/newView.jelly       |  7 +---
 core/src/main/resources/lib/form/entry.jelly  |  5 ++-
 .../src/main/resources/lib/form/textbox.jelly |  4 ++
 .../lib/hudson/newFromList/form.jelly         | 41 ++++++++++---------
 war/src/main/less/base/yui-compatibility.less |  5 ---
 war/src/main/less/modules/form.less           | 28 +++++++++++++
 7 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/core/src/main/resources/hudson/model/ComputerSet/new.jelly b/core/src/main/resources/hudson/model/ComputerSet/new.jelly
index 85879e6d9f82..f8c7aaa6bea8 100644
--- a/core/src/main/resources/hudson/model/ComputerSet/new.jelly
+++ b/core/src/main/resources/hudson/model/ComputerSet/new.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
       <j:invokeStatic var="slaves" className="hudson.slaves.NodeDescriptor" method="allInstantiable" />
-      <n:form nameTitle="${%Node name}" copyTitle="${%Copy Existing Node}" copyNames="${it._slaveNames}"
+      <n:form title="${%New node}" nameTitle="${%Node name}" copyTitle="${%Copy Existing Node}" copyNames="${it._slaveNames}"
               descriptors="${slaves}" checkUrl="checkName" xmlns:n="/lib/hudson/newFromList" />
     </l:main-panel>
   </l:layout>
diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
index 173b187f2177..78fff8aee57d 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
@@ -30,13 +30,8 @@ THE SOFTWARE.
   <l:layout permission="${app.primaryView.CREATE}" title="${%New View}">
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
-      <div class="jenkins-app-bar">
-        <div class="jenkins-app-bar__content">
-          <h1>${%New View}</h1>
-        </div>
-      </div>
       <j:invokeStatic var="views" className="hudson.model.View" method="allInstantiable" />
-      <n:form nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
+      <n:form title="${%New View}" nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
               descriptors="${views}" checkUrl="checkViewName" xmlns:n="/lib/hudson/newFromList" />
     </l:main-panel>
   </l:layout>
diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index e67f27c0b5cd..c3248dc782bb 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -51,6 +51,9 @@ THE SOFTWARE.
 
       This content is HTML (unless the boolean variable escapeEntryTitleAndDescription is set). Use h.escape if necessary.
     </st:attribute>
+    <st:attribute name="class">
+      Classes to apply to the form
+    </st:attribute>
     <st:attribute name="help">
       URL to the HTML page. When this attribute is specified, the entry gets
       a (?) icon on the right, and if the user clicks it, the contents of the
@@ -69,7 +72,7 @@ THE SOFTWARE.
   <!-- expose this so that we can look up the @field value later from prepareDatabinding.jelly -->
   <j:set var="entry" value="${attrs}" />
   <j:set var="possiblyEscapedTitle" value="${escapeEntryTitleAndDescription ? h.escape(attrs.title) : attrs.title}" />
-  <div class="jenkins-form-item">
+  <div class="jenkins-form-item ${attrs.class}">
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
         <div class="jenkins-form-label help-sibling">
diff --git a/core/src/main/resources/lib/form/textbox.jelly b/core/src/main/resources/lib/form/textbox.jelly
index 39d866672ea2..2bd69ae2cdf0 100644
--- a/core/src/main/resources/lib/form/textbox.jelly
+++ b/core/src/main/resources/lib/form/textbox.jelly
@@ -55,6 +55,9 @@ THE SOFTWARE.
       Additional CSS class(es) to add (such as client-side validation clazz="required",
       "number" or "positive-number"; these may be combined, as clazz="required number").
     </st:attribute>
+    <st:attribute name="placeholder">
+      Placeholder text for the text box
+    </st:attribute>
     <st:attribute name="checkMessage">
       Override the default error message when client-side validation fails,
       as with clazz="required", etc.
@@ -92,6 +95,7 @@ THE SOFTWARE.
                name="${name}"
                value="${value}"
                type="text"
+               placeholder="${placeholder}"
                ATTRIBUTES="${attrs}" EXCEPT="field clazz" />
   </f:possibleReadOnlyField>
   <j:if test="${customizedFields != null and attrs.field != null and value != default}">
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 6e9d6b1b8e92..90e0e0ecf21a 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -34,6 +34,9 @@ THE SOFTWARE.
     <st:attribute name="descriptors" use="required">
       Collection of Descriptors to be rendered.
     </st:attribute>
+    <st:attribute name="title" use="required">
+      Title for the form
+    </st:attribute>
     <st:attribute name="nameTitle" use="required">
       Caption of the text box to receive the name of the newly created item. Something like "Job name"
     </st:attribute>
@@ -51,6 +54,12 @@ THE SOFTWARE.
 
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
+  <div class="jenkins-app-bar">
+    <div class="jenkins-app-bar__content">
+      <h1>${attrs.title}</h1>
+    </div>
+  </div>
+
   <s:form class="jenkins-form" method="post" id="createItemForm" action="${attrs.action?:'createItem'}" name="createItem">
     <s:entry title="${attrs.nameTitle}">
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
@@ -63,6 +72,7 @@ THE SOFTWARE.
         <legend class="jenkins-form-label">
           ${%View type}
         </legend>
+
         <j:forEach var="descriptor" items="${descriptors}">
           <div class="jenkins-radio">
             <input class="jenkins-radio__input" type="radio" name="mode" id="${descriptor.id}" value="${descriptor.id}" onchange="updateOk()" onclick="updateOk()" />
@@ -74,28 +84,19 @@ THE SOFTWARE.
             </div>
           </div>
         </j:forEach>
-      </fieldset>
-    </div>
 
-    <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
-      <s:block>
-        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
-        <label class="attach-previous"><b>${attrs.copyTitle}</b></label>
-      </s:block>
-      <s:entry>
-        ${%Copy from}
-        <j:choose>
-          <j:when test="${attrs.copyNames}">
-            <!-- deprecated as of 1.402. -->
-            <s:editableComboBox id="from" name="from" items="${attrs.copyNames}" />
-          </j:when>
-          <j:otherwise>
+        <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
+          <div class="jenkins-radio">
+            <input class="jenkins-radio__input" type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
+            <label class="jenkins-radio__label" for="copy">${attrs.copyTitle}</label>
+          </div>
+          <s:entry class="jenkins-radio__children">
             <j:set var="descriptor" value="${it.descriptor}" />
-            <s:textbox id="from" name="from" field="copyNewItemFrom" style="width:40em" onfocus="$('copy').click()" />
-          </j:otherwise>
-        </j:choose>
-      </s:entry>
-    </j:if>
+            <s:textbox id="from" placeholder="Type for suggestions" name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
+          </s:entry>
+        </j:if>
+      </fieldset>
+    </div>
 
     <div class="jenkins-form-item">
       <!--
diff --git a/war/src/main/less/base/yui-compatibility.less b/war/src/main/less/base/yui-compatibility.less
index 3b12b282b347..e334ea69cd0e 100644
--- a/war/src/main/less/base/yui-compatibility.less
+++ b/war/src/main/less/base/yui-compatibility.less
@@ -12,11 +12,6 @@
   // for this selector
 }
 
-.yui-skin-sam .yui-ac-input {
-  position: absolute;
-  width: 100%;
-}
-
 .yui-skin-sam .yui-ac-container {
   position: absolute;
   top: 1.6em;
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index cfe9c9ca53e0..6964bf446f03 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -10,6 +10,10 @@
   border: none;
   margin: 0;
   padding: 0;
+
+  .jenkins-form-item:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .jenkins-form-label {
@@ -228,6 +232,30 @@
     color: var(--text-color-secondary);
     line-height: 1.66;
   }
+
+  &__children {
+    position: relative;
+    margin-top: -10px;
+    padding-left: 32px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 10px;
+      bottom: 0;
+      width: 2px;
+      background: var(--input-border);
+      border-radius: 2px;
+      transition: 0.2s ease;
+    }
+
+    &:focus-within {
+      &::after {
+        background: var(--focus-input-border);
+      }
+    }
+  }
 }
 
 .jenkins-button {