Copy annoation text to clipboard

packages/html-reporter/src/testCaseView.css

@@ -74,3 +74,13 @@
   flex-direction: row;
   flex-wrap: wrap;
 }
+
+.annotation-copy-button{
+  padding-left: 3px;
+  display: none;
+}
+
+.test-case-annotation:hover .annotation-copy-button{
+  padding-left: 3px;
+  display: inline;
+}

packages/html-reporter/src/testCaseView.tsx

@@ -25,6 +25,7 @@ import './testCaseView.css';
 import { TestResultView } from './testResultView';
 import { hashStringToInt } from './labelUtils';
 import { msToString } from './uiUtils';
+import { CopyToClipboard } from './copyToClipboard';
 
 export const TestCaseView: React.FC<{
   projectNames: string[],
@@ -68,15 +69,16 @@ function renderAnnotationDescription(description: string) {
   try {
     if (['http:', 'https:'].includes(new URL(description).protocol))
       return <a href={description} target='_blank' rel='noopener noreferrer'>{description}</a>;
-  } catch {}
+  } catch { }
   return description;
 }
 
 function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) {
   return (
     <div className='test-case-annotation'>
-      <span style={{ fontWeight: 'bold' }}>{type}</span>
+      <span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span>
       {description && <span>: {renderAnnotationDescription(description)}</span>}
+      <span className='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
     </div>
   );
 }