Merge pull request #414 from devtron-labs/release-candidate-v0.23.0

release: release candidate v0.23.0

Author: eshankvaish

.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": "0.6.5-patch-1",
+    "version": "1.1.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -40,6 +40,7 @@
         "@testing-library/react": "^12.1.4",
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
+        "@types/dompurify": "^3.0.5",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
@@ -66,7 +67,7 @@
         "react-mde": "^11.5.0",
         "react-toastify": "9.1.3",
         "typescript": "5.5.4",
-        "vite": "5.4.6",
+        "vite": "5.4.11",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-lib-inject-css": "2.1.1",
         "vite-plugin-svgr": "^2.4.0",
@@ -109,7 +110,7 @@
             "monaco-editor": "0.44.0"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.6"
+            "vite": "5.4.11"
         }
     }
 }

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) {
@@ -264,4 +275,4 @@ export const abortPreviousRequests = <T>(
  */
 export const getIsRequestAborted = (error) =>
     // The 0 code is common for aborted and blocked requests
-    error && error.code === 0 && error.message.search('abort|aborted')
+    error && error.code === 0 && error.message.search('abort|aborted') > -1

src/Assets/Icon/ic-hash.svg

@@ -170,7 +170,6 @@ export interface StepType {
     inlineStepDetail?: InlineStepDetailType
     pluginRefStepDetail?: PluginRefStepDetailType
     triggerIfParentStageFail: boolean
-    isMandatory?: boolean
 }
 
 export interface BuildStageType {

src/Assets/Icon/ic-pull-request.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-tag.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
 }