Merge pull request #642 from devtron-labs/feat/license-card-animation

feat: license card animation

Author: arunjaindev

package-lock.json

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

package.json

@@ -1078,5 +1078,8 @@ export const getHashedValue = async (value: string): Promise<string | null> => {
     }
 }
 
-export const getTTLInHumanReadableFormat = (ttl: number): string =>
-    moment.duration(Math.abs(ttl), 'seconds').humanize(false)
+export const getTTLInHumanReadableFormat = (ttl: number): string => {
+    const humanizedDuration = moment.duration(Math.abs(ttl), 'seconds').humanize(false)
+    // Since moment.js return "a" or "an" for singular values so replacing with 1.
+    return humanizedDuration.replace(/^(a|an) /, '1 ');
+}

src/Common/Helper.tsx

@@ -1,12 +1,21 @@
+import { useEffect, useRef } from 'react'
+import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion'
 import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
-import { ENTERPRISE_SUPPORT_LINK } from '@Shared/index'
+import {
+    CONTACT_SUPPORT_LINK,
+    DevtronLicenseCardProps,
+    ENTERPRISE_SUPPORT_LINK,
+    getHandleOpenURL,
+    LicenseStatus,
+} from '@Shared/index'
 import { Button, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { getLicenseColorsAccordingToStatus } from './utils'
-import { DevtronLicenseCardProps, LicenseStatus } from './types'
 import './licenseCard.scss'
 
+const DAMPEN_FACTOR = 40
+
 export const DevtronLicenseCard = ({
     enterpriseName,
     licenseKey,
@@ -19,10 +28,59 @@ export const DevtronLicenseCard = ({
     const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
     const remainingTime = getTTLInHumanReadableFormat(ttl)
     const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
+    const isLicenseValid = ttl > 0
+
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    const mouseX = useMotionValue(window.innerWidth)
+    const mouseY = useMotionValue(window.innerHeight)
+
+    const rotateX = useTransform<number, number>(mouseY, (newMouseY) => {
+        if (!cardRef.current) return 0
+        const rect = cardRef.current.getBoundingClientRect()
+        const newRotateX = newMouseY - rect.top - rect.height / 2
+        return -newRotateX / DAMPEN_FACTOR
+    })
+    const rotateY = useTransform(mouseX, (newMouseX) => {
+        if (!cardRef.current) return 0
+        const rect = cardRef.current.getBoundingClientRect()
+        const newRotateY = newMouseX - rect.left - rect.width / 2
+        return newRotateY / DAMPEN_FACTOR
+    })
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            animate(mouseX, e.clientX)
+            animate(mouseY, e.clientY)
+        }
+
+        window.addEventListener('mousemove', handleMouseMove)
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove)
+        }
+    }, [])
+
+    const diagonalMovement = useTransform<number, number>(
+        [rotateX, rotateY],
+        ([newRotateX, newRotateY]) => newRotateX + newRotateY,
+    )
+    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)`
 
     return (
         <div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
-            <div className="license-card border__secondary-translucent flexbox-col br-12 h-200 bg__tertiary">
+            <motion.div
+                className="license-card border__secondary-translucent flexbox-col br-12 h-200 bg__tertiary"
+                ref={cardRef}
+                style={{ rotateX, rotateY, backgroundImage: sheenGradient }}
+            >
                 <div className="p-20 flexbox-col dc__content-space flex-grow-1">
                     <div className="flexbox dc__align-items-center dc__content-space">
                         <span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5 dc__truncate">{enterpriseName}</span>
@@ -37,8 +95,8 @@ export const DevtronLicenseCard = ({
                             </div>
                             {licenseKey && <ClipboardButton content={licenseKey} />}
                         </div>
-                        <div className="flexbox dc__align-items-center dc__gap-4">
-                            <span>{expiryDate}</span>
+                        <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap">
+                            <span className="font-ibm-plex-mono">{expiryDate}</span>
                             <span>•</span>
                             <span style={{ color: textColor }}>{remainingTimeString}</span>
                         </div>
@@ -49,7 +107,7 @@ export const DevtronLicenseCard = ({
                         TRIAL LICENSE
                     </span>
                 )}
-            </div>
+            </motion.div>
             {licenseStatus !== LicenseStatus.ACTIVE && (
                 <div className="p-16 flexbox-col dc__gap-8">
                     <div className="flexbox dc__gap-8">
@@ -58,14 +116,18 @@ export const DevtronLicenseCard = ({
                             <a href={`mailto:${ENTERPRISE_SUPPORT_LINK}`}>{ENTERPRISE_SUPPORT_LINK}</a> or contact your
                             Devtron representative.
                         </span>
-                        <Icon name={ttl < 0 ? 'ic-timer' : 'ic-error'} color={ttl < 0 ? 'Y500' : 'R500'} size={16} />
+                        <Icon
+                            name={isLicenseValid ? 'ic-timer' : 'ic-error'}
+                            color={isLicenseValid ? 'Y500' : 'R500'}
+                            size={16}
+                        />
                     </div>
-                    {/* TODO: Add onClick, and common out the button */}
                     <Button
                         dataTestId="contact-support"
                         startIcon={<ICChatSupport />}
                         text="Contact support"
                         variant={ButtonVariantType.text}
+                        onClick={getHandleOpenURL(CONTACT_SUPPORT_LINK)}
                     />
                 </div>
             )}

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -36,7 +36,7 @@ const HelpNav = ({
     setGettingStartedClicked,
     showHelpCard,
 }: HelpNavType) => {
-    const { currentServerInfo, handleOpenLicenseInfoDialog } = useMainContext()
+    const { currentServerInfo, handleOpenLicenseInfoDialog, showLicenseData } = useMainContext()
     const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
     const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
 
@@ -89,6 +89,10 @@ const HelpNav = ({
         onClickHelpOptions(option)
     }
 
+    const handleOpenLicenseDialog = () => {
+        handleOpenLicenseInfoDialog()
+    }
+
     const renderHelpOptions = (): JSX.Element => (
         <>
             {CommonHelpOptions.map((option, index) => (
@@ -105,12 +109,13 @@ const HelpNav = ({
                         <option.icon />
                         <div className="ml-12 cn-9 fs-14">{option.name}</div>
                     </a>
-                    {isEnterprise && index === 1 && (
+                    {isEnterprise && showLicenseData && index === 1 && (
                         <>
                             <button
                                 type="button"
                                 className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
-                                onClick={handleOpenLicenseInfoDialog}
+                                onClick={handleOpenLicenseDialog}
+                                data-testid="about-devtron"
                             >
                                 <Icon name="ic-devtron" color="N600" size={20} />
                                 About Devtron

src/Shared/Components/Header/HelpNav.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
 import { Icon } from '../Icon'
-import { TESTIMONIAL_CARD_DATA } from './constants'
+import { TESTIMONIAL_CARD_DATA, TESTIMONIAL_CARD_INTERVAL, TRANSITION_EASE_CURVE } from './constants'
 
 const AnimatedBackground = () => (
     <motion.div>
@@ -96,7 +97,20 @@ const AnimatedBackground = () => (
 )
 
 const LoginBanner = () => {
-    const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA
+    const [currentIndex, setCurrentIndex] = useState<number>(0)
+
+    useEffect(() => {
+        const testimonialCount = TESTIMONIAL_CARD_DATA.length
+        const interval = setInterval(() => {
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonialCount)
+        }, TESTIMONIAL_CARD_INTERVAL)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [])
+
+    const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA[currentIndex]
 
     return (
         <div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden">
@@ -111,7 +125,22 @@ const LoginBanner = () => {
                     <Icon name="ic-quote" color="N900" />
                     <div className="border__primary w-1 flex-grow-1" />
                 </div>
-                <div className="flexbox-col dc__gap-20">
+                <motion.div
+                    key={currentIndex}
+                    variants={{
+                        hidden: { opacity: 0, x: 200 },
+                        visible: { opacity: 1, x: 0 },
+                    }}
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    transition={{
+                        staggerChildren: 0.3,
+                        opacity: { duration: 0.75, ease: TRANSITION_EASE_CURVE },
+                        x: { duration: 0.85, ease: TRANSITION_EASE_CURVE },
+                    }}
+                    className="flexbox-col dc__gap-20"
+                >
                     <div className="fs-14 fw-4 lh-1-5 cn-9">{quote}</div>
                     <div className="flexbox dc__content-space dc__align-items-center">
                         <div>
@@ -120,7 +149,7 @@ const LoginBanner = () => {
                         </div>
                         <Icon name={iconName} color={null} size={24} />
                     </div>
-                </div>
+                </motion.div>
             </div>
         </div>
     )

src/Shared/Components/LoginBanner/LoginBanner.tsx

@@ -1,9 +1,32 @@
 import { TestimonialCardConfig } from './types'
 
 // TODO: add more testimonials (pending on product team)
-export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig = {
-    quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
-    name: 'Sathish Kumar',
-    designation: 'CloudOps/DevOps Lead at Ather Energy Pvt. Ltd.',
-    iconName: 'ic-devtron', // TODO: add ather icon
-}
+export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
+    {
+        quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
+        name: 'Sathish Kumar',
+        designation: 'CloudOps/DevOps Lead at Ather Energy Pvt. Ltd.',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: 'One of the best tools in the market. A production-ready platform that helps in automating all the requirements on Kubernetes. The platform is easy to get started with. Well done product! We run a lot of migrations and backup jobs daily, and Devtron makes it super easy and auditable for us.',
+        name: 'Arun Jain',
+        designation: 'Devtron user',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
+        name: 'Abhishek',
+        designation: 'CloudOps Lead at Ather Energy Pvt. Ltd.',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: 'Devtron has changed the way we used to operate, from bunch of scripts to now just a dashboard. The UI is pretty good and fast. Devtron has truly removed the dependencies of our developers from DevOps peeps. The UI is user-friendly and simple for new users to get acquainted with the tool.',
+        name: 'Utkarsh Arya',
+        designation: 'Product Manager',
+        iconName: 'ic-devtron',
+    },
+]
+
+export const TESTIMONIAL_CARD_INTERVAL = 5000 // duration (in ms) for each testimonial card slide animation
+export const TRANSITION_EASE_CURVE = [0.25, 0.8, 0.25, 1]

src/Shared/Components/LoginBanner/constants.tsx

@@ -17,6 +17,7 @@
 import { MutableRefObject, ReactNode } from 'react'
 import { ServerInfo } from '../Components/Header/types'
 import { SERVER_MODE } from '../../Common'
+import { LicenseInfoDialogType } from '..'
 
 export interface MainContext {
     serverMode: SERVER_MODE
@@ -55,7 +56,11 @@ export interface MainContext {
     isManifestScanningEnabled: boolean
     canOnlyViewPermittedEnvOrgLevel: boolean
     viewIsPipelineRBACConfiguredNode: ReactNode
-    handleOpenLicenseInfoDialog: () => void
+    handleOpenLicenseInfoDialog: (
+        initialDialogType?: LicenseInfoDialogType.ABOUT | LicenseInfoDialogType.LICENSE,
+    ) => void
+    showLicenseData: boolean
+    setShowLicenseData: (showLicenseData: boolean) => void
 }
 
 export interface MainContextProviderProps {

src/Shared/Providers/types.ts

@@ -1033,6 +1033,26 @@ export interface AppEnvIdType {
     envId: number
 }
 
+export enum LicenseInfoDialogType {
+    ABOUT = 'about',
+    LICENSE = 'license',
+    UPDATE = 'update',
+}
+
+export enum LicensingErrorCodes {
+    FingerPrintMisMatch = '11001',
+    LicenseExpired = '11002',
+    TamperedCertificate = '11002',
+    NoPublicKey = '11003',
+    InstallationModeMismatch = '11004',
+    NoCertFound = '11006',
+}
+
+export interface LicenseErrorStruct {
+    code: LicensingErrorCodes
+    userMessage: string
+}
+
 export interface DevtronLicenseBaseDTO {
     fingerprint: string | null
     isTrial: boolean | null
@@ -1064,9 +1084,13 @@ export type DevtronLicenseDTO<isCentralDashboard extends boolean = false> = Devt
                   lastName: string | null
                   email: string | null
               } | null
+              showLicenseData?: never
+              licenseStatusError?: never
           }
         : {
               claimedByUserDetails?: never
+              showLicenseData: boolean
+              licenseStatusError?: LicenseErrorStruct
           })
 
 export type CountryISO2Type = ParsedCountry['iso2']