Implement ASM Diff contents Copy Button (#1357)

* Implement diff copy button

* Make vercel deployment happy

* Make vercel deployment happier

* Just remove the alert

* Tweak styles

* Retrigger deployments

* Lazy loaded and refactored CopyButton component logic

frontend/src/components/Diff/Diff.module.scss

@@ -181,3 +181,20 @@
 .highlightable {
     cursor: pointer;
 }
+
+.copyButton {
+    cursor: pointer;
+    border-radius: 4px;
+    width: 2em;
+    height: 2em;
+
+    &:hover {
+        background-color: var(--a50);
+    }
+}
+
+.copyButton svg {
+    width: 1em;
+    height: 1em;
+    display: grid;
+}

frontend/src/components/Diff/Diff.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, CSSProperties, forwardRef, HTMLAttributes, MutableRefObject, useRef, useState } from "react"
 
-import { VersionsIcon } from "@primer/octicons-react"
+import { VersionsIcon, CopyIcon } from "@primer/octicons-react"
 import { EditorView } from "codemirror"
 import { DiffResult } from "objdiff-wasm"
 import AutoSizer from "react-virtualized-auto-sizer"
@@ -20,6 +20,36 @@ import * as Objdiff from "./DiffRowObjdiff"
 import DragBar from "./DragBar"
 import { useHighlighers } from "./Highlighter"
 
+const copyDiffContentsToClipboard = (diff: api.DiffOutput, kind: string) => {
+    // kind is either "base", "current", or "previous"
+    const contents = diff.rows.map(row => {
+        let text = ""
+        if (kind === "base" && row.base) {
+            text = row.base.text.map(t => t.text).join("")
+        } else if (kind === "current" && row.current) {
+            text = row.current.text.map(t => t.text).join("")
+        } else if (kind === "previous" && row.previous) {
+            text = row.previous.text.map(t => t.text).join("")
+        }
+        return text
+    })
+
+    navigator.clipboard.writeText(contents.join("\n"))
+}
+
+// Small component for the copy button
+function CopyButton({ diff, kind }: { diff: api.DiffOutput, kind: string }) {
+    return (
+        <button
+            className={styles.copyButton} // Add a new style for the button
+            onClick={() => copyDiffContentsToClipboard(diff, kind)}
+            title="Copy content"
+        >
+            <CopyIcon size={16} />
+        </button>
+    )
+}
+
 // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
 const innerElementType = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ style, ...rest }, ref) => {
     return <ul
@@ -176,14 +206,17 @@ export default function Diff({ diff, diffLabel, isCompiling, isCurrentOutdated,
         <div className={styles.headers}>
             <div className={styles.header}>
                 Target
+                <CopyButton diff={diff as api.DiffOutput} kind="base" />
             </div>
             <div className={styles.header}>
                 Current
+                <CopyButton diff={diff as api.DiffOutput} kind="current" />
                 {isCompiling && <Loading width={20} height={20} />}
                 {!threeWayDiffEnabled && threeWayButton}
             </div>
             {threeWayDiffEnabled && <div className={styles.header}>
                 {threeWayDiffBase === ThreeWayDiffBase.SAVED ? "Saved" : "Previous"}
+                <CopyButton diff={diff as api.DiffOutput} kind="previous" />
                 {threeWayButton}
             </div>}
         </div>