tweak: text attachment styling

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

@@ -45,3 +45,9 @@
   max-width: 80%;
   box-shadow: 0 12px 28px 0 rgba(0,0,0,.2), 0 2px 4px 0 rgba(0,0,0,.1);
 }
+
+.attachment-item .attachment-item__text {
+  display: block;
+  width: 100%;
+  border-radius: 2px;
+}

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

@@ -23,25 +23,25 @@ import type { AfterActionTraceEventAttachment } from '@trace/trace';
 
 type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
 
-type AsyncContentProps = {
-  content: Promise<string>;
+type TextAttachmentProps = {
+  attachment: Attachment;
 };
 
-const AsyncContent: React.FunctionComponent<AsyncContentProps> = ({ content }) => {
+const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachment }) => {
   const [text, setText] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     let isMounted = true;
-    content.then(text => {
+    fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
       if (isMounted)
         setText(text);
     });
     return () => {
       isMounted = false;
     };
-  }, [content]);
+  }, [attachment]);
 
-  return <>{text}</>;
+  return <textarea aria-label={attachment.name} className="attachment-item__text" disabled value={text!}/>;
 };
 
 export const AttachmentsTab: React.FunctionComponent<{
@@ -105,9 +105,7 @@ export const AttachmentsTab: React.FunctionComponent<{
       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>
+          <TextAttachment attachment={a} />
         }
       </div>;
     })}

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

@@ -38,7 +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 expect(page.getByLabel('🎭')).toHaveText('hi tester!');
     await page.getByRole('link', { name: name }).click();
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(name);