Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-56109

Jenkins Core: Change Jenkins configuration UI from tables to divs

    • 2.264 and 2.277.1

      Report all issues with a complete plugin list (reporting this as an issue in the changelog isn't helping anyone)

      JENKINS_HOST=username:password@myhost.com:port
      curl -sSL "http://$JENKINS_HOST/pluginManager/api/xml?depth=1&xpath=/*/*/shortName|/*/*/version&wrapper=plugins" | perl -pe 's/.*?<shortName>([\w-]+).*?<version>([^<]+)()(<\/\w+>)+/\1 \2\n/g'|sed 's/ /:/'
       

      Check if your plugin already has an issue reported https://issues.jenkins.io/issues/?filter=22840 (artifactory plugin is https://github.com/jfrog/jenkins-artifactory-plugin/issues/350

      If you know which plugin is causing the issue report a new issue, including steps to reproduce and screenshots and label it with 'tables-to-divs-regression'

       

      Historically, jenkins's jelly framework generated lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

       

      Here's one example from Windows 10's settings:

      Note that the label for a field is above the field – not to the left of the field.

      Here's a much older UI from Windows:

      Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

       

      Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

       

      Examples can be seen in macOS, Maemo / MeeGo, and pretty much every system (including Chrome / Firefox / Android).

       

      This issue tracked the core jelly changes made to switch from generating tables to generating divs.

          [JENKINS-56109] Jenkins Core: Change Jenkins configuration UI from tables to divs

          Félix Queiruga Balado added a comment - - edited

          I'm gonna go ahead and put the checklist of TODO items here:

          • Style for hierarchies of nested elements. This includes hetero lists and repeatable elements.
          • Indentation problems caused by the .container class and the 15px padding it sets. Maybe we should create a new class for forms instead of reusing .container. This would also work to remove the width changes on this class.
          • Checkbox fixes for the Git plugin & similar (I have a JS based solution for this but it needs a bit more work).
          • <f:entry> refactor: move the helper text to inside the form entry element.
          • <f:entry> refactor: move the validation errors to inside the form entry element - not the easiest due to the javascript.
          • Verify that form submission (buildFormTree) still works properly.
          • Too much spacing on the API key list on the user configuration (easy).
          • Broken scroll-aware headers on the job configuration (this one is medium at best, difficult if we need to do lots of fixing for the JS tests).
          • ⚠️ Broken drag & drop of repetable elements
          • Tune styling of nesting indicator
          • Provide backwards compatibility for findFollowingTR(e, "validation-error-area"). Used directly in many plugins (https://github.com/search?q=org%3Ajenkinsci+validation-error-area&type=Code)

          Pending:

          • Forms are IMO too wide. I'd suggest adding a max-width for inputs but maybe it is out of scope for this.
            *

          Félix Queiruga Balado added a comment - - edited I'm gonna go ahead and put the checklist of TODO items here: Style for hierarchies of nested elements. This includes hetero lists and repeatable elements. Indentation problems caused by the .container class and the 15px padding it sets. Maybe we should create a new class for forms instead of reusing .container . This would also work to remove the width changes on this class. Checkbox fixes for the Git plugin & similar (I have a JS based solution for this but it needs a bit more work). <f:entry> refactor: move the helper text to inside the form entry element. <f:entry> refactor: move the validation errors to inside the form entry element - not the easiest due to the javascript. Verify that form submission ( buildFormTree ) still works properly. Too much spacing on the API key list on the user configuration (easy). Broken scroll-aware headers on the job configuration (this one is medium at best, difficult if we need to do lots of fixing for the JS tests). ⚠️ Broken drag & drop of repetable elements Tune styling of nesting indicator Provide backwards compatibility for findFollowingTR(e, "validation-error-area") . Used directly in many plugins ( https://github.com/search?q=org%3Ajenkinsci+validation-error-area&type=Code ) Pending: Forms are IMO too wide. I'd suggest adding a max-width for inputs but maybe it is out of scope for this. *

          Oleg Nenashev added a comment -

          Should we convert it to EPIC and start adding tasks to it? CC jsoref timja.

          As discussed at the yesterday's UX SIG meeting, we would like to add it to the UI/UX hackfest on May 25029: https://www.jenkins.io/events/online-hackfest/2020-uiux/ . We will be either doing crowd-testing or crowd-fixing there, depending on when the PR lands.

           

           

          Oleg Nenashev added a comment - Should we convert it to EPIC and start adding tasks to it? CC jsoref timja . As discussed at the yesterday's UX SIG meeting, we would like to add it to the UI/UX hackfest on May 25029:  https://www.jenkins.io/events/online-hackfest/2020-uiux/  . We will be either doing crowd-testing or crowd-fixing there, depending on when the PR lands.    

          There can be an epic with a ticket for each plugins that fail. For example, https://github.com/jenkinsci/dockerhub-notification-plugin uses forks of normal UI widgets and break (on freestyle jobs).

          Félix Queiruga Balado added a comment - There can be an epic with a ticket for each plugins that fail. For example,  https://github.com/jenkinsci/dockerhub-notification-plugin  uses forks of normal UI widgets and break (on freestyle jobs).

          timja this rule can work to make just config forms narrower. Not sure how it would break with the auth matrix though.

          form[name=config],
          .config-form {
            max-width: 44rem;  // ~700px
          }

          Félix Queiruga Balado added a comment - timja this rule can work to make just config forms narrower. Not sure how it would break with the auth matrix though. form[name=config], .config-form { max-width: 44rem; // ~700px }

          Oleg Nenashev added a comment -

          Created an EPIC for follow-up stories in plugins and other components

          Oleg Nenashev added a comment - Created an EPIC for follow-up stories in plugins and other components

          Tim Jacomb added a comment -

          To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

          Tim Jacomb added a comment - To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

          I replaced the https://issues.jenkins.io/browse/JENKINS-64184?filter=22840 link with https://issues.jenkins.io/issues/?filter=22840 in the description. JENKINS-64184 has been resolved and no longer matches the filter, and that caused Jira to ignore the filter and display only the issue.

          Kalle Niemitalo added a comment - I replaced the https://issues.jenkins.io/browse/JENKINS-64184?filter=22840 link with https://issues.jenkins.io/issues/?filter=22840 in the description. JENKINS-64184 has been resolved and no longer matches the filter, and that caused Jira to ignore the filter and display only the issue.

          Kumar Kumar added a comment - - edited

          This has broken default build with parameters- Reference - https://issues.jenkins.io/browse/JENKINS-66933 . Kindly provide a solution for this or revert back the changes. You can't break one to make another thing working.

          Kumar Kumar added a comment - - edited This has broken default build with parameters- Reference - https://issues.jenkins.io/browse/JENKINS-66933  . Kindly provide a solution for this or revert back the changes. You can't break one to make another thing working.

            jsoref Josh Soref
            jsoref Josh Soref
            Votes:
            0 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated:
              Resolved: