Replace dismiss buttons with red cross icon and create reusable comp…

[meetgoti07]

Replace dismiss buttons with red cross icon and create reusable component

• Replace text-based dismiss buttons with circular red cross icon buttons in administrative monitor alerts
• Create reusable f:dismissButton component in lib/form/dismissButton.jelly
• Update all 16 administrative monitor templates to use the new component

Fixes #18321

Testing done

Manually tested the changes by:

• Building Jenkins WAR file and starting a local instance
• Verified that dismiss buttons display as circular red cross icons
• Tested dismiss functionality - all buttons correctly submit forms and dismiss alerts
• Tested in multiple browsers (Chrome, Firefox, Safari) to ensure consistent rendering

The changes are purely UI-related with no functional modifications. All existing form submission logic remains unchanged.

Screenshots (UI changes only)

Before

After

Proposed changelog entries

• Replace dismiss buttons in administrative monitor alerts with red cross icon buttons for improved visual consistency

Proposed changelog category

/label rfe,web-ui

Proposed upgrade guidelines

N/A

Submitter checklist

• The issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
• There is automated testing or an explanation as to why this change has no tests.
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
• UI changes do not introduce regressions when enforcing the current default rules of Content Security Policy Plugin. In particular, new or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
• For dependency updates, there are links to external changelogs and, if possible, full differentials.
• For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@timja

[timja]

Thanks, looking pretty close

[meetgoti07]

@timja , could you please review this when you get a chance? Thank you.

[mawinter69]

One note. There is already a doDisable method available in AdministrativeMonitor, means technically each monitor can use this. So instead of making that somehow fit to a f:form that is usually used now, that could live outside of any form. Maybe make it look like the f:repeatableDeleteButton. Then on click we don't send a form but in javascript we do a fetch call to the /disable endpoint of the monitor. On success we remove the admin monitor from the DOM or add class jenkins-hidden

[meetgoti07]

One note. There is already a doDisable method available in AdministrativeMonitor, means technically each monitor can use this. So instead of making that somehow fit to a f:form that is usually used now, that could live outside of any form. Maybe make it look like the f:repeatableDeleteButton. Then on click we don't send a form but in javascript we do a fetch call to the /disable endpoint of the monitor. On success we remove the admin monitor from the DOM or add class jenkins-hidden

@mawinter69
The issue appears to be related to replacing the dismissal button with a cross icon, which is primarily a UI change. Would you prefer that I include these updates in this PR, or keep them separate?
My understanding is that it may fall slightly outside the current issue scope, but I am happy to proceed based on your guidance.

[meetgoti07]

@timja, could you please take a moment to review the PR when convenient? I have updated the button contrast so it better aligns with the monitor banner, as it was previously not very noticeable or clear.

Thank you for your time and feedback.

[mawinter69]

My impression was we want something like this:

Here I added a dismiss button similar to the repeatable delete that on hover shows a dismiss text. To avoid that this button overlaps with other buttons I added div that shows the displayname of the admin monitor. Though not sure if that is the best approach as it might partially duplicate things. Could also make it that the button is in top right without overlapping.