From 3520c7a86b7ac66e9fdead42021052c80bc7ee70 Mon Sep 17 00:00:00 2001
From: alvaromartmart <alvaro.mart.mart+dev@gmail.com>
Date: Sat, 15 Jun 2024 23:50:01 +0200
Subject: [PATCH] tweak: use div instead of textarea to display text
 attachments

---
 packages/trace-viewer/src/ui/attachmentsTab.css       |  2 ++
 packages/trace-viewer/src/ui/attachmentsTab.tsx       |  4 +++-
 .../playwright-test/ui-mode-test-attachments.spec.ts  | 11 +++++++----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/trace-viewer/src/ui/attachmentsTab.css b/packages/trace-viewer/src/ui/attachmentsTab.css
index 893d158cab..b4708796ce 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.css
+++ b/packages/trace-viewer/src/ui/attachmentsTab.css
@@ -49,5 +49,7 @@
 .attachment-item .attachment-item__text {
   display: block;
   width: 100%;
+  border: 1px solid var(--vscode-panel-border);
   border-radius: 2px;
+  padding: 0.5rem;
 }
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 0833df8d49..1d2f6d5ccb 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -41,7 +41,9 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
     };
   }, [attachment]);
 
-  return <textarea aria-label={attachment.name} className="attachment-item__text" disabled value={text!}/>;
+  return <div aria-label={attachment.name} className="attachment-item__text">
+    {text!}
+  </div>;
 };
 
 export const AttachmentsTab: React.FunctionComponent<{
diff --git a/tests/playwright-test/ui-mode-test-attachments.spec.ts b/tests/playwright-test/ui-mode-test-attachments.spec.ts
index 0edc712e39..b02c914110 100644
--- a/tests/playwright-test/ui-mode-test-attachments.spec.ts
+++ b/tests/playwright-test/ui-mode-test-attachments.spec.ts
@@ -25,6 +25,7 @@ test('should contain text attachment', async ({ runUITest }) => {
       test('attach test', async () => {
         await test.info().attach('note', { path: __filename });
         await test.info().attach('🎭', { body: 'hi tester!', contentType: 'text/plain' });
+        await test.info().attach('escaped', { body: '<div>\\nFoo\\nBar\\n</div>', contentType: 'text/plain' });
       });
     `,
   });
@@ -32,13 +33,15 @@ test('should contain text attachment', async ({ runUITest }) => {
   await page.getByTitle('Run all').click();
   await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)');
   await page.getByText('Attachments').click();
-  for (const { name, content } of [
-    { name: 'note', content: 'attach test' },
-    { name: '🎭', content: 'hi tester!' }
+  for (const { name, content, displayedAsText } of [
+    { name: 'note', content: 'attach test', displayedAsText: false },
+    { name: '🎭', content: 'hi tester!', displayedAsText: true },
+    { name: 'escaped', content: '<div>\nFoo\nBar\n</div>', displayedAsText: true },
   ]) {
     await page.getByText(`attach "${name}"`, { exact: true }).click();
     const downloadPromise = page.waitForEvent('download');
-    await expect(page.getByLabel('🎭')).toHaveText('hi tester!');
+    if (displayedAsText)
+      await expect(page.getByLabel(name)).toHaveText(content);
     await page.getByRole('link', { name: name }).click();
     const download = await downloadPromise;
     expect(download.suggestedFilename()).toBe(name);