feat: add copy to clipboard buttons (#673)

* feat: add copy icon * feat: add button to copy filtered logs to clipboard * feat: add button to copy single log lines to clipboard * feat: add copy to clipboard button to highlight component * fix: use anonymous function to copy log line to clipboard
felixmosh · Jan 11, 2024 · babcc64 · babcc64
1 parent ca405af
commit babcc64
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 3 deletions.
diff --git a/packages/ui/src/components/Highlight/Highlight.module.css 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
@@ -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>
     );
   }
 

diff --git a/packages/ui/src/components/Icons/Copy.tsx 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>
+);
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
@@ -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
@@ -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';
 
@@ -31,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);
 };
@@ -76,6 +81,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 +126,11 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
             <FullscreenIcon />
           </Button>
         </li>
+        <li>
+          <Button onClick={copyLogsToShowToClipboard}>
+            <CopyIcon />
+          </Button>
+        </li>
       </ul>
       <div className={s.preWrapper}>
         <pre>
@@ -127,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>