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

make it a text button

Browse source
This commit is contained in:
Simon Knott 2025-02-10 10:13:03 +01:00
parent 73cc6dd364
commit 1344d83be6
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/trace-viewer/src/ui/copyToClipboard.tsx
View file

@ -46,11 +46,16 @@ export const CopyToClipboard: React.FunctionComponent<{
export const CopyToClipboardTextButton: React.FunctionComponent<{ export const CopyToClipboardTextButton: React.FunctionComponent<{
value: string | (() => Promise<string>), value: string | (() => Promise<string>),
description: string, description: string,
}> = ({ value, description }) => { copiedDescription?: React.ReactNode,
style?: React.CSSProperties,
}> = ({ value, description, copiedDescription = description, style }) => {
const [copied, setCopied] = React.useState(false);
const handleCopy = React.useCallback(async () => { const handleCopy = React.useCallback(async () => {
const valueToCopy = typeof value === 'function' ? await value() : value; const valueToCopy = typeof value === 'function' ? await value() : value;
await navigator.clipboard.writeText(valueToCopy); await navigator.clipboard.writeText(valueToCopy);
setCopied(true);
setTimeout(() => setCopied(false), 3000);
}, [value]); }, [value]);
return <ToolbarButton title={description} onClick={handleCopy} className='copy-to-clipboard-text-button'>{description}</ToolbarButton>; return <ToolbarButton style={style} title={description} onClick={handleCopy} className='copy-to-clipboard-text-button'>{copied ? copiedDescription : description}</ToolbarButton>;
}; };

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

@ -21,7 +21,7 @@ import { PlaceholderPanel } from './placeholderPanel';
import { renderAction } from './actionList'; import { renderAction } from './actionList';
import type { Language } from '@isomorphic/locatorGenerators'; import type { Language } from '@isomorphic/locatorGenerators';
import type { StackFrame } from '@protocol/channels'; import type { StackFrame } from '@protocol/channels';
import { CopyToClipboard } from './copyToClipboard'; import { CopyToClipboardTextButton } from './copyToClipboard';
import { attachmentURL } from './attachmentsTab'; import { attachmentURL } from './attachmentsTab';
import { fixTestPrompt } from '@web/components/prompts'; import { fixTestPrompt } from '@web/components/prompts';
@ -46,7 +46,7 @@ const PromptButton: React.FC<{
const prompt = React.useMemo(() => fixTestPrompt(error, undefined, pageSnapshot), [error, pageSnapshot]); const prompt = React.useMemo(() => fixTestPrompt(error, undefined, pageSnapshot), [error, pageSnapshot]);
return <CopyToClipboard value={prompt} copyIcon='copilot' description="Copy prompt to clipboard" />; return <CopyToClipboardTextButton value={prompt} description='Fix with AI' copiedDescription={<>Copied <span className='codicon codicon-copy' style={{ marginLeft: '5px' }}/></>} style={{ width: '90px', justifyContent: 'center' }} />;
}; };
export type ErrorDescription = { export type ErrorDescription = {
@ -100,7 +100,7 @@ export const ErrorsTab: React.FunctionComponent<{
{location && <div className='action-location'> {location && <div className='action-location'>
@ <span title={longLocation} onClick={() => revealInSource(error)}>{location}</span> @ <span title={longLocation} onClick={() => revealInSource(error)}>{location}</span>
</div>} </div>}
<span style={{ position: 'absolute', right: '20px' }}> <span style={{ position: 'absolute', right: '5px' }}>
<PromptButton error={message} actions={actions} /> <PromptButton error={message} actions={actions} />
</span> </span>
</div> </div>