Add copy-to-clipboard button to the build console output (#8960)

* Add copy-to-clipboard button to the build console output * Fix copy button did not work with progressive output * Use getElementById instead of querySelector * Update copyButton documentation * Update core/src/main/resources/lib/layout/copyButton.jelly Co-authored-by: Alexander Brandes <[email protected]> --------- Co-authored-by: Alexander Brandes <[email protected]> Co-authored-by: Alexander Brandes <[email protected]>
jenkinsci · Mar 5, 2024 · b0a251a · b0a251a
1 parent 13c86ee
commit b0a251a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/core/src/main/resources/hudson/model/Run/console.jelly b/core/src/main/resources/hudson/model/Run/console.jelly
@@ -33,7 +33,10 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
      <l:breadcrumb title="${%Console Output}" />
     <l:main-panel>
-      <t:buildCaption>${%Console Output}</t:buildCaption>
+      <t:buildCaption>
+        ${%Console Output}
+        <l:copyButton message="${%successfullyCopied}" tooltip="${%clickToCopy}" ref="out"/>
+      </t:buildCaption>
       <j:set var="threshold" value="${h.getSystemProperty('hudson.consoleTailKB')?:'150'}" />
       <!-- Show at most last 150KB (can override with system property) unless consoleFull is set -->
       <j:set var="offset" value="${empty(consoleFull) ? it.logText.length()-threshold*1024 : 0}" />
@@ -60,7 +63,7 @@ THE SOFTWARE.
         </j:when>
         <!-- output is completed now. -->
         <j:otherwise>
-          <pre class="console-output">
+          <pre class="console-output" id="out">
             <st:getOutput var="output" />
             <j:whitespace>${it.writeLogTo(offset,output)}</j:whitespace>
           </pre>

diff --git a/core/src/main/resources/hudson/model/Run/console.properties b/core/src/main/resources/hudson/model/Run/console.properties
@@ -21,3 +21,5 @@
 # THE SOFTWARE.
 
 skipSome=Skipping {0,number,integer} KB.. <a href="{1}">Full Log</a>
+clickToCopy=Click to copy
+successfullyCopied=Copied to clipboard
diff --git a/core/src/main/resources/lib/layout/copyButton.jelly b/core/src/main/resources/lib/layout/copyButton.jelly
@@ -26,7 +26,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:i="jelly:fmt" xmlns:x="jelly:xml">
   <st:documentation>
-    Button that copies text into the user's clipboard upon click
+    Button that copies text into the user's clipboard upon click, either <code>text</code> or <code>ref</code> is required.
 
     <st:attribute name="text" use="required">
       Text to be copied into the clipboard.
@@ -43,11 +43,16 @@ THE SOFTWARE.
     <st:attribute name="clazz">
       Additional CSS class names
     </st:attribute>
+    <st:attribute name="ref" use="required">
+      The id of the target element to be copied
+      @since TODO
+    </st:attribute>
   </st:documentation>
 
   <!-- 'copy-button' class is for backwards compatability -->
   <button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--tertiary' : ''} jenkins-copy-button ${attrs.clazz}"
           text="${attrs.text}"
+          ref="${attrs.ref}"
           message="${attrs.message ?: '%Copied'}"
           tooltip="${attrs.tooltip ?: '%Copy'}"
           type="button">

diff --git a/core/src/main/resources/lib/layout/copyButton/copyButton.js b/core/src/main/resources/lib/layout/copyButton/copyButton.js
@@ -5,9 +5,18 @@ Behaviour.specify(
   function (copyButton) {
     copyButton.addEventListener("click", () => {
       if (isSecureContext) {
+        var text = copyButton.getAttribute("text");
+        if (copyButton.hasAttribute("ref")) {
+          var ref = copyButton.getAttribute("ref");
+          var target = document.getElementById(ref);
+          if (target) {
+            text = target.innerText;
+          }
+        }
+
         // Copy the text to the clipboard
         navigator.clipboard
-          .writeText(copyButton.getAttribute("text"))
+          .writeText(text)
           .then(() => {
             // Show the completion message
             hoverNotification(copyButton.getAttribute("message"), copyButton);