From 5299f70afe0e7f17faeb7d231ab32a7cde3aa61c Mon Sep 17 00:00:00 2001
From: Alexander <2487708+alexanderkaiser@users.noreply.github.com>
Date: Sun, 9 Jul 2023 11:22:28 +0200
Subject: [PATCH] feat: Add copy-button for report-data card-body (#3175)

Co-authored-by: Alexander Kaiser <alexander.kaiser@gematik.de>
---
 .../freemarker/components/report-data.ftl        | 16 +++++++++++++++-
 .../main/resources/report-resources/css/core.css |  8 ++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/serenity-report-resources/src/main/resources/freemarker/components/report-data.ftl b/serenity-report-resources/src/main/resources/freemarker/components/report-data.ftl
index af535e4619..894b1264be 100644
--- a/serenity-report-resources/src/main/resources/freemarker/components/report-data.ftl
+++ b/serenity-report-resources/src/main/resources/freemarker/components/report-data.ftl
@@ -1,4 +1,13 @@
 <#macro reportData(reportData, number) >
+
+    <script>
+        function copyContent(id) {
+            console.log("copy content of " + id)
+            const content = document.getElementById(id).innerText
+            navigator.clipboard.writeText(content);
+        }
+    </script>
+
     <#if reportData.contents?has_content>
                 <a name="${reportData.id}"></a>
                 <span>
@@ -13,9 +22,14 @@
                         <div class="card">
                             <h4 class="card-header" id="restModalLabel">
                                 ${reportData.title}
+                            <a role="button" class="btn btn-xs copy-button" onclick="copyContent('reportDataContent-${number}')">
+                                <i class="bi bi-clipboard"></i>&nbsp;Copy
+                            </a>
                             </h4>
                         </div>
-                        <div class="card-body"><pre>${(formatter.renderText(reportData.contents))!}</pre></div>
+                        <div class="card-body">
+                            <pre id="reportDataContent-${number}">${(formatter.renderText(reportData.contents))!}</pre>
+                        </div>
                     </div>
                 </div>
     <#else>
diff --git a/serenity-report-resources/src/main/resources/report-resources/css/core.css b/serenity-report-resources/src/main/resources/report-resources/css/core.css
index 1171e854a9..4b0777379b 100644
--- a/serenity-report-resources/src/main/resources/report-resources/css/core.css
+++ b/serenity-report-resources/src/main/resources/report-resources/css/core.css
@@ -2546,6 +2546,14 @@ div.scenario-text:empty {
     background-color: rgba(238,0,0,0.3);
 }
 
+.copy-button {
+    float: right;
+    margin-top: 4px !important;
+    margin-bottom: 4px !important;
+    margin-right: 5px; !important;
+    font-size: 1em;
+}
+
 .missing-scenario-warning {
     color:#ff1631
 }