Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into refactor/node-details-list

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.5",
+    "version": "1.0.9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -192,22 +192,33 @@ function fetchInTime<T = object>(
     options?: APIOptions,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
-    const controller = new AbortController()
-    const { signal } = controller
+    const controller = options?.abortControllerRef?.current ?? new AbortController()
+    const signal = options?.abortControllerRef?.current?.signal || options?.signal || controller.signal
     const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
         const requestTimeout = (window as any)?._env_?.GLOBAL_API_TIMEOUT || FALLBACK_REQUEST_TIMEOUT
         const timeout = options?.timeout ? options.timeout : requestTimeout
 
         setTimeout(() => {
             controller.abort()
+            if (options?.abortControllerRef?.current) {
+                options.abortControllerRef.current = new AbortController()
+            }
+
             reject({
                 code: 408,
                 errors: [{ code: 408, internalMessage: 'Request cancelled', userMessage: 'Request Cancelled' }],
             })
         }, timeout)
     })
     return Promise.race([
-        fetchAPI(url, type, data, options?.signal || signal, options?.preventAutoLogout || false, isMultipartRequest),
+        fetchAPI(
+            url,
+            type,
+            data,
+            signal,
+            options?.preventAutoLogout || false,
+            isMultipartRequest,
+        ),
         timeoutPromise,
     ]).catch((err) => {
         if (err instanceof ServerErrors) {

src/Assets/Icon/ic-hash.svg

@@ -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/Assets/Icon/ic-pull-request.svg

@@ -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/Assets/Icon/ic-tag.svg

@@ -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,