Fix clipboard button for DAST site validation modal
What does this MR do?
Swap out ClipboardButton
component with ModalCopyButton
to make the clipboard button work within GlModal
.
More details - https://docs.gitlab.com/12.10/ee/development/fe_guide/frontend_faq.html#2-modal_copy_button-vs-clipboard_button
The clipboard_button uses the copy_to_clipboard.js behaviour, which is initialized on page load, so if there are vue-based clipboard buttons that don’t exist at page load (such as ones in a GlModal), they do not have the click handlers associated with the clipboard package.
modal_copy_button was added that manages an instance of the clipboard plugin specific to the instance of that component, which means that clipboard events are bound on mounting and destroyed when the button is, mitigating the above issue. It also has bindings to a particular container or modal ID available, to work with the focus trap created by our GlModal.
Screenshots (strongly suggested)
No visual changes
How to test this?
- Enable the feature flag:
echo "Feature.enable(:security_on_demand_scans_site_validation)" | rails c
- Navigate to the the site profiles library at
:group/:project/-/security/configuration/dast_profiles
. - Click on
Validate target site
button and choose HTTP header validation. - Find the copy icon under
Add following HTTP header to your site
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry The feature is behind a feature flag