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]); }, [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<{ export const ErrorsTab: React.FunctionComponent<{
errorsModel: ErrorsTabModel, errorsModel: ErrorsTabModel,
actions: modelUtil.ActionTraceEventInContext[], actions: modelUtil.ActionTraceEventInContext[],
@ -104,53 +147,13 @@ export const ErrorsTab: React.FunctionComponent<{
sdkLanguage: Language, sdkLanguage: Language,
revealInSource: (error: ErrorDescription) => void, revealInSource: (error: ErrorDescription) => void,
}> = ({ errorsModel, sdkLanguage, revealInSource, actions, wallTime }) => { }> = ({ errorsModel, sdkLanguage, revealInSource, actions, wallTime }) => {
const [showLLM, setShowLLM] = React.useState(false);
const llmAvailable = !!useLLMChat();
const pageSnapshot = usePageSnapshot(actions); const pageSnapshot = usePageSnapshot(actions);
const gitCommitInfo = useGitCommitInfo();
const diff = gitCommitInfo?.['pull.diff'] ?? gitCommitInfo?.['revision.diff'];
if (!errorsModel.errors.size) if (!errorsModel.errors.size)
return <PlaceholderPanel text='No errors' />; return <PlaceholderPanel text='No errors' />;
return <div className='fill' style={{ overflow: 'auto' }}> return <div className='fill' style={{ overflow: 'auto' }}>
{[...errorsModel.errors.entries()].map(([message, error]) => { {[...errorsModel.errors.entries()].map(([message, error]) => <Error message={message} error={error} revealInSource={revealInSource} sdkLanguage={sdkLanguage} wallTime={wallTime} pageSnapshot={pageSnapshot} />)}
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>;
})}
</div>; </div>;
}; };