Skip to content

Add copy button to snippet

Michael Le requested to merge mle/336307-add-copy-code-embedded-snippets into master

What does this MR do and why?

Add copy button to embedded snippets for parity of actions of a GitLab snippet when used in product or on third party website.

Relates to #336307 (closed)

  • Add functionality to copy to clipboard by adding a button to embedded snippets
  • Update icons to reflect the thinner icons

Screenshots or screen recordings

Current Change
image image

How to set up and validate locally

  • Run GDK
  • Create a snippet in a local project
  • Click Embed and copy the script
    • Example: <script src="http://127.0.0.1:3000/flightjs/Flight/-/snippets/21.js"></script>
  • Create a new HTML page and call it index.html somewhere on your computer with the following code inside
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="http://127.0.0.1:3000/flightjs/Flight/-/snippets/21.js"></script>
</body>
</html>
  • Open the webpage in a browser

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Michael Le

Merge request reports