Update the design of notifications

[janfaracik]

This PR updates the design of notifications in Jenkins. This PR makes them a little more playful and vibrant, and it also brings them inline with the rest of the Jenkins interface.

Before

After

https://user-images.githubusercontent.com/43062514/188011724-d159584a-a505-4287-9274-2f99f8fdd275.mov

The examples above were produced by the Design Library (a PR will be up to update that too soon).

Proposed changelog entries

• Update the design of notifications

Proposed upgrade guidelines

N/A

Submitter checklist

• [ ] (If applicable) Jira issue is well described
• [ ] Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• [ ] Appropriate autotests or explanation to why this change has no tests
• [ ] New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• [ ] New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO") if applicable.
• [ ] New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content-Security-Policy directives (see documentation on jenkins.io).
• [ ] For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@jenkinsci/sig-ux

Maintainer checklist

Before the changes are marked as ready-for-merge:

• [ ] There are at least 2 approvals for the pull request and no outstanding requests for change
• [ ] Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• [ ] Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• [ ] Proper changelog labels are set so that the changelog can be generated automatically
• [ ] If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• [ ] If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[daniel-beck]

Does this implement https://github.com/jenkinsci/jenkins/pull/6408#discussion_r944483750 or how are they related?

[janfaracik]

Does this implement #6408 (comment) or how are they related?

The current notification implementation in Jenkins isn't related to the hoverNotification function - the naming is definitely confusing.

hoverNotification(...) displays a tooltip confusingly enough. notificationBar.show("Hello world", notificationBar.SUCCESS) displays a notification.

The APIs should definitely be cleaned up, right now I've just moved their existing implementations (with minimal changes) out of hudson-behavior.js into their own files to keep things cleaner.

[daniel-beck]

@janfaracik To clarify, the other PR changes the "Build scheduled" popup after I click "Build Now", while this PR take care of the message shown across the top after I select "Apply" on a form?

[daniel-beck]

@janfaracik To clarify, the other PR changes the "Build scheduled" popup after I click "Build Now", while this PR take care of the message shown across the top after I select "Apply" on a form?

Looks like it:

Although the position looks kinda odd if the form is short, not where I would have expected it.

[timja]

@jenkinsci/core-security-review is there a reason this has been waiting a month?

I don't believe agreeing where on the page this goes impacts the security review?

[github-actions[bot]]

Please take a moment and address the merge conflicts of your pull request. Thanks!

[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!