From 16bca2e2ea0351e7637e8f15474fa7bc48185957 Mon Sep 17 00:00:00 2001
From: Vincent Latombe <vincent@latombe.net>
Date: Thu, 12 Oct 2023 00:47:48 +0200
Subject: [PATCH] [JENKINS-72020] Restore ability to reorder clouds (#8492)

* [JENKINS-72020] Reorder clouds

Adding back controls to reorder clouds.

Since clouds order is taken into account for node provisioning, users should be able to reorder them as needed.

* Use tertiary buttons

* Separate screen for reordering

* Include reordering in the cloud list directly (thanks @timja)

* Show the save button after the first reordering

* Separate JS

Only display order column when admin

* Fix reviews

* Remove unused string

* Put drag-and-drop handle in the cloud icon column

* Add missing permission check

* Add a small blurb to clarify what cloud order is used for.
---
 .../main/java/jenkins/agents/CloudSet.java    | 24 ++++++
 .../jenkins/agents/CloudSet/index.jelly       | 76 +++++++++++--------
 .../jenkins/agents/CloudSet/index.properties  |  1 +
 war/src/main/js/pages/cloud-set/index.js      |  9 +++
 war/src/main/js/pages/cloud-set/index.scss    |  3 +
 war/src/main/js/sortable-drag-drop.js         | 16 ++++
 war/webpack.config.js                         |  4 +
 7 files changed, 103 insertions(+), 30 deletions(-)
 create mode 100644 war/src/main/js/pages/cloud-set/index.js
 create mode 100644 war/src/main/js/pages/cloud-set/index.scss

diff --git a/core/src/main/java/jenkins/agents/CloudSet.java b/core/src/main/java/jenkins/agents/CloudSet.java
index 5229dd06f1..00a27b0469 100644
--- a/core/src/main/java/jenkins/agents/CloudSet.java
+++ b/core/src/main/java/jenkins/agents/CloudSet.java
@@ -39,6 +39,11 @@ import hudson.util.FormValidation;
 import java.io.IOException;
 import java.net.URLEncoder;
 import java.nio.charset.StandardCharsets;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Comparator;
+import java.util.List;
 import java.util.logging.Level;
 import java.util.logging.Logger;
 import javax.servlet.ServletException;
@@ -248,6 +253,25 @@ public class CloudSet extends AbstractModelObject implements Describable<CloudSe
         rsp.sendRedirect2(".");
     }
 
+    @POST
+    public void doReorder(StaplerRequest req, StaplerResponse rsp) throws IOException {
+        Jenkins.get().checkPermission(Jenkins.ADMINISTER);
+        var names = req.getParameterValues("name");
+        if (names == null) {
+            throw new Failure("No cloud names given");
+        }
+        var namesList = Arrays.asList(names);
+        var clouds = new ArrayList<>(Jenkins.get().clouds);
+        Collections.sort(clouds, Comparator.comparingInt(c -> getIndexOf(namesList, c)));
+        Jenkins.get().clouds.replaceBy(clouds);
+        rsp.sendRedirect2(".");
+    }
+
+    private static int getIndexOf(List<String> namesList, Cloud cloud) {
+        var i = namesList.indexOf(cloud.name);
+        return i == -1 ? Integer.MAX_VALUE : i;
+    }
+
     @Extension
     public static class DescriptorImpl extends Descriptor<CloudSet> implements StaplerProxy {
 
diff --git a/core/src/main/resources/jenkins/agents/CloudSet/index.jelly b/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
index 3062c25ad0..4c14e73c21 100644
--- a/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
+++ b/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
@@ -26,8 +26,14 @@ THE SOFTWARE.
   Entrance to the configuration page
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:f="/lib/form">
   <l:layout title="${it.displayName}" type="one-column">
+    <l:isAdmin>
+      <l:header>
+        <script src="${resURL}/jsbundles/pages/cloud-set.js" type="text/javascript" />
+        <link rel="stylesheet" href="${resURL}/jsbundles/pages/cloud-set.css" type="text/css" />
+      </l:header>
+    </l:isAdmin>
     <l:main-panel>
       <j:choose>
         <j:when test="${it.cloudAvailable and it.hasClouds()}">
@@ -39,36 +45,46 @@ THE SOFTWARE.
               </a>
             </l:isAdmin>
           </l:app-bar>
-          <table id="clouds" class="jenkins-table sortable">
-            <thead>
-              <tr>
-                <th class="jenkins-table__cell--tight"/>
-                <th initialSortDir="down">${%Name}</th>
-                <th class="jenkins-table__cell--tight"/>
-              </tr>
-            </thead>
-            <tbody>
-              <j:forEach var="cloud" items="${it.clouds}">
-                <tr id="cloud_${cloud.name}">
-                  <td data="${cloud.icon}" class="jenkins-table__cell--tight jenkins-table__icon">
-                    <div class="jenkins-table__cell__button-wrapper">
-                      <l:icon src="${cloud.iconClassName}" tooltip="${cloud.iconAltText}"/>
-                    </div>
-                  </td>
-                  <td>
-                    <a href="${it.getCloudUrl(request,app,cloud)}" class="jenkins-table__link model-link inside">${cloud.name}</a>
-                  </td>
-                  <td class="jenkins-table__cell--tight">
-                    <div class="jenkins-table__cell__button-wrapper">
-                      <a href="${it.getCloudUrl(request,app,cloud)}configure" class="jenkins-table__button">
-                        <l:icon src="symbol-settings"/>
-                      </a>
-                    </div>
-                  </td>
+          <p class="description">${%description}</p>
+          <f:form method="post" name="config" action="reorder">
+            <table id="clouds" class="jenkins-table">
+              <thead>
+                <tr>
+                  <th tooltip="${%Drag and drop cells to reorder}">${%Order}</th>
+                  <th>${%Name}</th>
+                  <th/>
                 </tr>
-              </j:forEach>
-            </tbody>
-          </table>
+              </thead>
+              <tbody class="with-drag-drop">
+                <j:forEach var="cloud" items="${it.clouds}">
+                  <tr class="repeated-chunk" id="cloud_${cloud.name}">
+                    <td data="${cloud.icon}" class="jenkins-table__cell--tight jenkins-table__icon">
+                      <div class="jenkins-table__cell__button-wrapper dd-handle">
+                        <l:icon src="${cloud.iconClassName}" tooltip="${cloud.iconAltText}"/>
+                      </div>
+                    </td>
+                    <td>
+                      <input type="hidden" name="name" value="${cloud.name}" />
+                      <a href="${it.getCloudUrl(request,app,cloud)}" class="jenkins-table__link model-link inside">${cloud.name}</a>
+                    </td>
+                    <td class="jenkins-table__cell--tight">
+                      <div class="jenkins-table__cell__button-wrapper">
+                        <a href="${it.getCloudUrl(request,app,cloud)}configure" class="jenkins-table__button">
+                          <l:icon src="symbol-settings"/>
+                        </a>
+                      </div>
+                    </td>
+                  </tr>
+                </j:forEach>
+              </tbody>
+            </table>
+            <l:isAdmin>
+              <f:bottomButtonBar>
+                <f:submit id="saveButton" value="${%Save}" clazz="jenkins-hidden" />
+              </f:bottomButtonBar>
+            </l:isAdmin>
+          </f:form>
+          <st:adjunct includes="lib.form.confirm" />
         </j:when>
         <j:otherwise>
           <div class="empty-state-block">
diff --git a/core/src/main/resources/jenkins/agents/CloudSet/index.properties b/core/src/main/resources/jenkins/agents/CloudSet/index.properties
index 83ebb39111..c5319b05fa 100644
--- a/core/src/main/resources/jenkins/agents/CloudSet/index.properties
+++ b/core/src/main/resources/jenkins/agents/CloudSet/index.properties
@@ -3,3 +3,4 @@ noCloudAvailable=There are no clouds currently setup, create one or install a pl
 noCloudPlugin=There are no cloud implementations for dynamically allocated agents installed.
 newCloud=New cloud
 installCloudPlugin=Install a plugin
+description=During node provisioning, clouds are tried in the order they appear in this table.
diff --git a/war/src/main/js/pages/cloud-set/index.js b/war/src/main/js/pages/cloud-set/index.js
new file mode 100644
index 0000000000..f84d3d8b56
--- /dev/null
+++ b/war/src/main/js/pages/cloud-set/index.js
@@ -0,0 +1,9 @@
+import { registerSortableTableDragDrop } from "@/sortable-drag-drop";
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll("tbody").forEach((table) =>
+    registerSortableTableDragDrop(table, function () {
+      document.getElementById("saveButton").classList.remove("jenkins-hidden");
+    }),
+  );
+});
diff --git a/war/src/main/js/pages/cloud-set/index.scss b/war/src/main/js/pages/cloud-set/index.scss
new file mode 100644
index 0000000000..21e212148f
--- /dev/null
+++ b/war/src/main/js/pages/cloud-set/index.scss
@@ -0,0 +1,3 @@
+.dd-handle {
+  cursor: move;
+}
diff --git a/war/src/main/js/sortable-drag-drop.js b/war/src/main/js/sortable-drag-drop.js
index 5689119af4..e056919c24 100644
--- a/war/src/main/js/sortable-drag-drop.js
+++ b/war/src/main/js/sortable-drag-drop.js
@@ -36,6 +36,22 @@ function registerSortableDragDrop(e) {
   });
 }
 
+export function registerSortableTableDragDrop(e, onChangeFunction) {
+  if (!e || !e.classList.contains("with-drag-drop")) {
+    return false;
+  }
+
+  Sortable.create(e, {
+    handle: ".dd-handle",
+    items: "tr",
+    onChange: function (event) {
+      if (onChangeFunction) {
+        onChangeFunction(event);
+      }
+    },
+  });
+}
+
 /*
  * Expose the function to register drag & drop components to the window objects
  * so that other widgets can use it (repeatable, hetero-list)
diff --git a/war/webpack.config.js b/war/webpack.config.js
index 566a552b43..4817f8d536 100644
--- a/war/webpack.config.js
+++ b/war/webpack.config.js
@@ -28,6 +28,10 @@ module.exports = (env, argv) => ({
       ),
     ],
     app: [path.join(__dirname, "src/main/js/app.js")],
+    "pages/cloud-set": [
+      path.join(__dirname, "src/main/js/pages/cloud-set/index.js"),
+      path.join(__dirname, "src/main/js/pages/cloud-set/index.scss"),
+    ],
     "pages/manage-jenkins": [
       path.join(__dirname, "src/main/js/pages/manage-jenkins"),
     ],