move the add/edit description button to the app-bar

So far rhe add/edit description button is rendered as button on its own
line to the far right. This leads to additional space the description or
the title and the following content.

This change moves the add/edit description button to the app-bar where
applicable (jobs, runs, computers, users). For views it stays as it is
as they don't have title/app-bar. One also can't just allow to change
the description via the configure page as the All View has no configure
page.

core/src/main/resources/hudson/model/Computer/index-top.jelly

@@ -1,5 +1,5 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:t="/lib/hudson">
   <!-- Node description -->
-  <t:editableDescription permission="${it.CONFIGURE}" description="${it.node.nodeDescription}" submissionUrl="submitDescription" />
+  <t:editableDescription permission="${it.CONFIGURE}" description="${it.node.nodeDescription}" hideButton="true" />
 </j:jelly>

core/src/main/resources/hudson/model/Computer/index.jelly

@@ -29,6 +29,7 @@ THE SOFTWARE.
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
       <l:app-bar title="${it.caption}">
+        <t:editDescriptionButton permission="${it.CONFIGURE}"/>
         <j:if test="${it.manualLaunchAllowed}">
           <st:include from="${it.launcher}" page="app-bar-controls.jelly" optional="true"/>
         </j:if>

core/src/main/resources/hudson/model/Job/index.jelly

@@ -40,6 +40,9 @@ THE SOFTWARE.
             <l:breakable value="${it.displayName}"/>
           </h1>
         </div>
+        <div class="jenkins-app-bar__controls">
+          <t:editDescriptionButton permission="${it.UPDATE}"/>
+        </div>
       </div>
 
       <j:if test="${(it.fullName!=it.fullDisplayName) and (it.class.name!='hudson.matrix.MatrixConfiguration')}"> <!-- TODO rather check for TopLevelItem (how to do this from Jelly?) -->
@@ -52,7 +55,7 @@ THE SOFTWARE.
           </j:otherwise>
         </j:choose>
       </j:if>
-      <t:editableDescription permission="${it.CONFIGURE}"/>
+      <t:editableDescription permission="${it.CONFIGURE}" hideButton="true"/>
 
       <st:include page="jobpropertysummaries.jelly" />
       <!-- inject main part here -->

core/src/main/resources/hudson/model/Label/index.jelly

@@ -28,12 +28,13 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
-      <h1>
-        ${it.name}
-      </h1>
-
+      <l:app-bar title="${it.name}">
+        <j:if test="${it.atom}">
+          <t:editDescriptionButton permission="${app.ADMINISTER}"/>
+        </j:if>
+      </l:app-bar>
       <j:if test="${it.atom}">
-        <t:editableDescription permission="${app.ADMINISTER}"/>
+        <t:editableDescription permission="${app.ADMINISTER}" hideButton="true"/>
       </j:if>
 
       <j:forEach var="a" items="${it.allActions}">

core/src/main/resources/hudson/model/Run/index.jelly

@@ -30,10 +30,20 @@ THE SOFTWARE.
 
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
-      <div style="float:right; z-index: 1; position:relative; margin-left: 1em">
+      <j:set var="controls">
+        <t:editDescriptionButton permission="${it.UPDATE}"/>
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
+      </j:set>
+
+      <t:buildCaption controls="${controls}">${it.displayName} (<i:formatDate value="${it.timestamp.time}" type="both" dateStyle="medium" timeStyle="medium"/>)</t:buildCaption>
+
+      <div>
+        <t:editableDescription permission="${it.UPDATE}" hideButton="true"/>
+      </div>
+
+      <div style="float:right; z-index: 1; position:relative; margin-left: 1em">
         <div style="margin-top:1em">
           ${%startedAgo(it.timestampString)}
         </div>
@@ -48,11 +58,6 @@ THE SOFTWARE.
         </div>
       </div>
 
-      <t:buildCaption>${it.displayName} (<i:formatDate value="${it.timestamp.time}" type="both" dateStyle="medium" timeStyle="medium"/>)</t:buildCaption>
-
-      <div>
-        <t:editableDescription permission="${it.UPDATE}" />
-      </div>
 
       <table>
         <t:artifactList build="${it}" caption="${%Build Artifacts}"

core/src/main/resources/hudson/model/Run/logKeep.jelly

@@ -28,7 +28,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" xmlns:i="jelly:fmt">
   <j:if test="${it.canToggleLogKeep()}">
-    <form method="post" action="toggleLogKeep" style="margin-top:1em">
+    <form method="post" action="toggleLogKeep">
       <j:if test="${it.keepLog and h.hasPermission(it,it.DELETE)}">
         <f:submit value="${%Don't keep this build forever}" primary="false" />
       </j:if>

core/src/main/resources/hudson/model/User/index.jelly

@@ -27,13 +27,21 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
     <l:main-panel>
-      <h1>
-        <span class="icon-lg">
-          <l:icon src="${h.getUserAvatar(it, '48x48')}" />
-        </span>
-        ${it.fullName}
-      </h1>
-      <t:editableDescription permission="${app.ADMINISTER}" />
+      <div class="jenkins-app-bar">
+        <div class="jenkins-app-bar__content jenkins-build-caption" data-status-url="${rootURL}/${it.url}statusIcon">
+          <h1>
+            <span class="icon-lg">
+              <l:icon src="${h.getUserAvatar(it, '48x48')}"/>
+            </span>
+            ${it.fullName}
+          </h1>
+        </div>
+        <div class="jenkins-app-bar__controls">
+          <t:editDescriptionButton permission="${app.ADMINISTER}"/>
+        </div>
+      </div>
+
+      <t:editableDescription permission="${app.ADMINISTER}" hideButton="true"/>
       <div>
         ${%Jenkins User ID}: ${it.id}
       </div>

core/src/main/resources/lib/hudson/buildCaption.jelly

@@ -27,6 +27,11 @@ 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">
+  <st:documentation>
+    <st:attribute name="controls">
+      Optional field to set controls in the app bar
+    </st:attribute>
+  </st:documentation>
   <div class="jenkins-app-bar">
     <div class="jenkins-app-bar__content jenkins-build-caption" data-status-url="${rootURL}/${it.url}statusIcon">
       <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}"
@@ -47,6 +52,7 @@ THE SOFTWARE.
         </div>
       </j:if>
       <st:adjunct includes="lib.hudson.build-caption"/>
+      <j:out value="${attrs.controls}" />
     </div>
   </div>
 </j:jelly>

core/src/main/resources/lib/hudson/editDescriptionButton.jelly

@@ -0,0 +1,30 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+    <st:documentation>
+        <st:attribute name="permission" use="required">
+            If the current user doesn't have this permission, the description
+            is not editable.
+        </st:attribute>
+        <st:attribute name="description">
+            Optional value of the description. If not specified, will use '${it.description}'.
+        </st:attribute>
+        <st:attribute name="submissionUrl">
+            Optional submission URL. If not specified, will use 'submitDescription'.
+        </st:attribute>
+    </st:documentation>
+    <j:set var="actualDescription" value="${description}" defaultValue="${it.description}"/>
+    <l:hasPermission permission="${permission}">
+        <st:adjunct includes="lib.hudson.editable-description"/>
+        <a class="jenkins-button jenkins-button--tertiary" id="description-link" href="editDescription" data-description="${actualDescription}" data-url="${submissionUrl}">
+            <l:icon src="symbol-edit" />
+            <j:choose>
+                <j:when test="${empty(actualDescription)}">
+                    ${%add description}
+                </j:when>
+                <j:otherwise>
+                    ${%edit description}
+                </j:otherwise>
+            </j:choose>
+        </a>
+    </l:hasPermission>
+</j:jelly>

core/src/main/resources/lib/hudson/editable-description.js

@@ -4,6 +4,7 @@
     let descriptionLink = document.querySelector("#description-link");
     descriptionLink.addEventListener("click", function (e) {
       e.preventDefault();
+      descriptionLink.classList.add("jenkins-hidden");
       let url = descriptionLink.getAttribute("data-url");
       let description = descriptionLink.getAttribute("data-description");
       return replaceDescription(description, url);

core/src/main/resources/lib/hudson/editableDescription.jelly

@@ -38,30 +38,23 @@ THE SOFTWARE.
     <st:attribute name="submissionUrl">
       Optional submission URL. If not specified, will use 'submitDescription'.
     </st:attribute>
+    <st:attribute name="hideButton">
+      Hide the add/edit description button. To be used when the button is provided via the app bar.
+    </st:attribute>
   </st:documentation>
 
   <j:set var="actualDescription" value="${description}" defaultValue="${it.description}"/>
+  <j:set var="hideDescriptionButton" value="${hideButton}" defaultValue="false"/>
 
-  <div id="description" class="jenkins-!-margin-bottom-0">
+  <div id="description" class="jenkins-!-margin-bottom-${hideButton?'3':'0'}">
     <div>
       <j:out value="${actualDescription!=null ? app.markupFormatter.translate(actualDescription) : ''}" />
     </div>
 
-    <l:hasPermission permission="${permission}">
+    <j:if test="${!hideDescriptionButton}">
       <div class="jenkins-buttons-row jenkins-buttons-row--invert">
-        <st:adjunct includes="lib.hudson.editable-description"/>
-        <a class="jenkins-button jenkins-button--tertiary" id="description-link" href="editDescription" data-description="${actualDescription}" data-url="${submissionUrl}">
-          <l:icon src="symbol-edit" />
-          <j:choose>
-            <j:when test="${empty(actualDescription)}">
-              ${%add description}
-            </j:when>
-            <j:otherwise>
-              ${%edit description}
-            </j:otherwise>
-          </j:choose>
-        </a>
+        <t:editDescriptionButton permission="${permission}" description="${actualDescription}" submissionUrl="${submissionUrl}"/>
       </div>
-    </l:hasPermission>
+    </j:if>
   </div>
 </j:jelly>

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1901,8 +1901,11 @@ function xor(a, b) {
 // eslint-disable-next-line no-unused-vars
 function replaceDescription(initialDescription, submissionUrl) {
   var d = document.getElementById("description");
-  d.firstElementChild.nextElementSibling.innerHTML =
-    "<div class='jenkins-spinner'></div>";
+  let button = d.firstElementChild.nextElementSibling;
+  if (button !== null) {
+    d.firstElementChild.nextElementSibling.innerHTML =
+      "<div class='jenkins-spinner'></div>";
+  }
   let parameters = {};
   if (initialDescription !== null && initialDescription !== "") {
     parameters["description"] = initialDescription;