feat: implement reusable CopyToClipboard component for raw scan outputs#456
Conversation
|
Hi Maintainers, I have successfully resolved the issue by introducing a reusable This completely removes the UX friction of manual text selection and ensures a smooth, modern developer experience. Please review and merge this under GSSoC 2026! Thank you! 🚀 |
utksh1
left a comment
There was a problem hiding this comment.
Thanks for extracting the copy control. This needs a little more work before merge: the new reusable component has no unit coverage, and it does not expose success/failure state in an accessible way beyond changing visible text. Please add a focused test for clicking the button, calling navigator.clipboard.writeText, and returning from Copied! to the normal label. Also please handle clipboard failures with user-visible state or keep the previous behavior equivalent instead of only logging to the console.
utksh1
left a comment
There was a problem hiding this comment.
The requested follow-up is addressed: the copy control now has visible success and failure states, uses accessible live text, and includes focused coverage for successful copy, reset, and clipboard failure. CI is passing.
##Description
This PR introduces a reusable, highly polished CopyToClipboard component to enhance the developer user experience on the task details page. It replaces a plain text-toggle button with an icon-driven utility that interfaces with the modern browser navigator.clipboard.writeText() API.
##Key Changes:
Created src/components/CopyToClipboard.jsx leveraging dynamic Tailwind CSS theme states and smooth visual transition feedback.
Integrated responsive inline SVG graphics (document alignment stack for inactive states and an active green checkmark upon success).
Cleaned up the raw logs output panel layout inside src/pages/TaskDetails.tsx to handle string evaluation safely and prevent duplicate buttons.
##Related Issues
Closes #423
##Type of Change
[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Documentation update
##How Has This Been Tested?
The code was validated through static code evaluation and strict structural verification via git diff to ensure zero runtime compilation conflicts or syntax errors under the current Vite 6 configuration. The text extraction logic targets the explicit fallback chain rawOutput || result?.raw_output || '' to mirror the precise data patterns displayed in the terminal UI.
##Checklist
[x] My code follows the code style of this project.
[x] I have performed a self-review of my own code.
[x] I have commented my code, particularly in hard-to-understand areas.
[ ] I have made corresponding changes to the documentation.
[x] My changes generate no new warnings.
##Additional Note for Maintainers
Contributing under GSSoC 2026! Please review and merge. Thanks!