Modernise the 'New view' and 'New node' pages

core/src/main/resources/hudson/model/ComputerSet/new.jelly

@@ -32,11 +32,11 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">
   <j:getStatic var="createPermission" className="hudson.model.Computer" field="CREATE"/>
-  <l:layout permission="${createPermission}">
+  <l:layout title="${%New node}" permission="${createPermission}">
     <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>

core/src/main/resources/jenkins/model/Jenkins/newView.jelly

@@ -26,13 +26,12 @@ THE SOFTWARE.
   New View page
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
   <l:layout permission="${app.primaryView.CREATE}" title="${%New View}">
     <st:include page="sidepanel.jelly" />
-
     <l:main-panel>
       <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>

core/src/main/resources/jenkins/model/Jenkins/newView.properties

@@ -0,0 +1,2 @@
+New\ View=New view
+View\ name=Name

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

@@ -40,8 +40,8 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-	<div class='tr'>
-          <st:adjunct includes="lib.form.advanced.advanced"/>
+	<div class='jenkins-form-item tr'>
+        <st:adjunct includes="lib.form.advanced.advanced"/>
 
 	    <div class="advancedLink" style="${attrs.align!=null?('text-align:'+attrs.align):''}">
               <j:set var="id" value="${h.generateId()}"/>

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

@@ -38,7 +38,7 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-    <div class='tr'>
+    <div class='jenkins-form-item'>
         <div class="setting-name help-sibling">
             ${attrs.title}
             <f:helpLink url="${attrs.help}" featureName="${title}"/>

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,10 +72,10 @@ 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 ${attrs.class}">
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
           <j:out value="${possiblyEscapedTitle}" />
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>

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

@@ -38,9 +38,15 @@ THE SOFTWARE.
       but in Hudson you should have it for testing and page scraping,
       so this attribute is marked required.
     </st:attribute>
+    <st:attribute name="class">
+      Classes to apply to the form
+    </st:attribute>
     <st:attribute name="enctype">
       @enctype of the &lt;form> HTML element.
     </st:attribute>
+    <st:attribute name="id">
+      ID of the form.
+    </st:attribute>
     <st:attribute name="target">
       @target of the &lt;form> HTML element. Works like &lt;a target="...">
       and controls which window the result of the submission goes to.
@@ -53,7 +59,7 @@ THE SOFTWARE.
       Default: false
     </st:attribute>
   </st:documentation>
-  <form action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
+  <form id="${id}" class="${class}" action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
     <div width="100%" class="${attrs.tableClass}">
       <d:invokeBody/>
     </div>

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

@@ -53,13 +53,10 @@ THE SOFTWARE.
   </st:documentation>
   <j:choose>
     <j:when test="${attrs.url!=null}">
-      <j:set var="altText" value="${attrs.featureName != null ? '%Help for feature:' + ' ' + attrs.featureName : '%[Help]'}" />
-      <span class="setting-help">
-        <a href="#" class="help-button" helpURL="${rootURL}${attrs.url}"><l:helpIcon class="icon-help" tooltip="${altText}"/></a>
-      </span>
+      <j:set var="altText" value="${attrs.featureName != null ? '%Help for feature:' + ' ' + attrs.featureName : '%Help'}" />
+      <a href="#" class="jenkins-help-button" tooltip="${altText}" helpURL="${rootURL}${attrs.url}">
+        ?
+      </a>
     </j:when>
-    <j:otherwise>
-      <span class="setting-no-help"></span>
-    </j:otherwise>
   </j:choose>
 </j:jelly>

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

@@ -114,7 +114,7 @@ THE SOFTWARE.
   <st:adjunct includes="lib.form.hetero-list.hetero-list"/>
 
   <j:set var="targetType" value="${attrs.targetType?:it.class}"/>
-  <div class="hetero-list-container ${hasHeader?'with-drag-drop':''} ${attrs.oneEach?'one-each':''} ${attrs.honorOrder?'honor-order':''}">
+  <div class="jenkins-form-item hetero-list-container ${hasHeader?'with-drag-drop':''} ${attrs.oneEach?'one-each':''} ${attrs.honorOrder?'honor-order':''}">
     <!-- display existing items -->
     <j:forEach var="i" items="${attrs.items}"><!-- TODO consider customizedFields: how to distinguish default items from user-configured items? -->
       <j:set var="descriptor" value="${i.descriptor}" />

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

@@ -96,7 +96,7 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
     <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-           class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.clazz}"
+           class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.clazz}"
            name="${name}"
            value="${value}"
            type="number"

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

@@ -40,7 +40,7 @@ THE SOFTWARE.
   <f:rowSet name="${attrs.name}">
     <j:if test="${attrs.title!=null}">
       <f:block>
-        <div class="section-header">
+        <div class="jenkins-section__header">
           ${title}
         </div>
       </f:block>

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.
@@ -88,10 +91,11 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
       <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-               class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
+               class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
                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}">

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>
@@ -49,72 +52,65 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
-  <s:form method="post" action="${attrs.action?:'createItem'}" name="createItem">
+  <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)"
                  onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
       <script>$('name').focus();</script>
     </s:entry>
 
-    <j:forEach var="descriptor" items="${descriptors}">
-      <s:block>
-        <input type="radio" name="mode" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <label class="attach-previous"><b>${descriptor.displayName}</b></label>
-      </s:block>
-      <s:entry>
-        <st:set var="instance" value="${descriptor}" />
-        <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
-      </s:entry>
-    </j:forEach>
-    <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
-      <s:block>
-        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <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: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>
+    <div class="jenkins-form-item">
+      <fieldset class="jenkins-fieldset">
+        <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()" />
+            <label for="${descriptor.id}" class="jenkins-radio__label">
+              ${descriptor.displayName}
+            </label>
+            <div class="jenkins-radio__description">
+              <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
+            </div>
+          </div>
+        </j:forEach>
 
-    <s:bottomButtonBar>
+        <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 class="jenkins-radio__children">
+              <j:set var="descriptor" value="${it.descriptor}" />
+              <div class="jenkins-search">
+                <s:textbox placeholder="${%Type for suggestions}" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
+                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+              </div>
+            </div>
+          </div>
+        </j:if>
+      </fieldset>
+    </div>
+
+    <div class="jenkins-form-item">
       <!--
         when there's only one radio above, form.elements['mode]' won't return an array, which makes the script complex.
         So always force non-empty array
        -->
       <input type="radio" name="mode" value="dummy1" style="display:none" />
       <input type="radio" name="mode" value="dummy2" style="display:none" />
-      <input type="submit" name="Submit" value="${%OK}" id="ok" style="margin-left:5em" />
-    </s:bottomButtonBar>
-  </s:form>
-  <script><![CDATA[
-    var okButton = makeButton($('ok'),null);
+      <input type="submit" name="Submit" value="${%Create}" id="ok" />
+    </div>
 
-    function updateOk(form) {
-      function state() {
-        if($('name').value.length==0)   return true;
-        var radio = form.elements['mode'];
-        if (radio.length==2)  return false; // this means we only have dummy checkboxes
-        for(i=0;i<radio.length;i++)
-          if(radio[i].checked)
-            return false;
-        return true;
-      }
-
-      okButton.set('disabled',state(),false);
-    }
-    updateOk(okButton.getForm());
-  ]]></script>
-</j:jelly>
+    <st:adjunct includes="lib.hudson.newFromList.validation" />
+  </s:form>
+</j:jelly>

core/src/main/resources/lib/hudson/newFromList/form.properties

@@ -0,0 +1,2 @@
+View\ type=Type
+Create=Create

core/src/main/resources/lib/hudson/newFromList/validation.js

@@ -0,0 +1,28 @@
+function updateOk() {
+    function state() {
+        let form = document.getElementById("createItemForm");
+        let nameInput = document.getElementById("name");
+        let radios = form.querySelectorAll('input[type="radio"]');
+
+        if (nameInput.value.length === 0) {
+            return true;
+        }
+
+        // this means we only have dummy checkboxes
+        if (radios.length === 2) {
+            return true;
+        }
+
+        for (i = 0; i < radios.length; i++) {
+            if (radios[i].checked) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    document.getElementById("ok").disabled = state();
+}
+
+updateOk();

test/src/test/java/hudson/model/HelpLinkTest.java

@@ -93,7 +93,7 @@ private void clickAllHelpLinks(JenkinsRule.WebClient webClient, AbstractProject
     }
 
     private void clickAllHelpLinks(HtmlPage p) throws Exception {
-        List<?> helpLinks = DomNodeUtil.selectNodes(p, "//a[@class='help-button']");
+        List<?> helpLinks = DomNodeUtil.selectNodes(p, "//a[@class='jenkins-help-button']");
         assertTrue(helpLinks.size()>0);
         System.out.println("Clicking "+helpLinks.size()+" help links");
 

test/src/test/java/hudson/model/ParametersTest.java

@@ -70,7 +70,7 @@ public void parameterTypes() throws Exception {
 
         HtmlTextInput stringParameterInput = DomNodeUtil.selectSingleNode(element, ".//input[@name='value']");
         assertEquals("defaultValue", stringParameterInput.getAttribute("value"));
-        assertEquals("string", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'setting-name')]")).getTextContent());
+        assertEquals("string", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'jenkins-form-label')]")).getTextContent());
         stringParameterInput.setAttribute("value", "newValue");
 
         element = DomNodeUtil.selectSingleNode(form, "//div[input/@value='boolean']");
@@ -85,12 +85,12 @@ public void parameterTypes() throws Exception {
         element = (HtmlElement) ((HtmlElement) DomNodeUtil.selectSingleNode(form, ".//div[input/@value='choice']")).getParentNode();
         assertNotNull(element);
         assertEquals("choice description", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getNextSibling().getNextSibling(), "div[@class='setting-description']")).getTextContent());
-        assertEquals("choice", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'setting-name')]")).getTextContent());
+        assertEquals("choice", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'jenkins-form-label')]")).getTextContent());
 
         element = (HtmlElement) ((HtmlElement) DomNodeUtil.selectSingleNode(form, ".//div[input/@value='run']")).getParentNode();
         assertNotNull(element);
         assertEquals("run description", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getNextSibling().getNextSibling(), "div[@class='setting-description']")).getTextContent());
-        assertEquals("run", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'setting-name')]")).getTextContent());
+        assertEquals("run", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'jenkins-form-label')]")).getTextContent());
 
         j.submit(form);
         Queue.Item q = j.jenkins.getQueue().getItem(project);
@@ -120,7 +120,7 @@ public void choiceWithLTGT() throws Exception {
         HtmlElement element = (HtmlElement) ((HtmlElement) DomNodeUtil.selectSingleNode(form, ".//div[input/@value='choice']")).getParentNode();
         assertNotNull(element);
         assertEquals("choice description", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getNextSibling().getNextSibling(), "div[@class='setting-description']")).getTextContent());
-        assertEquals("choice", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'setting-name')]")).getTextContent());
+        assertEquals("choice", ((HtmlElement) DomNodeUtil.selectSingleNode(element.getParentNode(), "div[contains(@class, 'jenkins-form-label')]")).getTextContent());
         HtmlOption opt = DomNodeUtil.selectSingleNode(element.getParentNode(), "div/div/select/option[@value='Choice <2>']");
         assertNotNull(opt);
         assertEquals("Choice <2>", opt.asText());