[JENKINS-68282] New design for configure project page

[janfaracik]

This PR adds a sidebar for quick navigation to the configure project pages, this is intended as a replacement for the tabs on the page.

This brings several advantages:

• More modern design, fits in with the rest of Jenkins
• More vertical space, uses horizontal space better
• More prominent toggle for enabling/disabling a project
• Supports Symbols for sections
• Far simpler code for the page

I was going to hold off on opening this for a bit but seeing as there are issue(s) on Jira relating to the page I thought I'd post it now to gather feedback.

---

This PR doesn't remove the older tabs JS and styling as this is still in use, e.g. on multi branch pipeline projects.

---

This'll be my last design PR for a while, I'm going to focus on existing PRs and bugs for a good while going forward.

Proposed changelog entries

• New design for configure project page

Proposed upgrade guidelines

Plugin developers

config-scrollspy.js is now deprecated, see Job/configure.jelly for how to upgrade your configure page if necessary.

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.
• 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).

[timja]

I love this and can't wait to apply it to the configure clouds screen which really needs this

ATH appears to be failing

[janfaracik]

Opened a draft PR for ATH here jenkinsci/acceptance-test-harness#762

[daniel-beck]

there wouldn't be an easy way to go back to the Manage Jenkins screen without the sidebar link (no breadcrumb bar link)

#6126 would need to be revived. I got tired of resolving merge conflicts without anyone bothering to review it for months, so closed it.

wrong

[daniel-beck]

Sorry about that. It's caused by one of the (optional) Setup Wizard plugins. I like testing UI stuff by just installing all wizard plugins and seeing how that interacts (in this case, expecting a new top-level section in the job config to appear per previous comments).
Without plugins, the warning doesn't appear, and 2.357 with all plugins also has the warning, so it's unrelated to this PR.

[daniel-beck]

I've tested it with popular project types and all seems good. Not too sure what a 'dynamic' section is? If it's just the custom sections that the plugins have added to their config pages then all works well.

(Perhaps only before t2d) plugins were able to add new top-level sections (like "Build Environment" etc.) to job config forms. I don't think this was intentional has may have been fixed by the better hierarchical structure of t2d.

[timja]

(I’ll try do a quick POC on another page first to review Daniels concerns)

[timja]

@daniel-beck

POC:
https://github.com/timja/jenkins/pull/new/new-container-configure-system

(single commit view: d21beb2)

it shows yes there is an issue with long labels, but in my instance with quite a lot of plugins it only shows 2 issues, and both could be addressed by shortening the label.

Possibly we would want a way of filtering out some less interesting sections.
There's also an issue with hidden blocks that are behind an f.descriptorRadioList which adds a hidden section.

Full page screenshot

Screenshot doesn't demonstrate it very well though as scrolling the page doesn't scroll the sidebar. The only way to move down the sidebar is to get to the bottom of the page.
Again I think this is better done by limiting the number of sections in some way.

any thoughts @daniel-beck / @janfaracik ?

[daniel-beck]

@timja That's pretty cool, thanks for doing that. If @janfaracik thinks the (non)scrolling issue would be easy to resolve once we get there, that'd be fine with me.

[janfaracik]

any thoughts @daniel-beck / @janfaracik ?

@timja That's pretty cool, thanks for doing that. If @janfaracik thinks the (non)scrolling issue would be easy to resolve once we get there, that'd be fine with me.

Thanks for trying that out! I think the ideal solution to the scrolling problem would be to cut down on the amount of sections on the page. I wouldn't personally be opposed to splitting out parts of the page where possible into separate pages, it looks a little unwieldy and uncategorised.

Alternatively we could have the sidebar scroll separately to the rest of the page which shouldn't be too hard to implement if need be.

Cheers!

[timja]

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

Thanks!

[basil]

Looking forward to jenkinsci/cloudbees-folder-plugin#237, jenkinsci/matrix-project-plugin#104, and jenkinsci/workflow-job-plugin#261 once this goes in!

[daniel-beck]

I wouldn't personally be opposed to splitting out parts of the page where possible into separate pages, it looks a little unwieldy and uncategorised.

🤣 You should have been around before there was /configureSecurity/ (1.425; TBH even I didn't use Jenkins a lot before that existed), /configureTools/ (2.0, initial work in #2011, finished in #2140), and /configureClouds/ (2.205, #4339).

[jglick]

Note that if you are using parent-pom earlier than 4.38, HtmlUnit tests (WebClient.goTo etc.) may fail when run against a jenkins.version of 2.359 or later in PCT:

TypeError: Cannot call method "addEventListener" of null (http://localhost:…/jenkins/static/…/jsbundles/section-to-sidebar-items.js#…)

See jenkins-infra/repository-permissions-updater#2707 for example.

[timja]

Right yeah there were a couple of plugins in bom affected which we had to get released.

[daniel-beck]

Caused jenkinsci/depbuilder-plugin#2 (seemingly deliberately, but seems under-documented? Could probably have been done more compatibly?)

[janfaracik]

Caused jenkinsci/depbuilder-plugin#2 (seemingly deliberately, but seems under-documented? Could probably have been done more compatibly?)

Ah my bad entirely, I thought we had updated all of the plugins which use that component. I'm happy to fix it and open a PR.

[basil]

Causes JENKINS-69587.