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

[eduardojandre]

See JENKINS-71326.

To solve the problem I had to:
1-Update the backend to expose the badge severity field to the API used by dropdowns.
2-Update the dropdown and side menu to use the badge severity to set the corresponding CSS class.
3-Update the CSS files so that the badge in the dropdown and side menu behaves similarly to the normal menu.

[welcome]

Yay, your first pull request towards Jenkins core was created successfully! Thank you so much!

A contributor will provide feedback soon. Meanwhile, you can join the chats and community forums to connect with other Jenkins users, developers, and maintainers.

[mawinter69]

Can you provide a screenshot please how it looks.
Ideally it looks the same as the badges on the manage page.

[mawinter69]

Replaces #8798

[eduardojandre]

Sure.

[mawinter69]

The badges on the manage page have a slightly different styling. They have a small color gradient and an animation




See

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

Line 101 in 2923a77

&__badge {

for the styling

Just an idea, we have now 3 files (5 calls) where we render a badge. Maybe we can move that into an own jelly tag e.g. core/src/main/resources/lib/layout/badge.jelly so we just call it via <l:badge badge="${attrs.badge"/>.
This gets its own styling (under war/src/main/scss/components/_badge.scss) which ensures that wherever it is used it looks the same. And when we adjust we have just a single place where we need to do changes. This also allows plugins to easily reuse the badge jelly and directly get it properly styled.

[eduardojandre]

Yes, I did not notice the gradient on my tests, the animation I didn't replicate because I was not sure if this was intentional or not.

But this was something that bothered me a little, having the same component replicated in multiple files, although it was previous behavior. It seemed like a bigger change and I didn't know the best way to do it.

I will try your suggestion.

Thanks.

[eduardojandre]

I pushed another commit with changes, can you please take a look?

Now there is a jelly that is used on Manage screen and on the side menu, but the dropdown is loaded directly on javascript through ajax so I was not able to use the same jelly view on that one. (but I used the same CSS class on it)

[mawinter69]

tested locally and it looks good

[NotMyFault]

You forgot to run cd war/ ; yarn run lint:fix.

[eduardojandre]

You forgot to run cd war/ ; yarn run lint:fix.

Sorry, just fixed.

I applied the suggestion of "@SInCE TODO", when the TODO will be replace by the version? Is it in the pipeline?

[NotMyFault]

You forgot to run cd war/ ; yarn run lint:fix.

Sorry, just fixed.

I applied the suggestion of "@SInCE TODO", when the TODO will be replace by the version? Is it in the pipeline?

That happens when a maintainer runs the https://github.com/jenkinsci/jenkins/blob/master/update-since-todo.py

[Kevin-CB]

Looks fine security wise

[NotMyFault]

Thanks, looks nice :)

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[welcome]

Congratulations on getting your very first Jenkins core pull request merged 🎉🥳

This is a fantastic achievement, and we're thrilled to have you as part of our community! Thank you for your valuable input, and we look forward to seeing more of your contributions in the future!

We would like to invite you to join the community chats and forums to meet other Jenkins contributors 😊
Don't forget to check out the participation page to learn more about how to contribute to Jenkins.