Merge pull request #276 from msqd/handle_images

Handle images
msqd · Mar 29, 2024 · c2394a2 · c2394a2
2 parents 87877f6 + 8a9ae39
commit c2394a2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/harp_apps/dashboard/frontend/src/Domain/Transactions/useBlobQuery.tsx b/harp_apps/dashboard/frontend/src/Domain/Transactions/useBlobQuery.tsx
@@ -2,11 +2,9 @@ import { useQuery } from "react-query"
 
 import { useApi } from "../Api"
 
-const decoder = new TextDecoder("utf-8")
-
 interface Blob {
   id: string
-  content: string
+  content: ArrayBuffer
   contentType?: string
 }
 
@@ -19,7 +17,7 @@ export function useBlobQuery(id?: string) {
 
       return {
         id,
-        content: decoder.decode(buffer),
+        content: buffer,
         contentType: response.headers.get("Content-Type"),
       } as Blob
     }

diff --git a/harp_apps/dashboard/frontend/src/Pages/System/__snapshots__/SystemPage.test.tsx.snap b/harp_apps/dashboard/frontend/src/Pages/System/__snapshots__/SystemPage.test.tsx.snap
@@ -234,23 +234,20 @@ exports[`SystemPage > renders the title and data when the query is successful 1`
               </div>
             </div>
             <span
-              aria-hidden="true"
               aria-labelledby="headlessui-tabs-tab-:r1:"
               id="headlessui-tabs-panel-:r5:"
               role="tabpanel"
               style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
               tabindex="-1"
             />
             <span
-              aria-hidden="true"
               aria-labelledby="headlessui-tabs-tab-:r2:"
               id="headlessui-tabs-panel-:r6:"
               role="tabpanel"
               style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
               tabindex="-1"
             />
             <span
-              aria-hidden="true"
               aria-labelledby="headlessui-tabs-tab-:r3:"
               id="headlessui-tabs-panel-:r7:"
               role="tabpanel"

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageBody.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageBody.tsx
@@ -6,7 +6,7 @@ export function MessageBody({ id }: { id: string }) {
   const query = useBlobQuery(id)
 
   if (query && query.isSuccess && query.data !== undefined) {
-    if (query.data.content.length) {
+    if (query.data.content.byteLength) {
       return (
         <div className="px-2">
           <PrettyBody content={query.data.content} contentType={query.data.contentType} />

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/MessageHeaders.tsx
@@ -6,20 +6,24 @@ interface MessageHeadersProps {
 
 export function MessageHeaders({ id }: MessageHeadersProps) {
   const query = useBlobQuery(id)
+  const decoder = new TextDecoder("utf-8")
 
   if (query && query.isSuccess && query.data !== undefined) {
     return (
       <table className="mb-2 w-full text-xs font-mono">
         <tbody>
-          {query.data.content.split("\n").map((line, index) => {
-            const s = line.split(":", 2)
-            return (
-              <tr key={index}>
-                <td className="px-2 w-1 text-blue-600 truncate">{s[0]}</td>
-                <td className="px-2 whitespace-nowrap">{s[1]}</td>
-              </tr>
-            )
-          })}
+          {decoder
+            .decode(query.data.content)
+            .split("\n")
+            .map((line, index) => {
+              const s = line.split(":", 2)
+              return (
+                <tr key={index}>
+                  <td className="px-2 w-1 text-blue-600 truncate">{s[0]}</td>
+                  <td className="px-2 whitespace-nowrap">{s[1]}</td>
+                </tr>
+              )
+            })}
         </tbody>
       </table>
     )

diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/Components/PrettyBody.tsx
@@ -8,11 +8,13 @@ export function PrettyBody({
   content = null,
   contentType = null,
 }: {
-  content: string | null
+  content: ArrayBuffer | null
   contentType?: string | null
 }) {
-  const [visibleContent, setVisibleContent] = useState(content?.slice(0, 8000))
-  const loadAllContent = () => setVisibleContent(content!)
+  const decoder = new TextDecoder("utf-8")
+  const contentAsString = decoder.decode(content!)
+  const [visibleContent, setVisibleContent] = useState(contentAsString?.slice(0, 8000))
+  const loadAllContent = () => setVisibleContent(contentAsString)
 
   switch (contentType) {
     case "application/json":
@@ -25,7 +27,7 @@ export function PrettyBody({
             style={Style}
             customStyle={{ padding: 0, border: 0 }}
           />
-          {(visibleContent?.length ?? 0) < (content?.length || 0) && (
+          {(visibleContent?.length ?? 0) < (contentAsString?.length || 0) && (
             <div className="flex w-full justify-end mb-2">
               <Button variant="secondary" onClick={loadAllContent}>
                 Load all
@@ -34,11 +36,21 @@ export function PrettyBody({
           )}
         </>
       )
+    case "image/png":
+    case "image/svg+xml":
+    case "image/webp":
+    case "image/jpeg":
+      if (content) {
+        const blob = new Blob([content], { type: contentType })
+        const url = URL.createObjectURL(blob)
+        return <img src={url} alt="Content" />
+      }
+      return null
   }
 
   return content ? (
     <pre className="max-w-full overflow-x-auto p-4 text-xs text-black" style={{ padding: 0, border: 0 }}>
-      {content}
+      {decoder.decode(content)}
     </pre>
   ) : null
 }
diff --git a/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionDetailOnQuerySuccess.tsx b/harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionDetailOnQuerySuccess.tsx
@@ -18,6 +18,7 @@ export function TransactionDetailOnQuerySuccess({ query }: { query: QueryObserve
     <Pane hasDefaultPadding={false} className="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm">
       {(query.data.messages || []).map((message) => (
         <Foldable
+          key={message.id}
           title={
             <>
               <span className="mr-2">{ucfirst(message.kind)}</span>