feat: DocLink - open devtron docs in side panel, open doc links in new tab in case of drawers/modals

RohitRaj011 · RohitRaj011 · commit ff8094a39509 · 2025-05-26T17:36:55.000+05:30
diff --git a/src/Common/CustomTagSelector/PropagateTagInfo.tsx b/src/Common/CustomTagSelector/PropagateTagInfo.tsx
@@ -47,6 +47,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             interactive
             documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}
             documentationLinkText="View Documentation"
+            openInNewTab
         >
             <div className="flexbox cursor">
                 <InjectTag className="icon-dim-16 mt-2 mr-4" />
diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx
@@ -81,6 +81,7 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
             documentationLinkText,
             isEnterprise,
             isExternalLink,
+            openInNewTab,
         } = props
         return (
             <>
@@ -167,6 +168,7 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
                             isEnterprise={isEnterprise}
                             isExternalLink={isExternalLink}
                             docLinkKey={documentationLink}
+                            openInNewTab={openInNewTab}
                         />
                     </div>
                 )}
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -33,7 +33,7 @@ import {
     ACTION_STATE,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
-    DOCUMENTATION,
+    DocLinkProps,
     RefVariableType,
     SortingOrder,
     TaskErrorObj,
@@ -120,10 +120,9 @@ export interface CheckboxProps {
     children?: ReactNode
 }
 
-export type TippyWithBaseDocLinkTypes<T extends boolean> = {
-    isExternalLink?: T
-    isEnterprise?: boolean
-    documentationLink?: T extends true ? string : keyof typeof DOCUMENTATION
+export interface TippyWithBaseDocLinkTypes<T extends boolean>
+    extends Pick<DocLinkProps<T>, 'isEnterprise' | 'isExternalLink' | 'openInNewTab'> {
+    documentationLink?: DocLinkProps<T>['docLinkKey']
 }
 
 export type TippyCustomizedProps<T extends boolean> = Pick<TippyProps, 'appendTo'> &
@@ -171,6 +170,7 @@ export interface InfoIconTippyProps<T extends boolean = false>
         | 'documentationLink'
         | 'isEnterprise'
         | 'isExternalLink'
+        | 'openInNewTab'
     > {
     dataTestid?: string
     children?: TippyCustomizedProps<T>['children']
diff --git a/src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx b/src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx
@@ -71,6 +71,7 @@ const FeatureDescriptionModalContent = ({
                     showExternalIcon
                     variant={ButtonVariantType.secondary}
                     isEnterprise={isEnterprise}
+                    onClick={closeModal}
                 />
             )}
             <Button
diff --git a/src/Shared/Components/FeatureDescription/types.ts b/src/Shared/Components/FeatureDescription/types.ts
@@ -16,14 +16,14 @@
 
 import React, { ReactNode } from 'react'
 
-import { DocLinkProps } from '@Shared/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink'
 
 import { ImageType } from '../../../Common'
 import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
 
-interface BaseFeatureDescriptionModalProps<T extends boolean = false> {
+interface BaseFeatureDescriptionModalProps {
     renderDescriptionContent?: () => ReactNode
-    docLink?: DocLinkProps<T>['docLinkKey']
+    docLink?: DocLinkProps<false>['docLinkKey']
     imageVariant?: ImageType
     SVGImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
     imageStyles?: React.CSSProperties
diff --git a/src/Shared/Components/Header/types.ts b/src/Shared/Components/Header/types.ts
@@ -25,7 +25,7 @@ export enum InstallationType {
     ENTERPRISE = 'enterprise',
 }
 
-export interface PageHeaderType<T extends boolean = false> {
+export interface PageHeaderType {
     headerName?: string
     showTabs?: boolean
     additionalHeaderInfo?: () => JSX.Element
@@ -36,7 +36,7 @@ export interface PageHeaderType<T extends boolean = false> {
     showCloseButton?: boolean
     onClose?: () => void
     markAsBeta?: boolean
-    tippyProps?: Pick<TippyCustomizedProps<T>, 'additionalContent'> & {
+    tippyProps?: Pick<TippyCustomizedProps<false>, 'additionalContent'> & {
         isTippyCustomized?: boolean
         tippyRedirectLink?: keyof typeof DOCUMENTATION
         TippyIcon?: React.FunctionComponent<any>
diff --git a/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx b/src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx
@@ -34,6 +34,7 @@ const InfoIconTippy = <T extends boolean = false>({
     buttonPadding = 'p-0',
     isEnterprise = false,
     isExternalLink,
+    openInNewTab,
 }: InfoIconTippyProps<T>) => (
     <TippyCustomized
         theme={TippyTheme.white}
@@ -54,6 +55,7 @@ const InfoIconTippy = <T extends boolean = false>({
         duration={400}
         isEnterprise={isEnterprise}
         isExternalLink={isExternalLink}
+        openInNewTab={openInNewTab}
     >
         {children || (
             <button
diff --git a/src/Shared/Components/License/License.components.tsx b/src/Shared/Components/License/License.components.tsx
@@ -90,6 +90,7 @@ const InstallationFingerprintInfo = ({ fingerprint, showHelpTooltip = false }: I
                     iconClassName="icon-dim-20 fcn-6"
                     placement="right"
                     documentationLink="ENTERPRISE_LICENSE"
+                    openInNewTab
                 />
             )}
         </div>
diff --git a/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx b/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx
@@ -44,6 +44,7 @@ const ModalSidebarPanel = ({
                 dataTestId="learn-more-about-modal-sidebar-panel-link"
                 showExternalIcon
                 isEnterprise={isEnterprise}
+                openInNewTab
             />
         </div>
     </div>
diff --git a/src/Shared/Components/ModalSidebarPanel/types.ts b/src/Shared/Components/ModalSidebarPanel/types.ts
@@ -16,14 +16,14 @@
 
 import { ReactNode } from 'react'
 
-import { DocLinkProps } from '@Shared/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink'
 
 import { PageHeaderType } from '../Header/types'
 
-export interface ModalSidebarPanelProps<T extends boolean = false> extends Pick<PageHeaderType, 'isEnterprise'> {
+export interface ModalSidebarPanelProps extends Pick<PageHeaderType, 'isEnterprise'> {
     rootClassName?: string
     heading: string | null
     icon?: JSX.Element
     children?: ReactNode
-    documentationLink: DocLinkProps<T>['docLinkKey']
+    documentationLink: DocLinkProps<false>['docLinkKey']
 }
diff --git a/src/Shared/DocLink/DocLink.tsx b/src/Shared/DocLink/DocLink.tsx
@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react'
 
+import { DOCUMENTATION_HOME_PAGE } from '@Common/Constants'
 import { Button, ButtonComponentType, ButtonVariantType, Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 import { useMainContext } from '@Shared/Providers'
@@ -17,7 +18,8 @@ export const DocLink = <T extends boolean = false>({
     variant = ButtonVariantType.text,
     isEnterprise = false,
     isExternalLink,
-    disableSidePanelOpen = false,
+    openInNewTab = false,
+    fullWidth = true,
 }: DocLinkProps<T>) => {
     // HOOKS
     const { setSidePanelConfig } = useMainContext()
@@ -30,31 +32,27 @@ export const DocLink = <T extends boolean = false>({
     })
 
     // HANDLERS
-    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-        setSidePanelConfig((prev) => ({ ...prev, open: true, docLink: documentationLink }))
+    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        if (!isExternalLink && !openInNewTab && !e.metaKey && documentationLink.startsWith(DOCUMENTATION_HOME_PAGE)) {
+            e.preventDefault()
+            setSidePanelConfig((prev) => ({ ...prev, open: true, docLink: documentationLink }))
+        }
         onClick?.(e)
     }
 
     return (
         <Button
-            {...(isExternalLink || disableSidePanelOpen
-                ? {
-                      component: ButtonComponentType.anchor,
-                      anchorProps: {
-                          href: documentationLink,
-                      },
-                      onClick,
-                  }
-                : {
-                      component: ButtonComponentType.button,
-                      onClick: handleClick,
-                  })}
+            component={ButtonComponentType.anchor}
+            anchorProps={{
+                href: documentationLink,
+            }}
+            onClick={handleClick}
             dataTestId={dataTestId}
             text={text}
             variant={variant}
             size={size}
             endIcon={showExternalIcon && <Icon name="ic-open-in-new" color={null} />}
-            fullWidth
+            fullWidth={fullWidth}
         />
     )
 }
diff --git a/src/Shared/DocLink/constants.ts b/src/Shared/DocLink/constants.ts
@@ -1,3 +1,5 @@
+import { DOCUMENTATION_HOME_PAGE } from '@Common/Constants'
+
 export const DOCUMENTATION = {
     ADMIN_PASSWORD: 'install/install-devtron#devtron-admin-credentials',
     APP_CI_CONFIG_BUILD_WITHOUT_DOCKER:
@@ -32,7 +34,9 @@ export const DOCUMENTATION = {
     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',
 
     // Global Configurations
     GLOBAL_CONFIG_API_TOKEN: 'getting-started/global-configurations/authorization/api-tokens',
diff --git a/src/Shared/DocLink/index.ts b/src/Shared/DocLink/index.ts
@@ -1,3 +1,4 @@
 export { DOCUMENTATION } from './constants'
 export { DocLink } from './DocLink'
+export type { DocLinkProps } from './types'
 export { getDocumentationUrl } from './utils'
diff --git a/src/Shared/DocLink/types.ts b/src/Shared/DocLink/types.ts
@@ -12,15 +12,15 @@ export type BaseDocLink<T extends boolean> = {
 
 export type DocLinkProps<T extends boolean> = Pick<
     ButtonProps<ButtonComponentType.anchor>,
-    'dataTestId' | 'size' | 'variant'
+    'dataTestId' | 'size' | 'variant' | 'fullWidth'
 > &
     BaseDocLink<T> & {
         text?: string
         showExternalIcon?: boolean
-        onClick?: (e: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>) => void
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
         /**
-         * If `true`, disables opening the documentation link in side panel.
+         * If `true`, the documentation will open in a new browser tab instead of the side panel.
          * @default false
          */
-        disableSidePanelOpen?: boolean
+        openInNewTab?: boolean
     }

Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean`
`47`	`47`	`interactive`
`48`	`48`	`documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}`
`49`	`49`	`documentationLinkText="View Documentation"`
	`50`	`+ openInNewTab`
`50`	`51`	`>`
`51`	`52`	`<div className="flexbox cursor">`
`52`	`53`	`<InjectTag className="icon-dim-16 mt-2 mr-4" />`