Merge pull request #662 from devtron-labs/feat/copy-button

arunjaindev · web-flow · commit deb2ab7019d6 · 2025-03-28T18:40:11.000+05:30
feat: copy button
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.8-beta-10",
+    "version": "1.9.8-beta-11",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/IconV2/ic-key.svg b/src/Assets/IconV2/ic-key.svg
diff --git a/src/Common/ClipboardButton/ClipboardButton.tsx b/src/Common/ClipboardButton/ClipboardButton.tsx
@@ -31,6 +31,7 @@ import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
  */
 export const ClipboardButton = ({
     content,
+    initialTippyText = 'Copy',
     copiedTippyText = 'Copied!',
     duration = 1000,
     copyToClipboardPromise,
@@ -94,19 +95,17 @@ export const ClipboardButton = ({
     const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
 
     return (
-        <Tooltip content="Copy" alwaysShowTippyOnHover={!copied}>
+        <Tooltip content={copied ? copiedTippyText : initialTippyText} alwaysShowTippyOnHover>
             {/* TODO: semantically buttons should not be nested; fix later */}
             <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}>
-                    <div className="flex">
-                        {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
-                    </div>
-                </Tooltip>
+                <div className="flex">
+                    {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+                </div>
             </button>
         </Tooltip>
     )
diff --git a/src/Common/ClipboardButton/types.ts b/src/Common/ClipboardButton/types.ts
@@ -16,7 +16,17 @@
 
 export default interface ClipboardProps {
     content: string
+    /**
+     * tippy text before copying
+     */
+    initialTippyText?: string
+    /**
+     * tippy text after copying
+     */
     copiedTippyText?: string
+    /**
+     * reset duration after copying
+     */
     duration?: number
     copyToClipboardPromise?: Promise<void>
     rootClassName?: string
diff --git a/src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx b/src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx
@@ -90,6 +90,7 @@ export const DevtronLicenseCard = ({
                         transformStyle: 'preserve-3d',
                         transform: 'translateZ(0)',
                     }}
+                    whileHover={{ scale: 1.05 }}
                 >
                     <div className="p-20 flexbox-col dc__content-space flex-grow-1">
                         <div className="flexbox dc__content-space dc__gap-72">
@@ -98,14 +99,19 @@ export const DevtronLicenseCard = ({
                             </span>
                             <Icon name="ic-devtron" color="N900" size={24} />
                         </div>
-                        <div className="flexbox-col dc__gap-4">
+                        <div className="flexbox-col dc__gap-2">
                             <div className="flexbox dc__align-items-center dc__gap-6">
-                                <Icon name="ic-key" color={null} size={16} />
-                                <div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
+                                <div className="flex dc__gap-2 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
                                     <span>&bull;&bull;&bull;&bull;</span>
                                     <span>{licenseSuffix || licenseKey?.slice(-8)}</span>
                                 </div>
-                                {licenseKey && <ClipboardButton content={licenseKey} onClick={onCopyButtonClick} />}
+                                {licenseKey && (
+                                    <ClipboardButton
+                                        initialTippyText="Copy license key"
+                                        content={licenseKey}
+                                        onClick={onCopyButtonClick}
+                                    />
+                                )}
                             </div>
                             <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
                                 <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>
diff --git a/src/Shared/Components/DevtronLicenseCard/licenseCard.scss b/src/Shared/Components/DevtronLicenseCard/licenseCard.scss
@@ -1,7 +1,7 @@
 .license-card {
     
     .trial-license-badge {
-        background-color: var(--bg-hover);
+        background-color: var(--divider-secondary-translucent);
         letter-spacing: 0.55px;
     }
 }
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
@@ -58,7 +58,6 @@ import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
-import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
 import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg'
 import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-logo.svg'
@@ -153,7 +152,6 @@ export const iconMap = {
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
     'ic-k8s-job': ICK8sJob,
-    'ic-key': ICKey,
     'ic-ldap': ICLdap,
     'ic-livspace': ICLivspace,
     'ic-login-devtron-logo': ICLoginDevtronLogo,
diff --git a/src/Shared/Components/LoginBanner/LoginBanner.tsx b/src/Shared/Components/LoginBanner/LoginBanner.tsx
@@ -27,7 +27,7 @@ const AnimatedBackground = () => (
                 r="2000"
                 fill="#FD0000"
                 animate={{ scale: [1, 0.9], y: [0, 50] }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
@@ -39,15 +39,15 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
                 cy="2953"
                 r="1525"
                 fill="#A412DF"
                 animate={{ scale: [0.8, 1], x: [0, 50], y: [-100, 200] }}
-                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
@@ -59,7 +59,7 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.ellipse
                 cx="759.5"
@@ -68,7 +68,7 @@ const AnimatedBackground = () => (
                 ry="975"
                 fill="white"
                 animate={{ scale: [0.8, 1], x: [0, 50], y: [-100, 200] }}
-                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.path
                 d="M1449.92 730.265C1649.97 261.314 2460.84 884.083 2656.59 1131.43C2852.35 1378.78 3240.21 2146.55 2913.48 2307.57C2508.24 2507.29 2384.89 1871.7 2116.5 1567.52C1848.1 1263.34 1326.48 1019.64 1449.92 730.265Z"
@@ -79,7 +79,7 @@ const AnimatedBackground = () => (
                         'M659.5 743.5C527.947 250.927 1702.5 356.5 2267 825.5C2831.5 1294.5 2825.95 1970.73 2476.5 2073.5C1657 2314.5 1824.89 1047.68 1556.5 743.5C1288.11 439.319 769 1153.5 659.5 743.5Z',
                     ],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="1479"
@@ -91,33 +91,50 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
         </svg>
     </motion.div>
 )
 
 const LoginBanner = () => {
     const [currentIndex, setCurrentIndex] = useState<number>(0)
+    const [isHovering, setIsHovering] = useState<boolean>(false)
+
+    const handleMouseEnter = () => {
+        setIsHovering(true)
+    }
+
+    const handleMouseLeave = () => {
+        setIsHovering(false)
+    }
 
     useEffect(() => {
         const testimonialCount = TESTIMONIAL_CARD_DATA.length
-        const interval = setInterval(() => {
-            setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonialCount)
-        }, TESTIMONIAL_CARD_INTERVAL)
+        let interval: ReturnType<typeof setInterval>
+
+        if (!isHovering) {
+            interval = setInterval(() => {
+                setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonialCount)
+            }, TESTIMONIAL_CARD_INTERVAL)
+        }
 
         return () => {
-            clearInterval(interval)
+            if (interval) {
+                clearInterval(interval)
+            }
         }
-    }, [])
+    }, [isHovering])
 
     const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA[currentIndex]
 
     return (
         <div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden bg__primary">
-            <div className="flexbox-col flex-grow-1 pt-32 pl-32 dc__content-space">
-                <div className="flex h-36 w-130 dc__fill-available-space dc__zi-2">
-                    <Icon name="ic-devtron-header-logo" color="N900" />
+            <div className="flexbox-col flex-grow-1 dc__content-space">
+                <div className="pl-32 pt-32">
+                    <div className="flex h-36 w-130 dc__fill-available-space dc__zi-2">
+                        <Icon name="ic-devtron-header-logo" color="N900" />
+                    </div>
                 </div>
                 <AnimatedBackground />
                 <img
@@ -148,6 +165,8 @@ const LoginBanner = () => {
                         opacity: { duration: 0.75, ease: TRANSITION_EASE_CURVE },
                         x: { duration: 0.85, ease: TRANSITION_EASE_CURVE },
                     }}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
                     className="flexbox-col dc__gap-20"
                 >
                     <div className="fs-14 fw-4 lh-1-5 cn-9 dc__truncate--clamp-4">{quote}&quot;</div>
diff --git a/src/Shared/Components/LoginBanner/constants.tsx b/src/Shared/Components/LoginBanner/constants.tsx
@@ -8,19 +8,19 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
         iconName: 'ic-travclan',
     },
     {
-        quote: 'All these factors ushered a new era in our Tech ecosystem. We started migrating all of our apps on to Devtron and were able to soon onboard 150+ microservices in a matter of few weeks. Earlier we couldn’t have thought of achieving it in months (maybe even quarters 😅).',
+        quote: 'Migrating to Devtron revolutionized our tech ecosystem. We onboarded 150+ microservices and multiple staging environments in just weeks. Software releases used to be a month long process and now take a week or even a day for some services. Devtron’s efficiency has transformed how we deliver value, setting a new benchmark for agility and speed.',
         designation: 'Principal Engineer at Livspace',
         name: 'Ankit Agarwal',
         iconName: 'ic-livspace',
     },
     {
-        quote: "Prior to Devtron, managing multiple environments consistently was a challenge. Devtron's built-in features for consistent configurations across environments have been a huge win for us. We're confident that every deployment is identical, which has reduced discrepancies and improved our application’s resiliency.",
+        quote: 'Before Devtron, managing environments consistently was a challenge. Its built-in features ensure identical deployments, reducing discrepancies and boosting resiliency. The one-click rollback saved hours of downtime, quickly getting us back on track. Devtron has streamlined our CI/CD pipeline, enabling faster, reliable deployments and cutting operational overhead.',
         designation: 'Engineering Manager at Delhivery',
         name: 'Vinay Mishra',
         iconName: 'ic-delhivery',
     },
     {
-        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.",
+        quote: "Devtron was key to our Kubernetes transition, streamlining CI/CD for consistent, secure deployments. Its built-in DevSecOps features improved deployment speed and security. The user-friendly platform simplifies Kubernetes management. Devtron's focus on security and automation aligns with our goals, and we’re excited to keep leveraging it as we shape electric mobility's future.",
         name: 'Sathish Kumar',
         designation: 'CloudOps/DevOps Lead at Ather Energy Pvt. Ltd.',
         iconName: 'ic-ather',
@@ -32,7 +32,7 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
         iconName: 'ic-73strings',
     },
     {
-        quote: 'Partnering with Devtron has revolutionized the way we deliver solutions to our customers. Their Kubernetes-native platform has empowered us to automate and scale our deployments, reducing time-to-market and significantly boosting DevOps efficiency.',
+        quote: 'Partnering with Devtron has revolutionized the way we deliver solutions to our customers. Their Kubernetes-native platform has empowered us to automate and scale our deployments, reducing time-to-market and significantly boosting DevOps efficiency. The collaboration has not only streamlined our processes but also enhanced our ability to serve customers with agility and precision.',
         designation: 'CPTO at Apica',
         name: 'Ranjan Parthasarathy',
         iconName: 'ic-apica',
@@ -44,7 +44,7 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
         iconName: 'ic-spinny',
     },
     {
-        quote: 'Managing our complex Kubernetes environment used to be a major bottleneck. We were juggling 15+ pre-prod environments, and it felt like we needed to double our DevOps team just to keep up. Then we discovered Devtron and it has completely streamlined our SDLC processes!',
+        quote: 'Managing our complex Kubernetes environment was a bottleneck, with 15+ pre-prod environments demanding more resources. Devtron streamlined our SDLC, enabling efficient management without extra DevOps hires. Lead times dropped, developers gained self-service access, and onboarding became easy. Devtron has made us more agile and efficient, letting us focus on delivering value.',
         designation: 'Director Architect at Tata1MG',
         name: 'Pankaj Pandey',
         iconName: 'ic-tata1mg',

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.9.8-beta-10",`
	`3`	`+ "version": "1.9.8-beta-11",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.license-card {`
`2`	`2`
`3`	`3`	`.trial-license-badge {`
`4`		`- background-color: var(--bg-hover);`
	`4`	`+ background-color: var(--divider-secondary-translucent);`
`5`	`5`	`letter-spacing: 0.55px;`
`6`	`6`	`}`
`7`	`7`	`}`