diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx index 179e6e5c91..7d5d46886e 100644 --- a/packages/trace-viewer/src/ui/attachmentsTab.tsx +++ b/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; +}; + +const AsyncContent: React.FunctionComponent = ({ content }) => { + const [text, setText] = React.useState(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
{a.name} + { a.contentType === 'text/plain' && +
+ response.text())} /> +
+ }
; })} ; diff --git a/tests/playwright-test/ui-mode-test-attachments.spec.ts b/tests/playwright-test/ui-mode-test-attachments.spec.ts index 71b67e3707..553c6416a0 100644 --- a/tests/playwright-test/ui-mode-test-attachments.spec.ts +++ b/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);