[Cross-Check]: Enhance GithubUserLink Component with Copy to Clipboard Functionality

[valerydluski]

Description

The GithubUserLink component (located at https://github.com/rolling-scopes/rsschool-app/blob/master/client/src/components/GithubUserLink.tsx) in the Rolling Scopes School application requires an enhancement to include a copy-to-clipboard feature. This task involves integrating the existing CopyToClipboardButton component (https://github.com/rolling-scopes/rsschool-app/blob/master/client/src/components/CopyToClipboardButton.tsx) into the GithubUserLink component. Additionally, a new prop, copyable (default value false), will be introduced in GithubUserLink to control this functionality. This updated component will then be implemented in the getCrossCheckPairsColumns module (https://github.com/rolling-scopes/rsschool-app/blob/master/client/src/modules/CrossCheckPairs/data/getCrossCheckPairsColumns.tsx#L22).

Objectives

• Feature Integration: Incorporate copy-to-clipboard functionality into the GithubUserLink component.
• Configurability: Add a copyable prop to enable/disable the copy feature.
• Component Upgrade: Use the enhanced GithubUserLink in the getCrossCheckPairsColumns module.

Tasks

1. Component Enhancement:

   • Add a copyable prop to GithubUserLink with a default value of false.
   • Integrate CopyToClipboardButton into GithubUserLink.

2. UI and UX Design:

   • Design an intuitive icon for the copy feature within the GithubUserLink component.
   • Ensure the copy icon is only visible when copyable is set to true.

3. Implementation in getCrossCheckPairsColumns:

   • Replace the existing GithubUserLink usage in getCrossCheckPairsColumns with the enhanced version.
   • Ensure the copyable prop is appropriately configured in the implementation.

4. Testing and Quality Assurance:

   • Test the enhanced component for both states of the copyable prop.
   • Validate the functionality across different browsers and screen sizes.

Expected Outcome

The GithubUserLink component will now have an optional copy-to-clipboard feature, improving user experience by facilitating easy copying of GitHub usernames. This feature, when enabled, will be integrated into the Cross Check Pairs module, enhancing its usability.

Additional Notes

The implementation should be mindful of the existing UI/UX design principles, ensuring that the addition of the copy feature does not disrupt the user interface. Adequate testing is required to maintain cross-browser compatibility and responsiveness.