Skip to content

Fix clipboard button for DAST site validation modal

Dheeraj Joshi requested to merge djadmin-dast-fix-clipboard-btn into master

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?

  1. Enable the feature flag:
echo "Feature.enable(:security_on_demand_scans_site_validation)" | rails c
  1. Navigate to the the site profiles library at :group/:project/-/security/configuration/dast_profiles.
  2. Click on Validate target site button and choose HTTP header validation.
  3. Find the copy icon under Add following HTTP header to your site

Does this MR meet the acceptance criteria?

Conformity

Edited by Dheeraj Joshi

Merge request reports