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>