Refresh the 'New item' page

[janfaracik]

Small pull request to refresh the 'New item' page. Largely some SCSS changes to bring it more inline with the rest of Jenkins, as well as some minor JS changes.

Before

After

• Added a page heading and breadcrumb item
• Removed the always present 'Required field' text
• Removed the icon background
• Sticky bottom bar has been replaced with the bottomButtonBar component

Testing done

• Works as before, needs passing tests

Proposed changelog entries

• Refresh the 'New item' page.

Proposed upgrade guidelines

N/A

Submitter checklist

Beta Give feedback

1. The Jira issue, if it exists, is well-described.
2. 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.
3. There is automated testing or an explanation as to why this change has no tests.
4. New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
5. New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
6. 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).
7. For dependency updates, there are links to external changelogs and, if possible, full differentials.
8. For new APIs and extension points, there is a link to at least one consumer.

Desired reviewers

@jenkinsci/sig-ux

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

Maintainer checklist

Beta Give feedback

1. There are at least two (2) approvals for the pull request and no outstanding requests for change.
2. Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
3. Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
4. Proper changelog labels are set so that the changelog can be generated automatically.
5. If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
6. 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).

[timja]

not ran locally but screenshots look good, what's with the empty functions?

[janfaracik]

Design is far from perfect but I think it's a step in the right direction - if anybody has any ideas happy to hear them.

The items are loaded in by JS - anybody know the reason why this is over just loading them in via Jelly? Any performance considerations?

[timja]

The items are loaded in by JS - anybody know the reason why this is over just loading them in via Jelly? Any performance considerations?

I think it was being done in the 2.x refresh which was when the setup wizard came in so likely it was using similar paradigms and approaches to it.

[NotMyFault]

Unrelated to this pr, but related to future cleanups: https://issues.jenkins.io/browse/JENKINS-72947

[timja]

LGTM

[yaroslavafenkin]

Looks OK security wise.

[NotMyFault]

/label ready-for-merge

---

This PR is now ready for merge. We will merge it after ~24 hours if there is no negative feedback.
Please see the merge process documentation for more information about the merge process.
Thanks!

[daniel-beck]

Animations for keyboard navigation on this page looks weird because of close/overlapping focus boxes for the item types. Is this intentional?

Also pointing out that removing the .flat class from the div results in item grouping. #5083 intended to implement that, but circumstances at the time resulted it in me having to postpone it.

It looks reasonable to me but perhaps not up to your standards, PTAL

(Neither are blocking.)

[janfaracik]

Animations for keyboard navigation on this page looks weird because of close/overlapping focus boxes for the item types. Is this intentional?

Also pointing out that removing the .flat class from the div results in item grouping. #5083 intended to implement that, but circumstances at the time resulted it in me having to postpone it.

It looks reasonable to me but perhaps not up to your standards, PTAL
(Neither are blocking.)

Good spot about the border overlapping, I've increased the spacing a touch to account for that.

As for grouping, I think it looks alright for now - can always revisit in the future.

[basil]

Caused jenkinsci/acceptance-test-harness#1545.

[basil]

I have added an ATH workaround in jenkinsci/acceptance-test-harness#1545. jenkinsci/acceptance-test-harness#1549 tracks the removal of this workaround as part of fixing JENKINS-73034.