use dialogs to add users and groups (#342)

pom.xml

@@ -50,7 +50,7 @@
 
   <properties>
     <changelist>999999-SNAPSHOT</changelist>
-    <jenkins.version>2.387.3</jenkins.version>
+    <jenkins.version>2.426.3</jenkins.version>
     <checkstyle.version>10.13.0</checkstyle.version>
     <hpi.compatibleSinceVersion>640</hpi.compatibleSinceVersion>
   </properties>
@@ -59,8 +59,8 @@
     <dependencies>
       <dependency>
         <groupId>io.jenkins.tools.bom</groupId>
-        <artifactId>bom-2.387.x</artifactId>
-        <version>2378.v3e03930028f2</version>
+        <artifactId>bom-2.426.x</artifactId>
+        <version>2839.v003b_4d9d24fd</version>
         <type>pom</type>
         <scope>import</scope>
       </dependency>

src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/assign-roles.properties

@@ -23,9 +23,8 @@
 migrate_user=Migrate ambiguous permissions assignment to user {0}
 migrate_group=Migrate ambiguous permissions assignment to group {0}
 
-promptUser=User name:
+promptUser=User ID:
 userExists=An entry for this user already exists
-emptyUser=Please enter a user name
 
 promptGroup=Group name:
 groupExists=An entry for this group already exists

src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/index.jelly

@@ -242,15 +242,6 @@
               </f:bottomButtonBar>
             </l:isAdmin>
           </f:form>
-          <section class="modal">
-            <div class="flex">
-              <button class="btn-close">⨉</button>
-            </div>
-            <h3 id="modaltitle">
-            </h3>
-            <div id="modalmessage">
-            </div>
-          </section>
           <div class="overlay default-hidden"/>
           <st:adjunct includes="lib.form.confirm" />
         </l:main-panel>

src/main/resources/com/michelin/cio/hudson/plugins/rolestrategy/RoleStrategyConfig/permission-templates.jelly

@@ -48,7 +48,7 @@
         <td class="start">
           <l:isAdmin>
             <div class="rsp-remove" data-is-used="${template.isUsed()}">
-              <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm alert-danger rsp-table__icon"/>
+              <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm icon-red rsp-table__icon"/>
             </div>
           </l:isAdmin>
         </td>
@@ -73,7 +73,7 @@
         <l:isAdmin>
           <td class="stop">
             <div class="rsp-remove" data-is-used="${template.isUsed()}">
-              <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm alert-danger rsp-table__icon"
+              <l:icon src="symbol-trash-outline plugin-ionicons-api" class="icon-sm icon-red rsp-table__icon"
                       htmlTooltip="&lt;b&gt;Role&lt;/b&gt;: ${h.escape(attrs.title)}"/>
             </div>
           </td>
@@ -210,6 +210,7 @@
         <script>
         </script>
       </f:form>
+      <st:adjunct includes="lib.form.confirm" />
     </l:main-panel>
   </l:layout>
 </j:jelly>

src/main/webapp/css/role-strategy.css

@@ -160,58 +160,3 @@ label.attach-previous {
   display: none;
   max-width: 500px;
 }
-
-.modal {
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.4rem;
-  min-width: 350px;
-  padding: 1.3rem;
-  min-height: 150px;
-  max-height: 400px;
-  position: fixed;
-  z-index: 2000;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: var(--background);
-  border: 1px solid #ddd;
-  border-radius: 15px;
-}
-
-.modal .flex {
-  display: flex;
-  align-items: center;
-  justify-content: right;
-}
-
-#modalmessage {
-  overflow-y: auto;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(3px);
-  z-index: 1999;
-}
-
-
-.btn-close {
-  transform: translate(10px, -10px);
-  padding: 0.4rem 0.6rem;
-  background: var(--btn-primary-bg);
-  border-radius: 50%;
-  color: var(--btn-text-color);
-  cursor: pointer;
-  border: none;
-  font-weight: 600;
-  font-family: sans-serif;
-}

src/main/webapp/js/table.js

@@ -59,7 +59,7 @@ class TableHighlighter {
 
   highlightRowOnly = e => {
     let enable = e.type === 'mouseenter';
-    let tr = findAncestor(e.target, "TR")
+    let tr = e.target.closest("TR");
     if (enable) {
       tr.classList.add('highlighted');
     } else {

src/main/webapp/js/tableAssign.js

@@ -113,43 +113,41 @@ addButtonAction = function (e, template, table, tableHighlighter, tableId) {
     let dataReference = e.target;
     let type = dataReference.getAttribute('data-type');
     let tbody = table.tBodies[0];
-
-    let name = prompt(dataReference.getAttribute('data-prompt')).trim();
-    if (name=="") {
-      alert(dataReference.getAttribute('data-empty-message'));
-      return;
-    }
-    if (findElementsBySelector(table,"TR").find(function(n){return n.getAttribute("name")=='['+type+':'+name+']';})!=null) {
-      alert(dataReference.getAttribute('data-error-message'));
-      return;
-    }
-
-    let copy = document.importNode(template,true);
-    copy.removeAttribute("id");
-    copy.removeAttribute("style");
-
-    let children = copy.childNodes;
-    let tooltipDescription = "Group";
-    if (type==="USER") {
-        tooltipDescription = "User";
-    }
-    children.forEach(function(item){
-      item.outerHTML= item.outerHTML.replace(/{{USER}}/g, doubleEscapeHTML(name)).replace(/{{USERGROUP}}/g, tooltipDescription);
+
+    dialog.prompt(dataReference.getAttribute('data-prompt')).then( (name) => {
+      name = name.trim();
+      if (findElementsBySelector(table,"TR").find(function(n){return n.getAttribute("name")=='['+type+':'+name+']';})!=null) {
+        dialog.alert(dataReference.getAttribute('data-error-message'))
+        return;
+      }
+
+      let copy = document.importNode(template,true);
+      copy.removeAttribute("id");
+      copy.removeAttribute("style");
+
+      let children = copy.childNodes;
+      let tooltipDescription = "Group";
+      if (type==="USER") {
+          tooltipDescription = "User";
+      }
+      children.forEach(function(item){
+        item.outerHTML= item.outerHTML.replace(/{{USER}}/g, doubleEscapeHTML(name)).replace(/{{USERGROUP}}/g, tooltipDescription);
+      });
+
+      copy.childNodes[1].innerHTML = escapeHTML(name);
+      copy.setAttribute("name",'['+type+':'+name+']');
+      tbody.appendChild(copy);
+      Behaviour.applySubtree(table, true);
+      tableHighlighter.scan(copy);
     });
-
-    copy.childNodes[1].innerHTML = escapeHTML(name);
-    copy.setAttribute("name",'['+type+':'+name+']');
-    tbody.appendChild(copy);
-    Behaviour.applySubtree(table, true);
-    tableHighlighter.scan(copy);
   }
 
 
 Behaviour.specify(".global-matrix-authorization-strategy-table .rsp-remove", 'RoleBasedAuthorizationStrategy', 0, function(e) {
   e.onclick = function() {
-    let table = findAncestor(this,"TABLE");
+    let table = this.closest("TABLE");
     let tableId = table.getAttribute("id");
-    let tr = findAncestor(this,"TR");
+    let tr = this.closest("TR");
     parent = tr.parentNode;
     parent.removeChild(tr);
     if (parent.children.length < filterLimit) {
@@ -187,15 +185,15 @@ Behaviour.specify(".global-matrix-authorization-strategy-table TR.permission-row
  */
 Behaviour.specify(".global-matrix-authorization-strategy-table TD.stop .migrate", 'RoleBasedAuthorizationStrategy', 0, function(e) {
   e.onclick = function() {
-    let tr = findAncestor(this,"TR");
+    let tr = this.closest("TR");
     let name = tr.getAttribute('name');
 
     let newName = name.replace('[EITHER:', '[USER:'); // migrate_user behavior
     if (this.classList.contains('migrate_group')) {
       newName = name.replace('[EITHER:', '[GROUP:');
     }
 
-    let table = findAncestor(this,"TABLE");
+    let table = this.closest("TABLE");
     let tableRows = table.getElementsByTagName('tr');
     let newNameElement = null;
     for (let i = 0; i < tableRows.length; i++) {
@@ -214,7 +212,7 @@ Behaviour.specify(".global-matrix-authorization-strategy-table TD.stop .migrate"
       tr.removeAttribute('data-checked');
 
       // remove migration buttons from updated row
-      let buttonContainer = findAncestor(this, "TD");
+      let buttonContainer = this.closest("TD");
       let migrateButtons = buttonContainer.getElementsByClassName('migrate');
       for (let i = migrateButtons.length - 1; i >= 0; i--) {
         migrateButtons[i].remove();

src/main/webapp/js/tableManage.js

@@ -32,9 +32,6 @@ var projectTableHighlighter;
 var newItemRoleTemplate;
 var agentTableHighlighter;
 var newAgentRoleTemplate;
-var modal;
-var overlay;
-var closeModalBtn;
 
 
 function filterRows(filter, table) {
@@ -107,7 +104,7 @@ endPatternInput = function(span, cancel) {
   let div = span.childNodes[0];
   let input = span.childNodes[1];
   let pattern = input.value;
-  let table = findAncestor(span, "TABLE");
+  let table = span.closest("TABLE");
   input.type = "hidden";
   div.style.display = "block";
   span.setAttribute("data-edit", "false");
@@ -116,7 +113,7 @@ endPatternInput = function(span, cancel) {
   } else {
     div.setAttribute("data-pattern", pattern);
     div.textContent = '"' + pattern + '"'
-    let row = findAncestor(span, "TR");
+    let row = span.closest("TR");
     for (td of row.getElementsByClassName('permissionInput')) {
       updateTooltip(row, td, pattern);
     }
@@ -257,15 +254,15 @@ addButtonAction = function(e, templateId, table, tableHighlighter, tableId) {
   }
   tbody.appendChild(copy);
   tableHighlighter.scan(copy);
-  Behaviour.applySubtree(findAncestor(copy, "TABLE"), true);
+  Behaviour.applySubtree(copy.closest("TABLE"), true);
 }
 
 
 Behaviour.specify(".global-matrix-authorization-strategy-table .rsp-remove", 'RoleBasedAuthorizationStrategy', 0, function(e) {
   e.onclick = function() {
-    let table = findAncestor(this, "TABLE");
+    let table = this.closest("TABLE");
     let tableId = table.getAttribute("id");
-    let tr = findAncestor(this, "TR");
+    let tr = this.closest("TR");
     parent = tr.parentNode;
     parent.removeChild(tr);
     if (parent.children.length < filterLimit) {
@@ -290,12 +287,12 @@ Behaviour.specify(".global-matrix-authorization-strategy-table .rsp-remove", 'Ro
 });
 
 Behaviour.specify(".global-matrix-authorization-strategy-table td.permissionInput input", 'RoleBasedAuthorizationStrategy', 0, function(e) {
-  let row = findAncestor(e, "TR");
+  let row = e.closest("TR");
   let pattern = getPattern(row);
-  let td = findAncestor(e, "TD");
+  let td = e.closest("TD");
   updateTooltip(row, td, pattern);
   e.onchange = function() {
-    Behaviour.applySubtree(findAncestor(row, "TABLE"), true);
+    Behaviour.applySubtree(row.closest("TABLE"), true);
     return true;
   };
 });
@@ -346,7 +343,7 @@ showItemsModal = function(items, itemCount, maxItems, pattern) {
 }
 
 showErrorMessageModal = function() {
-  alert('Unable to fetch matching Jobs.');
+  dialog.alert('Unable to fetch matching Jobs.');
 }
 
 bindListenerToPattern = function(elem) {
@@ -398,34 +395,23 @@ showAgentsModal = function(agents, agentCount, maxAgents, pattern) {
 }
 
 showModal = function(title, itemlist) {
-  titleElement=document.getElementById("modaltitle");
-  titleElement.textContent = title;
-
-  messageElement=document.getElementById("modalmessage");
-  messageElement.textContent = "";
+  messageElement=document.createElement("div");
   for (let item of itemlist) {
     line = document.createTextNode("- " + item);
     messageElement.appendChild(line);
     messageElement.appendChild(document.createElement("br"));
   }
-
-  modal.style.display="flex";
-  overlay.classList.remove("default-hidden");
+  dialog.modal(messageElement, {title: title});
 }
 
 showAgentErrorMessageModal = function() {
-  alert('Unable to fetch matching Agents.');
+  dialogalert('Unable to fetch matching Agents.');
 }
 
 bindAgentListenerToPattern = function(elem) {
   elem.addEventListener('click', showMatchingAgents);
 }
 
-closeModal = function () {
-  modal.style.display="none";
-  overlay.classList.add("default-hidden");
-};
-
 document.addEventListener('DOMContentLoaded', function() {
   // global roles initialization
   let globalRoleInputFilter = document.getElementById('globalRoleInputFilter');
@@ -463,19 +449,4 @@ document.addEventListener('DOMContentLoaded', function() {
   for (let pattern of agentPatterns) {
     bindAgentListenerToPattern(pattern);
   }
-
-  //
-  modal = document.querySelector(".modal");
-
-  overlay = document.querySelector(".overlay");
-  overlay.addEventListener("click", closeModal);
-
-  closeModalBtn = document.querySelector(".btn-close");
-  closeModalBtn.addEventListener("click", closeModal);
-
-  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape" && !modal.classList.contains("hidden")) {
-      closeModal();
-    }
-  });
 });