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%;
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 { Expandable } from '@web/components/expandable';
type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = {
@ -57,11 +56,18 @@ const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachme
const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
const [expanded, setExpanded] = React.useState(false);
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) ?
<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>;
};

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