From e27a8c1736fc37550508eb06cc324bb7549375b5 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 23 Dec 2021 19:40:50 +0000
Subject: [PATCH] Fix attach-previous for radios without IDs, add styling for
 multi-selects, reordeer entry for entries without titles, fix title class for
 dropdownLists

---
 .../resources/lib/form/dropdownList.jelly     |  2 +-
 core/src/main/resources/lib/form/entry.jelly  | 12 ++++++-----
 core/src/main/resources/lib/form/radio.jelly  |  2 +-
 war/src/main/less/base/style.less             |  4 ----
 war/src/main/less/modules/form.less           | 21 ++++++++++++++++++-
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/core/src/main/resources/lib/form/dropdownList.jelly b/core/src/main/resources/lib/form/dropdownList.jelly
index b45a868906e6..159e4fc37ad9 100644
--- a/core/src/main/resources/lib/form/dropdownList.jelly
+++ b/core/src/main/resources/lib/form/dropdownList.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
   </st:documentation>
 
     <div class='jenkins-form-item'>
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
             ${attrs.title}
             <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index 9f601cb422a0..6e5c81e6d468 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -96,18 +96,20 @@ THE SOFTWARE.
         </j:if>
       </j:when>
       <j:otherwise>
-        <div class="setting-main help-sibling">
-          <d:invokeBody />
+        <div class="help-sibling">
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
-        <!-- used to display the form validation error -->
-        <div class="validation-error-area tr"><div colspan="2"></div><div></div><div></div></div>
-        <f:helpArea />
         <j:if test="${!empty(attrs.description)}">
           <f:description>
             <j:out value="${escapeEntryTitleAndDescription ? h.escape(attrs.description) : attrs.description}"/>
           </f:description>
         </j:if>
+        <div class="setting-main">
+          <d:invokeBody />
+        </div>
+        <!-- used to display the form validation error -->
+        <div class="validation-error-area tr"><div colspan="2"></div><div></div><div></div></div>
+        <f:helpArea />
       </j:otherwise>
     </j:choose>
   </div>
diff --git a/core/src/main/resources/lib/form/radio.jelly b/core/src/main/resources/lib/form/radio.jelly
index c549bb49de65..953504a48654 100644
--- a/core/src/main/resources/lib/form/radio.jelly
+++ b/core/src/main/resources/lib/form/radio.jelly
@@ -47,7 +47,7 @@ THE SOFTWARE.
         <input class="jenkins-radio__input" type="radio" name="${attrs.name}" onclick="${attrs.onclick}"
                id="${attrs.id}" value="${attrs.value}" checked="${attrs.checked?'true':null}"
                disabled="${readOnlyMode?'true':null}" />
-        <label class="jenkins-radio__label" for="${attrs.id}">${attrs.title}</label>
+        <label class="jenkins-radio__label ${attrs.id != null ? '' : 'attach-previous'}" for="${attrs.id}">${attrs.title}</label>
         <div class="jenkins-radio__children">
             <d:invokeBody />
         </div>
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 80cba11095bd..283eb1b41e50 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -441,10 +441,6 @@ div.behavior-loading {
   }
 }
 
-label.attach-previous {
-    margin-left: 0.5em;
-}
-
 .bottom-sticker,
 #bottom-sticker {
     width: 100%;   /* it needs to occupy the entire width or else the underlying content will see through */
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index faa21e048c24..80d578c6366a 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -245,7 +245,7 @@
     max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
     border-radius: 6px;
     box-shadow: 0 0 0 10px transparent;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     min-height: 38px;
 
     &:hover {
@@ -265,6 +265,25 @@
   }
 }
 
+.jenkins-multi-select {
+  position: relative;
+  width: 100%;
+  border: 2px solid var(--input-border);
+  border-radius: var(--form-input-border-radius);
+  box-shadow: 0 0 0 10px transparent;
+  transition: var(--standard-transition);
+  outline: none;
+
+  &:focus {
+    border-color: var(--focus-input-border);
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
 .jenkins-radio-help-wrapper {
   display: flex;
   align-items: center;