feat: add basic functionality

packages/trace-viewer/src/ui/attachmentsTab.tsx

@@ -23,6 +23,27 @@ import type { AfterActionTraceEventAttachment } from '@trace/trace';
 
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 
+type AsyncContentProps = {
+  content: Promise<string>;
+};
+
+const AsyncContent: React.FunctionComponent<AsyncContentProps> = ({ content }) => {
+  const [text, setText] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let isMounted = true;
+    content.then(text => {
+      if (isMounted)
+        setText(text);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [content]);
+
+  return <>{text}</>;
+};
+
 export const AttachmentsTab: React.FunctionComponent<{
   model: MultiTraceModel | undefined,
 }> = ({ model }) => {
@@ -83,6 +104,11 @@ export const AttachmentsTab: React.FunctionComponent<{
     {[...attachments.values()].map((a, i) => {
       return <div className='attachment-item' key={`attachment-${i}`}>
         <a href={attachmentURL(a) + '&download'}>{a.name}</a>
+        { a.contentType === 'text/plain' &&
+          <div className="attachment__content">
+            <AsyncContent content={fetch(attachmentURL(a)).then(response => response.text())} />
+          </div>
+        }
       </div>;
     })}
   </div>;

tests/playwright-test/ui-mode-test-attachments.spec.ts

@@ -38,6 +38,7 @@ test('should contain text attachment', async ({ runUITest }) => {
   ]) {
     await page.getByText(`attach "${name}"`, { exact: true }).click();
     const downloadPromise = page.waitForEvent('download');
+    await expect(page.locator('.attachment__content')).toHaveText('hi tester!');
     await page.getByRole('link', { name: name }).click();
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(name);