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

tweak: make whole expansion panel title clickable, move download to icon

Browse source
This commit is contained in:
alvaromartmart 2024-06-28 23:29:38 +02:00
parent ab533b9c6b
commit 700d06170d
3 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,3 +45,7 @@
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);
} }
a.codicon-cloud-download:hover{
background-color: var(--vscode-list-inactiveSelectionBackground)
}

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

@ -24,7 +24,6 @@ import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
import { isTextualMimeType } from '@isomorphic/mimeType'; import { isTextualMimeType } from '@isomorphic/mimeType';
import { Expandable } from '@web/components/expandable'; import { Expandable } from '@web/components/expandable';
type Attachment = AfterActionTraceEventAttachment & { traceUrl: string }; type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = { type TextAttachmentProps = {
@ -57,11 +56,18 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => { const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
const [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
return <Expandable title={ return <Expandable title={
<a href={attachmentURL(attachment) + '&download'}>{attachment.name}</a> <>
} expanded={expanded} setExpanded={exp => setExpanded(exp)}> {attachment.name}
<a href={attachmentURL(attachment) + '&download'}
className={'codicon codicon-cloud-download'}
style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
onClick={$event => $event.stopPropagation()}>
</a>
</>
} expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
{isTextualMimeType(attachment.contentType) ? {isTextualMimeType(attachment.contentType) ?
<TextAttachment attachment={attachment} label={attachment.name} /> : <TextAttachment attachment={attachment} label={attachment.name} /> :
<div><i>no preview available</i></div> <div aria-label={attachment.name}><i>no preview available</i></div>
} }
</Expandable>; </Expandable>;
}; };

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

@ -40,11 +40,12 @@ 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');
if (displayedAsText){ await page.locator('.expandable-title', { hasText: name }).click();
await page.locator('.expandable-title', { hasText: name }).locator('.codicon-chevron-right').click(); await expect(page.getByLabel(name)).toContainText(displayedAsText ?
await expect(page.getByLabel(name)).toContainText(content.split('\n')?.[0]); content.split('\n')?.[0] :
} 'no preview available'
await page.getByRole('link', { name: name }).click(); );
await page.locator('.expandable-title', { hasText: name }).getByRole('link').click();
const download = await downloadPromise; const download = await downloadPromise;
expect(download.suggestedFilename()).toBe(name); expect(download.suggestedFilename()).toBe(name);
expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content); expect((await readAllFromStream(await download.createReadStream())).toString()).toContain(content);