Merge pull request #659 from devtron-labs/feat/license-ga

feat: license ga

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

@@ -4,6 +4,7 @@ import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
 import { getThemeOppositeThemeClass } from '@Shared/Providers/ThemeProvider/utils'
 import {
+    AppThemeType,
     CONTACT_SUPPORT_LINK,
     DevtronLicenseCardProps,
     ENTERPRISE_SUPPORT_LINK,
@@ -26,11 +27,13 @@ export const DevtronLicenseCard = ({
     isTrial,
     ttl,
     appTheme,
+    onCopyButtonClick,
 }: DevtronLicenseCardProps) => {
     const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
     const remainingTime = getTTLInHumanReadableFormat(ttl)
     const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
     const isLicenseValid = licenseStatus !== LicenseStatus.EXPIRED
+    const isThemeDark = appTheme === AppThemeType.dark
 
     const cardRef = useRef<HTMLDivElement>(null)
 
@@ -69,12 +72,10 @@ export const DevtronLicenseCard = ({
     )
     const sheenPosition = useTransform(diagonalMovement, [-5, 5], [-100, 200])
 
-    const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, 0.05, 0])
-    const sheenGradient = useMotionTemplate`linear-gradient(
-    55deg,
-    transparent,
-    rgba(255 255 255 / ${sheenOpacity}) ${sheenPosition}%,
-    transparent)`
+    const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, isThemeDark ? 0.25 : 0.1, 0])
+    const sheenGradient = isThemeDark
+        ? useMotionTemplate`linear-gradient(55deg, transparent, rgba(122, 127, 131, ${sheenOpacity}) ${sheenPosition}%, transparent)`
+        : useMotionTemplate`linear-gradient(55deg, transparent, rgba(255, 255, 255, ${sheenOpacity}) ${sheenPosition}%, transparent)`
 
     return (
         <div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
@@ -104,9 +105,9 @@ 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">
+                            <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
                                 <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>
                                 <span className="cn-9">·</span>
                                 <span style={{ color: textColor }}>{remainingTimeString}</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/DevtronLicenseCard/utils.tsx

@@ -38,7 +38,7 @@ export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard ext
         licenseDTO || {}
 
     return {
-        enterpriseName: organisationMetadata?.name || '',
+        enterpriseName: organisationMetadata?.name || 'Devtron Enterprise',
         expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
         ttl,
         licenseStatus: getDevtronLicenseStatus({ ttl, reminderThreshold }),

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()
     }
 

src/Shared/Helpers.tsx

@@ -1087,14 +1087,14 @@ export const getCentralAPIHealthObjectFromLocalStorage = (): CentralAPILocalConf
         return {
             lastUpdatedDate: lastUpdatedDate || '',
             updateCount: updateCount || 0,
-            isConnected: isConnected || null,
+            isConnected: isConnected || false,
         }
     } catch {
         localStorage.removeItem(CENTRAL_API_LOCAL_STORAGE_KEY)
         return {
             lastUpdatedDate: '',
             updateCount: 0,
-            isConnected: null,
+            isConnected: false,
         }
     }
 }

src/Shared/constants.tsx

@@ -521,7 +521,7 @@ export const DC_DELETE_SUBTITLES = {
 }
 
 export const EULA_LINK = 'https://devtron.ai/end-user-license-agreement-eula'
-export const CONTACT_SUPPORT_LINK = 'https://share.hsforms.com/1Yp3bvPAaRCaHUEH5vtMjEQ4368n'
+export const CONTACT_SUPPORT_LINK = 'https://devtron.ai/enterprise-support'
 
 export const enum DeleteComponentsName {
     Cluster = 'cluster',