From 002932d2648835ca1e19da8d0555e84cc25fa8dc Mon Sep 17 00:00:00 2001
From: yushmanth2910 <112748914+Yushmanth-reddy@users.noreply.github.com>
Date: Fri, 7 Jul 2023 22:10:06 +0530
Subject: [PATCH] Add text label to copy buttons on tags (#1547)

---
 .../TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx      | 2 ++
 packages/jaeger-ui/src/components/common/CopyIcon.css      | 7 +++++--
 packages/jaeger-ui/src/components/common/CopyIcon.tsx      | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
index e5a6968828..094815ebe6 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -153,12 +153,14 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
                     className="KeyValueTable--copyIcon"
                     copyText={row.value}
                     tooltipTitle="Copy value"
+                    buttonText="Copy"
                   />
                   <CopyIcon
                     className="KeyValueTable--copyIcon"
                     icon="snippets"
                     copyText={JSON.stringify(row, null, 2)}
                     tooltipTitle="Copy JSON"
+                    buttonText="JSON"
                   />
                 </td>
               </tr>
diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.css b/packages/jaeger-ui/src/components/common/CopyIcon.css
index 25738d372e..44c5aefd87 100644
--- a/packages/jaeger-ui/src/components/common/CopyIcon.css
+++ b/packages/jaeger-ui/src/components/common/CopyIcon.css
@@ -17,11 +17,14 @@ limitations under the License.
 .CopyIcon,
 .CopyIcon:hover {
   background-color: transparent;
-  border: none;
+  border: 1px solid inherit;
   color: inherit;
   height: 100%;
   overflow: hidden;
-  padding: 0px;
+  padding: 1px;
+  font-size: 13px;
+  margin-left: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .CopyIcon:focus {
diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
index 5693d63c93..849203f38e 100644
--- a/packages/jaeger-ui/src/components/common/CopyIcon.tsx
+++ b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
@@ -27,6 +27,7 @@ type PropsType = {
   icon?: string;
   placement?: TooltipPlacement;
   tooltipTitle: string;
+  buttonText: string;
 };
 
 type StateType = {
@@ -73,7 +74,9 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
           htmlType="button"
           icon={this.props.icon}
           onClick={this.handleClick}
-        />
+        >
+          {this.props.buttonText}
+        </Button>
       </Tooltip>
     );
   }