Allow for more flexible layouts in `layout.jelly` #8794

janfaracik · 2023-12-20T12:18:18Z

Background

Currently in Jenkins you're limited to three layout types - two-column, one-column and full-screen. This PR reworks layout.jelly to allow for more layout types, for example a three column layout or a layout with the side panel on the right.

This gives developers more flexibility in how they approach the design of their pages and also simplifies how layout.jelly and it's related stylings work.

Testing done

Pages appear as before, with some minor padding
Full screen pages appear as they did before
Mobile view/breakpoints behave in the same way
Design Library's title is currently broken - ~~I'll raise a PR to fix that~~ PR has been raised Add supporting docs for 'Allow for more flexible layouts in layout.jelly #8794' design-library-plugin#315

Proposed changelog entries

N/A

Proposed upgrade guidelines

N/A

Submitter checklist

Give feedback

The Jira issue, if it exists, is well-described.
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.
There is automated testing or an explanation as to why this change has no tests.
New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, 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 (CSP) directives (see documentation).
For dependency updates, there are links to external changelogs and, if possible, full differentials.
For new APIs and extension points, there is a link to at least one consumer.
Options

Desired reviewers

@jenkinsci/sig-ux

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

Maintainer checklist

Give feedback

There are at least two (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 is not blocking the change.
Changelog entries in the pull request 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, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see 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).
Options

janfaracik · 2023-12-20T12:19:26Z

core/src/main/resources/jenkins/model/Jenkins/configure.jelly

@@ -27,8 +27,7 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-<l:layout permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%System}" type="one-column">


One issue with the current approach is that there can be a mismatch between the page type and it's contents - on the Configure page it includes a sidebar however it isn't displayed due to the type being set to one-column. The inverse could be true as well where the page type is two-column but a side panel hasn't been provided.

janfaracik · 2023-12-20T12:19:53Z

core/src/main/resources/lib/layout/app-bar.jelly

@@ -34,16 +34,14 @@ THE SOFTWARE.
 Generates a row containing the page title and an optional set of controls
 </st:documentation>

- <j:if test="${mode=='main-panel' or mode=='side-panel'}">


This if condition wasn't needed so I've removed it.

janfaracik · 2023-12-20T12:20:43Z

core/src/main/resources/lib/layout/layout.jelly

@@ -58,7 +58,7 @@ THE SOFTWARE.
 (The permissions will be checked against the "it" object.)
 </st:attribute>
 <st:attribute name="type" use="optional">
- Available values: two-column (by default), one-column (full-width size) or full-screen (since 2.53).


The type attribute now only works if it's set to full-screen.

janfaracik · 2023-12-20T12:21:50Z

war/src/main/scss/components/_section.scss

@@ -3,7 +3,6 @@
 .jenkins-section {
 border-top: 2px solid var(--panel-border-color);
 padding: var(--section-padding) 0 0 0;
- max-width: 1800px;


Simplified the styling, let's just fill the available width and let the parent container control how wide that can be.

daniel-beck · 2023-12-21T09:04:36Z

core/src/main/resources/lib/layout/layout.jelly

- <j:set var="mode" value="side-panel" />
- <d:invokeBody />


Breaks all context menus, see ModelObjectWithContextMenu.ContextMenu#from.

Thanks! Fixed it and added a comment to side-panel.jelly

daniel-beck · 2023-12-21T09:05:09Z

This PR looks a lot like

For new APIs and extension points, there is a link to at least one consumer.

would apply (on a UI level), but I don't see consumers for this change?

github-actions · 2024-01-25T00:19:20Z

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

janfaracik · 2024-03-18T21:24:17Z

This PR looks a lot like

For new APIs and extension points, there is a link to at least one consumer.

would apply (on a UI level), but I don't see consumers for this change?

I've added some guidance on using the new layout system in the Design Library - jenkinsci/design-library-plugin#315 - intending to update the UI of the plugin itself to use a multi column layout, however I haven't had the time recently.

github-actions · 2024-04-04T16:37:21Z

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

github-actions · 2024-04-08T15:31:37Z

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

Init

678ffb5

janfaracik commented Dec 20, 2023

View reviewed changes

Fix HTMLUnit issue

e6679d9

daniel-beck requested changes Dec 21, 2023

View reviewed changes

janfaracik added 6 commits December 21, 2023 09:17

Merge branch 'master' into rework-layout-jelly-2

a98361d

Update _layout-commons.scss

3682c61

Fix model-links

3f56e00

Move ID position for consistency

cedbca5

Merge branch 'master' into rework-layout-jelly-2

1462b1f

Merge branch 'master' into rework-layout-jelly-2

9b44aa7

github-actions bot added the unresolved-merge-conflict There is a merge conflict with the target branch. label Jan 25, 2024

Merge branch 'master' into rework-layout-jelly-2

e3c7fdc

github-actions bot removed the unresolved-merge-conflict There is a merge conflict with the target branch. label Mar 18, 2024

Update _layout-commons.scss

99e5387

janfaracik mentioned this pull request Mar 18, 2024

Add supporting docs for 'Allow for more flexible layouts in layout.jelly #8794' jenkinsci/design-library-plugin#315

Open

Remove unintended badge change

d5d1eb2

github-actions bot added the unresolved-merge-conflict There is a merge conflict with the target branch. label Apr 4, 2024

Merge branch 'master' into rework-layout-jelly-2

7326f43

github-actions bot added unresolved-merge-conflict There is a merge conflict with the target branch. and removed unresolved-merge-conflict There is a merge conflict with the target branch. labels Apr 4, 2024

Merge branch 'master' into rework-layout-jelly-2

36abe14

github-actions bot removed the unresolved-merge-conflict There is a merge conflict with the target branch. label Apr 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow for more flexible layouts in `layout.jelly` #8794

Allow for more flexible layouts in `layout.jelly` #8794

janfaracik commented Dec 20, 2023 •

edited

Submitter checklist

Maintainer checklist

janfaracik Dec 20, 2023

janfaracik Dec 20, 2023

janfaracik Dec 20, 2023

janfaracik Dec 20, 2023

daniel-beck Dec 21, 2023 •

edited

janfaracik Dec 21, 2023

daniel-beck commented Dec 21, 2023

github-actions bot commented Jan 25, 2024

janfaracik commented Mar 18, 2024

github-actions bot commented Apr 4, 2024

github-actions bot commented Apr 8, 2024

Allow for more flexible layouts in layout.jelly #8794

Are you sure you want to change the base?

Allow for more flexible layouts in layout.jelly #8794

Conversation

janfaracik commented Dec 20, 2023 • edited

Testing done

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

janfaracik Dec 20, 2023

Choose a reason for hiding this comment

janfaracik Dec 20, 2023

Choose a reason for hiding this comment

janfaracik Dec 20, 2023

Choose a reason for hiding this comment

janfaracik Dec 20, 2023

Choose a reason for hiding this comment

daniel-beck Dec 21, 2023 • edited

Choose a reason for hiding this comment

janfaracik Dec 21, 2023

Choose a reason for hiding this comment

daniel-beck commented Dec 21, 2023

github-actions bot commented Jan 25, 2024

janfaracik commented Mar 18, 2024

github-actions bot commented Apr 4, 2024

github-actions bot commented Apr 8, 2024

Allow for more flexible layouts in `layout.jelly` #8794

Allow for more flexible layouts in `layout.jelly` #8794

janfaracik commented Dec 20, 2023 •

edited

daniel-beck Dec 21, 2023 •

edited