feat(reporter): add copy button for annotations

Adds a copy-to-clipboard button for each annotation

packages/html-reporter/src/copyToClipboard.css

@@ -26,9 +26,23 @@
   cursor: pointer;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   border-radius: 4px;
 }
 
+.copy-icon svg {
+  margin: 0;
+}
+
+.copy-icon.small {
+  color: var(--color-fg-muted);
+}
+
+.copy-icon.small svg {
+  height: 14px;
+  width: 14px;
+}
+
 .copy-icon:not(:disabled):hover {
   background-color: var(--color-border-default);
 }

packages/html-reporter/src/copyToClipboard.tsx

@@ -20,7 +20,8 @@ import './copyToClipboard.css';
 
 export const CopyToClipboard: React.FunctionComponent<{
   value: string,
-}> = ({ value }) => {
+  variant: 'small' | 'large'
+}> = ({ value, variant }) => {
   type IconType = 'copy' | 'check' | 'cross';
   const [icon, setIcon] = React.useState<IconType>('copy');
   const handleCopy = React.useCallback(() => {
@@ -34,5 +35,5 @@ export const CopyToClipboard: React.FunctionComponent<{
     });
   }, [value]);
   const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
-  return <button className='copy-icon' onClick={handleCopy}>{iconElement}</button>;
+  return <button className={`copy-icon ${variant}`} onClick={handleCopy}>{iconElement}</button>;
 };

packages/html-reporter/src/testCaseView.css

@@ -73,4 +73,10 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-}
+}
+
+.copy-button-container {
+  display: inline-flex;
+  margin-left: 8px;
+  vertical-align: bottom;
+}

packages/html-reporter/src/testCaseView.tsx

@@ -26,6 +26,7 @@ import { TestResultView } from './testResultView';
 import { linkifyText } from '@web/renderUtils';
 import { hashStringToInt, msToString } from './utils';
 import { clsx } from '@web/uiUtils';
+import { CopyToClipboard } from './copyToClipboard';
 
 export const TestCaseView: React.FC<{
   projectNames: string[],
@@ -74,6 +75,9 @@ function TestCaseAnnotationView({ annotation: { type, description } }: { annotat
     <div className='test-case-annotation'>
       <span style={{ fontWeight: 'bold' }}>{type}</span>
       {description && <span>: {linkifyText(description)}</span>}
+      {description && <span className='copy-button-container'>
+        <CopyToClipboard value={description} variant='small'/>
+      </span>}
     </div>
   );
 }