JENKINS-56109 Jenkins form UI rework

70 views
Skip to first unread message

Tim Jacomb

unread,
May 7, 2020, 3:10:31 AM5/7/20
to Jenkins Developers

Hi



There’s been work going on for over a year now which converts the Jenkins form layout from using a table based design to using div’s. It’s now getting very close to landing (hopefully in the next weekly release or so, pending any feedback), and I wanted to announce it as it will have impacts on the UI and will likely cause some issues in plugins.


For some more background take a look at JENKINS-56109


For screenshots see:

jenkinsci/jenkins#3895


Main changes you will notice:

  • Labels moved above inputs (except checkboxes)

  • Checkbox labels moved to the right of checkboxes

  • Bar that helps associate nested fields to their parent at each level


Other changes:

  • Checkbox accessibility improved by associating the labels to the checkboxes allowing a larger hit area as the label can be clicked on

  • Changes to many plugins to make this as safe as possible, i.e.jenkins#3922, allowing pipeline to be seamlessly switched over


Changes we would like to do that have been made out of scope of this PR:

  • Reduce form width as it feels too wide

    • Out of scope due to some complexity with controls like the converting an input to multiline, and the slider that is used for expanding text areas, it shouldn’t be too hard but it was complex enough not to risk this PR with it

  • Move help icons closer to the label

    • There was feedback that the help icons were now too far away, we tried moving them next to the label but it looked a bit odd when all the icons were in different positions


Change for plugin authors

In most cases plugins won’t need any changes at all, some places that may cause issues are:

  • adding the td / tr elements directly instead of using the `f:entry` tag, e.g. config-rotator-plugin#2

  • Custom javascript that is brittle to the Jenkins form UI layout, we’ve done our best to introduce shims, to not cause breakage here

  • Forking jelly taglibs from core and extending them, i.e. multiple-scms-plugin#25, would be good to contribute fixes or enhancements to core rather than doing this where possible.

  • Using tables in the plugin for layout, jfrog/jenkins-artifactory-plugin#266


How to make my plugin work on old and new core

There’s a jelly property divBasedFormLayout that you can use to check whether this rework is in the core version, see jfrog/jenkins-artifactory-plugin#266, traits.jelly#0c272

More help

You can message us in the ux-sig gitter channel,

Feedback

Either here or in the pull request, reviews most welcomed, instructions for testing it are in the top level PR comment.

Thanks

Tim


Reply all
Reply to author
Forward
0 new messages