fix!: unable to copy from safari in clipboard button

Author: Elessar1802

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback } from 'react'
-import Tippy from '@tippyjs/react'
+import { useState, useEffect, useRef } from 'react'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
+import Tooltip from '@Common/Tooltip/Tooltip'
 import ClipboardProps from './types'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -25,73 +25,87 @@ import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
  * @param content - Content to be copied
  * @param copiedTippyText - Text to be shown in the tippy when the content is copied, default 'Copied!'
  * @param duration - Duration for which the tippy should be shown, default 1000
- * @param trigger - To trigger the copy action outside the button, if set to true the content will be copied, use case being triggering the copy action from outside the component
- * @param setTrigger - Callback function to set the trigger outside the button
+ * @param copyToClipboardPromise - the promise returned by copyToClipboard util function
  * @param rootClassName - additional classes to add to button
  * @param iconSize - size of svg icon to be shown, default 16 (icon-dim-16)
  */
 export default function ClipboardButton({
     content,
     copiedTippyText = 'Copied!',
     duration = 1000,
-    trigger,
-    setTrigger = noop,
+    copyToClipboardPromise,
     rootClassName = '',
     iconSize = 16,
 }: ClipboardProps) {
     const [copied, setCopied] = useState<boolean>(false)
-    const [enableTippy, setEnableTippy] = useState<boolean>(false)
+    const setCopiedFalseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(-1)
 
-    const handleTextCopied = () => {
+    const handleTriggerCopy = () => {
         setCopied(true)
+
+        setCopiedFalseTimeoutRef.current = setTimeout(() => {
+            setCopied(false)
+
+            setCopiedFalseTimeoutRef.current = -1
+        }, duration)
     }
-    const isTriggerUndefined = typeof trigger === 'undefined'
 
-    const handleEnableTippy = () => setEnableTippy(true)
-    const handleDisableTippy = () => setEnableTippy(false)
-    const handleCopyContent = useCallback(
-        (e?) => {
-            if (e) stopPropagation(e)
-            copyToClipboard(content, handleTextCopied)
-        },
-        [content],
-    )
-    const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
+    const handleAwaitCopyToClipboardPromise = async (shouldRunCopy?: boolean) => {
+        try {
+            if (shouldRunCopy) {
+                await copyToClipboard(content)
+            } else {
+                await copyToClipboardPromise
+            }
 
-    useEffect(() => {
-        if (!copied) return
+            handleTriggerCopy()
+        } catch {
+            noop()
+        }
+    }
 
-        const timeout = setTimeout(() => {
-            setCopied(false)
-            setTrigger(false)
-        }, duration)
+    const handleCopyContent = async (e?: React.MouseEvent) => {
+        if (e) {
+            stopPropagation(e)
+        }
+
+        await handleAwaitCopyToClipboardPromise(true)
+    }
+
+    useEffect(() => {
+        if (!copyToClipboardPromise) {
+            return
+        }
 
-        return () => clearTimeout(timeout)
-    }, [copied, duration, setTrigger])
+        handleAwaitCopyToClipboardPromise().catch(noop)
+    }, [copyToClipboardPromise])
 
     useEffect(() => {
-        if (!isTriggerUndefined && trigger) {
-            setCopied(true)
-            handleCopyContent()
+        return () => {
+            if (setCopiedFalseTimeoutRef.current > -1) {
+                clearTimeout(setCopiedFalseTimeoutRef.current)
+            }
         }
-    }, [trigger, handleCopyContent])
+    }, [])
+
+    const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
+
     return (
-        <Tippy
-            className="default-tt"
-            content={copied ? copiedTippyText : 'Copy'}
-            placement="bottom"
-            visible={copied || enableTippy}
-            arrow={false}
+        <Tooltip
+            content={'Copy'}
+            alwaysShowTippyOnHover={!copied}
         >
             <button
                 type="button"
                 className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
-                onMouseEnter={handleEnableTippy}
-                onMouseLeave={handleDisableTippy}
-                onClick={isTriggerUndefined ? handleCopyContent : noop}
+                onClick={handleCopyContent}
             >
-                {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+                <Tooltip content={copiedTippyText} alwaysShowTippyOnHover visible={copied}>
+                    <div className="flex">
+                        {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+                    </div>
+                </Tooltip>
             </button>
-        </Tippy>
+        </Tooltip>
     )
 }

src/Common/ClipboardButton/types.ts

@@ -18,8 +18,7 @@ export default interface ClipboardProps {
     content: string
     copiedTippyText?: string
     duration?: number
-    trigger?: boolean
-    setTrigger?: React.Dispatch<React.SetStateAction<boolean>>
+    copyToClipboardPromise?: Promise<void>
     rootClassName?: string
     iconSize?: number
 }

src/Common/Helper.tsx

@@ -346,43 +346,49 @@ export function cleanKubeManifest(manifestJsonString: string): string {
         return manifestJsonString
     }
 }
-const unsecureCopyToClipboard = (str, callback = noop) => {
+const unsecureCopyToClipboard = (str: string) => {
     const listener = function (ev) {
         ev.preventDefault()
         ev.clipboardData.setData('text/plain', str)
     }
     document.addEventListener('copy', listener)
     document.execCommand('copy')
     document.removeEventListener('copy', listener)
-    callback()
 }
 
 /**
- * It will copy the passed content to clipboard and invoke the callback function, in case of error it will show the toast message.
- * On HTTP system clipboard is not supported, so it will use the unsecureCopyToClipboard function
+ * This is a promise<void> that will resolve if str is successfully copied
+ * On HTTP (other than localhost) system clipboard is not supported, so it will use the unsecureCopyToClipboard function
  * @param str
- * @param callback
  */
-export function copyToClipboard(str, callback = noop) {
-    if (!str) {
-        return
-    }
+export function copyToClipboard(str: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+        if (!str) {
+            resolve()
 
-    if (window.isSecureContext && navigator.clipboard) {
-        navigator.clipboard
-            .writeText(str)
-            .then(() => {
-                callback()
-            })
-            .catch(() => {
-                ToastManager.showToast({
-                    variant: ToastVariantType.error,
-                    description: 'Failed to copy to clipboard',
+            return
+        }
+
+        if (window.isSecureContext && navigator.clipboard) {
+            navigator.clipboard
+                .writeText(str)
+                .then(() => {
+                    resolve()
                 })
-            })
-    } else {
-        unsecureCopyToClipboard(str, callback)
-    }
+                .catch(() => {
+                    ToastManager.showToast({
+                        variant: ToastVariantType.error,
+                        description: 'Failed to copy to clipboard',
+                    })
+
+                    reject()
+                })
+        } else {
+            unsecureCopyToClipboard(str)
+
+            resolve()
+        }
+    })
 }
 
 export function useAsync<T>(