Merge pull request #474 from devtron-labs/feat/deploy-button-animation

feat: add animated button for cd modal

Author: arunjaindev

package-lock.json

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

package.json

@@ -0,0 +1,80 @@
+import { motion } from 'framer-motion'
+import { ReactComponent as ICDeploy } from '@Icons/ic-nav-rocket.svg'
+import { ComponentSizeType } from '@Shared/constants'
+import { SyntheticEvent, useEffect, useRef, useState } from 'react'
+import DeployAudio from '@Sounds/DeployAudio.mp3'
+import { Button } from '../Button'
+import './animatedDeployButton.scss'
+import { AnimatedDeployButtonProps } from './types'
+
+const AnimatedDeployButton = ({ isVirtualEnvironment, onButtonClick }: AnimatedDeployButtonProps) => {
+    const audioRef = useRef<HTMLAudioElement>(null)
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
+    const isAudioEnabled: boolean = window._env_.FEATURE_ACTION_AUDIOS_ENABLE
+    const [clicked, setClicked] = useState<boolean>(false)
+    const svgMotionVariants = {
+        hover: {
+            rotate: 45,
+        },
+    }
+
+    const handleButtonClick = async (e: SyntheticEvent) => {
+        if (clicked) {
+            return
+        }
+        if (isAudioEnabled && audioRef.current) {
+            try {
+                await audioRef.current.play()
+            } catch {
+                // do nothing
+            }
+        }
+        setClicked(true)
+        timeoutRef.current = setTimeout(() => {
+            setClicked(false)
+            onButtonClick(e, false)
+        }, 700)
+    }
+
+    useEffect(
+        () => () => {
+            clearTimeout(timeoutRef.current)
+        },
+        [],
+    )
+
+    return (
+        <motion.div whileHover="hover" className={`${clicked ? 'hide-button-text' : ''}`}>
+            <Button
+                dataTestId="cd-trigger-deploy-button"
+                text={`Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`}
+                startIcon={
+                    <motion.div
+                        variants={svgMotionVariants}
+                        animate={
+                            clicked
+                                ? {
+                                      x: 200,
+                                      rotate: 45,
+                                      transition: {
+                                          duration: 0.5,
+                                          delay: 0.1,
+                                      },
+                                  }
+                                : {}
+                        }
+                    >
+                        <ICDeploy className="icon-dim-16" />
+                    </motion.div>
+                }
+                size={ComponentSizeType.large}
+                onClick={handleButtonClick}
+            />
+            {/* Disabling es-lint as captions are not required */}
+            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+            <audio hidden ref={audioRef} src={DeployAudio} />
+        </motion.div>
+    )
+}
+
+export default AnimatedDeployButton

src/Assets/Sounds/DeployAudio.mp3

@@ -0,0 +1,7 @@
+.hide-button-text {
+    .button {
+        :nth-child(2) {
+            visibility: hidden;
+        }
+    }
+}

src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx

@@ -0,0 +1 @@
+export { default as AnimatedDeployButton } from './AnimatedDeployButton'

src/Shared/Components/AnimatedDeployButton/animatedDeployButton.scss

@@ -0,0 +1,4 @@
+export interface AnimatedDeployButtonProps {
+    isVirtualEnvironment: boolean
+    onButtonClick: (e, disableDeployButton: boolean) => void
+}

src/Shared/Components/AnimatedDeployButton/index.tsx

@@ -64,3 +64,4 @@ export * from './DiffViewer'
 export * from './DynamicDataTable'
 export * from './TagsKeyValueTable'
 export * from './FileUpload'
+export * from './AnimatedDeployButton'

src/Shared/Components/AnimatedDeployButton/types.tsx

@@ -100,6 +100,7 @@ export interface customEnv {
     FEATURE_DEFAULT_MERGE_STRATEGY?: OverrideMergeStrategyType
     FEATURE_DEFAULT_LANDING_RB_ENABLE?: boolean
     FEATURE_CLUSTER_MAP_ENABLE?: boolean
+    FEATURE_ACTION_AUDIOS_ENABLE?: boolean
 }
 declare global {
     interface Window {

src/Shared/Components/index.ts

@@ -5,6 +5,9 @@
       "@Icons/*": [
         "./src/Assets/Icon/*"
       ],
+      "@Sounds/*": [
+        "./src/Assets/Sounds/*"
+      ],
       "@Images/*": [
         "./src/Assets/Img/*"
       ],