Merge pull request #405 from devtron-labs/fix/copy-button

fix: unable to copy in safari whenever sending trigger in ClipboardButton

Author: Elessar1802

.eslintignore

@@ -10,7 +10,6 @@ src/Common/BreadCrumb/BreadcrumbStore.tsx
 src/Common/CIPipeline.Types.ts
 src/Common/ChartVersionAndTypeSelector.tsx
 src/Common/Checkbox.tsx
-src/Common/ClipboardButton/ClipboardButton.tsx
 src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
 src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback } from 'react'
-import Tippy from '@tippyjs/react'
+import { useState, useEffect, useRef } from 'react'
+import Tooltip from '@Common/Tooltip/Tooltip'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
@@ -25,73 +25,86 @@ 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({
+export const ClipboardButton = ({
     content,
     copiedTippyText = 'Copied!',
     duration = 1000,
-    trigger,
-    setTrigger = noop,
+    copyToClipboardPromise,
     rootClassName = '',
     iconSize = 16,
-}: ClipboardProps) {
+}: 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)
+        }
 
-        return () => clearTimeout(timeout)
-    }, [copied, duration, setTrigger])
+        await handleAwaitCopyToClipboardPromise(true)
+    }
 
     useEffect(() => {
-        if (!isTriggerUndefined && trigger) {
-            setCopied(true)
-            handleCopyContent()
+        if (!copyToClipboardPromise) {
+            return
         }
-    }, [trigger, handleCopyContent])
+
+        handleAwaitCopyToClipboardPromise().catch(noop)
+    }, [copyToClipboardPromise])
+
+    useEffect(
+        () => () => {
+            if (setCopiedFalseTimeoutRef.current > -1) {
+                clearTimeout(setCopiedFalseTimeoutRef.current)
+            }
+        },
+        [],
+    )
+
+    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}>
+            {/* TODO: semantically buttons should not be nested; fix later */}
             <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}
+                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/ClipboardButton.tsx

@@ -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/ClipboardButton/types.ts

@@ -31,7 +31,7 @@ import { YAMLStringify, cleanKubeManifest, useJsonYaml } from '../Helper'
 import { useWindowSize } from '../Hooks'
 import Select from '../Select/Select'
 import RadioGroup from '../RadioGroup/RadioGroup'
-import ClipboardButton from '../ClipboardButton/ClipboardButton'
+import { ClipboardButton } from '../ClipboardButton/ClipboardButton'
 import { Progressing } from '../Progressing'
 import {
     CodeEditorComposition,

src/Common/CodeEditor/CodeEditor.tsx

@@ -353,43 +353,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>(

src/Common/Helper.tsx

@@ -55,7 +55,7 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
 // export { default as CodeEditor } from './CodeEditor/CodeEditor'
 export { default as Select } from './Select/Select'
-export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
+export { ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
 export * from './RJSF'
 export * from './DevtronProgressing'

src/Common/index.ts

@@ -17,7 +17,7 @@
 /* eslint-disable eqeqeq */
 import moment from 'moment'
 import Tippy from '@tippyjs/react'
-import ClipboardButton from '@Common/ClipboardButton/ClipboardButton'
+import { ClipboardButton } from '@Common/ClipboardButton/ClipboardButton'
 import { ReactComponent as Circle } from '@Icons/ic-circle.svg'
 import { ReactComponent as Commit } from '@Icons/ic-commit.svg'
 import { ReactComponent as PersonIcon } from '@Icons/ic-person.svg'