Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

tweak: text attachment styling

Browse source
This commit is contained in:
alvaromartmart 2024-06-09 00:45:02 +02:00
parent 5604c5d870
commit c034a4e9de
3 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/trace-viewer/src/ui/attachmentsTab.css
View file

@ -45,3 +45,9 @@
max-width: 80%; max-width: 80%;
box-shadow: 0 12px 28px 0 rgba(0,0,0,.2), 0 2px 4px 0 rgba(0,0,0,.1); 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;
}

16
packages/trace-viewer/src/ui/attachmentsTab.tsx
View file

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

2
tests/playwright-test/ui-mode-test-attachments.spec.ts
View file

@ -38,7 +38,7 @@ test('should contain text attachment', async ({ runUITest }) => {
]) { ]) {
await page.getByText(`attach "${name}"`, { exact: true }).click(); await page.getByText(`attach "${name}"`, { exact: true }).click();
const downloadPromise = page.waitForEvent('download'); 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(); await page.getByRole('link', { name: name }).click();
const download = await downloadPromise; const download = await downloadPromise;
expect(download.suggestedFilename()).toBe(name); expect(download.suggestedFilename()).toBe(name);