feat: Help action menu dynamic doc link support added

package.json

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

src/Shared/Components/DocLink/constants.ts

@@ -42,23 +42,24 @@ export const DOCUMENTATION = {
     CHART_STORE: 'usage/deploy-chart',
     CHART_STORE_METRICS_SERVER: 'dashboard//chart-store/discover?appStoreName=metrics-server',
     CUSTOM_VALUES: 'usage/deploy-chart/overview-of-charts#custom-values',
+    CONFIGURING_WEBHOOK: 'usage/applications/creating-application/workflow/ci-pipeline#configuring-webhook',
     DEPLOYMENT: 'usage/applications/creating-application/deployment-template/deployment',
     DEPLOYMENT_TEMPLATE: 'usage/applications/creating-application/deployment-template',
     DEVTRON_UPGRADE: 'getting-started/upgrade',
-    CONFIGURING_WEBHOOK: 'usage/applications/creating-application/workflow/ci-pipeline#configuring-webhook',
+    DOC_HOME_PAGE: DOCUMENTATION_HOME_PAGE,
     ENTERPRISE_LICENSE: 'enterprise-license',
     EXECUTE_CUSTOM_SCRIPT:
         'usage/applications/creating-application/workflow/ci-pipeline/ci-build-pre-post-plugins#execute-custom-script',
     EXTERNAL_LINKS: 'getting-started/global-configurations/external-links',
     EXTERNAL_SECRET: 'usage/applications/creating-application/secrets#external-secrets',
     HOME_PAGE: 'https://devtron.ai',
-    DOC_HOME_PAGE: DOCUMENTATION_HOME_PAGE,
-    KUBE_CONFIG: 'usage/resource-browser#running-kubectl-commands-locally',
     JOBS: 'usage/jobs',
-    TAINT: 'usage/resource-browser#taint-a-node',
+    KUBE_CONFIG: 'usage/resource-browser#running-kubectl-commands-locally',
     RESOURCE_BROWSER: 'usage/resource-browser',
+    TAINT: 'usage/resource-browser#taint-a-node',
 
     // Global Configurations
+    GLOBAL_CONFIGUDATIONS: 'getting-started/global-configurations',
     GLOBAL_CONFIG_API_TOKEN: 'getting-started/global-configurations/authorization/api-tokens',
     GLOBAL_CONFIG_BUILD_INFRA: 'global-configurations/build-infra',
     GLOBAL_CONFIG_CHART: 'getting-started/global-configurations/chart-repo',
@@ -117,6 +118,9 @@ export const DOCUMENTATION = {
     GLOBAL_CONFIG_PULL_IMAGE_DIGEST: 'global-configurations/pull-image-digest',
     GLOBAL_CONFIG_TAGS: 'getting-started/global-configurations/tags-policy',
 
+    // Application Management
+    APP_MANAGEMENT: 'docs/user-guide/app-management',
+
     // Software Release Management
     SOFTWARE_DISTRIBUTION_HUB: 'usage/software-distribution-hub',
     RELEASE_TRACKS: 'usage/software-distribution-hub/release-hub#creating-release-tracks-and-versions',
@@ -126,8 +130,21 @@ export const DOCUMENTATION = {
     TENANTS_INSTALLATION: 'usage/software-distribution-hub/tenants',
 
     // Infrastructure Management
-    AUTOSCALER_DETECTION: 'user-guide/infra-management/infrastructure-overview#troubleshooting-autoscaler-detection',
+    AUTOSCALER_DETECTION:
+        'docs/user-guide/infra-management/infrastructure-overview#troubleshooting-autoscaler-detection',
+    INFRA_MANAGEMENT: 'docs/user-guide/infra-management',
 
     // Cost Visibility
-    COST_CALCULATION: 'user-guide/finops/overview-cost-visibility#how-is-the-cost-calculated',
+    COST_BREAKDOWN: 'docs/user-guide/finops',
+    COST_CALCULATION: 'docs/user-guide/finops/overview-cost-visibility#how-is-the-cost-calculated',
+    COST_VISIBILITY_OVERVIEW: 'docs/user-guide/finops/overview-cost-visibility',
+
+    // Security Center
+    SECURITY_CENTER: 'docs/user-guide/security-features',
+
+    // AI Recommendations
+    AI_RECOMMENDATIONS: 'docs/user-guide/ai-recommendations',
+
+    // Automation & Enablement
+    AUTOMATION_AND_ENABLEMENT: 'docs/user-guide/automation',
 } as const

src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx

@@ -22,6 +22,7 @@ import { BreadCrumb, BreadcrumbText, useBreadcrumb } from '@Common/index'
 import { ActionMenu } from '@Shared/Components/ActionMenu'
 import { ButtonComponentType } from '@Shared/Components/Button'
 import Button from '@Shared/Components/Button/Button.component'
+import { DOCUMENTATION } from '@Shared/Components/DocLink'
 import { Icon } from '@Shared/Components/Icon'
 import { ComponentSizeType } from '@Shared/constants'
 import { useMainContext } from '@Shared/Providers'
@@ -93,6 +94,16 @@ export const HeaderWithCreateButton = ({ viewType }: HeaderWithCreateButtonProps
     )
     const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
 
+    const getDocPath = () => {
+        if (viewType === 'jobs') {
+            return DOCUMENTATION.AUTOMATION_AND_ENABLEMENT
+        }
+        if (viewType === 'infra-apps') {
+            return DOCUMENTATION.INFRA_MANAGEMENT
+        }
+        return DOCUMENTATION.APP_MANAGEMENT
+    }
+
     return (
         <div className="create-button-container dc__position-sticky dc__top-0 bg__primary dc__zi-4">
             <PageHeader
@@ -110,6 +121,7 @@ export const HeaderWithCreateButton = ({ viewType }: HeaderWithCreateButtonProps
                           },
                       }
                     : {})}
+                docPath={getDocPath()}
             />
         </div>
     )

src/Shared/Components/Header/HelpButton.tsx

@@ -55,7 +55,13 @@ const CheckForUpdates = ({
     </div>
 )
 
-export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettingStartedCard }: HelpButtonProps) => {
+export const HelpButton = ({
+    serverInfo,
+    fetchingServerInfo,
+    onClick,
+    hideGettingStartedCard,
+    docPath,
+}: HelpButtonProps) => {
     // STATES
     const [isActionMenuOpen, setIsActionMenuOpen] = useState(false)
     const [expiryDate, setExpiryDate] = useState(0)
@@ -96,7 +102,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettin
             setSidePanelConfig((prev) => ({
                 ...prev,
                 state: SidePanelTab.DOCUMENTATION,
-                docLink: DOCUMENTATION_HOME_PAGE,
+                docLink: `${DOCUMENTATION_HOME_PAGE}${docPath ? `/${docPath}` : ''}`,
                 reinitialize: true,
             }))
         }
@@ -150,6 +156,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettin
                 options={getHelpActionMenuOptions({
                     isTrialOrFreemium: (licenseData?.isTrial || licenseData?.isFreemium) ?? false,
                     isEnterprise,
+                    docPath,
                 })}
                 onClick={handleActionMenuClick}
                 onOpen={setIsActionMenuOpen}

src/Shared/Components/Header/PageHeader.tsx

@@ -50,6 +50,7 @@ const PageHeader = ({
     onClose,
     tippyProps,
     closeIcon,
+    docPath,
 }: PageHeaderType) => {
     const { setLoginCount, setShowGettingStartedCard, setSidePanelConfig, sidePanelConfig, tempAppWindowConfig } =
         useMainContext()
@@ -158,6 +159,7 @@ const PageHeader = ({
                 fetchingServerInfo={currentServerInfo.fetchingServerInfo}
                 onClick={handleHelpButtonClick}
                 hideGettingStartedCard={hideGettingStartedCard}
+                docPath={docPath}
             />
             {!window._env_.K8S_CLIENT && (
                 <TippyCustomized

src/Shared/Components/Header/constants.ts

@@ -17,9 +17,11 @@
 import { DEVTRON_GPT_LINK, 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 { HelpButtonActionMenuProps, HelpMenuItems } from './types'
+import { HelpButtonActionMenuProps, HelpMenuItems, PageHeaderType } from './types'
 
-export const COMMON_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options'][number]['items'] = [
+export const getCommonHelpActionMenuItems = ({
+    docPath,
+}: Pick<PageHeaderType, 'docPath'>): HelpButtonActionMenuProps['options'][number]['items'] => [
     ...((!window._env_?.K8S_CLIENT
         ? [
               {
@@ -36,7 +38,7 @@ export const COMMON_HELP_ACTION_MENU_ITEMS: HelpButtonActionMenuProps['options']
         label: 'View documentation',
         startIcon: { name: 'ic-book-open' },
         componentType: 'anchor',
-        href: DOCUMENTATION_HOME_PAGE,
+        href: `${DOCUMENTATION_HOME_PAGE}${docPath ? `/${docPath}` : ''}`,
     },
     {
         id: HelpMenuItems.DEVTRON_GPT,

src/Shared/Components/Header/types.ts

@@ -39,6 +39,7 @@ export interface PageHeaderType {
     }
     onClose?: () => void
     closeIcon?: JSX.Element
+    docPath?: string
 }
 
 export interface ServerInfo {
@@ -52,7 +53,7 @@ export interface ServerInfoResponse extends ResponseType {
     result?: ServerInfo
 }
 
-export interface HelpButtonProps {
+export interface HelpButtonProps extends Pick<PageHeaderType, 'docPath'> {
     serverInfo: ServerInfo
     fetchingServerInfo: boolean
     onClick: () => void
@@ -79,3 +80,8 @@ export interface ProfileMenuProps {
     user: string
     onClick?: () => void
 }
+
+export interface HelpActionOptionTypes extends Pick<PageHeaderType, 'docPath'> {
+    isEnterprise: boolean
+    isTrialOrFreemium: boolean
+}

src/Shared/Components/Header/utils.ts

@@ -17,13 +17,13 @@
 import { LOGIN_COUNT } from '@Common/Constants'
 
 import {
-    COMMON_HELP_ACTION_MENU_ITEMS,
     ENTERPRISE_HELP_ACTION_MENU_ITEMS,
     ENTERPRISE_TRIAL_HELP_ACTION_MENU_ITEMS,
+    getCommonHelpActionMenuItems,
     OSS_HELP_ACTION_MENU_ITEMS,
 } from './constants'
 import { updatePostHogEvent } from './service'
-import { HelpButtonActionMenuProps } from './types'
+import { HelpActionOptionTypes, HelpButtonActionMenuProps } from './types'
 
 const millisecondsInDay = 86400000
 export const getDateInMilliseconds = (days) => 1 + new Date().valueOf() + (days ?? 0) * millisecondsInDay
@@ -45,12 +45,10 @@ export const setActionWithExpiry = (key: string, days: number): void => {
 export const getHelpActionMenuOptions = ({
     isEnterprise,
     isTrialOrFreemium,
-}: {
-    isEnterprise: boolean
-    isTrialOrFreemium: boolean
-}): HelpButtonActionMenuProps['options'] => [
+    docPath,
+}: HelpActionOptionTypes): HelpButtonActionMenuProps['options'] => [
     {
-        items: COMMON_HELP_ACTION_MENU_ITEMS,
+        items: getCommonHelpActionMenuItems({ docPath }),
     },
     ...(isEnterprise
         ? [