Use 'jenkins-button' for tables (#9131)

* Init * Update Security2780Test.java * Add comment for increasing SVG size in table * Restore previous column.jelly * Fix indentation
jenkinsci · Apr 10, 2024 · 16a6575 · 16a6575
1 parent d14b380
commit 16a6575
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -63,15 +63,15 @@ 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>
               </td>
               <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     }
   }