Add the ability to "Copy to Clipboard" in the UI #1120 (#1627)

Signed-off-by: tdruez <tdruez@nexb.com>

Author: tdruez

scancodeio/static/main.css

@@ -32,6 +32,8 @@
   --nexb-orange: 247, 191, 60;
   --alt-orange-rgb: 255, 153, 112;
   --hl-gray-09: #24292e;
+  --custom-tooltip-bg-rgb: 54, 59, 65;
+  --custom-tooltip-padding: 0.35em 0.75em;
 }
 .theme-dark,
 [data-theme="dark"] {
@@ -220,12 +222,39 @@ a[target="_blank"] .fa-up-right-from-square {
 .is-wider-x2 .dropdown-menu {
   min-width: 24rem;
 }
+.copy-to-clipboard {
+  position: relative;
+}
+.copy-tooltip {
+  position: absolute;
+  background-color: rgb(var(--custom-tooltip-bg-rgb));
+  color: var(--bulma-white);
+  padding: var(--custom-tooltip-padding);
+  border-radius: var(--bulma-radius-small);
+  font-size: var(--bulma-size-small);
+  width: max-content;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  text-align: center;
+  word-wrap: break-word;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.copy-tooltip.visible {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.3s ease, visibility 0s linear 0s;
+}
 .is-tooltip .dropdown-content {
-  background-color: #363636;
+  background-color: rgb(var(--custom-tooltip-bg-rgb));
+  color: var(--bulma-white);
 }
 .is-tooltip .dropdown-item {
   font-weight: normal;
-  color: #fff;
+  color: var(--bulma-white);
 }
 .dropdown.is-hoverable.is-disabled:hover .dropdown-menu {
   display: none;

scancodeio/static/main.js

@@ -356,6 +356,54 @@ class PaginationNavigator {
   }
 }
 
+// Copy to Clipboard (using `navigator.clipboard`)
+
+function enableCopyToClipboard(selector) {
+  const elements = document.querySelectorAll(selector);
+
+  elements.forEach(element => {
+    element.addEventListener("click", async () => {
+      let textToCopy = "";
+
+      // Determine the text to copy
+      if (element.hasAttribute("data-copy")) {
+        textToCopy = element.getAttribute("data-copy"); // From a custom attribute
+      } else if (element.value) {
+        textToCopy = element.value; // From an input field
+      } else {
+        textToCopy = element.innerText.trim(); // From the element's text
+      }
+
+      // Default tooltip text or custom text from data-copy-feedback attribute
+      const tooltipText = element.getAttribute('data-copy-feedback') || 'Copied!';
+
+      if (textToCopy) {
+        try {
+          await navigator.clipboard.writeText(textToCopy).then(() => {
+            // Create a tooltip
+            const tooltip = document.createElement('span');
+            tooltip.classList.add('copy-tooltip');
+            tooltip.textContent = tooltipText;
+            element.appendChild(tooltip);
+
+            // Show the tooltip
+            setTimeout(() => {
+              tooltip.classList.add('visible');
+            }, 0); // Add class immediately to trigger CSS transition
+
+            // Remove the tooltip after 1.5 seconds
+            setTimeout(() => {
+              element.removeChild(tooltip);
+            }, 1500);
+          });
+        } catch (err) {
+          console.error("Clipboard copy failed:", err);
+        }
+      }
+    });
+  });
+}
+
 document.addEventListener('DOMContentLoaded', function () {
 
   setupOpenModalButtons();
@@ -365,6 +413,7 @@ document.addEventListener('DOMContentLoaded', function () {
   setupTextarea();
   setupHighlightControls();
   setupSelectCheckbox();
+  enableCopyToClipboard(".copy-to-clipboard");
 
   const paginationContainer = document.querySelector("#pagination-header");
   if (paginationContainer) {

scanpipe/templates/scanpipe/includes/resource_path_links.html

@@ -14,5 +14,8 @@ <h1 class="is-size-5 break-word">
     {% endif %}
   {% endfor %}
   {% include 'scanpipe/includes/admin_edit_link.html' %}
+  <button class="copy-to-clipboard has-text-grey ml-2 is-size-6" aria-label="Copy path" data-copy="{{ object.path }}" data-copy-feedback="Resource path copied!">
+    <i class="fa-regular fa-copy"></i>
+  </button>
 </h1>
 {% endspaceless %}

scanpipe/templates/scanpipe/panels/project_inputs.html

@@ -36,6 +36,13 @@
         {% if input_source.is_file and input_source.size %}
           <span class="mr-1">{{ input_source.size|filesizeformat }}</span>
         {% endif %}
+        {% if input_source.download_url %}
+          <a class="copy-to-clipboard is-grey-link is-clickable mr-1" title="Copy URL" aria-label="Copy URL" data-copy="{{ input_source.download_url }}" data-copy-feedback="URL copied!">
+            <span class="icon width-1 height-1">
+              <i class="fa-regular fa-copy"></i>
+            </span>
+          </a>
+        {% endif %}
         {% if input_source.is_file and input_source.exists and input_source.filename %}
           <a class="is-grey-link is-clickable" href="{% url 'project_download_input' project.slug input_source.filename %}"><span class="icon width-1 height-1"><i class="fa-solid fa-download"></i></span></a>
         {% endif %}