feat: add prop default menu is open in select picker

package.json

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

src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx

@@ -7,8 +7,8 @@ import { useMainContext } from '@Shared/Providers'
 import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 
-const AboutDevtronBody = ({ isFELibAvailable }: { isFELibAvailable: boolean }) => {
-    const { currentServerInfo, isEnterprise } = useMainContext()
+const AboutDevtronBody = () => {
+    const { currentServerInfo, isEnterprise, isFELibAvailable } = useMainContext()
 
     const currentVersion = currentServerInfo?.serverInfo?.currentVersion
 

src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx

@@ -4,17 +4,11 @@ import { Backdrop } from '../Backdrop'
 import { Button } from '../Button'
 import AboutDevtronBody from './AboutDevtronBody'
 
-const AboutDevtronDialog = ({
-    handleCloseLicenseInfoDialog,
-    isFELibAvailable,
-}: {
-    handleCloseLicenseInfoDialog: () => void
-    isFELibAvailable: boolean
-}) => (
+const AboutDevtronDialog = ({ handleCloseLicenseInfoDialog }: { handleCloseLicenseInfoDialog: () => void }) => (
     <Backdrop onEscape={handleCloseLicenseInfoDialog}>
         <div className="flexbox-col w-400 br-12 bg__primary border__primary dc__m-auto mt-40">
             <div className="p-24">
-                <AboutDevtronBody isFELibAvailable={isFELibAvailable} />
+                <AboutDevtronBody />
             </div>
             <div className="flex px-24 py-20 dc__content-end">
                 <Button

src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx

@@ -18,20 +18,23 @@ import { SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { motion } from 'framer-motion'
 
 import DeployAudio from '@Sounds/DeployAudio.mp3'
-import { ComponentSizeType } from '@Shared/constants'
 
-import { Button, ButtonStyleType } from '../Button'
-import { Icon } from '../Icon'
+import { Button } from '../Button'
 import { AnimatedDeployButtonProps } from './types'
 
 import './animatedDeployButton.scss'
 
 const AnimatedDeployButton = ({
+    text,
+    style,
+    disabled,
     isLoading,
-    isVirtualEnvironment,
+    startIcon,
+    endIcon,
+    dataTestId,
     onButtonClick,
-    exceptionUserConfig,
-    isBulkCDTrigger,
+    tooltipContent,
+    animateStartIcon = true,
 }: AnimatedDeployButtonProps) => {
     const audioRef = useRef<HTMLAudioElement>(null)
     const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
@@ -42,9 +45,12 @@ const AnimatedDeployButton = ({
             rotate: 45,
         },
     }
-    const isExceptionUser = exceptionUserConfig?.canDeploy || exceptionUserConfig?.isImageApprover
 
     const handleButtonClick = async (e: SyntheticEvent) => {
+        if (!animateStartIcon) {
+            onButtonClick(e)
+            return
+        }
         if (clicked) {
             return
         }
@@ -58,7 +64,7 @@ const AnimatedDeployButton = ({
         setClicked(true)
         timeoutRef.current = setTimeout(() => {
             setClicked(false)
-            onButtonClick(e, false)
+            onButtonClick(e)
         }, 700)
     }
 
@@ -69,44 +75,44 @@ const AnimatedDeployButton = ({
         [],
     )
 
+    const startIconAnimated =
+        animateStartIcon && startIcon ? (
+            <motion.div
+                variants={svgMotionVariants}
+                animate={
+                    clicked
+                        ? {
+                              x: 200,
+                              rotate: 45,
+                              transition: {
+                                  duration: 0.5,
+                                  delay: 0.1,
+                              },
+                          }
+                        : {}
+                }
+            >
+                {startIcon}
+            </motion.div>
+        ) : (
+            startIcon
+        )
+
     return (
         <motion.div whileHover="hover" className={`${clicked ? 'hide-button-text' : ''}`}>
             <Button
-                dataTestId="cd-trigger-deploy-button"
+                text={text}
+                style={style}
+                endIcon={endIcon}
                 isLoading={isLoading}
-                text={
-                    exceptionUserConfig?.canDeploy
-                        ? 'Deploy without approval'
-                        : `Deploy${isVirtualEnvironment ? ' to isolated env' : ''}`
-                }
-                startIcon={
-                    <motion.div
-                        variants={svgMotionVariants}
-                        animate={
-                            clicked
-                                ? {
-                                      x: 200,
-                                      rotate: 45,
-                                      transition: {
-                                          duration: 0.5,
-                                          delay: 0.1,
-                                      },
-                                  }
-                                : {}
-                        }
-                    >
-                        <Icon name="ic-rocket-launch" color={null} />
-                    </motion.div>
-                }
-                size={ComponentSizeType.large}
+                dataTestId={dataTestId}
                 onClick={handleButtonClick}
-                style={isExceptionUser ? ButtonStyleType.warning : ButtonStyleType.default}
-                showTooltip={isExceptionUser}
+                startIcon={startIconAnimated}
+                showTooltip={!!tooltipContent}
                 tooltipProps={{
-                    content: isBulkCDTrigger
-                        ? 'You are authorized to deploy as an exception user for some applications'
-                        : 'You are authorized to deploy as an exception user',
+                    content: tooltipContent,
                 }}
+                disabled={disabled}
             />
             {/* Disabling es-lint as captions are not required */}
             {/* eslint-disable-next-line jsx-a11y/media-has-caption */}

src/Shared/Components/AnimatedDeployButton/types.tsx

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-export interface AnimatedDeployButtonProps {
-    isLoading?: boolean
-    isVirtualEnvironment: boolean
-    onButtonClick: (e, disableDeployButton: boolean) => void
-    exceptionUserConfig?: {
-        canDeploy: boolean
-        isImageApprover: boolean
-    }
-    isBulkCDTrigger?: boolean
+import { ButtonProps } from '../Button'
+
+export interface AnimatedDeployButtonProps
+    extends Pick<ButtonProps, 'dataTestId' | 'text' | 'disabled' | 'isLoading' | 'startIcon' | 'endIcon' | 'style'> {
+    onButtonClick: (e?) => void
+    tooltipContent?: string
+    animateStartIcon?: boolean
 }

src/Shared/Components/GettingStartedCard/GettingStarted.tsx

@@ -17,15 +17,13 @@
 import { ComponentSizeType } from '@Shared/constants'
 
 import GettingToast from '../../../Assets/Img/lifebuoy.png'
-import { LOGIN_COUNT, MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../../Common'
+import { LOGIN_COUNT, MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING, stopPropagation } from '../../../Common'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { handlePostHogEventUpdate, setActionWithExpiry } from '../Header/utils'
 import updateLoginCount from './service'
 import { GettingStartedType } from './types'
 
-import './gettingStarted.scss'
-
-const GettingStartedCard = ({ className, hideGettingStartedCard }: GettingStartedType) => {
+const GettingStartedCard = ({ hideGettingStartedCard }: GettingStartedType) => {
     const onClickedOkay = async () => {
         setActionWithExpiry('clickedOkay', 1)
         hideGettingStartedCard()
@@ -43,28 +41,25 @@ const GettingStartedCard = ({ className, hideGettingStartedCard }: GettingStarte
     }
 
     return (
-        <div className="getting_tippy__position">
-            <div className="arrow-up" />
-            <div className={`getting-started-card cn-0 p-20 br-8 fs-13 bg__overlay--primary dc__border ${className}`}>
-                <img className="mb-12 icon-dim-32" src={GettingToast} alt="getting started icon" />
-                <div className="flex column left fw-6 cn-7">Getting started</div>
-                <div className="cn-7">You can always access the Getting Started guide from here.</div>
-                <div className="mt-12 lh-18 flex left dc__gap-12">
-                    <Button
-                        text="Okay"
-                        size={ComponentSizeType.xs}
-                        dataTestId="getting-started-okay"
-                        onClick={onClickedOkay}
-                    />
-                    <Button
-                        text="Don't show again"
-                        size={ComponentSizeType.xs}
-                        dataTestId="getting-started-don't-show-again"
-                        onClick={onClickedDontShowAgain}
-                        style={ButtonStyleType.neutral}
-                        variant={ButtonVariantType.secondary}
-                    />
-                </div>
+        <div className="cn-0 p-20 br-8 fs-13 bg__overlay--primary dc__border w-300" onClick={stopPropagation}>
+            <img className="mb-12 icon-dim-32" src={GettingToast} alt="getting started icon" />
+            <div className="flex column left fw-6 cn-7">Getting started</div>
+            <div className="cn-7">You can always access the Getting Started guide from here.</div>
+            <div className="mt-12 lh-18 flex left dc__gap-12">
+                <Button
+                    text="Okay"
+                    size={ComponentSizeType.xs}
+                    dataTestId="getting-started-okay"
+                    onClick={onClickedOkay}
+                />
+                <Button
+                    text="Don't show again"
+                    size={ComponentSizeType.xs}
+                    dataTestId="getting-started-don't-show-again"
+                    onClick={onClickedDontShowAgain}
+                    style={ButtonStyleType.neutral}
+                    variant={ButtonVariantType.secondary}
+                />
             </div>
         </div>
     )

src/Shared/Components/GettingStartedCard/types.ts

@@ -27,8 +27,5 @@ export interface LoginCountType extends ResponseType {
 }
 
 export interface GettingStartedType {
-    className: string
-    showHelpCard: boolean
     hideGettingStartedCard: (count?: string) => void
-    loginCount: number
 }