feat(website): add copy buttons to triage columns (#5525)

## Overview

Adds a floating copy-to-clipboard button to each result column on the
`/triage` page, making it easier to copy conversion data during local
testing.

Fixes #5368

## Details

- Adds a copy icon to the bottom-right corner of each result box.
- Keeps the copy button visible while the JSON content is scrolled.
- Copies the complete formatted JSON for the selected source.
- Disables copying while data is unavailable or loading.
- Displays a check icon and a `Copied` label after a successful copy.
- Restores the copy icon after 1.5 seconds.
- Uses the existing `@github/clipboard-copy-element` component.

### Screenshots

#### Copy buttons

<img width="1878" height="911" alt="image"
src="https://github.com/user-attachments/assets/9d660ed4-13de-4a5d-9d3f-c6d01c97c4f8"
/>

#### Copy feedback

<img width="1876" height="921" alt="image"
src="https://github.com/user-attachments/assets/57225b42-adc3-49cf-982d-578eae83a463"
/>

## Testing

- Ran `pnpm run build`.
- Launched the website emulator with OAuth bypass enabled:

  ```shell
  BYPASS_OAUTH_FOR_LOCAL_DEV=true make run-website-emulator
  ```

- Loaded `CVE-2021-44228` from `api.osv.dev`.
- Verified that each column copies its complete JSON content.
- Verified that the button remains fixed after scrolling the result
content.
- Verified that clicking the button displays visible feedback and then
resets.

Author: Yong-yuan-X

gcp/website/frontend3/src/templates/triage.html

@@ -48,7 +48,18 @@ <h1>CVE Conversion Triager</h1>
         <div class="loading-spinner hidden">
           <md-circular-progress indeterminate></md-circular-progress>
         </div>
-        <pre class="json-content">Select a source to view content</pre>
+        <div class="json-scroll">
+          <pre class="json-content">Select a source to view content</pre>
+        </div>
+        <textarea id="copy-json-{{ i }}" class="copy-json-source"
+          aria-hidden="true" tabindex="-1"></textarea>
+        <clipboard-copy class="triage-copy" for="copy-json-{{ i }}"
+          aria-disabled="true"
+          tabindex="-1"
+          aria-label="Copy JSON from column {{ i }}"
+          title="Copy JSON from column {{ i }}">
+          <span class="material-icons" aria-hidden="true">content_copy</span>
+        </clipboard-copy>
       </div>
     </div>
     {% endfor %}

gcp/website/frontend3/src/triage.js

@@ -2,13 +2,52 @@ import "./triage.scss";
 import "@material/web/textfield/filled-text-field.js";
 import "@material/web/button/filled-button.js";
 import "@material/web/progress/circular-progress.js";
+import "@github/clipboard-copy-element";
 import JSONFormatter from "json-formatter-js";
 
+const COPY_ICON_RESET_MS = 1500;
+
 document.addEventListener("DOMContentLoaded", () => {
   const vulnIdInput = document.getElementById("vuln-id-input");
   const loadBtn = document.getElementById("load-btn");
   const columns = document.querySelectorAll(".triage-column");
 
+  function showCopyFeedback(copyButton) {
+    const icon = copyButton.querySelector(".material-icons");
+    clearTimeout(copyButton._copyResetTimer);
+    icon.textContent = "check";
+    copyButton.setAttribute("aria-label", "Copied");
+    copyButton.title = "Copied";
+    copyButton._copyResetTimer = setTimeout(() => {
+      icon.textContent = "content_copy";
+      copyButton.setAttribute("aria-label", copyButton.dataset.copyLabel);
+      copyButton.title = copyButton.dataset.copyLabel;
+    }, COPY_ICON_RESET_MS);
+  }
+
+  function setCopyContent(column, content) {
+    const copyButton = column.querySelector(".triage-copy");
+    const copySource = column.querySelector(".copy-json-source");
+    const icon = copyButton.querySelector(".material-icons");
+    const disabled = !content;
+
+    clearTimeout(copyButton._copyResetTimer);
+    icon.textContent = "content_copy";
+    copyButton.setAttribute("aria-label", copyButton.dataset.copyLabel);
+    copyButton.title = copyButton.dataset.copyLabel;
+    copySource.value = content;
+    copyButton.setAttribute("aria-disabled", disabled.toString());
+    copyButton.tabIndex = disabled ? -1 : 0;
+  }
+
+  columns.forEach((column) => {
+    const copyButton = column.querySelector(".triage-copy");
+    copyButton.dataset.copyLabel = copyButton.getAttribute("aria-label");
+    copyButton.addEventListener("clipboard-copy", () => {
+      showCopyFeedback(copyButton);
+    });
+  });
+
   // Map selection values to their respective endpoints/paths
   const sourceConfigMap = {
     // External APIs
@@ -91,25 +130,30 @@ document.addEventListener("DOMContentLoaded", () => {
 
     if (!sourceKey) {
         contentPre.textContent = "Select a source to view content";
+        setCopyContent(column, "");
         return;
     }
 
     if (!vulnId) {
       contentPre.textContent = "Please enter a Vulnerability ID";
+      setCopyContent(column, "");
       return;
     }
 
     spinner.classList.remove("hidden");
     contentPre.textContent = "";
+    setCopyContent(column, "");
 
       fetchData(sourceKey, vulnId)
         .then((data) => {
           contentPre.textContent = "";
           const formatter = new JSONFormatter(data, Infinity, { theme: "dark" });
           contentPre.appendChild(formatter.render());
+          setCopyContent(column, JSON.stringify(data, null, 2));
         })
       .catch((error) => {
         contentPre.textContent = error.message;
+        setCopyContent(column, "");
       })
       .finally(() => {
         spinner.classList.add("hidden");

gcp/website/frontend3/src/triage.scss

@@ -78,12 +78,19 @@
 
 .content-display {
   flex-grow: 1;
-  padding: 8px 12px;
-  overflow: auto;
+  min-height: 0;
+  overflow: hidden;
   position: relative;
   background-color: #1e1e1e;
 }
 
+.json-scroll {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  padding: 8px 52px 52px 12px;
+}
+
 .json-content {
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -94,6 +101,47 @@
   color: #d4d4d4;
 }
 
+.triage-copy {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: #3c4043;
+  color: #fff;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
+  cursor: pointer;
+
+  &:hover:not([aria-disabled="true"]) {
+    background-color: #5f6368;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+
+  &[aria-disabled="true"] {
+    color: #9aa0a6;
+    cursor: default;
+  }
+
+  .material-icons {
+    font-size: 24px;
+  }
+}
+
+.copy-json-source {
+  display: none;
+}
+
 // Hide top-level root collapsible elements & brackets
 .json-content>.json-formatter-row {
   >a.json-formatter-toggler-link {
@@ -168,4 +216,4 @@
 
 .hidden {
   display: none;
-}
+}