From caa6986577b94fc5f69d13c01614b128aee07c53 Mon Sep 17 00:00:00 2001
From: Anthony Roberts <anthonycr0@users.noreply.github.com>
Date: Mon, 22 Jul 2024 14:32:02 +1000
Subject: [PATCH] feat(reporter): add copy button for annotations

Adds a copy-to-clipboard button for each annotation
---
 packages/html-reporter/src/copyToClipboard.css | 14 ++++++++++++++
 packages/html-reporter/src/copyToClipboard.tsx |  5 +++--
 packages/html-reporter/src/testCaseView.css    |  8 +++++++-
 packages/html-reporter/src/testCaseView.tsx    |  4 ++++
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/html-reporter/src/copyToClipboard.css b/packages/html-reporter/src/copyToClipboard.css
index 5790b626c0..dcd79e7c91 100644
--- a/packages/html-reporter/src/copyToClipboard.css
+++ b/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);
 }
diff --git a/packages/html-reporter/src/copyToClipboard.tsx b/packages/html-reporter/src/copyToClipboard.tsx
index a24015a671..be217e9587 100644
--- a/packages/html-reporter/src/copyToClipboard.tsx
+++ b/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>;
 };
diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index d87cf3aacb..42f72bf438 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -73,4 +73,10 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-}
\ No newline at end of file
+}
+
+.copy-button-container {
+  display: inline-flex;
+  margin-left: 8px;
+  vertical-align: bottom;
+}
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 5bed3c8309..a9e8e1859f 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/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>
   );
 }