chore: update version to 1.9.8-beta-9 and add onClick prop to ClipboardButton and DevtronLicenseCard components

Author: AbhishekA1509

package.json

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

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -36,6 +36,7 @@ export const ClipboardButton = ({
     copyToClipboardPromise,
     rootClassName = '',
     iconSize = 16,
+    onClick,
 }: ClipboardProps) => {
     const [copied, setCopied] = useState<boolean>(false)
     const setCopiedFalseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(-1)
@@ -69,6 +70,7 @@ export const ClipboardButton = ({
             stopPropagation(e)
         }
 
+        onClick?.()
         await handleAwaitCopyToClipboardPromise(true)
     }
 
@@ -97,6 +99,7 @@ export const ClipboardButton = ({
             <button
                 type="button"
                 className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
+                aria-label={`Copy ${content}`}
                 onClick={handleCopyContent}
             >
                 <Tooltip content={copiedTippyText} alwaysShowTippyOnHover visible={copied}>

src/Common/ClipboardButton/types.ts

@@ -21,4 +21,5 @@ export default interface ClipboardProps {
     copyToClipboardPromise?: Promise<void>
     rootClassName?: string
     iconSize?: number
+    onClick?: () => void
 }

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -26,6 +26,7 @@ export const DevtronLicenseCard = ({
     isTrial,
     ttl,
     appTheme,
+    onCopyButtonClick,
 }: DevtronLicenseCardProps) => {
     const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
     const remainingTime = getTTLInHumanReadableFormat(ttl)
@@ -104,7 +105,7 @@ export const DevtronLicenseCard = ({
                                     <span>&bull;&bull;&bull;&bull;</span>
                                     <span>{licenseSuffix || licenseKey?.slice(-8)}</span>
                                 </div>
-                                {licenseKey && <ClipboardButton content={licenseKey} />}
+                                {licenseKey && <ClipboardButton content={licenseKey} onClick={onCopyButtonClick} />}
                             </div>
                             <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap">
                                 <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>

src/Shared/Components/DevtronLicenseCard/types.ts

@@ -16,10 +16,12 @@ export type DevtronLicenseCardProps = {
 } & (
     | {
           licenseKey: string
+          onCopyButtonClick?: () => void
           licenseSuffix?: never
       }
     | {
           licenseKey?: never
+          onCopyButtonClick?: never
           licenseSuffix: string
       }
 )

src/Shared/Components/Header/HelpNav.tsx

@@ -90,6 +90,10 @@ const HelpNav = ({
     }
 
     const handleOpenLicenseDialog = () => {
+        ReactGA.event({
+            category: 'help-nav__about-devtron',
+            action: 'ABOUT_DEVTRON_CLICKED',
+        })
         handleOpenLicenseInfoDialog()
     }