[JENKINS-71326] - Support colored badges in breadcrumb dropdown

core/src/main/java/jenkins/management/Badge.java

@@ -103,6 +103,7 @@ public String getTooltip() {
      *
      * @return severity as String
      */
+    @Exported(visibility = 999)
     public String getSeverity() {
         return severity.toString().toLowerCase(Locale.US);
     }

core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly

@@ -91,12 +91,7 @@ THE SOFTWARE.
                   <a href="${m.urlName}">
                     <div class="jenkins-section__item__icon" aria-hidden="true">
                       <l:icon src="${m.iconFileName}" class="icon" />
-                      <j:set var="badge" value="${m.badge}"/>
-                      <j:if test="${badge != null}">
-                        <div tooltip="${badge.tooltip}" class="jenkins-section__item__icon__badge alert-${badge.severity}">
-                          ${badge.text}
-                        </div>
-                      </j:if>
+                      <l:badge badge="${m.badge}" class="jenkins-section__item__icon__badge"/>
                     </div>
                     <dl>
                       <dt>${m.displayName}</dt>

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

@@ -0,0 +1,40 @@
+<!--
+The MIT License
+
+Copyright (c) 2012- CloudBees, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+  <st:documentation>
+    If a Badge is informed it will be displayed, otherwise nothing is done.
+    <st:attribute name="badge" type="jenkins.management.Badge">
+      Badge to be displayed, accepts null value.
+    </st:attribute>
+    <st:attribute name="class" use="optional">
+      Additional class to be applied
+    </st:attribute>
+  </st:documentation>
+  <j:if test="${attrs.badge != null}">
+    <span class="jenkins-badge alert-${attrs.badge.severity} ${attrs.class?:''}" tooltip="${attrs.badge.tooltip}">
+      ${attrs.badge.text}
+    </span>
+  </j:if>
+</j:jelly>

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

@@ -155,11 +155,7 @@ THE SOFTWARE.
                 <l:icon src="${icon}" />
               </span>
               <span class="task-link-text">${title}</span>
-              <j:if test="${attrs.badge != null}">
-                <span class="task-icon-badge" tooltip="${attrs.badge.tooltip}">
-                  ${attrs.badge.text}
-                </span>
-              </j:if>
+              <l:badge badge="${attrs.badge}" class="task-icon-badge"/>
             </span>
           </span>
         </div>
@@ -181,11 +177,7 @@ THE SOFTWARE.
                     <l:icon src="${icon}" />
                   </span>
                   <span>${title}</span>
-                  <j:if test="${attrs.badge != null}">
-                    <span class="task-icon-badge" tooltip="${attrs.badge.tooltip}">
-                      ${attrs.badge.text}
-                    </span>
-                  </j:if>
+                  <l:badge badge="${attrs.badge}" class="task-icon-badge"/>
                 </l:confirmationLink>
               </j:when>
 
@@ -202,11 +194,7 @@ THE SOFTWARE.
                     <l:icon src="${icon}" />
                   </span>
                   <span class="task-link-text">${title}</span>
-                  <j:if test="${attrs.badge != null}">
-                    <span class="task-icon-badge" tooltip="${attrs.badge.tooltip}">
-                      ${attrs.badge.text}
-                    </span>
-                  </j:if>
+                  <l:badge badge="${attrs.badge}" class="task-icon-badge"/>
                 </m:a>
                 <st:adjunct includes="lib.layout.task.task" />
               </j:otherwise>

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

@@ -38,9 +38,11 @@ function menuItem(options) {
   const label = xmlEscape(itemOptions.label);
   let badgeText;
   let badgeTooltip;
+  let badgeSeverity;
   if (itemOptions.badge) {
     badgeText = xmlEscape(itemOptions.badge.text);
     badgeTooltip = xmlEscape(itemOptions.badge.tooltip);
+    badgeSeverity = xmlEscape(itemOptions.badge.severity);
   }
   const tag = itemOptions.type === "link" ? "a" : "button";
 
@@ -58,7 +60,7 @@ function menuItem(options) {
           ${label}
                     ${
                       itemOptions.badge != null
-                        ? `<span class="jenkins-dropdown__item__badge" tooltip="${badgeTooltip}">${badgeText}</span>`
+                        ? `<span class="jenkins-dropdown__item__badge jenkins-badge alert-${badgeSeverity}" tooltip="${badgeTooltip}">${badgeText}</span>`
                         : ``
                     }
           ${

war/src/main/scss/components/_badges.scss

@@ -31,3 +31,31 @@
 .am-badge {
   display: inline;
 }
+
+.jenkins-badge {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 100px;
+      font-size: 0.7rem;
+      min-height: 20px;
+      min-width: 20px;
+      padding: 0 0.4rem;
+      box-shadow: 0 1px 1px rgba(black, 0.1);
+      animation: animate-in-badge var(--elastic-transition) 0.1s both;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(white, black);
+        border-radius: 100px;
+        mix-blend-mode: overlay;
+        opacity: 0.35;
+      }
+}
+@keyframes animate-in-badge {
+  from {
+    transform: scale(0);
+  }
+}

war/src/main/scss/components/_dropdowns.scss

@@ -201,18 +201,8 @@ $dropdown-padding: 0.4rem;
     }
 
     &__badge {
-      position: relative;
       margin-left: auto;
       margin-right: -0.85rem;
-
-      &::before {
-        content: "";
-        position: absolute;
-        inset: -0.0625rem -0.375rem;
-        background: var(--text-color-secondary);
-        opacity: 0.1;
-        border-radius: 100vmax;
-      }
     }
 
     &__chevron {

war/src/main/scss/components/_section.scss

@@ -98,30 +98,10 @@
       color: currentColor;
     }
 
-    &__badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 100px;
-      font-size: 0.7rem;
-      min-height: 20px;
-      min-width: 20px;
-      padding: 0 0.4rem;
-      box-shadow: 0 1px 1px rgba(black, 0.1);
-      animation: animate-in-badge var(--elastic-transition) 0.1s both;
-
-      &::after {
-        content: "";
+     &__badge{
         position: absolute;
-        inset: 0;
-        background: linear-gradient(white, black);
-        border-radius: 100px;
-        mix-blend-mode: overlay;
-        opacity: 0.35;
-      }
+        top: -4px;
+        right: -4px;
     }
   }
 
@@ -140,9 +120,3 @@
     font-size: 0.925rem;
   }
 }
-
-@keyframes animate-in-badge {
-  from {
-    transform: scale(0);
-  }
-}

war/src/main/scss/components/_side-panel-tasks.scss

@@ -91,25 +91,7 @@ $background-outset: 0.7rem;
   }
 
   .task-icon-badge {
-    position: relative;
-    color: currentColor;
-    letter-spacing: 0;
-    z-index: 0;
     margin-left: auto;
-    min-width: 24px;
-    text-align: center;
-    padding: 0 8px;
-    line-height: 0.75rem;
-    font-size: 0.75rem;
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: -6px 0;
-      background: var(--item-background--hover);
-      border-radius: 100px;
-      z-index: -1;
-    }
   }
 
   .task-link-text {