Adds simple-copy-button
component to fix copying in Safari
What does this MR do and why?
Adds yet another component to render a button that programmatically copies text to the clipboard.
It should fix problems when copying the Runner installation CLI instructions in Safari.
Changelog: fixed
Note: This idea to implement this originally came from !207236, as some of the components we use fail in different situations (non-secure testing environments, modals or Safari).
Slightly Opinionated UX: This implements a copy button that 1) shows a toast when copying is successful 2) hides the tooltip for 3 seconds to avoid flickering when copying.
References
- Related issue: #572689
- Old discussion on the topic: !66134 (comment 700915783)
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
How to set up and validate locally
- Visit the Admin > Runners http://gdk.test:3000/admin/runners
- Ensure you can copy the contents using the buttons.
Testing matrix that I am focusing on:
- Both
https
andhttp
-
Chrome
andSafari
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #572689