[JENKINS-35333] New job popup

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

@@ -0,0 +1,40 @@
+<?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">
+  <div class="remodal new-job-popup" data-remodal-id="newjob" id="add-item-panel">
+    <form method="post" action="${rootURL}/${it.viewUrl}createItem" name="createItem" id="createItem">
+      <div class="header">
+        <div class="add-item-name">
+          <label for="name">${%ItemName.label}</label>
+          <input name="name" id="name" 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>
+
+      <div id="items" class="categories flat" role="radiogroup" aria-labelledby="Items" />
+
+      <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" />
+            </div>
+            <label>${%CopyOption.label}</label>
+            <j:set var="descriptor" value="${it.descriptor}" />
+            <s:textbox id="from" name="from" placeholder="${%CopyOption.placeholder}" field="copyNewItemFrom"/>
+          </div>
+        </div>
+      </j:if>
+
+      <div class="footer">
+        <div class="btn-decorator">
+          <button type="submit" id="ok-button">OK</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</j:jelly>

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

@@ -0,0 +1,9 @@
+JobName={0} name
+ItemName.help=Required field
+ItemName.label=Enter an item name
+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
+CopyExisting=Copy existing {0}

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

@@ -33,16 +33,22 @@ THE SOFTWARE.
     <link rel="alternate" title="Jenkins:${it.viewName} (all builds) (RSS 2.0)" href="${rootURL}/${it.url}rssAll?flavor=rss20" type="application/rss+xml" />
     <link rel="alternate" title="Jenkins:${it.viewName} (failed builds)" href="${rootURL}/${it.url}rssFailed" type="application/rss+xml" />
     <link rel="alternate" title="Jenkins:${it.viewName} (failed builds) (RSS 2.0)" href="${rootURL}/${it.url}rssFailed?flavor=rss20" type="application/rss+xml" />
+
+    <l:css src="jsbundles/remodal.css" />
+    <l:js src="jsbundles/add-item.js" />
+    <l:css src="jsbundles/add-item.css" />
   </l:header>
   <l:side-panel>
     <l:tasks>
       <st:include page="tasks-top.jelly" it="${it.owner}" optional="true" />
 
       <st:include page="tasks-new.jelly" it="${it.owner}" optional="true">
         <!-- made overridable for ViewGroup that doesn't allow modifications -->
-        <l:task href="${rootURL}/${it.viewUrl}newJob" icon="icon-new-package icon-md" it="${app}" permission="${it.itemCreatePermission}" title="${%NewJob(it.newPronoun)}"/>
+        <l:task href="#newjob" icon="icon-new-package icon-md" it="${app}" permission="${it.itemCreatePermission}" title="${%NewJob(it.newPronoun)}"/>
       </st:include>
 
+      <st:include page="popup.jelly" optional="true" />
+
       <j:choose>
         <j:when test="${it.class.name=='hudson.model.AllView'}">
           <l:task href="${rootURL}/asynchPeople/" icon="icon-user icon-md" title="${%People}"/>

war/package.json

@@ -21,6 +21,7 @@
     "gulp-less": "^3.1.0"
   },
   "dependencies": {
+    "remodal-detached": "^1.0.7-v4",
     "bootstrap-detached": "^3.3.5-v1",
     "jenkins-js-modules": "^1.5.0",
     "jquery-detached": "^2.1.4-v2",

war/src/main/js/add-item.js

@@ -1,5 +1,6 @@
 // Initialize all modules by requiring them. Also makes sure they get bundled (see gulpfile.js).
 var $ = require('jquery-detached').getJQuery();
+require('remodal-detached').getRemodal();
 
 var getItems = function() {
   var d = $.Deferred();

war/src/main/js/add-item.less

@@ -10,4 +10,5 @@
  * Widget styles
  */
 @import "widgets/config/tabbar";
+@import "widgets/add/remodal";
 @import "widgets/add/addform";

war/src/main/js/widgets/add/addform.less

@@ -357,3 +357,9 @@
     }
   }
 }
+
+.new-job-popup {
+  max-width: 800px;
+  padding: 0;
+  text-align: left;
+}