chore: moved doc link to shared

shivani170 · shivani170 · commit efc25975f9be · 2025-05-21T19:13:04.000+05:30
diff --git a/src/Common/DocLink/types.ts b/src/Common/DocLink/types.ts
diff --git a/src/Common/DocLink/utils.tsx b/src/Common/DocLink/utils.tsx
diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx
@@ -23,11 +23,11 @@ import 'tippy.js/animations/shift-toward-subtle.css'
 import 'tippy.js/animations/shift-toward.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
 import { not, stopPropagation } from './Helper'
-import { DocLink, DOCUMENTATION } from './DocLink'
+import { DocLink } from '../Shared/DocLink'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
-export const TippyCustomized = (props: TippyCustomizedProps) => {
+export const TippyCustomized = <T extends boolean = false>(props: TippyCustomizedProps<T>) => {
     const tippyRef = useRef(null)
     const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
@@ -160,13 +160,13 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
                 {documentationLink && (
                     <div className="px-12 pb-12 flexbox">
                         <DocLink
-                            docLinkKey={documentationLink}
                             text={documentationLinkText}
                             dataTestId="learn-more-about-tippy-link"
                             showExternalIcon
                             onClick={closeTippy}
                             isEnterprise={isEnterprise}
                             isExternalLink={isExternalLink}
+                            docLinkKey={documentationLink}
                         />
                     </div>
                 )}
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -120,56 +120,62 @@ export interface CheckboxProps {
     children?: ReactNode
 }
 
-export interface TippyCustomizedProps extends Pick<TippyProps, 'appendTo'> {
-    theme: TippyTheme
-    visible?: boolean
-    heading?: ReactNode | string
-    headingInfo?: ReactNode | string
-    noHeadingBorder?: boolean
-    infoTextHeading?: string
-    hideHeading?: boolean
-    placement?: TippyProps['placement']
-    className?: string
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    iconPath?: string
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    onImageLoadError?: (e) => void
-    onClose?: () => void
-    infoText?: React.ReactNode
-    showCloseButton?: boolean
-    arrow?: boolean
-    interactive?: boolean
-    showOnCreate?: boolean
-    trigger?: string
-    animation?: string
-    duration?: number
-    additionalContent?: ReactNode
-    documentationLink?: keyof typeof DOCUMENTATION
-    documentationLinkText?: string
-    children: React.ReactElement<any>
-    disableClose?: boolean
+export type TippyWithBaseDocLinkTypes<T extends boolean> = {
+    isExternalLink?: T
     isEnterprise?: boolean
-    isExternalLink?: boolean
-}
-
-export interface InfoIconTippyProps
-    extends Pick<
-        TippyCustomizedProps,
-        | 'heading'
-        | 'infoText'
-        | 'iconClass'
-        | 'documentationLinkText'
-        | 'additionalContent'
-        | 'placement'
-        | 'Icon'
-        | 'headingInfo'
-        | 'documentationLink'
-        | 'isEnterprise'
-        | 'isExternalLink'
+    documentationLink: T extends true ? string : keyof typeof DOCUMENTATION
+}
+
+export type TippyCustomizedProps<T extends boolean> = Pick<TippyProps, 'appendTo'> &
+    TippyWithBaseDocLinkTypes<T> & {
+        theme: TippyTheme
+        visible?: boolean
+        heading?: ReactNode | string
+        headingInfo?: ReactNode | string
+        noHeadingBorder?: boolean
+        infoTextHeading?: string
+        hideHeading?: boolean
+        placement?: TippyProps['placement']
+        className?: string
+        Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+        iconPath?: string
+        iconClass?: string
+        iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
+        onImageLoadError?: (e) => void
+        onClose?: () => void
+        infoText?: React.ReactNode
+        showCloseButton?: boolean
+        arrow?: boolean
+        interactive?: boolean
+        showOnCreate?: boolean
+        trigger?: string
+        animation?: string
+        duration?: number
+        additionalContent?: ReactNode
+        documentationLinkText?: string
+        children: React.ReactElement<any>
+        disableClose?: boolean
+    }
+
+export interface InfoIconTippyProps<T extends boolean = false>
+    extends Partial<
+        Pick<
+            TippyCustomizedProps<T>,
+            | 'heading'
+            | 'infoText'
+            | 'iconClass'
+            | 'documentationLinkText'
+            | 'additionalContent'
+            | 'placement'
+            | 'Icon'
+            | 'headingInfo'
+            | 'documentationLink'
+            | 'isEnterprise'
+            | 'isExternalLink'
+        >
     > {
     dataTestid?: string
-    children?: TippyCustomizedProps['children']
+    children?: TippyCustomizedProps<T>['children']
     iconClassName?: string
     buttonPadding?: string
 }
diff --git a/src/Common/index.ts b/src/Common/index.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+export * from '../Shared/DocLink'
 export * from './AddCDButton'
 export * from './API'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
@@ -30,7 +31,6 @@ export * from './DeleteCINodeButton'
 export { default as DevtronCopyright } from './DevtronCopyright'
 export * from './DevtronProgressing'
 export * from './Dialogs'
-export * from './DocLink'
 export * from './DraggableWrapper'
 export * from './Drawer'
 export * from './EmptyState'
diff --git a/src/Shared/Components/CICDHistory/Artifacts.tsx b/src/Shared/Components/CICDHistory/Artifacts.tsx
@@ -24,7 +24,7 @@ import folder from '@Icons/ic-folder.svg'
 import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg'
 import { ReactComponent as MechanicalOperation } from '@Icons/ic-mechanical-operation.svg'
 import noartifact from '@Images/no-artifact.webp'
-import { DocLink } from '@Common/DocLink'
+import { DocLink } from '@Shared/DocLink'
 import { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
 import { useDownload } from '@Shared/Hooks'
 
diff --git a/src/Shared/Components/CICDHistory/LogsRenderer.tsx b/src/Shared/Components/CICDHistory/LogsRenderer.tsx
@@ -22,8 +22,8 @@ import DOMPurify from 'dompurify'
 import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
 import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
-import { DocLink } from '@Common/DocLink'
 import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
+import { DocLink } from '@Shared/DocLink'
 import { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers'
 import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
 
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 '@Common/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink/types'
 
 import { ImageType } from '../../../Common'
 import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
 
-interface BaseFeatureDescriptionModalProps {
+interface BaseFeatureDescriptionModalProps<T extends boolean = false> {
     renderDescriptionContent?: () => ReactNode
-    docLink?: DocLinkProps['docLinkKey']
+    docLink?: DocLinkProps<T>['docLinkKey']
     imageVariant?: ImageType
     SVGImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
     imageStyles?: React.CSSProperties
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
@@ -156,6 +156,7 @@ const PageHeader = ({
                     arrow
                     onClose={handleCloseSwitchThemeLocationTippyChange}
                     isEnterprise={isEnterprise}
+                    documentationLink={tippyRedirectLink}
                 >
                     <button
                         type="button"
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 {
+export interface PageHeaderType<T extends boolean = false> {
     headerName?: string
     showTabs?: boolean
     additionalHeaderInfo?: () => JSX.Element
@@ -36,7 +36,7 @@ export interface PageHeaderType {
     showCloseButton?: boolean
     onClose?: () => void
     markAsBeta?: boolean
-    tippyProps?: Pick<TippyCustomizedProps, 'additionalContent'> & {
+    tippyProps?: Pick<TippyCustomizedProps<T>, '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
@@ -19,7 +19,7 @@ import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-ou
 import { TippyCustomized } from '../../../Common/TippyCustomized'
 import { InfoIconTippyProps, TippyTheme } from '../../../Common/Types'
 
-const InfoIconTippy = ({
+const InfoIconTippy = <T extends boolean = false>({
     heading,
     infoText,
     iconClass = 'fcv-5',
@@ -33,7 +33,8 @@ const InfoIconTippy = ({
     headingInfo,
     buttonPadding = 'p-0',
     isEnterprise = false,
-}: InfoIconTippyProps) => (
+    isExternalLink,
+}: InfoIconTippyProps<T>) => (
     <TippyCustomized
         theme={TippyTheme.white}
         headingInfo={headingInfo}
@@ -52,6 +53,7 @@ const InfoIconTippy = ({
         animation="shift-toward"
         duration={400}
         isEnterprise={isEnterprise}
+        isExternalLink={isExternalLink}
     >
         {children || (
             <button
diff --git a/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx b/src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DocLink } from '@Common/DocLink'
+import { DocLink } from '@Shared/DocLink'
 
 import { ModalSidebarPanelProps } from './types'
 
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 '@Common/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink/types'
 
 import { PageHeaderType } from '../Header/types'
 
-export interface ModalSidebarPanelProps extends Pick<PageHeaderType, 'isEnterprise'> {
+export interface ModalSidebarPanelProps<T extends boolean = false> extends Pick<PageHeaderType, 'isEnterprise'> {
     rootClassName?: string
     heading: string | null
     icon?: JSX.Element
     children?: ReactNode
-    documentationLink: DocLinkProps['docLinkKey']
+    documentationLink: DocLinkProps<T>['docLinkKey']
 }
diff --git a/src/Shared/DocLink/DocLink.tsx b/src/Shared/DocLink/DocLink.tsx
@@ -4,7 +4,7 @@ import { ComponentSizeType } from '@Shared/constants'
 import { DocLinkProps } from './types'
 import { getDocumentationUrl } from './utils'
 
-export const DocLink = ({
+export const DocLink = <T extends boolean = false>({
     docLinkKey,
     text = 'Learn more',
     dataTestId,
@@ -13,12 +13,16 @@ export const DocLink = ({
     size = ComponentSizeType.medium,
     variant = ButtonVariantType.text,
     isEnterprise = false,
-    isExternalLink = false,
-}: DocLinkProps) => (
+    isExternalLink,
+}: DocLinkProps<T>) => (
     <Button
         component={ButtonComponentType.anchor}
         anchorProps={{
-            href: getDocumentationUrl({ docLinkKey, isEnterprise, isExternalLink }),
+            href: getDocumentationUrl({
+                docLinkKey,
+                isEnterprise,
+                isExternalLink,
+            }),
         }}
         onClick={onClick}
         dataTestId={dataTestId}
diff --git a/src/Shared/DocLink/constants.ts b/src/Shared/DocLink/constants.ts
diff --git a/src/Shared/DocLink/index.ts b/src/Shared/DocLink/index.ts
diff --git a/src/Shared/DocLink/types.ts b/src/Shared/DocLink/types.ts
@@ -0,0 +1,18 @@
+import { ButtonComponentType, ButtonProps } from '@Shared/Components'
+
+import { DOCUMENTATION } from './constants'
+
+export type BaseDocLink<T extends boolean> = {
+    isExternalLink?: T
+    isEnterprise?: boolean
+    docLinkKey: T extends true ? string : keyof typeof DOCUMENTATION
+}
+
+export type DocLinkProps<T extends boolean> = Pick<
+    ButtonProps<ButtonComponentType.anchor>,
+    'onClick' | 'dataTestId' | 'size' | 'variant'
+> &
+    BaseDocLink<T> & {
+        text?: string
+        showExternalIcon?: boolean
+    }
diff --git a/src/Shared/DocLink/utils.tsx b/src/Shared/DocLink/utils.tsx
@@ -0,0 +1,22 @@
+import { DOCUMENTATION_HOME_PAGE, DOCUMENTATION_VERSION } from '@Common/Constants'
+
+import { DOCUMENTATION } from './constants'
+import { BaseDocLink } from './types'
+
+export const getDocumentationUrl = <T extends boolean = false>({
+    docLinkKey,
+    isEnterprise = false,
+    isExternalLink,
+}: BaseDocLink<T>) => {
+    if (isExternalLink) {
+        return docLinkKey
+    }
+
+    const docPath = DOCUMENTATION[docLinkKey as keyof typeof DOCUMENTATION]
+
+    if (docPath?.startsWith('http')) {
+        return docPath
+    }
+
+    return `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/${docPath || ''}?client=product_${isEnterprise ? 'ent' : 'oss'}`
+}

Original file line number	Diff line number	Diff line change
`@@ -156,6 +156,7 @@ const PageHeader = ({`
`156`	`156`	`arrow`
`157`	`157`	`onClose={handleCloseSwitchThemeLocationTippyChange}`
`158`	`158`	`isEnterprise={isEnterprise}`
	`159`	`+ documentationLink={tippyRedirectLink}`
`159`	`160`	`>`
`160`	`161`	`<button`
`161`	`162`	`type="button"`