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

tweak: simplofy component, avoid fetching non textual attachments

Browse source
This commit is contained in:
alvaromartmart 2024-07-02 09:00:14 +02:00
parent 677ecae158
commit 342cace03d
1 changed files with 17 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,32 +26,27 @@ import { Expandable } from '@web/components/expandable';
type Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = {
attachmentText: string;
label?: string;
type ExpandableAttachmentProps = {
attachment: Attachment;
};
const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachmentText, label }) => {
return <div aria-label={label}>
{
attachmentText ?
<CodeMirrorWrapper text={attachmentText} readOnly wrapLines={false}></CodeMirrorWrapper> :
<div><i>Loading...</i></div>
}
</div>;
};
const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }> = ({ attachment }) => {
const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment }) => {
const [expanded, setExpanded] = React.useState(false);
const [loaded, setLoaded] = React.useState(false);
const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
const [emptyContentReason, setEmptyContentReason] = React.useState<string>('');
React.useMemo(() => {
if (!isTextualMimeType(attachment.contentType)) {
setEmptyContentReason('no preview available');
return;
}
if (expanded && !loaded) {
setEmptyContentReason('loading...');
fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
setAttachmentText(text);
setLoaded(true);
});
}).catch(err => setEmptyContentReason('failed to load: ' + err.message));
}
}, [attachment, expanded, loaded]);
@ -60,15 +55,17 @@ const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }>
{attachment.name}
<a href={attachmentURL(attachment) + '&download'}
className={'codicon codicon-cloud-download'}
style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '0.5rem' }}
onClick={$event => $event.stopPropagation()}>
</a>
</>
} expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
{isTextualMimeType(attachment.contentType) ?
<TextAttachment attachmentText={attachmentText!} label={attachment.name} /> :
<div aria-label={attachment.name}><i>no preview available</i></div>
}
<div aria-label={attachment.name}>
{ attachmentText ?
<CodeMirrorWrapper text={attachmentText!} readOnly wrapLines={false}></CodeMirrorWrapper> :
<i>{emptyContentReason}</i>
}
</div>
</Expandable>;
};