Add a copy icon to entries in KeyValuesTable (#204)

[everett980]

Which problem is this PR solving?

• Tags are human-readable ( 🎉), but harder to paste into other tools.

Short description of the changes

• Add icon to rows in KeyValueTable to copy that row's data.

(again, my converted gifs have a weird background color issue, looks fine in the browser and .webm recording)

Copied JSON:

{
  "key": "sql.query",
  "type": "string",
  "value": "SELECT * FROM customer WHERE customer_id=731"
}

I went with the copy icon over the word copy since I believe it is fairly ubiquitous, but open to changing.

[yurishkuro]

I don't love that there is no "copy confirmation" so I welcome advice on how to indicate that to the user.

the copy icon can be animated to transform to a green checkbox.

Q: in what format is the tag being copied? I.e. how does the above example look after pasting it as text?

[tiffon]

I would suggest using the tooltip on the icon to state / indicate:

• "Copy JSON" on mouseover
• "Copied to clipboard" on click
  • Set a mouseLeaveDelay to something like 500ms (or so) to let the user more easily read the message

What do you think?

[everett980]

Q: in what format is the tag being copied? I.e. how does the above example look after pasting it as text?

@yurishkuro the JSON.stringify(row, null, 2) looks like the following:

{
  "key": "hostname",
  "type": "string",
  "value": "6376c38cb700"
}

The null, 2 arguments add new lines with two spaces for indentation. It helps considerably with legibility and just about any tool that accepts JSON input can handle the white-space characters.

[everett980]

the copy icon can be animated to transform to a green checkbox.

I would suggest using the tooltip on the icon to state / indicate:

• "Copy JSON" on mouseover
• "Copied to clipboard" on click
• • Set a mouseLeaveDelay to something like 500ms (or so) to let the user more easily read the message
    What do you think?

@yurishkuro @tiffon I went with the tooltip over the icon change as the tooltip will help with clarity for both before and after the copy event.
antd's tooltip struggles with a left-positioned tooltip's title increasing in length, so I used the title "Copy JSON" before the row has been copied, and "Copied" for after copy. I would hope that a user wouldn't be reliant on the "to clipboard" detail to know where copied data goes. I will update the gif in the description to include the tooltips.

[tiffon]

Changes look great. A few small comments. There is an issue with the yarn.lock file.

[codecov]

Codecov Report

Merging #292 into master will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #292      +/-   ##
==========================================
- Coverage   82.23%   82.23%   -0.01%     
==========================================
  Files         141      141              
  Lines        3101     3112      +11     
  Branches      645      647       +2     
==========================================
+ Hits         2550     2559       +9     
- Misses        437      439       +2     
  Partials      114      114

Impacted Files	Coverage Δ
...nts/TracePage/TraceTimelineViewer/SpanDetailRow.js	100% <ø> (ø)	⬆️
...omponents/TraceDiff/TraceDiffHeader/TraceHeader.js	14.28% <ø> (ø)	⬆️
packages/jaeger-ui/src/components/App/NotFound.js	0% <ø> (ø)	⬆️
...e/TraceTimelineViewer/SpanDetail/KeyValuesTable.js	90.9% <100%> (+4.54%)	⬆️
...neViewer/TimelineHeaderRow/TimelineViewingLayer.js	87.03% <0%> (-3.71%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0a0cf66...e1ffeda. Read the comment docs.