From c034a4e9decc20ce3aeda9480bcadee2590b5a4d Mon Sep 17 00:00:00 2001
From: alvaromartmart <alvaro.mart.mart+dev@gmail.com>
Date: Sun, 9 Jun 2024 00:45:02 +0200
Subject: [PATCH] tweak: text attachment styling

---
 packages/trace-viewer/src/ui/attachmentsTab.css  |  6 ++++++
 packages/trace-viewer/src/ui/attachmentsTab.tsx  | 16 +++++++---------
 .../ui-mode-test-attachments.spec.ts             |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/trace-viewer/src/ui/attachmentsTab.css b/packages/trace-viewer/src/ui/attachmentsTab.css
index 43291d5f1a..893d158cab 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.css
+++ b/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;
+}
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 7d5d46886e..0833df8d49 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/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>;
     })}
diff --git a/tests/playwright-test/ui-mode-test-attachments.spec.ts b/tests/playwright-test/ui-mode-test-attachments.spec.ts
index 553c6416a0..0edc712e39 100644
--- a/tests/playwright-test/ui-mode-test-attachments.spec.ts
+++ b/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);