Backporting for LTS 2.516.1 (part 1)

core/src/main/resources/jenkins/model/Jenkins/_script.jelly

@@ -27,7 +27,7 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <t:scriptConsole>
+  <t:scriptConsole layout="one-column">
     <pre>println(Jenkins.instance.pluginManager.plugins)</pre>
   </t:scriptConsole>
 </j:jelly>

core/src/main/resources/lib/hudson/scriptConsole.jelly

@@ -27,7 +27,19 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:f="/lib/form">
-  <l:layout permission="${app.ADMINISTER}" title="${%scriptConsole}" type="one-column">
+  <st:documentation>
+    <st:attribute name="layout" use="optional">
+      Specify which layout to be use for the page.
+      See the type in layout for more details.
+      By default, it is `two-column`.
+    </st:attribute>
+  </st:documentation>
+
+  <j:set var="layout" value="${attrs.layout != null ? attrs.layout : 'two-column'}" />
+  <l:layout permission="${app.ADMINISTER}" title="${%scriptConsole}" type="${layout}">
+    <j:if test="${layout == 'two-column'}">
+      <st:include page="sidepanel.jelly" />
+    </j:if>
 
     <l:breadcrumb title="${%scriptConsole}"/>
     <l:main-panel>

core/src/main/resources/lib/layout/dropdowns/item.jelly

@@ -40,17 +40,32 @@ THE SOFTWARE.
         <st:attribute name="clazz">
             Optional class for the menu item
         </st:attribute>
+        <st:attribute name="badge">
+            Optional jenkins.management.Badge to also show in the item
+        </st:attribute>
     </st:documentation>
 
     <j:set var="icon">
         <l:icon src="${attrs.icon}" />
     </j:set>
 
-    <template data-dropdown-type="ITEM"
-              data-dropdown-id="${attrs.id}"
-              data-dropdown-icon="${icon}"
-              data-dropdown-text="${attrs.text}"
-              data-dropdown-href="${attrs.href}"
-              data-dropdown-clazz="${attrs.clazz}"
-    />
+    <j:if test="${action.badge == null}">
+        <template data-dropdown-type="ITEM"
+                  data-dropdown-id="${attrs.id}"
+                  data-dropdown-icon="${icon}"
+                  data-dropdown-text="${attrs.text}"
+                  data-dropdown-href="${attrs.href}"
+                  data-dropdown-clazz="${attrs.clazz}"/>
+    </j:if>
+    <j:if test="${action.badge != null}">
+        <template data-dropdown-type="ITEM"
+                  data-dropdown-id="${attrs.id}"
+                  data-dropdown-icon="${icon}"
+                  data-dropdown-text="${attrs.text}"
+                  data-dropdown-href="${attrs.href}"
+                  data-dropdown-clazz="${attrs.clazz}"
+                  data-dropdown-badge-text="${attrs.badge.text}"
+                  data-dropdown-badge-tooltip="${attrs.badge.tooltip}"
+                  data-dropdown-badge-severity="${attrs.badge.severity}"/>
+    </j:if>
 </j:jelly>

core/src/main/resources/lib/layout/header/actions.jelly

@@ -20,17 +20,47 @@
 
     <!--  we only want the hamburger menu if there is something to display -->
     <!--  render all non primary non current actions -->
+    <j:set var="hamburgerHasBadgeWithSeverityError" value="false" />
+    <j:set var="hamburgerHasBadgeWithSeverityWarning" value="false" />
+    <j:set var="hamburgerHasBadgeWithSeverityInfo" value="false" />
     <j:set var="hamburgerEntries">
       <j:forEach var="action" items="${allActions}">
         <j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" />
         <j:set var="isPrimary" value="${h.showInPrimaryHeader(action)}"/>
         <j:if test="${!isCurrent and !isPrimary}">
           <h:secondaryAction action="${action}"/>
+          <j:set var="currentBadge" value="${action.badge}"/>
+          <j:if test="${currentBadge != null}">
+            <j:choose>
+              <j:when test="${currentBadge.severity == 'danger'}">
+                <j:set var="hamburgerHasBadgeWithSeverityError" value="true" />
+              </j:when>
+              <j:when test="${currentBadge.severity == 'warning'}">
+                <j:set var="hamburgerHasBadgeWithSeverityWarning" value="true" />
+              </j:when>
+              <j:otherwise>
+                <j:set var="hamburgerHasBadgeWithSeverityInfo" value="true" />
+              </j:otherwise>
+            </j:choose>
+          </j:if>
         </j:if>
       </j:forEach>
     </j:set>
     <j:if test="${hamburgerEntries.length() gt 0}">
-      <l:overflowButton icon="symbol-menu-hamburger" id="header-more-actions">
+      <j:set var="hamburgerBadge">
+        <j:choose>
+          <j:when test="${hamburgerHasBadgeWithSeverityError}">
+            <span class="jenkins-badge jenkins-!-danger-color" />
+          </j:when>
+          <j:when test="${hamburgerHasBadgeWithSeverityWarning}">
+            <span class="jenkins-badge jenkins-!-warning-color" />
+          </j:when>
+          <j:when test="${hamburgerHasBadgeWithSeverityInfo}">
+            <span class="jenkins-badge jenkins-!-info-color" />
+          </j:when>
+        </j:choose>
+      </j:set>
+      <l:overflowButton icon="symbol-menu-hamburger" id="header-more-actions" html="${hamburgerBadge}" clazz="jenkins-button--tertiary">
         <j:out value="${hamburgerEntries}" />
       </l:overflowButton>
     </j:if>

core/src/main/resources/lib/layout/header/secondaryAction.jelly

@@ -22,13 +22,11 @@
     <j:otherwise>
       <j:set var="icon" value="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"/>
       <j:if test="${icon != null}">
-        <j:set var="badge" value="${action.badge}"/>
-        <j:set var="badgeClazz" value="${badge != null ? 'jenkins-badge jenkins-!-${badge.severity}-color' : ''}"/>      
 
         <dd:item icon="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"
                  text="${action.displayName}"
                  href="${h.getActionUrl(app.url, action)}"
-                 clazz="${badgeClazz}">
+                 badge="${action.badge}">
         </dd:item>
       </j:if>
     </j:otherwise>

core/src/main/resources/lib/layout/overflowButton.jelly

@@ -31,6 +31,10 @@ THE SOFTWARE.
     <st:attribute name="text">
       Optional text to be displayed on the button
     </st:attribute>
+    <st:attribute name="html">
+      Optional html to be displayed on the button (only used if 'text' is not provided)
+    </st:attribute>
+
     <st:attribute name="tooltip">
       Optional tooltip of the button, defaults to 'More actions'
     </st:attribute>
@@ -62,8 +66,14 @@ THE SOFTWARE.
         </div>
       </j:otherwise>
     </j:choose>
-
-    ${attrs.text}
+    <j:choose>
+      <j:when test="${attrs.text != null}">
+        ${attrs.text}
+      </j:when>
+      <j:when test="${attrs.html != null}">
+        <j:out value="${attrs.html}" />
+      </j:when>
+    </j:choose>
   </button>
   <template>
     <div class="jenkins-dropdown">

core/src/main/resources/lib/layout/task.jelly

@@ -253,7 +253,7 @@ THE SOFTWARE.
             <dd:item icon="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"
                      text="${action.displayName}"
                      href="${href}"
-                     clazz="${badgeClazz}">
+                     badge="${action.badge}">
             </dd:item>
           </j:otherwise>
         </j:choose>

src/main/js/components/dropdowns/templates.js

@@ -36,6 +36,15 @@ function dropdown() {
     animation: "dropdown",
     duration: 250,
     onShow: (instance) => {
+      // Make sure only one instance is visible at all times
+      const dropdowns = document.querySelectorAll("[data-tippy-root]");
+      Array.from(dropdowns).forEach((element) => {
+        // Check if the Tippy.js instance exists
+        if (element && element._tippy) {
+          // To just hide the dropdown
+          element._tippy.hide();
+        }
+      });
       const referenceParent = instance.reference.parentNode;
 
       if (referenceParent.classList.contains("model-link")) {

src/main/js/components/dropdowns/utils.js

@@ -220,6 +220,13 @@ function convertHtmlToItems(children) {
         } else {
           item.type = "button";
         }
+        if (attributes.dropdownBadgeSeverity) {
+          item.badge = {
+            text: attributes.dropdownBadgeText,
+            tooltip: attributes.dropdownBadgeTooltip,
+            severity: attributes.dropdownBadgeSeverity,
+          };
+        }
 
         items.push(item);
         break;

src/main/js/components/header/index.js

@@ -13,6 +13,10 @@ function init() {
     }
   });
 
+  window.addEventListener("computeHeaderOverflow", () => {
+    computeOverflow();
+  });
+
   // Fade in the page header on scroll, increasing opacity and intensity of the backdrop blur
   window.addEventListener("scroll", () => {
     const navigation = document.querySelector("#page-header");