From 342cace03d110f37acfb8aa85f9939d1d8fbfda0 Mon Sep 17 00:00:00 2001
From: alvaromartmart <alvaro.mart.mart+dev@gmail.com>
Date: Tue, 2 Jul 2024 09:00:14 +0200
Subject: [PATCH] tweak: simplofy component, avoid fetching non textual
 attachments

---
 .../trace-viewer/src/ui/attachmentsTab.tsx    | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 2b373f3690..f1a5411b8c 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -26,32 +26,27 @@ import { Expandable } from '@web/components/expandable';
 
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 
-type TextAttachmentProps = {
-  attachmentText: string;
-  label?: string;
+type ExpandableAttachmentProps = {
+  attachment: Attachment;
 };
 
-const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachmentText, label }) => {
-  return <div aria-label={label}>
-    {
-      attachmentText ?
-        <CodeMirrorWrapper text={attachmentText} readOnly wrapLines={false}></CodeMirrorWrapper> :
-        <div><i>Loading...</i></div>
-    }
-  </div>;
-};
-
-const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
+const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment }) => {
   const [expanded, setExpanded] = React.useState(false);
   const [loaded, setLoaded] = React.useState(false);
   const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
+  const [emptyContentReason, setEmptyContentReason] = React.useState<string>('');
 
   React.useMemo(() => {
+    if (!isTextualMimeType(attachment.contentType)) {
+      setEmptyContentReason('no preview available');
+      return;
+    }
     if (expanded && !loaded) {
+      setEmptyContentReason('loading...');
       fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
         setAttachmentText(text);
         setLoaded(true);
-      });
+      }).catch(err => setEmptyContentReason('failed to load: ' + err.message));
     }
   }, [attachment, expanded, loaded]);
 
@@ -60,15 +55,17 @@ const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }>
       {attachment.name}
       <a href={attachmentURL(attachment) + '&download'}
         className={'codicon codicon-cloud-download'}
-        style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
+        style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '0.5rem' }}
         onClick={$event => $event.stopPropagation()}>
       </a>
     </>
   } expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
-    {isTextualMimeType(attachment.contentType) ?
-      <TextAttachment attachmentText={attachmentText!} label={attachment.name} /> :
-      <div aria-label={attachment.name}><i>no preview available</i></div>
-    }
+    <div aria-label={attachment.name}>
+      { attachmentText ?
+        <CodeMirrorWrapper text={attachmentText!} readOnly wrapLines={false}></CodeMirrorWrapper> :
+        <i>{emptyContentReason}</i>
+      }
+    </div>
   </Expandable>;
 };