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>

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');
+      }
     });
   });
 });

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"
                   />

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}

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"