Add a "copy link" operation to the variations list

Can you attach a screenshot? Also wondering about Views? No idea if some people override the default list by a view.

Here is the screenshot

We could create a new field and theme for the views because I do not think 'operations' is a good way to add this logic as we do not do anything with variation.

@tBKoT I think we should not reference variation in CSS, libraries, or data attributes. That way we can reuse this link and styles elsewhere.

Works great, 2 comments though: navigator.clipboard.writeText is async, it returns a promise so technically:

The following try catch isn't going to work.

            try {
              const successful = navigator.clipboard.writeText(link);
              if (!successful) {
                console.log('Failed to copy link');
              }
            } catch (err) {
              console.log('Failed to copy link');
            }

So we either need to convert the code to look like this:

navigator.clipboard.writeText("This is the text to be copied").then(() => {
  console.log('Content copied to clipboard');
  /* Resolved - text copied to clipboard successfully */
},() => {
  console.error('Failed to copy');
  /* Rejected - text failed to copy to the clipboard */
});

Or create a function and make it async:

async function copyContent() {
  try {
    await navigator.clipboard.writeText('This is the text to be copied');
    console.log('Content copied to clipboard');
    /* Resolved - text copied to clipboard successfully */
  } catch (err) {
    console.error('Failed to copy: ', err);
    /* Rejected - text failed to copy to the clipboard */
  }
}

Additionally, there is no visual feedback after successfully copying the text, like on Github (See the attached screenshot):

Let's use the following icon for this: https://icons.getbootstrap.com/icons/check-lg/.

@jsacksick icon now changing if the copy process was successful together with the title attribute. After 2 seconds everything is turning back to the previous state.