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

give each error own button state

Browse source
This commit is contained in:
Simon Knott 2025-02-13 10:44:44 +01:00
parent 6662cfcd5d
commit 13880434c4
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
1 changed files with 45 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
packages/trace-viewer/src/ui/errorsTab.tsx
View file

@ -97,6 +97,49 @@ export function useErrorsTabModel(model: modelUtil.MultiTraceModel | undefined):
}, [model]);
}
function Error({ message, error, wallTime, sdkLanguage, pageSnapshot, revealInSource }: { message: string, error: ErrorDescription, wallTime: number, sdkLanguage: Language, pageSnapshot?: string, revealInSource: (error: ErrorDescription) => void }) {
const [showLLM, setShowLLM] = React.useState(false);
const llmAvailable = !!useLLMChat();
const gitCommitInfo = useGitCommitInfo();
const diff = gitCommitInfo?.['pull.diff'] ?? gitCommitInfo?.['revision.diff'];
let location: string | undefined;
let longLocation: string | undefined;
const stackFrame = error.stack?.[0];
if (stackFrame) {
const file = stackFrame.file.replace(/.*[/\\](.*)/, '$1');
location = file + ':' + stackFrame.line;
longLocation = stackFrame.file + ':' + stackFrame.line;
}
const errorId = `error-${wallTime}-${longLocation}`;
return <div style={{ display: 'flex', flexDirection: 'column' }}>
<div className='hbox' style={{
alignItems: 'center',
padding: '5px 10px',
minHeight: 36,
fontWeight: 'bold',
color: 'var(--vscode-errorForeground)',
flex: 0,
}}>
{error.action && renderAction(error.action, { sdkLanguage })}
{location && <div className='action-location'>
@ <span title={longLocation} onClick={() => revealInSource(error)}>{location}</span>
</div>}
<span style={{ position: 'absolute', right: '5px' }}>
{llmAvailable
? <ToolbarButton onClick={() => setShowLLM(v => !v)} title="Fix with AI" className='copy-to-clipboard-text-button'>Fix with AI</ToolbarButton>
: <CopyPromptButton error={message} pageSnapshot={pageSnapshot} diff={diff} />}
</span>
</div>
<ErrorMessage error={message} />
{showLLM && <AIErrorConversation error={message} pageSnapshot={pageSnapshot} conversationId={errorId} diff={diff} />}
</div>;
}
export const ErrorsTab: React.FunctionComponent<{
errorsModel: ErrorsTabModel,
actions: modelUtil.ActionTraceEventInContext[],
@ -104,53 +147,13 @@ export const ErrorsTab: React.FunctionComponent<{
sdkLanguage: Language,
revealInSource: (error: ErrorDescription) => void,
}> = ({ errorsModel, sdkLanguage, revealInSource, actions, wallTime }) => {
const [showLLM, setShowLLM] = React.useState(false);
const llmAvailable = !!useLLMChat();
const pageSnapshot = usePageSnapshot(actions);
const gitCommitInfo = useGitCommitInfo();
const diff = gitCommitInfo?.['pull.diff'] ?? gitCommitInfo?.['revision.diff'];
if (!errorsModel.errors.size)
return <PlaceholderPanel text='No errors' />;
return <div className='fill' style={{ overflow: 'auto' }}>
{[...errorsModel.errors.entries()].map(([message, error]) => {
let location: string | undefined;
let longLocation: string | undefined;
const stackFrame = error.stack?.[0];
if (stackFrame) {
const file = stackFrame.file.replace(/.*[/\\](.*)/, '$1');
location = file + ':' + stackFrame.line;
longLocation = stackFrame.file + ':' + stackFrame.line;
}
const errorId = `error-${wallTime}-${longLocation}`;
return <div key={message} style={{ minHeight: errorsModel.errors.size === 1 ? '100%' : undefined, display: 'flex', flexDirection: 'column' }}>
<div className='hbox' style={{
alignItems: 'center',
padding: '5px 10px',
minHeight: 36,
fontWeight: 'bold',
color: 'var(--vscode-errorForeground)',
flex: 0,
}}>
{error.action && renderAction(error.action, { sdkLanguage })}
{location && <div className='action-location'>
@ <span title={longLocation} onClick={() => revealInSource(error)}>{location}</span>
</div>}
<span style={{ position: 'absolute', right: '5px' }}>
{llmAvailable
? <ToolbarButton onClick={() => setShowLLM(v => !v)} title="Fix with AI" className='copy-to-clipboard-text-button'>Fix with AI</ToolbarButton>
: <CopyPromptButton error={message} pageSnapshot={pageSnapshot} diff={diff} />}
</span>
</div>
<ErrorMessage error={message} />
{showLLM && <AIErrorConversation error={message} pageSnapshot={pageSnapshot} conversationId={errorId} diff={diff} />}
</div>;
})}
{[...errorsModel.errors.entries()].map(([message, error]) => <Error message={message} error={error} revealInSource={revealInSource} sdkLanguage={sdkLanguage} wallTime={wallTime} pageSnapshot={pageSnapshot} />)}
</div>;
};