From ae74d7cfaa6d19cfc6499c474bfa1c0f3f6da556 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 9 Jan 2024 20:42:21 +0100
Subject: [PATCH 1/5] feat: add copy icon

---
 packages/ui/src/components/Icons/Copy.tsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/ui/src/components/Icons/Copy.tsx

diff --git a/packages/ui/src/components/Icons/Copy.tsx b/packages/ui/src/components/Icons/Copy.tsx
new file mode 100644
index 00000000..954de0a3
--- /dev/null
+++ b/packages/ui/src/components/Icons/Copy.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const CopyIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
+    <path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z" />
+  </svg>
+);

From 07ca6bdd63006370a4e7c45c67813967e5f18257 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 9 Jan 2024 20:45:06 +0100
Subject: [PATCH 2/5] feat: add button to copy filtered logs to clipboard

---
 .../Details/DetailsContent/JobLogs/JobLogs.tsx        | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
index 9e3f5957..c619570f 100644
--- a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
+++ b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
@@ -6,6 +6,7 @@ import { InputField } from '../../../../Form/InputField/InputField';
 import { FullscreenIcon } from '../../../../Icons/Fullscreen';
 import { PauseIcon } from '../../../../Icons/Pause';
 import { PlayIcon } from '../../../../Icons/Play';
+import { CopyIcon } from '../../../../Icons/Copy';
 import { Button } from '../../../../Button/Button';
 import s from './JobLogs.module.css';
 
@@ -76,6 +77,11 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
     setLiveLogs(!liveLogs);
   };
 
+  const copyLogsToShowToClipboard = () => {
+    const text: string = logsToShow.map((log) => log.message).join('\n');
+    navigator.clipboard.writeText(text);
+  };
+
   const onSearch = (event: SyntheticEvent<HTMLInputElement>) => {
     if (!event.currentTarget?.value) {
       setKeyword('');
@@ -116,6 +122,11 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
             <FullscreenIcon />
           </Button>
         </li>
+        <li>
+          <Button onClick={copyLogsToShowToClipboard}>
+            <CopyIcon />
+          </Button>
+        </li>
       </ul>
       <div className={s.preWrapper}>
         <pre>

From 3d134debb851f04c002f775bca0ae596275688a6 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 9 Jan 2024 20:45:31 +0100
Subject: [PATCH 3/5] feat: add button to copy single log lines to clipboard

---
 .../Details/DetailsContent/JobLogs/JobLogs.module.css | 10 ++++++++++
 .../Details/DetailsContent/JobLogs/JobLogs.tsx        | 11 +++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
index 76516ee3..3c178b86 100644
--- a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
+++ b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
@@ -81,3 +81,13 @@
 .toolbar .searchBar {
   width: 100%;
 }
+
+.logLineCopyButton {
+  opacity: 0;
+  transition: opacity 150ms ease;
+  margin-inline-start: 1ch;
+}
+
+li:hover .logLineCopyButton {
+  opacity: 1;
+}
diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
index c619570f..0a172d1b 100644
--- a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
+++ b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
@@ -32,6 +32,10 @@ const onClickFullScreen = (el: HTMLElement | null) => async () => {
   return document.exitFullscreen();
 };
 
+const copyLogToClipboard = (log: LogType) => async () => {
+  navigator.clipboard.writeText(log.message);
+};
+
 const shouldShow = (log: LogType, keyword = '') => {
   return !keyword || new RegExp(`${keyword}`, 'i').test(log.message);
 };
@@ -138,6 +142,13 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
                 data-line-number={`${log.lineNumber}.`}
               >
                 {log.message}
+                <Button
+                  onClick={copyLogToClipboard(log)}
+                  className={s.logLineCopyButton}
+                  tabIndex={-1}
+                >
+                  <CopyIcon />
+                </Button>
               </li>
             ))}
           </ol>

From f7f83039ec0d8bede78db81a63230249d15754b1 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 9 Jan 2024 21:52:50 +0100
Subject: [PATCH 4/5] feat: add copy to clipboard button to highlight component

---
 .../src/components/Highlight/Highlight.module.css  |  8 ++++++++
 packages/ui/src/components/Highlight/Highlight.tsx | 14 +++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/Highlight/Highlight.module.css

diff --git a/packages/ui/src/components/Highlight/Highlight.module.css b/packages/ui/src/components/Highlight/Highlight.module.css
new file mode 100644
index 00000000..f1b824de
--- /dev/null
+++ b/packages/ui/src/components/Highlight/Highlight.module.css
@@ -0,0 +1,8 @@
+.codeContainerWrapper {
+    display: flex;
+    align-items: flex-start;
+}
+
+.codeContainerWrapper pre {
+    margin-right: 1ch;
+}
diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx
index dc955807..09604b39 100644
--- a/packages/ui/src/components/Highlight/Highlight.tsx
+++ b/packages/ui/src/components/Highlight/Highlight.tsx
@@ -1,6 +1,9 @@
 import cn from 'clsx';
 import React from 'react';
 import { asyncHighlight } from '../../utils/highlight/highlight';
+import s from './Highlight.module.css';
+import { Button } from '../Button/Button';
+import { CopyIcon } from '../Icons/Copy';
 
 interface HighlightProps {
   language: 'json' | 'stacktrace';
@@ -32,9 +35,14 @@ export class Highlight extends React.Component<HighlightProps> {
   public render() {
     const { language } = this.props;
     return (
-      <pre ref={this.codeRef}>
-        <code className={cn('hljs', language)} />
-      </pre>
+      <div className={s.codeContainerWrapper}>
+        <pre ref={this.codeRef}>
+          <code className={cn('hljs', language)} />
+        </pre>
+        <Button onClick={() => navigator.clipboard.writeText(this.props.children ?? '')}>
+          <CopyIcon />
+        </Button>
+      </div>
     );
   }
 

From 17f6d6a9ae0813c123ee4636f17aae489d286709 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Wed, 10 Jan 2024 09:06:28 +0100
Subject: [PATCH 5/5] fix: use anonymous function to copy log line to clipboard

---
 .../JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
index 0a172d1b..da984c0b 100644
--- a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
+++ b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
@@ -143,7 +143,7 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
               >
                 {log.message}
                 <Button
-                  onClick={copyLogToClipboard(log)}
+                  onClick={() => copyLogToClipboard(log)}
                   className={s.logLineCopyButton}
                   tabIndex={-1}
                 >