From 645333708c6909ede280fb37448d471214f18f06 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Tue, 24 Jun 2025 15:13:03 +0530
Subject: [PATCH 1/7] feat: add prop default menu is open in select picker

---
 .../Components/AboutDevtron/AboutDevtronBody.tsx       |  4 ++--
 .../Components/AboutDevtron/AboutDevtronDialog.tsx     | 10 ++--------
 src/Shared/Components/SelectPicker/type.ts             |  1 +
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx b/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx
index a4fb3d166..c642d1117 100644
--- a/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx
+++ b/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
 
diff --git a/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx b/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx
index 1b48138e6..f9676262e 100644
--- a/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx
+++ b/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
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
index 2ef42c294..ff1362360 100644
--- a/src/Shared/Components/SelectPicker/type.ts
+++ b/src/Shared/Components/SelectPicker/type.ts
@@ -169,6 +169,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     | 'inputValue'
     | 'filterOption'
     | 'noOptionsMessage'
+    | 'defaultMenuIsOpen'
 > &
     Partial<
         Pick<

From 8ee843f1698bf5e97b308ed541a04329c17f03b5 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Wed, 25 Jun 2025 13:17:10 +0530
Subject: [PATCH 2/7] feat: update animated deploy button and props

---
 .../AnimatedDeployButton.tsx                  | 84 ++++++++++---------
 .../Components/AnimatedDeployButton/types.tsx | 16 ++--
 2 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx b/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx
index 257f5d907..7b387d1bd 100644
--- a/src/Shared/Components/AnimatedDeployButton/AnimatedDeployButton.tsx
+++ b/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 */}
diff --git a/src/Shared/Components/AnimatedDeployButton/types.tsx b/src/Shared/Components/AnimatedDeployButton/types.tsx
index 4cb944cbc..2aab40463 100644
--- a/src/Shared/Components/AnimatedDeployButton/types.tsx
+++ b/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
 }

From 23e57a7a4966a380d0cf8bb02664e769ef378dbe Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Wed, 25 Jun 2025 14:44:32 +0530
Subject: [PATCH 3/7] chore: version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 573c29155..0a5516696 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.16.0-pre-1",
+    "version": "1.16.0-pre-2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.16.0-pre-1",
+            "version": "1.16.0-pre-2",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index d977fa103..4b9d597f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.16.0-pre-1",
+    "version": "1.16.0-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

From 3798413bcfb4f9e1801050e1c0460f43811c65b0 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Wed, 25 Jun 2025 15:18:48 +0530
Subject: [PATCH 4/7] feat: add update events on help options

---
 src/Shared/Components/Header/HelpButton.tsx | 28 +++++----------------
 src/Shared/Components/Header/PageHeader.tsx |  6 ++---
 2 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/Shared/Components/Header/HelpButton.tsx b/src/Shared/Components/Header/HelpButton.tsx
index 24b5113bd..d8fc1889d 100644
--- a/src/Shared/Components/Header/HelpButton.tsx
+++ b/src/Shared/Components/Header/HelpButton.tsx
@@ -1,8 +1,8 @@
 import { useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 import { SliderButton } from '@typeform/embed-react'
 
 import { DOCUMENTATION_HOME_PAGE, URLS } from '@Common/Constants'
+import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { ComponentSizeType } from '@Shared/constants'
 import { SidePanelTab, useMainContext } from '@Shared/Providers'
 import { InstallationType } from '@Shared/types'
@@ -51,18 +51,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
     const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
 
     // HANDLERS
-    const handleAnalytics: HelpButtonActionMenuProps['onClick'] = (item) => {
-        ReactGA.event({
-            category: 'Help Nav',
-            action: `${item.label} Clicked`,
-        })
-    }
-
     const handleOpenAboutDevtron = () => {
-        ReactGA.event({
-            category: 'help-nav__about-devtron',
-            action: 'ABOUT_DEVTRON_CLICKED',
-        })
         handleOpenLicenseInfoDialog()
     }
 
@@ -74,8 +63,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
         setGettingStartedClicked(true)
     }
 
-    const handleViewDocumentationClick: HelpButtonActionMenuProps['onClick'] = (item, e) => {
-        handleAnalytics(item, e)
+    const handleViewDocumentationClick: HelpButtonActionMenuProps['onClick'] = (_, e) => {
         // Opens documentation in side panel when clicked normally, or in a new tab when clicked with the meta/command key
         if (!e.metaKey) {
             e.preventDefault()
@@ -89,6 +77,10 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
     }
 
     const handleActionMenuClick: HelpButtonActionMenuProps['onClick'] = (item, e) => {
+        handleAnalyticsEvent({
+            category: 'Help Nav',
+            action: `HELP_${item.id.toUpperCase().replace('-', '_')}`,
+        })
         switch (item.id) {
             case HelpMenuItems.GETTING_STARTED:
                 handleGettingStartedClick()
@@ -99,14 +91,6 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
             case HelpMenuItems.GIVE_FEEDBACK:
                 handleFeedbackClick()
                 break
-            case HelpMenuItems.JOIN_DISCORD_COMMUNITY:
-            case HelpMenuItems.OPEN_NEW_TICKET:
-            case HelpMenuItems.VIEW_ALL_TICKETS:
-            case HelpMenuItems.CHAT_WITH_SUPPORT:
-            case HelpMenuItems.RAISE_ISSUE_REQUEST:
-            case HelpMenuItems.DEVTRON_GPT:
-                handleAnalytics(item, e)
-                break
             case HelpMenuItems.VIEW_DOCUMENTATION:
                 handleViewDocumentationClick(item, e)
                 break
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
index 4b53f751f..550d03f70 100644
--- a/src/Shared/Components/Header/PageHeader.tsx
+++ b/src/Shared/Components/Header/PageHeader.tsx
@@ -15,11 +15,11 @@
  */
 
 import { useEffect, useState } from 'react'
-import ReactGA from 'react-ga4'
 import Tippy from '@tippyjs/react'
 
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
+import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { InstallationType } from '@Shared/types'
 
 import { TippyCustomized, TippyTheme, Tooltip } from '../../../Common'
@@ -119,7 +119,7 @@ const PageHeader = ({
         setActionWithExpiry('clickedOkay', 1)
         hideGettingStartedCard()
         await handlePostHogEventUpdate(POSTHOG_EVENT_ONBOARDING.HELP)
-        ReactGA.event({
+        handleAnalyticsEvent({
             category: 'Main Navigation',
             action: `Help Clicked`,
         })
@@ -133,7 +133,7 @@ const PageHeader = ({
     )
 
     const onAskButtonClick = () => {
-        ReactGA.event({
+        handleAnalyticsEvent({
             category: 'AI',
             action: `HELP_ASK_DEVTRON_AI`,
         })

From d2654a1a8a1ee44fdf02e73c11b2cb68ca1cd4b5 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Thu, 26 Jun 2025 22:28:53 +0530
Subject: [PATCH 5/7] feat: use tippy in getting started card instead of fixed
 position

---
 .../GettingStartedCard/GettingStarted.tsx     | 47 ++++++------
 .../GettingStartedCard/gettingStarted.scss    | 37 ----------
 .../Components/GettingStartedCard/types.ts    |  3 -
 src/Shared/Components/Header/HelpButton.tsx   | 73 ++++++++++++++-----
 src/Shared/Components/Header/PageHeader.tsx   | 57 +--------------
 src/Shared/Components/Header/types.ts         |  4 +-
 6 files changed, 81 insertions(+), 140 deletions(-)
 delete mode 100644 src/Shared/Components/GettingStartedCard/gettingStarted.scss

diff --git a/src/Shared/Components/GettingStartedCard/GettingStarted.tsx b/src/Shared/Components/GettingStartedCard/GettingStarted.tsx
index 18604ca28..a0f554700 100644
--- a/src/Shared/Components/GettingStartedCard/GettingStarted.tsx
+++ b/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>
     )
diff --git a/src/Shared/Components/GettingStartedCard/gettingStarted.scss b/src/Shared/Components/GettingStartedCard/gettingStarted.scss
deleted file mode 100644
index 51393ab98..000000000
--- a/src/Shared/Components/GettingStartedCard/gettingStarted.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.getting-started-card {
-    position: fixed;
-    z-index: 6;
-    right: 20px;
-    top: 54px;
-}
-
-.arrow-up {
-    width: 0;
-    height: 0;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
-    border-bottom: 12px solid var(--bg-overlay-primary);
-    right: 64px;
-    position: fixed;
-    top: 42px;
-}
-
-.getting_tippy__position {
-    position: fixed;
-}
diff --git a/src/Shared/Components/GettingStartedCard/types.ts b/src/Shared/Components/GettingStartedCard/types.ts
index 7144c1ad5..6008f8a35 100644
--- a/src/Shared/Components/GettingStartedCard/types.ts
+++ b/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
 }
diff --git a/src/Shared/Components/Header/HelpButton.tsx b/src/Shared/Components/Header/HelpButton.tsx
index d8fc1889d..422eab6ee 100644
--- a/src/Shared/Components/Header/HelpButton.tsx
+++ b/src/Shared/Components/Header/HelpButton.tsx
@@ -1,14 +1,16 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import Tippy from '@tippyjs/react'
 import { SliderButton } from '@typeform/embed-react'
 
-import { DOCUMENTATION_HOME_PAGE, URLS } from '@Common/Constants'
+import { DOCUMENTATION_HOME_PAGE, MAX_LOGIN_COUNT, URLS } from '@Common/Constants'
 import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { ComponentSizeType } from '@Shared/constants'
-import { SidePanelTab, useMainContext } from '@Shared/Providers'
+import { AppThemeType, SidePanelTab, useMainContext, useTheme } from '@Shared/Providers'
 import { InstallationType } from '@Shared/types'
 
 import { ActionMenu } from '../ActionMenu'
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
+import GettingStartedCard from '../GettingStartedCard/GettingStarted'
 import { Icon } from '../Icon'
 import { HelpButtonActionMenuProps, HelpButtonProps, HelpMenuItems } from './types'
 import { getHelpActionMenuOptions } from './utils'
@@ -36,20 +38,26 @@ const CheckForUpdates = ({
     </div>
 )
 
-export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButtonProps) => {
+export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettingStartedCard }: HelpButtonProps) => {
     // STATES
     const [isActionMenuOpen, setIsActionMenuOpen] = useState(false)
+    const [expiryDate, setExpiryDate] = useState(0)
 
     // HOOKS
-    const { handleOpenLicenseInfoDialog, licenseData, setGettingStartedClicked, isEnterprise, setSidePanelConfig } =
-        useMainContext()
+    const {
+        handleOpenLicenseInfoDialog,
+        licenseData,
+        setGettingStartedClicked,
+        isEnterprise,
+        setSidePanelConfig,
+        loginCount,
+        showGettingStartedCard,
+    } = useMainContext()
+    const { appTheme } = useTheme()
 
     // REFS
     const typeFormSliderButtonRef = useRef(null)
 
-    // CONSTANTS
-    const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
-
     // HANDLERS
     const handleOpenAboutDevtron = () => {
         handleOpenLicenseInfoDialog()
@@ -98,6 +106,23 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
         }
     }
 
+    const getExpired = (): boolean => {
+        // Render Getting started tippy card if the time gets expired
+        const now = new Date().valueOf()
+        return now > expiryDate
+    }
+
+    // USE-EFFECT
+    useEffect(() => {
+        setExpiryDate(+localStorage.getItem('clickedOkay'))
+    }, [])
+
+    // CONSTANTS
+    const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
+
+    const isGettingStartedVisible =
+        showGettingStartedCard && loginCount >= 0 && loginCount < MAX_LOGIN_COUNT && getExpired()
+
     return (
         <>
             <ActionMenu<HelpMenuItems>
@@ -121,16 +146,28 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
                       }
                     : {})}
             >
-                <button
-                    type="button"
-                    data-testid="page-header-help-button"
-                    className="dc__transparent p-6 br-6 dc__hover-n50 flex dc__gap-4 fs-13 lh-20 fw-6 cn-9"
-                    onClick={onClick}
+                <Tippy
+                    placement="bottom"
+                    content={<GettingStartedCard hideGettingStartedCard={hideGettingStartedCard} />}
+                    visible={isGettingStartedVisible}
+                    className={`br-8 ${
+                        appTheme === AppThemeType.light
+                            ? 'tippy-white-container default-white'
+                            : 'tippy-black-container default-black'
+                    } no-content-padding tippy-shadow`}
+                    interactive
                 >
-                    <Icon name="ic-help-outline" color="N900" size={20} />
-                    <span>Help</span>
-                    <Icon name="ic-caret-down-small" color={null} rotateBy={isActionMenuOpen ? 180 : 0} />
-                </button>
+                    <button
+                        type="button"
+                        data-testid="page-header-help-button"
+                        className="dc__transparent p-6 br-6 dc__hover-n50 flex dc__gap-4 fs-13 lh-20 fw-6 cn-9"
+                        onClick={onClick}
+                    >
+                        <Icon name="ic-help-outline" color="N900" size={20} />
+                        <span>Help</span>
+                        <Icon name="ic-caret-down-small" color={null} rotateBy={isActionMenuOpen ? 180 : 0} />
+                    </button>
+                </Tippy>
             </ActionMenu>
             {isEnterprise && (
                 <SliderButton
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
index 550d03f70..08783c01b 100644
--- a/src/Shared/Components/Header/PageHeader.tsx
+++ b/src/Shared/Components/Header/PageHeader.tsx
@@ -14,18 +14,16 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import Tippy from '@tippyjs/react'
 
-import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
 import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { InstallationType } from '@Shared/types'
 
 import { TippyCustomized, TippyTheme, Tooltip } from '../../../Common'
-import { MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
+import { POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
 import { SidePanelTab, useMainContext, useTheme, useUserEmail } from '../../Providers'
-import GettingStartedCard from '../GettingStartedCard/GettingStarted'
 import { Icon } from '../Icon'
 import { InfoIconTippy } from '../InfoIconTippy'
 import { HelpButton } from './HelpButton'
@@ -45,19 +43,9 @@ const PageHeader = ({
     isBreadcrumbs = false,
     breadCrumbs,
     renderActionButtons,
-    showCloseButton = false,
-    onClose,
-    markAsBeta,
     tippyProps,
 }: PageHeaderType) => {
-    const {
-        loginCount,
-        setLoginCount,
-        showGettingStartedCard,
-        setShowGettingStartedCard,
-        setSidePanelConfig,
-        sidePanelConfig,
-    } = useMainContext()
+    const { setLoginCount, setShowGettingStartedCard, setSidePanelConfig, sidePanelConfig } = useMainContext()
     const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
 
     const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } =
@@ -69,7 +57,6 @@ const PageHeader = ({
             fetchingServerInfo: false,
         },
     )
-    const [expiryDate, setExpiryDate] = useState(0)
 
     const getCurrentServerInfo = async () => {
         try {
@@ -88,10 +75,6 @@ const PageHeader = ({
         }
     }
 
-    useEffect(() => {
-        setExpiryDate(+localStorage.getItem('clickedOkay'))
-    }, [])
-
     const hideGettingStartedCard = (count?: string) => {
         setShowGettingStartedCard(false)
         if (count) {
@@ -158,6 +141,7 @@ const PageHeader = ({
                 serverInfo={currentServerInfo.serverInfo}
                 fetchingServerInfo={currentServerInfo.fetchingServerInfo}
                 onClick={handleHelpButtonClick}
+                hideGettingStartedCard={hideGettingStartedCard}
             />
             {!window._env_.K8S_CLIENT && (
                 <TippyCustomized
@@ -184,16 +168,6 @@ const PageHeader = ({
         </>
     )
 
-    const getExpired = (): boolean => {
-        // Render Getting started tippy card if the time gets expired
-        const now = new Date().valueOf()
-        return now > expiryDate
-    }
-
-    const renderBetaTag = (): JSX.Element => (
-        <span className="fs-12 fw-4 lh-18 pt-1 pb-1 pl-6 pr-6 ml-8 cn-9 bcy-5 br-4">Beta</span>
-    )
-
     const renderIframeButton = () => <IframePromoButton />
 
     return (
@@ -204,16 +178,6 @@ const PageHeader = ({
         >
             <h1 className="dc__page-header__title dc__content-space  flex fs-16 fw-6 lh-20 h-48">
                 <div className="flex left">
-                    {showCloseButton && (
-                        <button
-                            className="dc__transparent flex mr-8"
-                            type="button"
-                            aria-label="close-button"
-                            onClick={onClose}
-                        >
-                            <Close className="dc__page-header__close-icon icon-dim-24 cursor" />
-                        </button>
-                    )}
                     <span className="fw-6" data-testid="main-header">
                         {headerName}
                     </span>
@@ -257,7 +221,6 @@ const PageHeader = ({
                                 </Tippy>
                             </a>
                         ))}
-                    {markAsBeta && renderBetaTag()}
                 </div>
                 {showTabs && (
                     <div className="flex left dc__gap-8">
@@ -268,18 +231,6 @@ const PageHeader = ({
                 )}
             </h1>
             {showTabs && renderHeaderTabs()}
-            {!window._env_.K8S_CLIENT &&
-                showGettingStartedCard &&
-                loginCount >= 0 &&
-                loginCount < MAX_LOGIN_COUNT &&
-                getExpired() && (
-                    <GettingStartedCard
-                        className="w-300"
-                        showHelpCard={false}
-                        hideGettingStartedCard={hideGettingStartedCard}
-                        loginCount={loginCount}
-                    />
-                )}
             {!showTabs && (
                 <div className="flex left dc__gap-8">
                     {typeof renderActionButtons === 'function' && renderActionButtons()}
diff --git a/src/Shared/Components/Header/types.ts b/src/Shared/Components/Header/types.ts
index 23fca5bbd..5a6563a10 100644
--- a/src/Shared/Components/Header/types.ts
+++ b/src/Shared/Components/Header/types.ts
@@ -28,9 +28,6 @@ export interface PageHeaderType {
     isBreadcrumbs?: boolean
     breadCrumbs?: () => JSX.Element
     renderActionButtons?: () => JSX.Element
-    showCloseButton?: boolean
-    onClose?: () => void
-    markAsBeta?: boolean
     tippyProps?: Pick<TippyCustomizedProps<false>, 'additionalContent'> & {
         isTippyCustomized?: boolean
         tippyRedirectLink?: keyof typeof DOCUMENTATION
@@ -55,6 +52,7 @@ export interface HelpButtonProps {
     serverInfo: ServerInfo
     fetchingServerInfo: boolean
     onClick: () => void
+    hideGettingStartedCard: () => void
 }
 
 export enum HelpMenuItems {

From f6bd2e0068c9a1bef3ba9aca2d64e1a18bb8d595 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Fri, 27 Jun 2025 12:17:18 +0530
Subject: [PATCH 6/7] feat: move main context in a folder

---
 .../{ => MainContextProvider}/MainContextProvider.tsx       | 1 -
 src/Shared/Providers/MainContextProvider/index.ts           | 3 +++
 src/Shared/Providers/{ => MainContextProvider}/types.ts     | 6 +++---
 src/Shared/Providers/index.ts                               | 2 --
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename src/Shared/Providers/{ => MainContextProvider}/MainContextProvider.tsx (96%)
 create mode 100644 src/Shared/Providers/MainContextProvider/index.ts
 rename src/Shared/Providers/{ => MainContextProvider}/types.ts (97%)

diff --git a/src/Shared/Providers/MainContextProvider.tsx b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
similarity index 96%
rename from src/Shared/Providers/MainContextProvider.tsx
rename to src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
index b8f1238ab..e0ac48904 100644
--- a/src/Shared/Providers/MainContextProvider.tsx
+++ b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx
@@ -18,7 +18,6 @@ import { createContext, useContext } from 'react'
 
 import { MainContext, MainContextProviderProps } from './types'
 
-// TODO: (Arun) - Move to separate folder
 const mainContext = createContext<MainContext>(null)
 
 export const useMainContext = () => {
diff --git a/src/Shared/Providers/MainContextProvider/index.ts b/src/Shared/Providers/MainContextProvider/index.ts
new file mode 100644
index 000000000..7bd1e1720
--- /dev/null
+++ b/src/Shared/Providers/MainContextProvider/index.ts
@@ -0,0 +1,3 @@
+export * from './MainContextProvider'
+export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types'
+export { SidePanelTab } from './types'
diff --git a/src/Shared/Providers/types.ts b/src/Shared/Providers/MainContextProvider/types.ts
similarity index 97%
rename from src/Shared/Providers/types.ts
rename to src/Shared/Providers/MainContextProvider/types.ts
index c1d1cd9c9..ba23f9cd4 100644
--- a/src/Shared/Providers/types.ts
+++ b/src/Shared/Providers/MainContextProvider/types.ts
@@ -16,9 +16,9 @@
 
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react'
 
-import { SERVER_MODE } from '../../Common'
-import { ServerInfo } from '../Components/Header/types'
-import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType, ToastManager } from '..'
+import { SERVER_MODE } from '../../../Common'
+import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType, ToastManager } from '../..'
+import { ServerInfo } from '../../Components/Header/types'
 
 export interface ReloadVersionConfigTypes {
     bgUpdated: boolean
diff --git a/src/Shared/Providers/index.ts b/src/Shared/Providers/index.ts
index 8ad4a382f..17f612fb7 100644
--- a/src/Shared/Providers/index.ts
+++ b/src/Shared/Providers/index.ts
@@ -17,6 +17,4 @@
 export * from './ImageSelectionUtility'
 export * from './MainContextProvider'
 export * from './ThemeProvider'
-export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types'
-export { SidePanelTab } from './types'
 export * from './UserEmailProvider'

From 96a67b9b590fb187fef0e91a2ad4412f02072604 Mon Sep 17 00:00:00 2001
From: Arun Jain <arun.jain@devtron.ai>
Date: Fri, 27 Jun 2025 12:53:35 +0530
Subject: [PATCH 7/7] chore: version bump

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 52afe323b..307ba5d4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.16.0-pre-2",
+    "version": "1.16.0-pre-3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.16.0-pre-2",
+            "version": "1.16.0-pre-3",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 0a3efc2c3..db9f911ea 100644
--- a/package.json
+++ b/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",