feat: add copy button to tree rows; refs #88

elainefan331 · elainefan331 · commit 14b17ba5919c · 2025-09-03T12:24:28.000-04:00
diff --git a/src/components/DatasetDetailPage/CopyButton.tsx b/src/components/DatasetDetailPage/CopyButton.tsx
@@ -0,0 +1,55 @@
+import CheckIcon from "@mui/icons-material/Check";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { IconButton, Tooltip } from "@mui/material";
+import React from "react";
+
+const write = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  }
+};
+
+export default function CopyButton({
+  text,
+  title = "Copy",
+  size = "small",
+}: {
+  text: string;
+  title?: string;
+  size?: "small" | "medium" | "large";
+}) {
+  const [ok, setOk] = React.useState(false);
+
+  const onClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (await write(text)) {
+      setOk(true);
+      setTimeout(() => setOk(false), 1200);
+    }
+  };
+
+  return (
+    <Tooltip title={ok ? "Copied!" : title} arrow>
+      <IconButton size={size} onClick={onClick} sx={{ ml: 0.5 }}>
+        {ok ? (
+          <CheckIcon fontSize="inherit" />
+        ) : (
+          <ContentCopyIcon fontSize="inherit" />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+}
diff --git a/src/components/DatasetDetailPage/FileTree/FileTree.tsx b/src/components/DatasetDetailPage/FileTree/FileTree.tsx
@@ -13,6 +13,7 @@ type Props = {
   // for preview in tree row
   onPreview: (src: string | any, index: number, isInternal?: boolean) => void;
   getInternalByPath: (path: string) => { data: any; index: number } | undefined;
+  getJsonByPath?: (path: string) => any;
 };
 
 const formatSize = (n: number) => {
@@ -30,6 +31,7 @@ const FileTree: React.FC<Props> = ({
   totalBytes,
   onPreview,
   getInternalByPath,
+  getJsonByPath,
 }) => (
   <Box
     sx={{
@@ -68,6 +70,7 @@ const FileTree: React.FC<Props> = ({
           level={0}
           onPreview={onPreview}
           getInternalByPath={getInternalByPath}
+          getJsonByPath={getJsonByPath}
         /> // pass the handlePreview(onPreview = handlePreview) function to FileTreeRow
       ))}
     </Box>
diff --git a/src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx b/src/components/DatasetDetailPage/FileTree/FileTreeRow.tsx
@@ -1,13 +1,18 @@
 // for rendering the preview and download buttons in folder structure row
 import type { TreeNode } from "./types";
 import { formatLeafValue, isPreviewable } from "./utils";
+import CheckIcon from "@mui/icons-material/Check";
+// for copy button
+// add to imports
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import DownloadIcon from "@mui/icons-material/Download";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import FolderIcon from "@mui/icons-material/Folder";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import { Box, Button, Collapse, Typography } from "@mui/material";
+import { Tooltip, IconButton } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 
@@ -18,20 +23,53 @@ type Props = {
   // src is either an external URL(string) or the internal object
   onPreview: (src: string | any, index: number, isInternal?: boolean) => void;
   getInternalByPath: (path: string) => { data: any; index: number } | undefined;
+  getJsonByPath?: (path: string) => any;
+};
+
+// copy helper function
+const copyText = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // fallback if the copy api not working
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  }
 };
 
 const FileTreeRow: React.FC<Props> = ({
   node,
   level,
   onPreview,
   getInternalByPath,
+  getJsonByPath,
 }) => {
   const [open, setOpen] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
   //   const internal = getInternalByPath?.(node.path);
   // const internal = getInternalByPath ? getInternalByPath(node.path) : undefined;
   const internal = getInternalByPath(node.path);
   const externalUrl = node.link?.url;
 
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // prevent expand/ collapse from firing when click the copy button
+    const json = getJsonByPath?.(node.path); // call getJsonByPath(node.path)
+    const asText = JSON.stringify(json, null, 2); // subtree at this row
+    if (await copyText(asText ?? "null")) {
+      // call copyText function
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    }
+  };
+
   //   if (node.kind === "folder") {
   //     return (
   //       <>
@@ -103,7 +141,7 @@ const FileTreeRow: React.FC<Props> = ({
             {node.name}
           </Typography>
 
-          {/* ✅ Actions on folder if it carries a link (from linkHere) */}
+          {/* Actions on folder if it carries a link (from linkHere) */}
           {node.link?.url && (
             <Box
               sx={{ display: "flex", gap: 1, mr: 0.5, flexShrink: 0 }}
@@ -150,6 +188,22 @@ const FileTreeRow: React.FC<Props> = ({
             </Box>
           )}
 
+          {/* Copy subtree JSON button */}
+          <Box
+            sx={{ display: "flex", gap: 1, mr: 0.5, flexShrink: 0 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Tooltip title={copied ? "Copied!" : "Copy subtree JSON"} arrow>
+              <IconButton size="small" onClick={handleCopy}>
+                {copied ? (
+                  <CheckIcon fontSize="inherit" />
+                ) : (
+                  <ContentCopyIcon fontSize="inherit" />
+                )}
+              </IconButton>
+            </Tooltip>
+          </Box>
+
           {open ? <ExpandLess /> : <ExpandMore />}
         </Box>
 
@@ -162,6 +216,7 @@ const FileTreeRow: React.FC<Props> = ({
               level={level + 1}
               onPreview={onPreview}
               getInternalByPath={getInternalByPath}
+              getJsonByPath={getJsonByPath}
             />
           ))}
         </Collapse>
@@ -218,7 +273,22 @@ const FileTreeRow: React.FC<Props> = ({
           </Typography>
         )}
       </Box>
-
+      {/* ALWAYS show copy for files, even when no external/internal */}
+      <Tooltip title={copied ? "Copied!" : "Copy JSON"} arrow>
+        <span>
+          <IconButton
+            size="small"
+            onClick={handleCopy}
+            disabled={!getJsonByPath} // optional safety
+          >
+            {copied ? (
+              <CheckIcon fontSize="inherit" />
+            ) : (
+              <ContentCopyIcon fontSize="inherit" />
+            )}
+          </IconButton>
+        </span>
+      </Tooltip>
       {(externalUrl || internal) && (
         <Box
           sx={{ display: "flex", gap: 1, flexShrink: 0 }}
@@ -261,6 +331,7 @@ const FileTreeRow: React.FC<Props> = ({
               Preview
             </Button>
           )}
+
           {/* {node.link?.url && (
         <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
           <Button
diff --git a/src/pages/UpdatedDatasetDetailPage.tsx b/src/pages/UpdatedDatasetDetailPage.tsx
@@ -694,6 +694,29 @@ const UpdatedDatasetDetailPage: React.FC = () => {
 
   const getInternalByPath = (path: string) => internalMap.get(path);
 
+  // returns the subtree/primitive at that path—returning the whole document if the path is empty, or undefined if any step is invalid.
+  const getJsonByPath = React.useCallback(
+    (path: string) => {
+      if (!datasetDocument) return undefined;
+      if (!path) return datasetDocument; // root
+
+      const parts = path.split("/").filter(Boolean); // "/a/b/[0]/c" → ["a","b","[0]","c"]
+      let cur: any = datasetDocument;
+      for (const p of parts) {
+        if (/^\[\d+\]$/.test(p)) {
+          const idx = parseInt(p.slice(1, -1), 10);
+          if (!Array.isArray(cur)) return undefined;
+          cur = cur[idx];
+        } else {
+          if (cur == null || typeof cur !== "object") return undefined;
+          cur = cur[p];
+        }
+      }
+      return cur;
+    },
+    [datasetDocument]
+  );
+
   const handleClosePreview = () => {
     setPreviewOpen(false);
     setPreviewDataKey(null);
@@ -1096,6 +1119,7 @@ const UpdatedDatasetDetailPage: React.FC = () => {
                   totalBytes={totalBytes}
                   onPreview={handlePreview} // pass the function down to FileTree
                   getInternalByPath={getInternalByPath}
+                  getJsonByPath={getJsonByPath}
                 />
               </Box>
 
