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 Attachment = AfterActionTraceEventAttachment & { traceUrl: string };
type TextAttachmentProps = { type ExpandableAttachmentProps = {
attachmentText: string; attachment: Attachment;
label?: string;
}; };
const TextAttachment: React.FunctionComponent<TextAttachmentProps> = ({ attachmentText, label }) => { const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment }) => {
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 [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
const [loaded, setLoaded] = React.useState(false); const [loaded, setLoaded] = React.useState(false);
const [attachmentText, setAttachmentText] = React.useState<string | null>(null); const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
const [emptyContentReason, setEmptyContentReason] = React.useState<string>('');
React.useMemo(() => { React.useMemo(() => {
if (!isTextualMimeType(attachment.contentType)) {
setEmptyContentReason('no preview available');
return;
}
if (expanded && !loaded) { if (expanded && !loaded) {
setEmptyContentReason('loading...');
fetch(attachmentURL(attachment)).then(response => response.text()).then(text => { fetch(attachmentURL(attachment)).then(response => response.text()).then(text => {
setAttachmentText(text); setAttachmentText(text);
setLoaded(true); setLoaded(true);
}); }).catch(err => setEmptyContentReason('failed to load: ' + err.message));
} }
}, [attachment, expanded, loaded]); }, [attachment, expanded, loaded]);
@ -60,15 +55,17 @@ const ExpandableAttachment: React.FunctionComponent<{ attachment: Attachment }>
{attachment.name} {attachment.name}
<a href={attachmentURL(attachment) + '&download'} <a href={attachmentURL(attachment) + '&download'}
className={'codicon codicon-cloud-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()}> onClick={$event => $event.stopPropagation()}>
</a> </a>
</> </>
} expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}> } expanded={expanded} expandOnTitleClick={true} setExpanded={exp => setExpanded(exp)}>
{isTextualMimeType(attachment.contentType) ? <div aria-label={attachment.name}>
<TextAttachment attachmentText={attachmentText!} label={attachment.name} /> : { attachmentText ?
<div aria-label={attachment.name}><i>no preview available</i></div> <CodeMirrorWrapper text={attachmentText!} readOnly wrapLines={false}></CodeMirrorWrapper> :
} <i>{emptyContentReason}</i>
}
</div>
</Expandable>; </Expandable>;
}; };