refactor: better copy feature

msqd · Oct 29, 2024 · 303ea60 · 303ea60
1 parent 2dd38cd
commit 303ea60
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 124 deletions.
diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageBody.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageBody.tsx
@@ -12,10 +12,14 @@ export function MessageBody({ id }: { id: string }) {
   if (query && query.isSuccess && query.data !== undefined) {
     if (query.data.content.byteLength) {
       return (
-        <div>
-          <CopyToClipboard targetRef={ref} contentType="html" className="absolute right-2" />
-
-          <div className="px-2 pt-4" ref={ref}>
+        <div className="flex space-y-2">
+          <CopyToClipboard
+            targetRef={ref}
+            contentType={query.data.contentType}
+            className="absolute right-2"
+            description="copy content"
+          />
+          <div className="px-2 pt-4 mt-4" ref={ref}>
             <PrettyBody content={query.data.content} contentType={query.data.contentType} />
           </div>
         </div>

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx
@@ -16,8 +16,13 @@ export function MessageHeaders({ id }: MessageHeadersProps) {
 
   if (query && query.isSuccess && query.data !== undefined) {
     return (
-      <div>
-        <CopyToClipboard targetRef={ref} contentType="html" className="absolute right-2" />
+      <div className="flex space-y-2">
+        <CopyToClipboard
+          targetRef={ref}
+          contentType="text/html"
+          className="absolute right-2"
+          description="copy headers"
+        />
         <div ref={ref} className="pt-4">
           <table className="mb-2 w-full text-xs font-mono">
             <tbody>

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx
@@ -17,7 +17,7 @@ export function PrettyBody({
   const contentAsString = decoder.decode(content!)
   const [visibleContent, setVisibleContent] = useState(contentAsString?.slice(0, 8000))
   const loadAllContent = () => setVisibleContent(contentAsString)
-
+  console.log(contentType)
   switch (contentType) {
     case "application/json":
       return (

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionDetailOnQuerySuccess.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionDetailOnQuerySuccess.tsx
@@ -45,7 +45,7 @@ export function TransactionDetailOnQuerySuccess({ query }: { query: QueryObserve
         title={
           <div className="flex gap-x-0.5 items-center">
             <span className="grow">Transaction</span>
-            <CopyToClipboard text={transactionUrl} />
+            <CopyToClipboard text={transactionUrl} description="copy transaction link" className="font-light" />
             <Duration
               duration={duration}
               tpdex={tpdex}

diff --git a/...shboard/frontend/src/Pages/Transactions/__snapshots__/TransactionDetailPage.test.tsx.snap b/...shboard/frontend/src/Pages/Transactions/__snapshots__/TransactionDetailPage.test.tsx.snap
@@ -48,25 +48,6 @@ exports[`renders the title and data when the query is successful 1`] = `
                       >
                         Transaction
                       </span>
-                      <svg
-                        aria-hidden="true"
-                        class="m-2 h-4 w-4 cursor-pointer text-gray-500"
-                        data-slot="icon"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <title>
-                          Copy to clipboard
-                        </title>
-                        <path
-                          d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
                       <div
                         class="flex gap-x-0.5 items-center font-normal pl-1 pr-2"
                       >
@@ -184,26 +165,9 @@ exports[`renders the title and data when the query is successful 1`] = `
                 class="mt-2 space-y-2 overflow-x-auto "
               >
                  
-                <div>
-                  <svg
-                    aria-hidden="true"
-                    class="absolute right-2 m-2 h-4 w-4 cursor-pointer text-gray-500"
-                    data-slot="icon"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>
-                      Copy to clipboard
-                    </title>
-                    <path
-                      d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
+                <div
+                  class="flex space-y-2"
+                >
                   <div
                     class="pt-4"
                   >
@@ -251,28 +215,11 @@ exports[`renders the title and data when the query is successful 1`] = `
                     </table>
                   </div>
                 </div>
-                <div>
-                  <svg
-                    aria-hidden="true"
-                    class="absolute right-2 m-2 h-4 w-4 cursor-pointer text-gray-500"
-                    data-slot="icon"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>
-                      Copy to clipboard
-                    </title>
-                    <path
-                      d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
+                <div
+                  class="flex space-y-2"
+                >
                   <div
-                    class="px-2 pt-4"
+                    class="px-2 pt-4 mt-4"
                   >
                     <pre
                       class="w-fit overflow-x-auto text-black language-javascript max-w-full text-xs"
@@ -348,26 +295,9 @@ exports[`renders the title and data when the query is successful 1`] = `
                 class="mt-2 space-y-2 overflow-x-auto "
               >
                  
-                <div>
-                  <svg
-                    aria-hidden="true"
-                    class="absolute right-2 m-2 h-4 w-4 cursor-pointer text-gray-500"
-                    data-slot="icon"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>
-                      Copy to clipboard
-                    </title>
-                    <path
-                      d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
+                <div
+                  class="flex space-y-2"
+                >
                   <div
                     class="pt-4"
                   >
@@ -391,28 +321,11 @@ exports[`renders the title and data when the query is successful 1`] = `
                     </table>
                   </div>
                 </div>
-                <div>
-                  <svg
-                    aria-hidden="true"
-                    class="absolute right-2 m-2 h-4 w-4 cursor-pointer text-gray-500"
-                    data-slot="icon"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>
-                      Copy to clipboard
-                    </title>
-                    <path
-                      d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
+                <div
+                  class="flex space-y-2"
+                >
                   <div
-                    class="px-2 pt-4"
+                    class="px-2 pt-4 mt-4"
                   >
                     <pre
                       class="w-fit overflow-x-auto text-black language-javascript max-w-full text-xs"

diff --git a/harp_apps/dashboard/frontend/src/ui/Components/CopyToClipBoard/CopyToClipboard.tsx b/harp_apps/dashboard/frontend/src/ui/Components/CopyToClipBoard/CopyToClipboard.tsx
@@ -1,17 +1,18 @@
 import { ClipboardDocumentIcon, ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline"
 import { useState } from "react"
-
 import { classNames } from "ui/Utilities"
 
 interface CopyToClipboardProps {
   text?: string
   targetRef?: React.RefObject<HTMLElement>
   className?: string
-  contentType?: "text" | "html"
+  contentType?: string
+  description?: string
 }
 
-const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ text, targetRef, className, contentType = "text" }) => {
+const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ text, targetRef, className, contentType, description }) => {
   const [copySuccess, setCopySuccess] = useState(false)
+  const canCopy = navigator.clipboard
 
   const handleClipboardWrite = (clipboardData: string | ClipboardItem[]) => {
     const writePromise =
@@ -34,28 +35,32 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ text, targetRef, clas
     if (text) {
       handleClipboardWrite(text)
     } else if (targetRef?.current) {
-      if (contentType === "html") {
+      if (contentType?.includes("html")) {
         const html = targetRef.current.innerHTML
-        const blob = new Blob([html], { type: "text/html" })
-        const data = [new ClipboardItem({ "text/html": blob })]
+        const blob = new Blob([html], { type: contentType })
+        const data = [new ClipboardItem({ [contentType]: blob })]
 
         handleClipboardWrite(data)
-      } else {
-        const text = targetRef.current.textContent || ""
+      } else if (contentType?.startsWith("text/") || contentType?.startsWith("application/")) {
+        const text = targetRef.current.innerText || ""
         handleClipboardWrite(text)
       }
     }
   }
 
   const Icon = copySuccess ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon
 
-  return (
-    <Icon
-      title="Copy to clipboard"
-      className={classNames(className, `m-2 h-4 w-4 cursor-pointer ${copySuccess ? "text-blue-300" : "text-gray-500"}`)}
-      onClick={handleCopy}
-    />
-  )
+  return canCopy && (!contentType || contentType.startsWith("text/") || contentType.startsWith("application/")) ? (
+    <div className={classNames("flex items-center -space-x-1 text-xs", className)} onClick={handleCopy}>
+      {description && (
+        <span className={`m-2 cursor-pointer ${copySuccess ? "text-blue-300" : "text-gray-500"}`}>{description}</span>
+      )}
+      <Icon
+        title="Copy to clipboard"
+        className={`m-2 h-4 w-4 cursor-pointer ${copySuccess ? "text-blue-300" : "text-gray-500"}`}
+      />
+    </div>
+  ) : null
 }
 
 export default CopyToClipboard