refactor: HelpButton - update typings

Author: RohitRaj011

src/Shared/Components/Header/HelpButton.tsx

@@ -6,10 +6,10 @@ import { URLS } from '@Common/Constants'
 import { ComponentSizeType } from '@Shared/constants'
 import { useMainContext } from '@Shared/Providers'
 
-import { ActionMenu, ActionMenuItemType, ActionMenuProps } from '../ActionMenu'
+import { ActionMenu, ActionMenuItemType } from '../ActionMenu'
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
-import { HelpButtonProps, HelpMenuItems, InstallationType } from './types'
+import { HelpButtonActionMenuProps, HelpButtonProps, HelpMenuItems, InstallationType } from './types'
 import { getHelpActionMenuOptions } from './utils'
 
 const CheckForUpdates = ({
@@ -35,12 +35,12 @@ const CheckForUpdates = ({
     </div>
 )
 
-export const HelpButton = ({ serverInfo, fetchingServerInfo, handleGettingStartedClick, onClick }: HelpButtonProps) => {
+export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButtonProps) => {
     // STATES
     const [isActionMenuOpen, setIsActionMenuOpen] = useState(false)
 
     // HOOKS
-    const { currentServerInfo, handleOpenLicenseInfoDialog, licenseData } = useMainContext()
+    const { currentServerInfo, handleOpenLicenseInfoDialog, licenseData, setGettingStartedClicked } = useMainContext()
 
     // REFS
     const typeFormSliderButtonRef = useRef(null)
@@ -69,7 +69,11 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, handleGettingStarte
         typeFormSliderButtonRef.current?.open()
     }
 
-    const handleActionMenuClick: ActionMenuProps['onClick'] = (item) => {
+    const handleGettingStartedClick = () => {
+        setGettingStartedClicked(true)
+    }
+
+    const handleActionMenuClick: HelpButtonActionMenuProps['onClick'] = (item) => {
         switch (item.id) {
             case HelpMenuItems.GETTING_STARTED:
                 handleGettingStartedClick()
@@ -94,7 +98,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, handleGettingStarte
 
     return (
         <>
-            <ActionMenu
+            <ActionMenu<HelpMenuItems>
                 id="page-header-help-action-menu"
                 alignment="end"
                 width={220}

src/Shared/Components/Header/PageHeader.tsx

@@ -49,14 +49,8 @@ const PageHeader = ({
     markAsBeta,
     tippyProps,
 }: PageHeaderType) => {
-    const {
-        loginCount,
-        setLoginCount,
-        showGettingStartedCard,
-        setShowGettingStartedCard,
-        setGettingStartedClicked,
-        licenseData,
-    } = useMainContext()
+    const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard, licenseData } =
+        useMainContext()
     const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
 
     const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } =
@@ -92,10 +86,6 @@ const PageHeader = ({
         setExpiryDate(+localStorage.getItem('clickedOkay'))
     }, [])
 
-    const handleGettingStartedClick = () => {
-        setGettingStartedClicked(true)
-    }
-
     const hideGettingStartedCard = (count?: string) => {
         setShowGettingStartedCard(false)
         if (count) {
@@ -147,7 +137,6 @@ const PageHeader = ({
             <HelpButton
                 serverInfo={currentServerInfo.serverInfo}
                 fetchingServerInfo={currentServerInfo.fetchingServerInfo}
-                handleGettingStartedClick={handleGettingStartedClick}
                 onClick={onHelpButtonClick}
             />
             {!window._env_.K8S_CLIENT && (

src/Shared/Components/Header/constants.ts

@@ -17,10 +17,9 @@
 import { DISCORD_LINK, DOCUMENTATION_HOME_PAGE, URLS } from '@Common/Constants'
 import { CONTACT_SUPPORT_LINK, OPEN_NEW_TICKET, RAISE_ISSUE, VIEW_ALL_TICKETS } from '@Shared/constants'
 
-import { ActionMenuItemType } from '../ActionMenu'
-import { HelpMenuItems } from './types'
+import { HelpButtonActionMenuProps, HelpMenuItems } from './types'
 
-export const COMMON_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
+export const COMMON_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [
     ...((!window._env_?.K8S_CLIENT
         ? [
               {
@@ -31,7 +30,7 @@ export const COMMON_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
                   to: `/${URLS.GETTING_STARTED}`,
               },
           ]
-        : []) satisfies ActionMenuItemType[]),
+        : []) satisfies HelpButtonActionMenuProps['options'][number]['items']),
     {
         id: HelpMenuItems.VIEW_DOCUMENTATION,
         label: 'View documentation',
@@ -53,7 +52,7 @@ export const COMMON_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
     },
 ]
 
-export const OSS_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
+export const OSS_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [
     {
         id: HelpMenuItems.CHAT_WITH_SUPPORT,
         label: 'Chat with support',
@@ -70,7 +69,7 @@ export const OSS_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
     },
 ]
 
-export const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
+export const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [
     {
         id: HelpMenuItems.REQUEST_SUPPORT,
         label: 'Request Support',
@@ -80,7 +79,7 @@ export const ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
     },
 ]
 
-export const ENTERPRISE_HELP_ACTION_MENU_ITEMS: ActionMenuItemType[] = [
+export const ENTERPRISE_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [
     {
         id: HelpMenuItems.OPEN_NEW_TICKET,
         label: 'Open new ticket',

src/Shared/Components/Header/types.ts

@@ -17,6 +17,7 @@
 import { ModuleStatus } from '@Shared/types'
 
 import { ResponseType, TippyCustomizedProps } from '../../../Common'
+import { ActionMenuProps } from '../ActionMenu'
 
 export enum InstallationType {
     OSS_KUBECTL = 'oss_kubectl',
@@ -58,7 +59,6 @@ export interface ServerInfoResponse extends ResponseType {
 export interface HelpButtonProps {
     serverInfo: ServerInfo
     fetchingServerInfo: boolean
-    handleGettingStartedClick: () => void
     onClick: () => void
 }
 
@@ -74,3 +74,5 @@ export enum HelpMenuItems {
     CHAT_WITH_SUPPORT = 'chat-with-support',
     RAISE_ISSUE_REQUEST = 'raise-issue-request',
 }
+
+export type HelpButtonActionMenuProps = ActionMenuProps<HelpMenuItems>

src/Shared/Components/Header/utils.ts

@@ -16,7 +16,6 @@
 
 import { LOGIN_COUNT } from '@Common/Constants'
 
-import { ActionMenuProps } from '../ActionMenu'
 import { DevtronLicenseInfo, LicenseStatus } from '../License'
 import {
     COMMON_HELP_ACTION_MENU_ITEMS,
@@ -25,6 +24,7 @@ import {
     OSS_HELP_ACTION_MENU_ITEMS,
 } from './constants'
 import { updatePostHogEvent } from './service'
+import { HelpButtonActionMenuProps } from './types'
 
 const millisecondsInDay = 86400000
 export const getDateInMilliseconds = (days) => 1 + new Date().valueOf() + (days ?? 0) * millisecondsInDay
@@ -52,7 +52,7 @@ export const getHelpActionMenuOptions = ({
 }: {
     isEnterprise: boolean
     isTrial: boolean
-}): ActionMenuProps['options'] => [
+}): HelpButtonActionMenuProps['options'] => [
     {
         items: COMMON_HELP_ACTION_MENU_ITEMS,
     },