Merge pull request #983 from devtron-labs/feat/saas

feat: add utils required for devtron saas

Author: AbhishekA1509

package-lock.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",

package.json

@@ -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/Assets/Illustration/img-celebration.svg

@@ -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/Assets/Illustration/img-install-freemium-saas.svg

@@ -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/Assets/Illustration/img-install-via-aws-marketplace.svg

@@ -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'>