Refine content and appearance of the 'Edit View' screen

core/src/main/resources/hudson/model/ListView/configure-entries-resources.js

@@ -1,5 +1,8 @@
 Behaviour.specify("#recurse", "ListView", 0, function (e) {
-  var nestedElements = document.querySelectorAll("SPAN.nested");
+  // SPAN.nested is kept for backwards compatability
+  var nestedElements = document.querySelectorAll(
+    ".listview-jobs--nested, SPAN.nested",
+  );
   e.onclick = function () {
     nestedElements.forEach(function (el) {
       el.style.display = e.checked ? "" : "none";

core/src/main/resources/hudson/model/ListView/configure-entries.jelly

@@ -27,49 +27,51 @@ 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" xmlns:i="jelly:fmt">
 <st:adjunct includes="hudson.model.ListView.configure-entries-resources" />
+  <f:section title="${%Jobs}" description="${%jobs.description}">
+    <f:entry field="recurse">
+      <f:checkbox title="${%Recurse in subfolders}" id="recurse" />
+    </f:entry>
 
- <f:section title="${%Job Filters}">
-
-  <f:entry field="recurse">
-    <f:checkbox title="${%Recurse in subfolders}" id="recurse" />
-  </f:entry>
-
-  <f:entry title="${%Jobs}">
-    <div class="listview-jobs">
-      <j:forEach var="job" items="${h.getAllTopLevelItems(it.ownerItemGroup)}">
-        <j:set var="spanClass" value=""/>
-        <j:set var="spanStyle" value=""/>
-        <j:if test="${job.parent!=it.ownerItemGroup}">
-          <j:set var="spanClass" value="nested"/>
-          <j:set var="spanStyle" value="${it.recurse?'':'display:none'}"/>
+    <d:taglib uri="local">
+      <d:tag name="checkbox">
+        <f:checkbox name="item_${job.getRelativeNameFromGroup(it.ownerItemGroup)}"
+                    checked="${it.jobNamesContains(job)}"
+                    title="${job.displayName}"
+                    tooltip="${!job.fullName.equals(job.displayName) ? job.fullName : null}"
+                    json="true" />
+        <j:if test="${job.getItems().size() gt 0}">
+          <div class="listview-jobs listview-jobs--nested" style="${it.recurse ? '' : 'display: none'}">
+            <j:forEach var="job" items="${job.getItems()}">
+              <local:checkbox xmlns:local="local" job="${job}" />
+            </j:forEach>
+          </div>
         </j:if>
-        <span class="${spanClass}" style="${spanStyle}">
-          <f:checkbox name="item_${job.getRelativeNameFromGroup(it.ownerItemGroup)}" checked="${it.jobNamesContains(job)}" title="${h.getRelativeDisplayNameFrom(job,it.ownerItemGroup)}" tooltip="${job.fullName}" json="true"/>
-          <br/>
-        </span>
-      </j:forEach>
-    </div>
-  </f:entry>
+      </d:tag>
+    </d:taglib>
 
-  <f:optionalBlock name="useincluderegex" title="${%Use a regular expression to include jobs into the view}"
-                   checked="${it.includeRegex != null}" help="/help/view-config/includeregex.html">
-    <f:entry title="${%Regular expression}">
-      <f:textbox name="includeRegex" field="includeRegex" />
+    <f:entry>
+      <div class="listview-jobs" xmlns:local="local">
+        <j:forEach var="job" items="${it.ownerItemGroup.getItems()}">
+          <local:checkbox job="${job}" />
+        </j:forEach>
+      </div>
     </f:entry>
-  </f:optionalBlock>
+
+    <f:optionalBlock name="useincluderegex" title="${%Use a regular expression to include jobs into the view}"
+                     checked="${it.includeRegex != null}" help="/help/view-config/includeregex.html">
+      <f:entry title="${%Regular expression}">
+        <f:textbox name="includeRegex" field="includeRegex" />
+      </f:entry>
+    </f:optionalBlock>
+  </f:section>
 
   <j:if test="${it.hasJobFilterExtensions()}">
-   <f:block>
+    <f:section title="${%Filters}" description="${%filters.description}">
       <f:repeatableHeteroProperty field="jobFilters" hasHeader="true" addCaption="${%Add Job Filter}" />
-   </f:block>
+    </f:section>
   </j:if>
 
+  <f:section title="${%Columns}" description="${%columns.description}">
+    <f:repeatableHeteroProperty field="columns" hasHeader="true" addCaption="${%Add column}"/>
   </f:section>
-
-  <f:section title="${%Columns}">
-    <f:block>
-      <f:repeatableHeteroProperty field="columns" hasHeader="true" addCaption="${%Add column}"/>
-    </f:block>
-  </f:section>
-
 </j:jelly>

core/src/main/resources/hudson/model/ListView/configure-entries.properties

@@ -0,0 +1,3 @@
+jobs.description=Select the jobs to show in this view.
+filters.description=Filter the jobs that show in this view based on specific conditions.
+columns.description=Select the columns in this view.

core/src/main/resources/hudson/model/View/configure.jelly

@@ -29,32 +29,43 @@ THE SOFTWARE.
 <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" xmlns:i="jelly:fmt">
   <l:layout title="${%Edit View}" permission="${it.CONFIGURE}">
     <st:include page="sidepanel.jelly" />
-    <l:breadcrumb title="${%Configure}" />
+
+    <l:breadcrumb title="${title}" />
+
     <l:main-panel>
+      <l:app-bar title="${title}" />
+
       <!-- to make the form field binding work -->
       <j:set var="instance" value="${it}" />
       <j:set var="descriptor" value="${it.descriptor}" />
 
-      <f:form method="post" action="configSubmit" name="viewConfig">
-        <f:entry title="${%Name}">
-          <f:textbox name="name" value="${it.viewName}" autocomplete="on"/>
-        </f:entry>
-        <f:entry field="description" title="${%Description}" help="/help/view-config/description.html">
-          <f:textarea codemirror-mode="${app.markupFormatter.codeMirrorMode}" codemirror-config="${app.markupFormatter.codeMirrorConfig}" previewEndpoint="/markupFormatter/previewDescription"/>
-        </f:entry>
-        <f:entry field="filterQueue" help="/help/view-config/filter-queue.html">
-            <f:checkbox title="${%Filter build queue}"/>
-        </f:entry>
-        <f:entry field="filterExecutors" help="/help/view-config/filter-executors.html">
-            <f:checkbox title="${%Filter build executors}"/>
-        </f:entry>
+      <f:form method="post" action="configSubmit" name="viewConfig" class="jenkins-form">
+        <f:section>
+          <f:entry title="${%Name}">
+            <f:textbox name="name" value="${it.viewName}" autocomplete="on" />
+          </f:entry>
+          <f:entry field="description" title="${%Description}" description="${%description.description}">
+            <f:textarea codemirror-mode="${app.markupFormatter.codeMirrorMode}" codemirror-config="${app.markupFormatter.codeMirrorConfig}" previewEndpoint="/markupFormatter/previewDescription"/>
+          </f:entry>
+        </f:section>
 
         <!-- subtypes can put entries here. -->
         <st:include page="configure-entries.jelly" optional="true" />
 
         <!-- view property configurations -->
         <f:descriptorList descriptors="${it.getVisiblePropertyDescriptors()}" instances="${it.properties}" />
 
+        <f:section title="${%Widgets}" description="${%widgets.description}">
+          <f:entry field="filterQueue">
+            <f:checkbox title="${%Filter build queue}"
+                        description="${%widgets.filterqueue.description}" />
+          </f:entry>
+          <f:entry field="filterExecutors">
+            <f:checkbox title="${%Filter build executors}"
+                        description="${%widgets.filterexecutors.description}" />
+          </f:entry>
+        </f:section>
+
         <f:bottomButtonBar>
           <f:submit value="${%OK}" />
           <f:apply value="${%Apply}"/>

core/src/main/resources/hudson/model/View/configure.properties

@@ -0,0 +1,4 @@
+description.description=Describe the purpose of this view.
+widgets.description=Customize the widgets that show in this view.
+widgets.filterqueue.description=If checked, only jobs in this view will be shown in the queue.
+widgets.filterexecutors.description=If checked, only those build executors will be shown that could execute the jobs in this view.

core/src/main/resources/lib/form/checkbox.jelly

@@ -69,6 +69,9 @@ THE SOFTWARE.
     <st:attribute name="tooltip">
       Used as tooltip of the checkbox, and, if a title is specified, of the title
     </st:attribute>
+    <st:attribute name="description" since="TODO">
+      Optional description for the checkbox
+    </st:attribute>
   </st:documentation>
   <f:prepareDatabinding />
   <j:set var="name" value="${attrs.name ?: '_.'+attrs.field}"/>
@@ -87,6 +90,11 @@ THE SOFTWARE.
     <label class="attach-previous ${attrs.title == null ? 'js-checkbox-label-empty' : ''}"
            title="${attrs.tooltip}">${attrs.title}</label>
   </span>
+  <j:if test="${attrs.description != null}">
+    <div class="jenkins-checkbox__description">
+      ${attrs.description}
+    </div>
+  </j:if>
   <j:if test="${customizedFields != null and attrs.field != null and value != default}">
     <j:mute>${customizedFields.add(name)}</j:mute>
   </j:if>

war/src/main/scss/base/_style.scss

@@ -406,14 +406,6 @@ img.icon-help {
   vertical-align: text-top;
 }
 
-/* ============================ list view entries ======================== */
-div.listview-jobs {
-  max-height: 300px;
-  overflow: auto;
-  margin-left: -15px;
-  padding-left: 15px;
-}
-
 /* ============================ health report hover ========================== */
 
 .healthReport a {

war/src/main/scss/pages/_dashboard.scss

@@ -180,3 +180,17 @@ $min-button-size: 36px;
     height: 1rem;
   }
 }
+
+div.listview-jobs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+
+  &--nested {
+    display: flex;
+    flex-direction: column;
+    border-left: 2px solid color-mix(in sRGB, var(--input-border), transparent);
+    margin-left: 10px;
+    padding-left: 22px;
+  }
+}