Merge pull request #109 from Honny1/clipboard-rule-ids

Add a copy to the clipboard for the rule ID field
OpenSCAP · Sep 2, 2022 · e3685fa · e3685fa
2 parents 1bfdf13 + dab9f4b
commit e3685fa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/openscap_report/html_report/templates/js/interactive_script.js b/openscap_report/html_report/templates/js/interactive_script.js
@@ -118,4 +118,10 @@ function show_rule_detail(self) { // eslint-disable-line no-unused-vars
         ".pf-c-table__expandable-row"
     );
     element_to_show.classList.toggle('pf-m-expanded');
-}
+}
+
+const selector = ".pf-c-clipboard-copy__text";
+document.querySelectorAll("#copy").forEach(el => el.addEventListener('click', () => {
+    const el_with_text = el.parentElement.parentElement.parentElement.querySelector(selector);
+    navigator.clipboard.writeText(el_with_text.textContent);
+}));
diff --git a/openscap_report/html_report/templates/rule_detail.html b/openscap_report/html_report/templates/rule_detail.html
@@ -10,7 +10,18 @@
                 <th class="pf-m-fit-content" role="rowheader" scope="row"><p class="pf-c-table__text"><b>Rule ID:</b></p></th>
                 <td role="cell">
                     <div class="pf-l-flex pf-m-column"><div class="pf-l-flex__item">
-                    <p class="pf-c-table__text">{{ rule.rule_id }}</p></div></div>
+                    <p class="pf-c-table__text">
+                        <div class="pf-c-clipboard-copy pf-m-inline">
+                            <span class="pf-c-clipboard-copy__text">{{ rule.rule_id }}</span>
+                            <span class="pf-c-clipboard-copy__actions">
+                                <span class="pf-c-clipboard-copy__actions-item">
+                                    <button id="copy" class="pf-c-button pf-m-plain" type="button" aria-label="Copy to clipboard">
+                                        <i class="fas fa-copy" aria-hidden="true"></i>
+                                    </button>
+                                </span>
+                            </span>
+                        </div>
+                    </p></div></div>
                 </td>
             </tr>
             <tr role="row">