Skip to content

feat: implement reusable CopyToClipboard component for raw scan outputs#456

Merged
utksh1 merged 6 commits into
utksh1:mainfrom
DeepeshKafalatiya:feat/copy-to-clipboard
Jun 1, 2026
Merged

feat: implement reusable CopyToClipboard component for raw scan outputs#456
utksh1 merged 6 commits into
utksh1:mainfrom
DeepeshKafalatiya:feat/copy-to-clipboard

Conversation

@DeepeshKafalatiya
Copy link
Copy Markdown
Contributor

##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!

@DeepeshKafalatiya
Copy link
Copy Markdown
Contributor Author

Hi Maintainers,
@utksh1

I have successfully resolved the issue by introducing a reusable CopyToClipboard component with fluid visual feedback and sharp SVG icons. I've also integrated it cleanly into the Raw Output tab within TaskDetails.tsx.

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 utksh1 added level:beginner 20 pts difficulty label for small beginner-friendly PRs type:feature Feature work category bonus label area:frontend Frontend React/UI work labels Jun 1, 2026
Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Owner

@utksh1 utksh1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@utksh1 utksh1 added the gssoc:approved Admin validation: approved for GSSoC scoring label Jun 1, 2026
@utksh1 utksh1 merged commit 10adb31 into utksh1:main Jun 1, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:frontend Frontend React/UI work gssoc:approved Admin validation: approved for GSSoC scoring level:beginner 20 pts difficulty label for small beginner-friendly PRs type:feature Feature work category bonus label

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Enhancement: Implement a "Copy to Clipboard" utility button for Scan Results / Logs

2 participants