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 'On this page' side-panel and 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!

timja · 2024-05-21T07:09:38Z

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.

possible to update the UI to use it? should really have a consumer before shipping something like this

janfaracik · 2024-05-21T08:18:44Z

possible to update the UI to use it? should really have a consumer before shipping something like this

Will do 👍

github-actions · 2024-05-27T15:09:07Z

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

janfaracik · 2024-06-08T10:43:46Z

possible to update the UI to use it? should really have a consumer before shipping something like this

Updated the Design Library with an additional side-panel which gives an overview of the page jenkinsci/design-library-plugin#315

github-actions · 2024-06-11T01:10:25Z

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

daniel-beck · 2024-06-25T10:06:24Z

possible to update the UI to use it? should really have a consumer before shipping something like this

Updated the Design Library with an additional side-panel which gives an overview of the page jenkinsci/design-library-plugin#315

I don't think the UI demo plugin qualifies as a consumer that would validate that this change does anything useful.

github-actions · 2024-07-13T11:43:49Z

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 'On this page' side-panel and 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

NotMyFault requested a review from daniel-beck May 12, 2024 11:01

janfaracik added 2 commits May 18, 2024 09:21

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

b57cfc9

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

3e0b49e

timja added the rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted label May 21, 2024

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

0e477be

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

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

d331b27

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

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

588f459

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

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

f1daa7e

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

timja added the web-ui The PR includes WebUI changes which may need special expertise label Jun 19, 2024

daniel-beck added the security-approved @jenkinsci/core-security-review reviewed this PR for security issues label Jun 25, 2024

github-actions bot added the unresolved-merge-conflict There is a merge conflict with the target branch. label Jul 13, 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

Loading

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

Loading

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

timja commented May 21, 2024

janfaracik commented May 21, 2024

github-actions bot commented May 27, 2024

janfaracik commented Jun 8, 2024

github-actions bot commented Jun 11, 2024

daniel-beck commented Jun 25, 2024

github-actions bot commented Jul 13, 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 Loading

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 Loading

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

timja commented May 21, 2024

janfaracik commented May 21, 2024

github-actions bot commented May 27, 2024

janfaracik commented Jun 8, 2024

github-actions bot commented Jun 11, 2024

daniel-beck commented Jun 25, 2024

github-actions bot commented Jul 13, 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

Loading

daniel-beck Dec 21, 2023 •

edited

Loading