From 88f4c623d6611daba334432c12adb8ba154b1308 Mon Sep 17 00:00:00 2001
From: Jan Faracik <j.faracik@kainos.com>
Date: Mon, 16 Aug 2021 13:58:55 +0100
Subject: [PATCH] input

---
 .../resources/hudson/model/View/newJob.jelly  | 42 +++++++--------
 core/src/main/resources/lib/form/form.jelly   |  5 +-
 .../lib/hudson/newFromList/form.jelly         | 51 ++++++++++++-------
 war/src/main/js/add-item.js                   | 36 ++++++-------
 war/src/main/less/modules/form.less           | 49 ++++++++++++++++--
 5 files changed, 122 insertions(+), 61 deletions(-)

diff --git a/core/src/main/resources/hudson/model/View/newJob.jelly b/core/src/main/resources/hudson/model/View/newJob.jelly
index 5467f5d9506e..5d0f5cc77a5f 100644
--- a/core/src/main/resources/hudson/model/View/newJob.jelly
+++ b/core/src/main/resources/hudson/model/View/newJob.jelly
@@ -29,37 +29,37 @@ THE SOFTWARE.
   <l:layout type="one-column" permission="${permission}" title="${%NewJob(it.newPronoun)}">
 
     <l:js src="jsbundles/add-item.js" />
-    <l:css src="jsbundles/add-item.css" />
+    <l:css src="jsbundles/add-itaem.css" />
 
     <l:main-panel>
-    <div class="container" id="add-item-panel" style="display: none;">
-      <div class="row">
-        <div class="col-md-offset-2 col-md-20">
+      <h1>${%New item}</h1>
+
+    <div class="" id="add-item-panel" style="display: none;">
+      <div >
+        <div>
           <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>
-                <input name="name" 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 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 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 id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" data-valid="false" />
 
             <j:if test="${!empty(app.itemMap)}">
               <div class="item-copy">
-                <p class="description">${%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" />
+                <p class="description"></p>
+                <div class="add-item-copy jenkins-radio">
+                  <input class="jenkins-radio__input" type="radio" name="mode" value="copy" />
+                  <label class="jenkins-radio__label">${%CopyOption.label}</label>
+                  <p class="jenkins-radio__description">${%CopyOption.description}</p>
+                  <div>
+                    <s:textbox id="from" data-valid="false" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
                   </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"/>
                 </div>
               </div>
             </j:if>
diff --git a/core/src/main/resources/lib/form/form.jelly b/core/src/main/resources/lib/form/form.jelly
index f2c5a61595ce..51ae7db9068d 100644
--- a/core/src/main/resources/lib/form/form.jelly
+++ b/core/src/main/resources/lib/form/form.jelly
@@ -41,6 +41,9 @@ THE SOFTWARE.
     <st:attribute name="enctype">
       @enctype of the &lt;form> HTML element.
     </st:attribute>
+    <st:attribute name="id">
+      ID of the HTML element.
+    </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 +56,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}" 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>
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index be0c2cc54e65..196e334b2370 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -51,12 +51,12 @@ THE SOFTWARE.
 
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
-  <s:form class="jenkins-form" method="post" action="${attrs.action?:'createItem'}" name="createItem">
+  <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:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
-                 onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
+                 onchange="updateOk()" onkeyup="updateOk()" />
       <script>$('name').focus();</script>
     </div>
 
@@ -68,7 +68,7 @@ THE SOFTWARE.
         </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(this.form)" onclick="updateOk(this.form)" />
+            <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>
@@ -82,7 +82,7 @@ THE SOFTWARE.
 
     <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)" />
+        <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>
@@ -100,32 +100,47 @@ THE SOFTWARE.
       </s:entry>
     </j:if>
 
-    <s:bottomButtonBar>
+    <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>
+      <button type="submit" id="ok" class="jenkins-button">
+        ${%OK}
+      </button>
+    </div>
   </s:form>
+  
   <script><![CDATA[
-    var okButton = makeButton($('ok'),null);
-
-    function updateOk(form) {
+    function updateOk() {
       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)
+        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;
       }
-
-      okButton.set('disabled',state(),false);
+      
+      document.getElementById("ok").disabled = state();
     }
-    updateOk(okButton.getForm());
+    
+    updateOk();
   ]]></script>
 </j:jelly>
diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
index 1034feae8ebf..d53c61c73ce0 100644
--- a/war/src/main/js/add-item.js
+++ b/war/src/main/js/add-item.js
@@ -141,9 +141,9 @@ $.when(getItems()).done(function(data) {
 
     function drawCategory(category) {
       var $category = $('<div/>').addClass('category').attr('id', 'j-add-item-type-' + cleanClassName(category.id));
-      var $items = $('<ul/>').addClass('j-item-options');
-      var $catHeader = $('<div class="header" />');
-      var title = '<h2>' + category.name + '</h2>';
+      var $items = $('<div/>');
+      var $catHeader = $('<div />');
+      var title = '<label class="jenkins-form-label">' + category.name + '</label>';
       var description = '<p>' + category.description + '</p>';
 
       // Add items
@@ -160,30 +160,26 @@ $.when(getItems()).done(function(data) {
     }
 
     function drawItem(elem) {
-      var item = document.createElement('li');
-      item.tabIndex = 0;
-      item.className = cleanClassName(elem.class);
-      item.setAttribute('role', 'radio');
-      item.setAttribute('aria-checked', 'false');
+      var item = document.createElement('div');
+      item.className = 'jenkins-radio';
 
-      var label = item.appendChild(document.createElement('label'));
-
-      var radio = label.appendChild(document.createElement('input'));
+      var radio = item.appendChild(document.createElement('input'));
       radio.type = 'radio';
       radio.name = 'mode';
+      radio.className= 'jenkins-radio__input';
       radio.value = elem.class;
 
-      var displayName = label.appendChild(document.createElement('span'));
-      displayName.className = 'label';
+      var displayName = item.appendChild(document.createElement('span'));
+      displayName.className = 'jenkins-radio__label';
 
       displayName.appendChild(document.createTextNode(elem.displayName));
 
       var desc = item.appendChild(document.createElement('div'));
-      desc.className = 'desc';
+      desc.className = 'jenkins-radio__description';
       desc.innerHTML = checkForLink(elem.description);
 
-      var iconDiv = drawIcon(elem);
-      item.appendChild(iconDiv);
+      // var iconDiv = drawIcon(elem);
+      // item.appendChild(iconDiv);
 
       function select(e) {
         e.preventDefault();
@@ -267,7 +263,7 @@ $.when(getItems()).done(function(data) {
     $('#add-item-panel').removeAttr('style');
 
     // Render all categories
-    var $categories = $('div.categories');
+    var $categories = $('#items');
     $.each(data.categories, function(i, elem) {
       drawCategory(elem).appendTo($categories);
     });
@@ -279,8 +275,14 @@ $.when(getItems()).done(function(data) {
     $('input[name="name"]', '#createItem').on("blur input", function() {
       if (!isItemNameEmpty()) {
         var itemName = $('input[name="name"]', '#createItem').val();
+
+        console.log(itemName)
+
         $.get("checkJobName", { value: itemName }).done(function(data) {
           var message = parseResponseFromCheckJobName(data);
+
+          console.log(message)
+
           if (message !== '') {
             activateValidationMessage('#itemname-invalid', '.add-item-name', message);
           } else {
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index fc73b6313a15..c81f0f89149e 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -28,19 +28,27 @@ h1 {
   padding: 8px;
   border-radius: 6px;
   width: 300px;
+  box-shadow: 0 0 0 10px transparent;
   transition: 0.2s ease;
 
   &:hover {
     border-color: rgba(0,0,0,0.5);
+    box-shadow: 0 0 0 5px var(--focus-color);
   }
 
   &:active,
   &:focus {
     outline: none;
     border-color: rgba(0,0,0,1);
+    box-shadow: 0 0 0 5px var(--focus-color);
   }
 }
 
+:root {
+  --focus-color: rgba(0, 0, 0, 0.1);
+  --focus-hover-color: rgba(0, 0, 0, 0.05);
+}
+
 .jenkins-radio {
   &:not(:last-of-type) {
     margin-bottom: 20px;
@@ -75,6 +83,7 @@ h1 {
       border-radius: 50%;
       background: transparent;
       opacity: 0.2;
+      box-shadow: 0 0 0 15px transparent;
 
       transition: 0.2s ease;
     }
@@ -82,12 +91,13 @@ h1 {
     &:hover::before {
       border-width: 5px;
       opacity: .5;
+      box-shadow: 0 0 0 5px var(--focus-color);
     }
   }
 
-  &__input:focus + &__label:before {
-    border-width: 8px;
-    opacity: 0.5;
+  &__input:focus + &__label:before, &__input:active + &__label:before {
+    box-shadow: 0 0 0 5px var(--focus-color)!important;
+    opacity: 1;
   }
 
   &__input:checked + &__label:before {
@@ -99,4 +109,35 @@ h1 {
     margin: 0 0 0 34px;
     opacity: 0.5;
   }
-}
\ No newline at end of file
+}
+
+.jenkins-button {
+  position: relative;
+  border: none!important;
+  padding: 10px 8px!important;
+  border-radius: 6px!important;
+  box-shadow: 0 0 0 10px transparent;
+  transition: 0.2s ease!important;
+  background: black!important;
+  color: white!important;
+  margin: 0!important;
+  min-width: 90px!important;
+  min-height: 0!important;
+  font-weight: 600;
+  cursor: pointer;
+  
+  &:hover {
+    box-shadow: 0 0 0 5px var(--focus-hover-color)!important;
+    opacity: 0.85;
+  }
+  
+  &:active, &:focus {
+    box-shadow: 0 0 0 5px var(--focus-color)!important;
+    opacity: 0.7;
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}