From beca0a8d2a59d1c082801714d50a88a306f65365 Mon Sep 17 00:00:00 2001
From: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Date: Fri, 16 Jun 2023 23:37:06 -0400
Subject: [PATCH] Add second copy icon for value only (#1505)

## Which problem is this PR solving?
- Resolves #1503

## Short description of the changes
- Adds a second Copy icon that copies value only
- Change Copy JSON icon to `snippets`, to be visually different
- Reduce fade-out time for tooltip

Original Copy JSON was added in #292 / #312.

---------

Signed-off-by: Yuri Shkuro <ysh@meta.com>
---
 .../SpanDetail/KeyValuesTable.test.js                | 12 +++++++++---
 .../SpanDetail/KeyValuesTable.tsx                    |  6 ++++++
 .../jaeger-ui/src/components/common/CopyIcon.tsx     |  2 +-
 .../common/__snapshots__/CopyIcon.test.js.snap       |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
index 0a42a4c7e6..a0082a67eb 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
@@ -150,10 +150,16 @@ describe('<KeyValuesTable>', () => {
 
   it('renders a <CopyIcon /> with correct copyText for each data element', () => {
     const copyIcons = wrapper.find(CopyIcon);
-    expect(copyIcons.length).toBe(data.length);
+    expect(copyIcons.length).toBe(2 * data.length); // Copy and Copy JSON buttons
     copyIcons.forEach((copyIcon, i) => {
-      expect(copyIcon.prop('copyText')).toBe(JSON.stringify(data[i], null, 2));
-      expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON');
+      const datum = data[Math.floor(i / 2)];
+      if (i % 2 === 0) {
+        expect(copyIcon.prop('copyText')).toBe(datum.value);
+        expect(copyIcon.prop('tooltipTitle')).toBe('Copy value');
+      } else {
+        expect(copyIcon.prop('copyText')).toBe(JSON.stringify(datum, null, 2));
+        expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON');
+      }
     });
   });
 });
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 8fcb8ecc6b..e5a6968828 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -151,6 +151,12 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
                 <td className="KeyValueTable--copyColumn">
                   <CopyIcon
                     className="KeyValueTable--copyIcon"
+                    copyText={row.value}
+                    tooltipTitle="Copy value"
+                  />
+                  <CopyIcon
+                    className="KeyValueTable--copyIcon"
+                    icon="snippets"
                     copyText={JSON.stringify(row, null, 2)}
                     tooltipTitle="Copy JSON"
                   />
diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
index 546da2b04d..5693d63c93 100644
--- a/packages/jaeger-ui/src/components/common/CopyIcon.tsx
+++ b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
@@ -63,7 +63,7 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
     return (
       <Tooltip
         arrowPointAtCenter
-        mouseLeaveDelay={0.5}
+        mouseLeaveDelay={0.1}
         onVisibleChange={this.handleTooltipVisibilityChange}
         placement={this.props.placement}
         title={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
diff --git a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
index 875ed11fe5..d6d9c43ec1 100644
--- a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
+++ b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
@@ -5,7 +5,7 @@ exports[`<CopyIcon /> renders as expected 1`] = `
   arrowPointAtCenter={true}
   autoAdjustOverflow={true}
   mouseEnterDelay={0.1}
-  mouseLeaveDelay={0.5}
+  mouseLeaveDelay={0.1}
   onVisibleChange={[Function]}
   placement="left"
   title="tooltipTitleValue"