From 0e8fdcecd99c9d617d2907421d0f224458cc39b9 Mon Sep 17 00:00:00 2001
From: Ryan Rosello <goneby30+github@gmail.com>
Date: Thu, 20 Jun 2024 20:13:02 +1000
Subject: [PATCH] feat(trace-viewer) add copy to clipboard on the Source >
 Stacktrace tab

---
 packages/trace-viewer/src/ui/copyToClipboard.tsx |  5 +++--
 packages/trace-viewer/src/ui/stackTrace.css      | 14 ++++++++++++++
 packages/trace-viewer/src/ui/stackTrace.tsx      | 15 ++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/trace-viewer/src/ui/copyToClipboard.tsx b/packages/trace-viewer/src/ui/copyToClipboard.tsx
index 96de5f3822..8db3ed4f25 100644
--- a/packages/trace-viewer/src/ui/copyToClipboard.tsx
+++ b/packages/trace-viewer/src/ui/copyToClipboard.tsx
@@ -18,7 +18,8 @@ import * as React from 'react';
 
 export const CopyToClipboard: React.FunctionComponent<{
   value: string,
-}> = ({ value }) => {
+  description?: string,
+}> = ({ value, description }) => {
   const [iconClassName, setIconClassName] = React.useState('codicon-clippy');
 
   const handleCopy = React.useCallback(() => {
@@ -32,5 +33,5 @@ export const CopyToClipboard: React.FunctionComponent<{
     });
 
   }, [value]);
-  return <span className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
+  return <span title={description ? description : 'Copy'} className={`copy-icon codicon ${iconClassName}`} onClick={handleCopy}/>;
 };
diff --git a/packages/trace-viewer/src/ui/stackTrace.css b/packages/trace-viewer/src/ui/stackTrace.css
index 5282c5219b..5f46484585 100644
--- a/packages/trace-viewer/src/ui/stackTrace.css
+++ b/packages/trace-viewer/src/ui/stackTrace.css
@@ -30,3 +30,17 @@
 .stack-trace-frame-line {
   flex: none;
 }
+
+.stack-trace-copy-to-clipboard {
+  padding: 0 5px;
+}
+
+.copy-icon {
+  display: none;
+  margin-right: 4px;
+}
+
+.list-view-entry:hover .copy-icon {
+  display: block;
+  cursor: pointer;
+}
diff --git a/packages/trace-viewer/src/ui/stackTrace.tsx b/packages/trace-viewer/src/ui/stackTrace.tsx
index 6a0bad1672..3b2a9122ec 100644
--- a/packages/trace-viewer/src/ui/stackTrace.tsx
+++ b/packages/trace-viewer/src/ui/stackTrace.tsx
@@ -18,6 +18,7 @@ import * as React from 'react';
 import './stackTrace.css';
 import { ListView } from '@web/components/listView';
 import type { StackFrame } from '@protocol/channels';
+import { CopyToClipboard } from './copyToClipboard';
 
 const StackFrameListView = ListView<StackFrame>;
 
@@ -27,23 +28,31 @@ export const StackTraceView: React.FunctionComponent<{
   setSelectedFrame: (index: number) => void
 }> = ({ stack, setSelectedFrame, selectedFrame }) => {
   const frames = stack || [];
+  const getFileName = (frame: StackFrame) => {
+    const pathSep = frame.file[1] === ':' ? '\\' : '/';
+    const fileName = frame.file.split(pathSep).pop();
+    return fileName;
+  };
+
   return <StackFrameListView
     name='stack-trace'
     items={frames}
     selectedItem={frames[selectedFrame]}
     render={frame => {
-      const pathSep = frame.file[1] === ':' ? '\\' : '/';
       return <>
         <span className='stack-trace-frame-function'>
           {frame.function || '(anonymous)'}
         </span>
         <span className='stack-trace-frame-location'>
-          {frame.file.split(pathSep).pop()}
+          {getFileName(frame)}
         </span>
         <span className='stack-trace-frame-line'>
           {':' + frame.line}
         </span>
+        <span className='stack-trace-copy-to-clipboard'>
+          <CopyToClipboard description='Copy filename' value={`${getFileName(frame)}:${frame.line}`}/>
+        </span>
       </>;
     }}
     onSelected={frame => setSelectedFrame(frames.indexOf(frame))} />;
-};
+};
\ No newline at end of file