From 303ea6040bdb06552d398c6bd4efe553da886df4 Mon Sep 17 00:00:00 2001 From: Arthur Degonde <44548105+ArthurD1@users.noreply.github.com> Date: Tue, 29 Oct 2024 19:10:32 +0100 Subject: [PATCH] refactor: better copy feature --- .../Transactions/Components/MessageBody.tsx | 12 +- .../Components/MessageHeaders.tsx | 9 +- .../Transactions/Components/PrettyBody.tsx | 2 +- .../TransactionDetailOnQuerySuccess.tsx | 2 +- .../TransactionDetailPage.test.tsx.snap | 115 +++--------------- .../CopyToClipBoard/CopyToClipboard.tsx | 35 +++--- 6 files changed, 51 insertions(+), 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 index eb60ba88..04680984 100644 --- 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 ( -
- - -
+
+ +
diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx index 81359462..6f316ff9 100644 --- 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 ( -
- +
+
diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx index 42be5582..b90c41ad 100644 --- 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 index b7719dfc..caaf3b43 100644 --- 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={
Transaction - + Transaction -
@@ -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 " > -
- +
@@ -251,28 +215,11 @@ exports[`renders the title and data when the query is successful 1`] = `
-
- + 
                  
-                

-                  
+                

                   

@@ -391,28 +321,11 @@ exports[`renders the title and data when the query is successful 1`] = `
                     
                   

                 

-                

-                  
+                

                   

                     
   className?: string
-  contentType?: "text" | "html"
+  contentType?: string
+  description?: string
 }
 
-const CopyToClipboard: React.FC = ({ text, targetRef, className, contentType = "text" }) => {
+const CopyToClipboard: React.FC = ({ text, targetRef, className, contentType, description }) => {
   const [copySuccess, setCopySuccess] = useState(false)
+  const canCopy = navigator.clipboard
 
   const handleClipboardWrite = (clipboardData: string | ClipboardItem[]) => {
     const writePromise =
@@ -34,14 +35,14 @@ const CopyToClipboard: React.FC = ({ 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)
       }
     }
@@ -49,13 +50,17 @@ const CopyToClipboard: React.FC = ({ text, targetRef, clas
 
   const Icon = copySuccess ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon
 
-  return (
-    
-  )
+  return canCopy && (!contentType || contentType.startsWith("text/") || contentType.startsWith("application/")) ? (
+    

+      {description && (
+        {description}
+      )}
+      
+    

+  ) : null
 }
 
 export default CopyToClipboard