fix(ui): replace deprecated document.execCommand('copy') API with navigator (#13431)

Replaces the deprecated API which might cause issues with the copy
button.

Also adds an E2E test for the copy button

Author: r1tsuu

packages/ui/src/elements/CopyToClipboard/index.scss

@@ -8,14 +8,6 @@
     vertical-align: middle;
     border-radius: 100%;
 
-    textarea {
-      position: absolute;
-      opacity: 0;
-      z-index: -1;
-      height: 0px;
-      width: 0px;
-    }
-
     &:focus,
     &:active {
       outline: none;

packages/ui/src/elements/CopyToClipboard/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 import { CopyIcon } from '../../icons/Copy/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
@@ -15,7 +15,6 @@ export type Props = {
 }
 
 export const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {
-  const ref = useRef(null)
   const [copied, setCopied] = useState(false)
   const [hovered, setHovered] = useState(false)
   const { t } = useTranslation()
@@ -24,13 +23,9 @@ export const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessag
     return (
       <button
         className={baseClass}
-        onClick={() => {
-          if (ref && ref.current) {
-            ref.current.select()
-            ref.current.setSelectionRange(0, value.length + 1)
-            document.execCommand('copy')
-            setCopied(true)
-          }
+        onClick={async () => {
+          await navigator.clipboard.writeText(value)
+          setCopied(true)
         }}
         onMouseEnter={() => {
           setHovered(true)
@@ -47,7 +42,6 @@ export const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessag
           {copied && (successMessage ?? t('general:copied'))}
           {!copied && (defaultMessage ?? t('general:copy'))}
         </Tooltip>
-        <textarea readOnly ref={ref} tabIndex={-1} value={value} />
       </button>
     )
   }

test/uploads/e2e.spec.ts

@@ -135,6 +135,7 @@ describe('Uploads', () => {
     mediaWithoutDeleteAccessURL = new AdminUrlUtil(serverURL, mediaWithoutDeleteAccessSlug)
 
     const context = await browser.newContext()
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
     page = await context.newPage()
 
     const { consoleErrors, collectErrors, stopCollectingErrors } = initPageConsoleErrorCatch(page, {
@@ -218,6 +219,22 @@ describe('Uploads', () => {
     await expect(filename).toContainText('test-image.png')
   })
 
+  test('should copy the file url field to the clipboard', async () => {
+    const mediaDoc = (
+      await payload.find({
+        collection: mediaSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+      })
+    ).docs[0]
+
+    await page.goto(mediaURL.edit(mediaDoc!.id))
+    await page.locator('.copy-to-clipboard').click()
+    const clipbaordContent = await page.evaluate(() => navigator.clipboard.readText())
+    expect(clipbaordContent).toBe(mediaDoc?.url)
+  })
+
   test('should create file upload', async () => {
     await page.goto(mediaURL.create)
     await page.setInputFiles('input[type="file"]', path.resolve(dirname, './image.png'))