feat(devtools): add 'copy' button in devtools #4468
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 54cc881:
|
StefanDjokovic
changed the title
There was a problem hiding this comment.
Nice work, thank you 🙏
I think some sort of user confirmation that the copying worked would be nice. Maybe the button could turn into a green checkmark or so for a short period of time before it turns back into the button via an animation?
FYI, in the codesandbox iframe, it doesn't seem to work, which got me confused. Opening it in full view does work, but the ux is the same: you click and nothing happens...
also, please add some tests for the new feature, thank you 🙏
| @@ -124,6 +155,9 @@ export const DefaultRenderer: Renderer = ({ | |||
| {subEntries.length} {subEntries.length > 1 ? `items` : `item`} | |||
| </Info> | |||
| </ExpandButton> | |||
| {copiable ? (<CopyButton> | |||
| <Copier onClick={() => navigator.clipboard.writeText(displayValue(value))} /> | |||
There was a problem hiding this comment.
putting displayValue into the clipboard seems weird, because we use superjson to show non-serializable values. Why don't we just put the raw values that are really in the cache into the clipboard?
|
Thank you TkDodo for the feedback and thorough review 🙏 Will be adding the confirmation, tests, and investigate why it's not working in the iframe. Thanks for pointing them out! :) |
|
Looks like it might not be possible to add to clipboard from the iframe :/
|
|
Confirmation state added (same SVG as GitHub):
I'm still unsure about how to best handle what is being pasted to the clipboard. I used superjson to stringify the value because I couldn't find any way to copy the javascript object :/ Let me know if you have some pointer on how to do that! To handle situations where the user can't copy to clipboard (e.g. permissions in iframe) I've added an error state that should hopefully make things clearer.
The other solution that I have been thinking of is, instead of a copy-to-clipboard action, having it become a "print on console". That should help with the error state. Let me know your thoughts and any feedback/comments on the code :) |
|
Thanks, fixed the comments 🙏 |
Codecov ReportBase: 96.36% // Head: 92.25% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## main #4468 +/- ##
==========================================
- Coverage 96.36% 92.25% -4.11%
==========================================
Files 45 89 +44
Lines 2281 3706 +1425
Branches 640 970 +330
==========================================
+ Hits 2198 3419 +1221
- Misses 80 271 +191
- Partials 3 16 +13 Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
|
Formatted the test file, sorry about that, didn't realise that 😅 |
|
awesome work, thank you 🚀 |
|
I can see some act warnings in the react17 tests - can you take a look at them maybe? |
|
@TkDodo I wasn't able to reproduce the warnings or last Fail/Warnings locally. I tried running npm run test:react:17 and they don't show up, is there anything else that needs to be done to have them? I saw the warnings before when I wasn't importing act from @testing-library/react, but they seem to be working fine now locally |
This PR adds a copy button in the devtools. This will appear next to objects in Data Explorer.
Let me know if the design of this makes sense or how this can be improved.