Update new node page

janfaracik · Oct 10, 2021 · dff84c5 · dff84c5
1 parent 1e2b8c0
commit dff84c5
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {