Merge branch 'kubecon-2025' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/security-overview

Author: arunjaindev

package-lock.json

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

package.json

@@ -17,11 +17,12 @@
 import { useEffect, useRef, useState } from 'react'
 
 import Tooltip from '@Common/Tooltip/Tooltip'
+import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components/Button'
 
 import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
 import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
-import ClipboardProps from './types'
+import { ClipboardProps } from './types'
 
 /**
  * @param content - Content to be copied
@@ -40,6 +41,8 @@ export const ClipboardButton = ({
     rootClassName = '',
     iconSize = 16,
     handleSuccess,
+    variant = 'default',
+    size,
 }: ClipboardProps) => {
     const [copied, setCopied] = useState<boolean>(false)
     const setCopiedFalseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(-1)
@@ -96,18 +99,44 @@ export const ClipboardButton = ({
 
     const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
 
+    const ariaLabel = `Copy ${content}`
+
+    const renderIcon = () => (
+        <div className="flex">
+            {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+        </div>
+    )
+
+    const tooltipContent = copied ? copiedTippyText : initialTippyText
+
+    if (variant === 'button--secondary') {
+        return (
+            <Button
+                variant={ButtonVariantType.secondary}
+                dataTestId="clippy-button"
+                icon={renderIcon()}
+                size={size}
+                onClick={handleCopyContent}
+                tooltipProps={{
+                    content: tooltipContent,
+                }}
+                showTooltip
+                ariaLabel={ariaLabel}
+                style={ButtonStyleType.neutral}
+            />
+        )
+    }
+
     return (
-        <Tooltip content={copied ? copiedTippyText : initialTippyText} alwaysShowTippyOnHover>
+        <Tooltip content={tooltipContent} alwaysShowTippyOnHover>
             {/* 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}`}
-                aria-label={`Copy ${content}`}
+                aria-label={ariaLabel}
                 onClick={handleCopyContent}
             >
-                <div className="flex">
-                    {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
-                </div>
+                {renderIcon()}
             </button>
         </Tooltip>
     )

src/Assets/IconV2/ic-backup-color.svg

@@ -14,7 +14,21 @@
  * limitations under the License.
  */
 
-export default interface ClipboardProps {
+import { ComponentSizeType } from '@Shared/constants'
+
+export type ClipboardProps = (
+    | {
+          /**
+           * @default 'default'
+           */
+          variant?: 'default'
+          size?: never
+      }
+    | {
+          variant: 'button--secondary'
+          size: ComponentSizeType
+      }
+) & {
     content: string
     /**
      * tippy text before copying

src/Assets/IconV2/ic-backup-schedule-color.svg

@@ -140,7 +140,7 @@ export const URLS = {
     DATA_PROTECTION: DATA_PROTECTION_ROOT,
     DATA_PROTECTION_OVERVIEW: `${DATA_PROTECTION_ROOT}/overview`,
     DATA_PROTECTION_BACKUP_AND_SCHEDULE,
-    DATA_PROTECTION_BACKUP_AND_SCHEDULE_DETAIL: `${DATA_PROTECTION_BACKUP_AND_SCHEDULE}/:name`,
+    DATA_PROTECTION_BACKUP_AND_SCHEDULE_DETAIL: `${DATA_PROTECTION_BACKUP_AND_SCHEDULE}/detail/:id`,
     DATA_PROTECTION_RESTORES: `${DATA_PROTECTION_ROOT}/restores`,
     DATA_PROTECTION_RESTORES_DETAIL: `${DATA_PROTECTION_ROOT}/restores/:restoreId`,
     DATA_PROTECTION_BACKUP_LOCATIONS: `${DATA_PROTECTION_ROOT}/backup-locations/:type(${Object.values(BackupLocationsTypes).join('|')})`,
@@ -181,6 +181,7 @@ export const ROUTES = {
     PATCH: 'patch',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',
+    CLUSTER_MIN: 'cluster/min',
     API_RESOURCE: 'k8s/api-resources',
     GVK: 'gvk',
     NAMESPACE: 'env/namespace',