Refine the 'New Item' screen (#26031)

* Refine the 'New Item' screen

* Simplify SCSS

* Fix submission, fix some tests, improve tabbing + focus states

* Fix more tests

* Simplify JS + hopefully fix test

* Update pom.xml

* Update Jenkinsfile

* Fix issue noticed in #26069

* Restore Jenkinsfile/test pom

* Simplify JS

* Restore ability to have headings

* Fix focus state in Firefox/Chrome

* Add separator between items and 'Duplicate an item'

Author: janfaracik

core/src/main/resources/hudson/model/View/newJob.jelly

@@ -35,35 +35,48 @@ THE SOFTWARE.
     <l:breadcrumb title="${%NewJob(it.newPronoun)}" />
 
     <l:main-panel>
+      <template id="i18n" data-empty-name="${%ItemName.validation.required}" />
+
     <div id="add-item-panel" style="display: none;">
-      <h1>${%NewJob(it.newPronoun)}</h1>
+      <l:app-bar title="${%NewJob(it.newPronoun)}" />
+
           <form method="post" action="createItem" name="createItem" id="createItem">
             <div class="header">
-              <div class="add-item-name">
+              <div class="jenkins-form-item add-item-name">
                 <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 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 class="validation-error-area" />
               </div>
             </div>
 
-            <div>
-              <div class="jenkins-form-label">${%ItemType.label}</div>
-              <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
-            </div>
+            <fieldset class="jenkins-!-display-contents">
+              <div class="jenkins-form-item">
+                <legend class="jenkins-form-label">${%ItemType.label}</legend>
+                <div id="items" class="jenkins-choice-list categories" data-valid="false" />
+
+                <j:if test="${!empty(app.items)}">
+                  <div class="jenkins-choice-list jenkins-!-margin-top-2">
+                    <div class="jenkins-choice-list__item">
+                      <label id="duplicate-job">
+                        <div class="jenkins-choice-list__item__icon">
+                          <l:icon src="symbol-duplicate" />
+                        </div>
+                        <input type="radio" name="mode" value="copy" />
+                        <div class="jenkins-choice-list__item__label">
+                          ${%CopyOption.label}
+                        </div>
+                        <div class="jenkins-choice-list__item__description">${%CopyOption.description}</div>
+                      </label>
 
-            <j:if test="${!empty(app.items)}">
-              <div class="item-copy">
-                <p class="jenkins-form-label">${%CopyOption.description}</p>
-                <div class="add-item-copy">
-                  <input type="radio" name="mode" value="copy" />
-                  <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"/>
-                </div>
+                      <div class="jenkins-choice-list__item__conditional">
+                        <j:set var="descriptor" value="${it.descriptor}" />
+                        <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
+                      </div>
+                    </div>
+                  </div>
+                </j:if>
               </div>
-            </j:if>
+            </fieldset>
 
             <s:bottomButtonBar>
               <st:include page="newJobButtonBar.jelly"/>

core/src/main/resources/hudson/model/View/newJob.properties

@@ -6,7 +6,7 @@ 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
-CopyOption.description=If you want to create a new item from other existing, you can use this option:
-CopyOption.label=Copy from
+CopyOption.description=Create a new item by copying the configuration of an existing one.
+CopyOption.label=Duplicate an existing item
 CopyExisting=Copy existing {0}
 

eslint.config.cjs

@@ -77,6 +77,7 @@ module.exports = [
         Utilities: "readonly",
         UTILITIES_VERSION: "writeable",
         YAHOO: "readonly",
+        updateValidationArea: "readonly",
       },
     },
   },