From 16a65758149f71de1fd61dd0d7aa1fa9c06cd8c3 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 10 Apr 2024 19:07:53 +0100
Subject: [PATCH] Use 'jenkins-button' for tables (#9131)

* Init

* Update Security2780Test.java

* Add comment for increasing SVG size in table

* Restore previous column.jelly

* Fix indentation
---
 .../hudson/PluginManager/installed.jelly          | 12 +++++++-----
 .../hudson/logging/LogRecorderManager/index.jelly |  2 +-
 .../hudson/model/ComputerSet/index.jelly          |  2 +-
 .../hudson/model/Job/buildTimeTrend_resources.js  |  2 +-
 .../HudsonPrivateSecurityRealm/index.jelly        |  4 ++--
 .../hudson/views/BuildButtonColumn/column.jelly   |  6 ++----
 .../resources/jenkins/agents/CloudSet/index.jelly |  2 +-
 .../main/resources/lib/hudson/buildHealth.jelly   |  2 +-
 .../java/jenkins/security/Security2780Test.java   |  2 +-
 war/src/main/scss/components/_icons.scss          |  4 +---
 .../main/scss/components/_side-panel-widgets.scss |  4 ++++
 war/src/main/scss/components/_table.scss          | 15 +++++++++++++--
 12 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly
index 5729a7d3f95b..c22c9ddeeba1 100644
--- a/core/src/main/resources/hudson/PluginManager/installed.jelly
+++ b/core/src/main/resources/hudson/PluginManager/installed.jelly
@@ -171,12 +171,14 @@ THE SOFTWARE.
                     <td class="jenkins-table__cell--tight">
                       <div class="jenkins-table__cell__button-wrapper">
                         <j:if test="${p.downgradable}">
-                          <form class="jenkins-buttons-row" method="post"
+                          <form method="post"
+                                class="jenkins-buttons-row"
                                 action="${rootURL}/updateCenter/plugin/${p.shortName}/downgrade">
-                            <button class="jenkins-table__button jenkins-!-color-orange" tooltip="${%downgradeTo(p.backupVersion)}">
+                            <button class="jenkins-button jenkins-button--tertiary jenkins-!-color-orange"
+                                    style="padding: 0.5rem"
+                                    tooltip="${%downgradeTo(p.backupVersion)}">
                               <l:icon src="symbol-downgrade-circle"/>
-                              <span class="jenkins-!-margin-left-1"
-                                    style="font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50px;">
+                              <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;">
                                 ${p.backupVersion}
                               </span>
                             </button>
@@ -220,7 +222,7 @@ THE SOFTWARE.
                             </j:if>
                             <button data-action="uninstall"
                                     type="button"
-                                    class="jenkins-table__button jenkins-!-destructive-color"
+                                    class="jenkins-button jenkins-button--tertiary jenkins-!-destructive-color"
                                     tooltip="${%Uninstall} ${p.updateInfo.displayName ?: p.displayName}"
                                     data-href="plugin/${p.shortName}/doUninstall"
                                     data-message="${%uninstall-title(p.updateInfo.displayName ?: p.displayName)}">
diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly
index 35e166f4784b..bbbb591ab88a 100644
--- a/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly
+++ b/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly
@@ -67,7 +67,7 @@ THE SOFTWARE.
           <local:row name="${lr.name}" href="${lr.searchUrl}/">
             <l:isAdmin>
               <div class="jenkins-table__cell__button-wrapper">
-                <a href="${lr.searchUrl}/configure" class="jenkins-table__button">
+                <a href="${lr.searchUrl}/configure" class="jenkins-button jenkins-button--tertiary">
                   <l:icon src="symbol-settings" />
                 </a>
               </div>
diff --git a/core/src/main/resources/hudson/model/ComputerSet/index.jelly b/core/src/main/resources/hudson/model/ComputerSet/index.jelly
index bc558e822cc1..f261e1f3f8cd 100644
--- a/core/src/main/resources/hudson/model/ComputerSet/index.jelly
+++ b/core/src/main/resources/hudson/model/ComputerSet/index.jelly
@@ -95,7 +95,7 @@ THE SOFTWARE.
           <td class="jenkins-table__cell--tight">
             <j:if test="${c.hasPermission(c.EXTENDED_READ)}">
               <div class="jenkins-table__cell__button-wrapper">
-                <a href="../${c.url}configure" class="jenkins-table__button">
+                <a href="../${c.url}configure" class="jenkins-button jenkins-button--tertiary">
                   <l:icon src="symbol-settings" />
                 </a>
               </div>
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
index fd59ff650677..8a6cbfd49253 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
@@ -132,7 +132,7 @@ window.displayBuilds = function (data) {
     var div2 = document.createElement("div");
     div2.classList.add("jenkins-table__cell__button-wrapper");
     var a3 = document.createElement("a");
-    a3.classList.add("jenkins-table__button");
+    a3.classList.add("jenkins-button");
     a3.href = e.consoleUrl;
     a3.innerHTML = p.dataset.consoleOutputIcon;
     div2.appendChild(a3);
diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly
index bb85e3682927..45e05e870fc0 100644
--- a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly
+++ b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly
@@ -63,7 +63,7 @@ THE SOFTWARE.
               </td>
               <td>
                 <div class="jenkins-table__cell__button-wrapper">
-                  <a href="${user.url}/configure" class="jenkins-table__button">
+                  <a href="${user.url}/configure" class="jenkins-button jenkins-button--tertiary">
                     <l:icon src="symbol-settings" />
                   </a>
                 </div>
@@ -71,7 +71,7 @@ THE SOFTWARE.
               <td>
                 <j:if test="${user.canDelete()}">
                   <div class="jenkins-table__cell__button-wrapper">
-                    <l:confirmationLink href="${user.url}/doDelete" class="jenkins-table__button jenkins-!-destructive-color"
+                    <l:confirmationLink href="${user.url}/doDelete" class="jenkins-button jenkins-button--tertiary jenkins-!-destructive-color"
                                         post="true" message="${%delete.user(user.displayName)}">
                       <l:icon src="symbol-trash" />
                     </l:confirmationLink>
diff --git a/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly b/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly
index 14740e7cddf9..8cced8eccbda 100644
--- a/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly
+++ b/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly
@@ -42,10 +42,8 @@ THE SOFTWARE.
               </j:otherwise>
             </j:choose>
             <j:set var="isQueued" value="${app.queue.contains(job)}"/>
-            <a id="${id}" tooltip="${title}" class="jenkins-table__button jenkins-!-build-color" href="${href}">
-              <span class="${isQueued ? 'pulse-animation': ''}">
-                <l:icon src="symbol-play" />
-              </span>
+            <a id="${id}" tooltip="${title}" class="jenkins-button jenkins-button--tertiary jenkins-!-build-color ${isQueued ? 'pulse-animation': ''}" href="${href}">
+              <l:icon src="symbol-play" />
               <st:adjunct includes="hudson.views.BuildButtonColumn.icon"/>
             </a>
           </div>
diff --git a/core/src/main/resources/jenkins/agents/CloudSet/index.jelly b/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
index 1e7c2bedd90e..f0d1fa0f9c69 100644
--- a/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
+++ b/core/src/main/resources/jenkins/agents/CloudSet/index.jelly
@@ -69,7 +69,7 @@ THE SOFTWARE.
                     </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">
+                        <a href="${it.getCloudUrl(request,app,cloud)}configure" class="jenkins-button">
                           <l:icon src="symbol-settings"/>
                         </a>
                       </div>
diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
index c5788e4638e0..9b21fce70fb8 100644
--- a/core/src/main/resources/lib/hudson/buildHealth.jelly
+++ b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -70,7 +70,7 @@ THE SOFTWARE.
       <div class="jenkins-table__cell__button-wrapper">
         <j:choose>
           <j:when test="${!empty(healthReports)}">
-            <a class="build-health-link jenkins-table__button" href="${empty(link)?'#':link}" style="${attrs.style}">
+            <a class="build-health-link jenkins-button jenkins-button--tertiary" href="${empty(link)?'#':link}" style="${attrs.style}">
               <l:icon src="symbol-weather-${buildHealth.iconClassName}" />
             </a>
           </j:when>
diff --git a/test/src/test/java/jenkins/security/Security2780Test.java b/test/src/test/java/jenkins/security/Security2780Test.java
index 0d876daa7328..7b471537f38b 100644
--- a/test/src/test/java/jenkins/security/Security2780Test.java
+++ b/test/src/test/java/jenkins/security/Security2780Test.java
@@ -27,7 +27,7 @@ public void buildButtonTooltipHasNoXss() throws Exception {
         AtomicBoolean alertTriggered = new AtomicBoolean(false);
         wc.setAlertHandler((p, s) -> alertTriggered.set(true));
         HtmlPage page = wc.goTo("");
-        page.executeJavaScript("document.querySelector('a.jenkins-table__button')._tippy.show()");
+        page.executeJavaScript("document.querySelector('.jenkins-table a.jenkins-button')._tippy.show()");
         wc.waitForBackgroundJavaScript(2000L);
         ScriptResult result = page.executeJavaScript("document.querySelector('.tippy-content').innerHTML;");
         Object jsResult = result.getJavaScriptResult();
diff --git a/war/src/main/scss/components/_icons.scss b/war/src/main/scss/components/_icons.scss
index 5a823400871e..c35d0613487c 100644
--- a/war/src/main/scss/components/_icons.scss
+++ b/war/src/main/scss/components/_icons.scss
@@ -127,7 +127,5 @@
 }
 
 .pulse-animation {
-  svg {
-    animation: pulse-animation 2s ease infinite;
-  }
+  animation: pulse-animation 2s ease infinite;
 }
diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss
index bd6715cdc586..6772890bbffa 100644
--- a/war/src/main/scss/components/_side-panel-widgets.scss
+++ b/war/src/main/scss/components/_side-panel-widgets.scss
@@ -243,6 +243,10 @@
   grid-template-columns: auto 1fr auto;
   font-weight: 500 !important;
 
+  .build-health-link {
+    margin: -9px -15px;
+  }
+
   .jenkins-table__cell--tight {
     width: auto;
     margin-right: 1rem;
diff --git a/war/src/main/scss/components/_table.scss b/war/src/main/scss/components/_table.scss
index 5ac54d12d927..73b033f0c1b6 100644
--- a/war/src/main/scss/components/_table.scss
+++ b/war/src/main/scss/components/_table.scss
@@ -154,13 +154,24 @@
     }
   }
 
+  .jenkins-button {
+    margin: -10px 0;
+    padding: 0.5rem 0.75rem;
+
+    // Increase the size of symbols compared to regular buttons
+    svg {
+      width: 1.375rem !important;
+      height: 1.375rem !important;
+    }
+  }
+
   &__button,
   &__icon {
     svg,
     .build-status-icon__wrapper,
     img {
-      width: 1.5rem !important;
-      height: 1.5rem !important;
+      width: 1.375rem !important;
+      height: 1.375rem !important;
     }
   }