Merge pull request #500 from zbynek/dialog-update

Use new dialog design for adding credentials
jenkinsci · Mar 1, 2024 · f395fdf · f395fdf
2 parents e7f2f06 + a96c5b5
commit f395fdf
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 67 deletions.
diff --git a/pom.xml b/pom.xml
@@ -67,7 +67,7 @@
   <properties>
     <changelist>999999-SNAPSHOT</changelist>
     <gitHubRepo>jenkinsci/${project.artifactId}-plugin</gitHubRepo>
-    <jenkins.version>2.387.3</jenkins.version>
+    <jenkins.version>2.426.3</jenkins.version>
   </properties>
 
   <repositories>
@@ -87,8 +87,8 @@
     <dependencies>
       <dependency>
         <groupId>io.jenkins.tools.bom</groupId>
-        <artifactId>bom-2.387.x</artifactId>
-        <version>2483.v3b_22f030990a_</version>
+        <artifactId>bom-2.426.x</artifactId>
+        <version>2839.v003b_4d9d24fd</version>
         <scope>import</scope>
         <type>pom</type>
       </dependency>

diff --git a/...loudbees/plugins/credentials/CredentialsSelectHelper/WrappedCredentialsStore/dialog.jelly b/...loudbees/plugins/credentials/CredentialsSelectHelper/WrappedCredentialsStore/dialog.jelly
@@ -25,29 +25,20 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form" xmlns:l="/lib/layout">
   <l:ajax>
-    <div class="hd">
-      <h2 style="margin-top: 1rem" tooltip="${it.description}">${it.description}: ${it.displayName}</h2>
-    </div>
-    <div class="bd">
-      <h3>${%Add Credentials}</h3>
-      <form action="${it.url}/addCredentials" method="POST" id="credentials-dialog-form">
-        <table width="100%">
-          <f:entry title="${%Domain}">
-            <select class="setting-input" name="_.domain">
-              <j:forEach var="domain" items="${it.wrappers.entrySet()}">
-                <f:option value="${domain.key}" selected="${domain.key=='_'}">${domain.value.displayName}</f:option>
-              </j:forEach>
-            </select>
-          </f:entry>
-          <f:block>
-            <j:set var="descriptors" value="${it.credentialsDescriptors}"/>
-            <st:include page="credential"/>
-          </f:block>
-          <f:block>
-            <input id="credentials-add-submit" class="yui-button primary" value="${%Add}"/>
-            <input id="credentials-add-abort" class="yui-button" value="${%Cancel}"/>
-          </f:block>
-        </table>
+    <div>
+      <form action="${it.url}/addCredentials" method="POST" id="credentials-dialog-form" data-title="${it.description}: ${it.displayName}" data-add="${%Add}">
+		<h3>${%Add Credentials}</h3>
+        <f:entry title="${%Domain}">
+          <select class="setting-input" name="_.domain">
+            <j:forEach var="domain" items="${it.wrappers.entrySet()}">
+              <f:option value="${domain.key}" selected="${domain.key=='_'}">${domain.value.displayName}</f:option>
+            </j:forEach>
+          </select>
+        </f:entry>
+        <f:block>
+          <j:set var="descriptors" value="${it.credentialsDescriptors}"/>
+          <st:include page="credential"/>
+        </f:block>
       </form>
     </div>
   </l:ajax>

diff --git a/src/main/resources/lib/credentials/dialog.js b/src/main/resources/lib/credentials/dialog.js
diff --git a/src/main/resources/lib/credentials/select.jelly b/src/main/resources/lib/credentials/select.jelly
@@ -65,7 +65,6 @@
   <j:set var="selectHelper" value="${app.getDescriptorByName('com.cloudbees.plugins.credentials.CredentialsSelectHelper')}"/>
   <j:set var="includeUser" value="${attrs.includeUser ? true : false}"/>
   <j:set var="context" value="${selectHelper.resolveContext(attrs.context ?: it)}"/>
-  <st:adjunct includes="lib.credentials.dialog"/>
   <div class="credentials-select-control">
     <j:if test="${attrs.expressionAllowed}">
       <label field-disabled="true">

diff --git a/src/main/resources/lib/credentials/select/select.css b/src/main/resources/lib/credentials/select/select.css
@@ -1,6 +1,5 @@
 select.credentials-select {  width:auto; vertical-align: top; }
 div.credentials-select-content-inactive { display:none; }
-div#credentialsDialog {overflow-y: scroll;}
 body.masked {overflow-y: hidden;}
 div.include-user-credentials { padding: 0.2em; }
 /* adapted from Jenkins' style.css */

diff --git a/src/main/resources/lib/credentials/select/select.js b/src/main/resources/lib/credentials/select/select.js
@@ -28,22 +28,6 @@ window.credentials.init = function () {
         document.body.appendChild(div);
         div.innerHTML = "<div id='credentialsDialog'><div class='bd'></div></div>";
         window.credentials.body = document.getElementById('credentialsDialog');
-        window.credentials.dialog = new YAHOO.widget.Panel(window.credentials.body, {
-            fixedcenter: true,
-            close: true,
-            draggable: true,
-            zindex: 1000,
-            modal: true,
-            visible: false,
-            keylisteners: [
-              new YAHOO.util.KeyListener(document, {keys:27}, {
-                fn:(function() {window.credentials.dialog.hide();}),
-                scope:document,
-                correctScope:false
-              })
-            ]
-        });
-        window.credentials.dialog.render();
     }
 };
 window.credentials.add = function (e) {
@@ -54,15 +38,15 @@ window.credentials.add = function (e) {
     }).then(rsp => {
         if (rsp.ok) {
             rsp.text().then((responseText) => {
+                // do not apply behaviour on parsed HTML, dialog.form does that later
+                // otherwise we have crumb and json fields twice
                 window.credentials.body.innerHTML = responseText;
-                Behaviour.applySubtree(window.credentials.body, false);
                 window.credentials.form = document.getElementById('credentials-dialog-form');
-                // window.credentials.form.action = e;
-                var r = YAHOO.util.Dom.getClientRegion();
-                window.credentials.dialog.cfg.setProperty("width", r.width * 3 / 4 + "px");
-                window.credentials.dialog.cfg.setProperty("height", r.height * 3 / 4 + "px");
-                window.credentials.dialog.center();
-                window.credentials.dialog.show();
+				const data = window.credentials.form.dataset;
+				const options = {'title': data['title'], 'okText': data['add'], 'submitButton':false, 'minWidth': '75vw'};
+				dialog.form(window.credentials.form, options)
+					.then(window.credentials.addSubmit);
+				window.credentials.form.querySelector('select').focus();
             });
         }
     });
@@ -109,9 +93,6 @@ window.credentials.refreshAll = function () {
                     if (window.console != null) {
                         console.warn("Unable to find nearby " + name);
                     }
-                    if (window.YUI != null) {
-                        YUI.log("Unable to find a nearby control of the name " + name, "warn")
-                    }
                     return;
                 }
                 deps.push({name: Path.tail(name), control: c});
@@ -121,9 +102,12 @@ window.credentials.refreshAll = function () {
     });
 };
 window.credentials.addSubmit = function (_) {
-    const form = document.getElementById('credentials-dialog-form');
+    const form = window.credentials.form;
+    // temporarily attach to DOM (avoid https://github.com/HtmlUnit/htmlunit/issues/740)
+    document.body.appendChild(form);
     buildFormTree(form);
     ajaxFormSubmit(form);
+    form.remove();
 
     function ajaxFormSubmit(form) {
         fetch(form.action, {
@@ -140,9 +124,6 @@ window.credentials.addSubmit = function (_) {
                 // notificationBar.show(...) with logging ID could be handy here?
                 console.error("Could not add credentials:", e);
             })
-            .finally(() => {
-                window.credentials.dialog.hide();
-            });
     }
 };
 

diff --git a/src/test/java/com/cloudbees/plugins/credentials/CredentialsSelectHelperTest.java b/src/test/java/com/cloudbees/plugins/credentials/CredentialsSelectHelperTest.java
@@ -31,7 +31,7 @@ public void doAddCredentialsFromPopupWorksAsExpected() throws Exception {
             HtmlListItem li = htmlPage.querySelector(".credentials-add-menu-items li");
             li.click();
             wc.waitForBackgroundJavaScript(4000);
-            HtmlForm form = htmlPage.querySelector("#credentialsDialog form");
+            HtmlForm form = htmlPage.querySelector("#credentials-dialog-form");
 
             HtmlInput username = form.querySelector("input[name='_.username']");
             username.setValue("bob");
@@ -40,7 +40,7 @@ public void doAddCredentialsFromPopupWorksAsExpected() throws Exception {
             HtmlInput id = form.querySelector("input[name='_.id']");
             id.setValue("test");
 
-            HtmlSpan formSubmitButton = form.querySelector("#credentials-add-submit");
+            HtmlButton formSubmitButton = htmlPage.querySelector(".jenkins-button[data-id='ok']");
             formSubmitButton.fireEvent("click");
             wc.waitForBackgroundJavaScript(5000);