feat: add utils required for devtron saas

package.json

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

src/Shared/Components/Illustration/Illustration.tsx

@@ -2,25 +2,33 @@
 
 import CreateBackupSchedule from '@Illustrations/create-backup-schedule.webp'
 import CreateBackupSnapshot from '@Illustrations/create-backup-snapshot.webp'
+import { ReactComponent as ImgCelebration } from '@Illustrations/img-celebration.svg'
 import ImgCode from '@Illustrations/img-code.webp'
 import ImgDevtronFreemium from '@Illustrations/img-devtron-freemium.webp'
 import { ReactComponent as ImgFolderEmpty } from '@Illustrations/img-folder-empty.svg'
+import { ReactComponent as ImgInstallFreemiumSaas } from '@Illustrations/img-install-freemium-saas.svg'
+import { ReactComponent as ImgInstallViaAwsMarketplace } from '@Illustrations/img-install-via-aws-marketplace.svg'
 import ImgManOnRocket from '@Illustrations/img-man-on-rocket.webp'
 import { ReactComponent as ImgMechanicalOperation } from '@Illustrations/img-mechanical-operation.svg'
 import { ReactComponent as ImgNoBackupLocation } from '@Illustrations/img-no-backup-location.svg'
 import { ReactComponent as ImgNoRestores } from '@Illustrations/img-no-restores.svg'
 import ImgNoResult from '@Illustrations/img-no-result.webp'
+import { ReactComponent as ImgPageNotFound } from '@Illustrations/img-page-not-found.svg'
 import NoClusterCostEnabled from '@Illustrations/no-cluster-cost-enabled.webp'
 
 // eslint-disable-next-line no-restricted-imports
 import { IllustrationBase } from './IllustrationBase'
 import { IllustrationBaseProps } from './types'
 
 export const illustrationMap = {
+    'img-celebration': ImgCelebration,
     'img-folder-empty': ImgFolderEmpty,
+    'img-install-freemium-saas': ImgInstallFreemiumSaas,
+    'img-install-via-aws-marketplace': ImgInstallViaAwsMarketplace,
     'img-mechanical-operation': ImgMechanicalOperation,
     'img-no-backup-location': ImgNoBackupLocation,
     'img-no-restores': ImgNoRestores,
+    'img-page-not-found': ImgPageNotFound,
     'create-backup-schedule': CreateBackupSchedule,
     'create-backup-snapshot': CreateBackupSnapshot,
     'img-code': ImgCode,

src/Shared/Components/License/DevtronLicenseCard.tsx

@@ -27,7 +27,7 @@ import { LicensingErrorCodes } from '@Shared/types'
 
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
-import { DevtronLicenseCardProps, LicenseStatus } from './types'
+import { DevtronLicenseCardProps, LicenseCardSubTextProps, LicenseStatus } from './types'
 import { getLicenseColorsAccordingToStatus } from './utils'
 
 import './licenseCard.scss'
@@ -49,10 +49,13 @@ const LicenseCardSubText = ({
     isFreemium,
     licenseStatus,
     licenseStatusError,
-}: Pick<DevtronLicenseCardProps, 'isFreemium' | 'licenseStatus' | 'licenseStatusError'>) => {
-    if (isFreemium) {
-        const freemiumLimitReached = licenseStatusError?.code === LicensingErrorCodes.ClusterLimitExceeded
+    isFreeForever,
+}: LicenseCardSubTextProps) => {
+    const freemiumLimitReached = isFreemium && licenseStatusError?.code === LicensingErrorCodes.ClusterLimitExceeded
+    const showFreemiumMessage =
+        isFreeForever || freemiumLimitReached || (isFreemium && licenseStatus === LicenseStatus.ACTIVE)
 
+    if (showFreemiumMessage) {
         return (
             <div className="p-16 fs-13 lh-1-5 flexbox-col dc__gap-8">
                 <div className="flexbox dc__gap-8 dc__content-space fs-13 fw-4 lh-20 cn-9">
@@ -130,10 +133,17 @@ export const DevtronLicenseCard = ({
     appTheme,
     handleCopySuccess,
     licenseStatusError,
+    isSaasInstance,
 }: DevtronLicenseCardProps) => {
-    const { bgColor, textColor } = getLicenseColorsAccordingToStatus({ isFreemium, licenseStatus, licenseStatusError })
-    const remainingTime = getTTLInHumanReadableFormat(ttl)
-    const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
+    const isFreeForever = isFreemium && !isSaasInstance
+
+    const { bgColor, textColor } = getLicenseColorsAccordingToStatus({
+        isFreemium,
+        licenseStatus,
+        licenseStatusError,
+        isSaasInstance,
+    })
+
     const isThemeDark = appTheme === AppThemeType.dark
 
     const cardRef = useRef<HTMLDivElement>(null)
@@ -178,6 +188,15 @@ export const DevtronLicenseCard = ({
         ? useMotionTemplate`linear-gradient(55deg, transparent, rgba(122, 127, 131, ${sheenOpacity}) ${sheenPosition}%, transparent)`
         : useMotionTemplate`linear-gradient(55deg, transparent, rgba(255, 255, 255, ${sheenOpacity}) ${sheenPosition}%, transparent)`
 
+    const getRemainingTimeString = () => {
+        if (isFreeForever) {
+            return null
+        }
+
+        const remainingTime = getTTLInHumanReadableFormat(ttl)
+        return ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
+    }
+
     return (
         <div className="license-card-wrapper flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
             <div style={{ perspective: '1000px' }}>
@@ -217,12 +236,12 @@ export const DevtronLicenseCard = ({
                             </div>
                             <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
                                 <span className="font-ibm-plex-mono cn-9">
-                                    {isFreemium ? 'VALID FOREVER' : expiryDate}
+                                    {isFreeForever ? 'VALID FOREVER' : expiryDate}
                                 </span>
-                                {!isFreemium && (
+                                {!isFreeForever && (
                                     <>
                                         <span className="cn-9">·</span>
-                                        <span style={{ color: textColor }}>{remainingTimeString}</span>
+                                        <span style={{ color: textColor }}>{getRemainingTimeString()}</span>
                                     </>
                                 )}
                             </div>
@@ -239,6 +258,7 @@ export const DevtronLicenseCard = ({
                 isFreemium={isFreemium}
                 licenseStatusError={licenseStatusError}
                 licenseStatus={licenseStatus}
+                isFreeForever={isFreeForever}
             />
         </div>
     )

src/Shared/Components/License/index.tsx

@@ -17,5 +17,6 @@
 export { default as ActivateLicenseDialog } from './ActivateLicenseDialog'
 export { default as DevtronLicenseCard } from './DevtronLicenseCard'
 export { ICDevtronWithBorder, default as InstallationFingerprintInfo } from './License.components'
+export { activateLicense } from './services'
 export * from './types'
 export { parseDevtronLicenseData, parseDevtronLicenseDTOIntoLicenseCardData } from './utils'

src/Shared/Components/License/types.ts

@@ -32,6 +32,7 @@ export type DevtronLicenseCardProps = {
     isFreemium: boolean
     appTheme: AppThemeType
     licenseStatusError: LicenseErrorStruct
+    isSaasInstance: boolean
 } & (
     | {
           licenseKey: string
@@ -45,6 +46,11 @@ export type DevtronLicenseCardProps = {
       }
 )
 
+export interface LicenseCardSubTextProps
+    extends Pick<DevtronLicenseCardProps, 'isFreemium' | 'licenseStatus' | 'licenseStatusError'> {
+    isFreeForever: boolean
+}
+
 export type DevtronLicenseInfo = Omit<DevtronLicenseCardProps, 'appTheme'> &
     Pick<DevtronLicenseDTO, 'fingerprint' | 'showLicenseData' | 'licenseStatusError' | 'moduleLimits'>
 

src/Shared/Components/License/utils.tsx

@@ -27,16 +27,22 @@ export const getLicenseColorsAccordingToStatus = ({
     isFreemium,
     licenseStatus,
     licenseStatusError,
-}: Pick<DevtronLicenseCardProps, 'licenseStatus' | 'isFreemium' | 'licenseStatusError'>): {
+    isSaasInstance,
+}: Pick<DevtronLicenseCardProps, 'licenseStatus' | 'isFreemium' | 'licenseStatusError' | 'isSaasInstance'>): {
     bgColor: string
     textColor: string
 } => {
     if (isFreemium) {
         const freemiumLimitReached = licenseStatusError?.code === LicensingErrorCodes.ClusterLimitExceeded
-        return freemiumLimitReached
-            ? { bgColor: 'var(--R100)', textColor: 'var(--R500)' }
-            : { bgColor: 'var(--G100)', textColor: 'var(--G500)' }
+        if (freemiumLimitReached) {
+            return { bgColor: 'var(--R100)', textColor: 'var(--R500)' }
+        }
+
+        if (!isSaasInstance) {
+            return { bgColor: 'var(--G100)', textColor: 'var(--G500)' }
+        }
     }
+
     switch (licenseStatus) {
         case LicenseStatus.ACTIVE:
             return { bgColor: 'var(--G100)', textColor: 'var(--G500)' }
@@ -68,16 +74,24 @@ export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard ext
 ): Omit<DevtronLicenseCardProps, 'appTheme'> => {
     const {
         isTrial,
-        expiry,
-        ttl,
+        expiry: onPremExpiry,
+        ttl: onPremTTL,
         reminderThreshold,
         organisationMetadata,
         license,
         claimedByUserDetails,
         isFreemium,
         licenseStatusError,
+        isSaasInstance,
+        timeElapsedSinceCreation,
+        creationTime,
     } = licenseDTO || {}
 
+    // In case of Saas expiry date is 30 days from creation time
+    const expiry = isSaasInstance && creationTime ? moment(creationTime).add(30, 'days').toISOString() : onPremExpiry
+    // For TTL will use timeElapsedSinceCreation to calculate remaining time for Saas license with 30 days validity, since browser time may differ from server time
+    const ttl = isSaasInstance && timeElapsedSinceCreation ? 30 * 24 * 60 * 60 - timeElapsedSinceCreation : onPremTTL
+
     return {
         enterpriseName: organisationMetadata?.name || 'Devtron Enterprise',
         expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
@@ -86,6 +100,7 @@ export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard ext
         isTrial,
         isFreemium,
         licenseStatusError,
+        isSaasInstance: !!isSaasInstance,
         ...(currentUserEmail && currentUserEmail === claimedByUserDetails?.email
             ? { licenseKey: license }
             : { licenseSuffix: license }),