chore: isExternal & isEnterprise support for doclink

shivani170 · shivani170 · commit 4e742e6f57b4 · 2025-05-19T18:45:45.000+05:30
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx
@@ -16,7 +16,6 @@
 
 import {
     ComponentSizeType,
-    DOCUMENTATION_HOME_PAGE,
     getSelectPickerOptionByValue,
     InfoIconTippy,
     noop,
@@ -104,7 +103,7 @@ const SelectMergeStrategy = ({
                         {PatchStrategyTooltipInfo && <PatchStrategyTooltipInfo />}
                     </OverrideStrategyTippyContent>
                 }
-                documentationLink={DOCUMENTATION_HOME_PAGE}
+                documentationLink="HOME_PAGE"
             />
 
             {renderContent()}
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
@@ -22,7 +22,6 @@ import { Moment } from 'moment'
 
 import {
     CustomInput,
-    DOCUMENTATION,
     InfoIconTippy,
     ServerErrors,
     showError,
@@ -58,7 +57,7 @@ export const renderQuestionwithTippy = () => (
     <InfoIconTippy
         heading={API_COMPONENTS.TITLE}
         infoText={API_COMPONENTS.QUESTION_ICON_INFO}
-        documentationLink={DOCUMENTATION.GLOBAL_CONFIG_API_TOKEN}
+        documentationLink="GLOBAL_CONFIG_API_TOKEN"
         documentationLinkText="View Documentation"
         iconClassName="icon-dim-20 fcn-9 ml-4"
     />
diff --git a/src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsListHeader.tsx b/src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsListHeader.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DOCUMENTATION, InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 
 import { CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT } from '@Config/constants'
 
@@ -38,7 +38,7 @@ const DeploymentChartsListHeader = ({
                     </p>
                 }
                 documentationLinkText={CUSTOM_CHART_TITLE_DESCRIPTION_CONTENT.documentationLinkText}
-                documentationLink={DOCUMENTATION.GLOBAL_CONFIG_CUSTOM_CHART}
+                documentationLink="GLOBAL_CONFIG_CUSTOM_CHART"
                 iconClassName="icon-dim-20 fcn-6"
             />
         </div>
diff --git a/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx b/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx
@@ -19,7 +19,7 @@ import { useRef, useState } from 'react'
 import {
     ButtonWithLoader,
     CustomInput,
-    getDocumentationUrl,
+    DocLink,
     noop,
     showError,
     Textarea,
@@ -202,14 +202,11 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
             <div className="sidebar-action-container pr-20">
                 <div className="fw-6 fs-13 cn-9 mb-8">
                     📙 Need help?&nbsp;
-                    <a
-                        className="dc__link fw-6"
-                        href={getDocumentationUrl({ docLinkKey: 'GLOBAL_CONFIG_CUSTOM_CHART_PRE_REQUISITES' })}
-                        target="_blank"
-                        rel="noreferrer noopener"
-                    >
-                        View documentation
-                    </a>
+                    <DocLink
+                        docLinkKey="GLOBAL_CONFIG_CUSTOM_CHART_PRE_REQUISITES"
+                        text="View documentation"
+                        dataTestId="learn-more-about-custom-chart-pre-requisites-link"
+                    />
                 </div>
             </div>
         </>
diff --git a/src/components/CIPipelineN/PluginDetailHeader/PluginDetailHeader.component.tsx b/src/components/CIPipelineN/PluginDetailHeader/PluginDetailHeader.component.tsx
@@ -17,8 +17,6 @@
 import { useContext } from 'react'
 
 import {
-    getDocumentationUrl,
-    PluginDetailType,
     PluginImageContainer,
     PluginTagsContainer,
     PluginType,
@@ -36,19 +34,20 @@ import { INLINE_PLUGIN_TEXT } from '../Constants'
 import { PluginDetailHeaderProps } from '../types'
 import CreatePluginButton from './CreatePluginButton'
 import PluginVersionSelect from './PluginVersionSelect'
+import { PluginDetailTypes } from './types'
 
 const PluginDetailHeader = ({ handlePluginVersionChange }: PluginDetailHeaderProps) => {
     const { formData, activeStageName, selectedTaskIndex, pluginDataStore } = useContext(pipelineContext)
     const { stepType } = formData[activeStageName].steps[selectedTaskIndex]
 
-    const getPluginDetails = (): Pick<PluginDetailType, 'name' | 'description' | 'icon' | 'tags' | 'docLink'> => {
+    const getPluginDetails = (): PluginDetailTypes => {
         if (stepType !== PluginType.PLUGIN_REF) {
             return {
                 name: INLINE_PLUGIN_TEXT.TITLE,
                 description: INLINE_PLUGIN_TEXT.DESCRIPTION,
                 icon: '',
                 tags: [],
-                docLink: getDocumentationUrl({ docLinkKey: 'EXECUTE_CUSTOM_SCRIPT' }),
+                docLink: 'EXECUTE_CUSTOM_SCRIPT',
             }
         }
         const selectedPluginId = formData[activeStageName].steps[selectedTaskIndex].pluginRefStepDetail.pluginId
@@ -109,8 +108,9 @@ const PluginDetailHeader = ({ handlePluginVersionChange }: PluginDetailHeaderPro
                     showCloseButton
                     trigger="click"
                     interactive
-                    documentationLink={docLink}
+                    documentationLink={docLink as any}
                     documentationLinkText="View documentation"
+                    isExternalLink
                 >
                     <button
                         type="button"
diff --git a/src/components/CIPipelineN/PluginDetailHeader/types.ts b/src/components/CIPipelineN/PluginDetailHeader/types.ts
@@ -0,0 +1,6 @@
+import { DOCUMENTATION, PluginDetailType } from '@devtron-labs/devtron-fe-common-lib'
+
+export interface PluginDetailTypes extends Pick<PluginDetailType, 'name' | 'description' | 'icon' | 'tags'> {
+    isExternalLink?: boolean
+    docLink: string | keyof typeof DOCUMENTATION
+}
diff --git a/src/components/CIPipelineN/Sidebar.tsx b/src/components/CIPipelineN/Sidebar.tsx
@@ -24,7 +24,8 @@ import {
     ResourceKindType,
     WORKFLOW_CACHE_CONFIG_ENUM,
     TriggerType,
-    getDocumentationUrl,
+    DocLink,
+    DOCUMENTATION,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { BuildStageVariable } from '../../config'
@@ -68,9 +69,9 @@ export const Sidebar = ({
     } = useContext(pipelineContext)
 
     const [addConfigSecret, setAddConfigSecret] = useState<boolean>(false)
-    const [helpData, setHelpData] = useState<{ helpText: string; docLink: string }>({
+    const [helpData, setHelpData] = useState<{ helpText: string; docLink: keyof typeof DOCUMENTATION }>({
         helpText: 'Docs: Configure build stage',
-        docLink: getDocumentationUrl({ docLinkKey: 'BUILD_STAGE' }),
+        docLink: "BUILD_STAGE",
     })
     const isPreBuildTab = activeStageName === BuildStageVariable.PreBuild
     const changeTriggerType = (appCreationType: string): void => {
@@ -83,22 +84,22 @@ export const Sidebar = ({
         if (isJobCard) {
             setHelpData({
                 helpText: 'Docs: Configure job',
-                docLink: getDocumentationUrl({ docLinkKey: 'JOB_WORKFLOW_EDITOR' }),
+                docLink: "JOB_WORKFLOW_EDITOR",
             })
         } else if (activeStageName === BuildStageVariable.Build) {
             setHelpData({
                 helpText: 'Docs: Configure build stage',
-                docLink: getDocumentationUrl({ docLinkKey: 'BUILD_STAGE' }),
+                docLink: "BUILD_STAGE",
             })
         } else if (activeStageName === BuildStageVariable.PostBuild) {
             setHelpData({
                 helpText: 'Docs: Configure post-build tasks',
-                docLink: getDocumentationUrl({ docLinkKey: 'PRE_POST_BUILD_STAGE' }),
+                docLink: "PRE_POST_BUILD_STAGE",
             })
         } else if (isPreBuildTab) {
             setHelpData({
                 helpText: 'Docs: Configure pre-build tasks',
-                docLink: getDocumentationUrl({ docLinkKey: 'PRE_POST_BUILD_STAGE' }),
+                docLink: "PRE_POST_BUILD_STAGE",
             })
         }
     }, [activeStageName])
@@ -449,11 +450,11 @@ export const Sidebar = ({
             {!isCdPipeline && (
                 <div className="sidebar-action-container pr-20">
                     <div className="fw-6 fs-13 cn-9 mb-8">📙 Need help?</div>
-                    <div>
-                        <a className="dc__link fw-6" href={helpData.docLink} target="_blank" rel="noreferrer noopener">
-                            {helpData.helpText}
-                        </a>
-                    </div>
+                    <DocLink
+                        docLinkKey={helpData.docLink}
+                        text={helpData.helpText}
+                        dataTestId="learn-more-about-ci-pipeline-workflow-editor-link"
+                    />
                 </div>
             )}
         </div>
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -38,7 +38,6 @@ import { getURLBasedOnSidebarGVK } from '@Components/ResourceBrowser/Utils'
 import { getAvailableCharts } from '@Services/service'
 
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
-import { URLS } from '../../config'
 import { MAX_LENGTH_350 } from '../../config/constantMessaging'
 import { importComponentFromFELibrary } from '../common'
 import GenericDescription from '../common/Description/GenericDescription'
@@ -90,7 +89,7 @@ const tippyForMetricsApi = () => (
             heading="Metrics API is not available"
             additionalContent={metricsApiTippyContent()}
             documentationLinkText="View metrics-server helm chart"
-            documentationLink={`/dashboard${URLS.CHARTS_DISCOVER}?appStoreName=metrics-server`}
+            documentationLink="CHART_STORE_METRICS_SERVER"
             iconClassName="icon-dim-20 ml-8 fcn-5"
         />
     </div>
diff --git a/src/components/bulkEdits/BulkEdits.tsx b/src/components/bulkEdits/BulkEdits.tsx
@@ -526,7 +526,7 @@ export default class BulkEdits extends Component<BulkEditsProps, BulkEditsState>
                     tippyProps={{
                         isTippyCustomized: true,
                         tippyMessage: 'Run scripts to bulk edit configurations for multiple devtron components.',
-                        tippyRedirectLink: getDocumentationUrl({ docLinkKey: 'BULK_UPDATE' }),
+                        tippyRedirectLink: 'BULK_UPDATE',
                     }}
                 />
                 {this.renderBulkEditBody()}
diff --git a/src/components/ciConfig/CIBuildpackBuildOptions.tsx b/src/components/ciConfig/CIBuildpackBuildOptions.tsx
@@ -158,7 +158,7 @@ const BuilderTippy = () => {
             infoText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.infoText}
             additionalContent={additionalBuilderTippyContent()}
             documentationLinkText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.documentationLinkText}
-            documentationLink={DOCUMENTATION.APP_CI_CONFIG_BUILD_WITHOUT_DOCKER}
+            documentationLink="APP_CI_CONFIG_BUILD_WITHOUT_DOCKER"
             iconClassName="icon-dim-16 fcn-6 ml-4"
         />
     )
diff --git a/src/components/common/errorBoundary.tsx b/src/components/common/errorBoundary.tsx
@@ -16,7 +16,7 @@
 
 import { Component } from 'react'
 import * as Sentry from '@sentry/browser'
-import { Reload } from '@devtron-labs/devtron-fe-common-lib'
+import { DISCORD_LINK, Reload } from '@devtron-labs/devtron-fe-common-lib'
 import bugFixing from '../../assets/img/bug-fixing.webp'
 
 interface errorBoundaryState {
@@ -67,7 +67,7 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, errorBo
                     <img src={bugFixing} alt="" style={{ height: '300px', width: 'auto', marginBottom: '20px' }} />
                     <h2 style={{ marginBottom: '20px' }}>We encountered an error.</h2>
                     <a
-                        href="https://discord.devtron.ai/"
+                        href={DISCORD_LINK}
                         className="cta flex dc__no-decor"
                         target="_blank"
                         onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
diff --git a/src/components/dockerRegistry/Docker.tsx b/src/components/dockerRegistry/Docker.tsx
@@ -208,7 +208,7 @@ export default function Docker({ ...props }) {
                             ? EA_MODE_REGISTRY_TITLE_DESCRIPTION_CONTENT.documentationLinkText
                             : REGISTRY_TITLE_DESCRIPTION_CONTENT.documentationLinkText
                     }
-                    documentationLink={DOCUMENTATION.GLOBAL_CONFIG_DOCKER}
+                    documentationLink="GLOBAL_CONFIG_DOCKER"
                     iconClassName="icon-dim-20 ml-4"
                 />
             </div>
diff --git a/src/components/externalLinks/ExternalLinks.tsx b/src/components/externalLinks/ExternalLinks.tsx
@@ -19,7 +19,6 @@ import { useParams } from 'react-router-dom'
 
 import {
     DeleteConfirmationModal,
-    DOCUMENTATION,
     ErrorScreenManager,
     FilterChips,
     getClusterListMin,
@@ -265,7 +264,7 @@ const ExternalLinks = ({ isAppConfigView, userRole }: ExternalLinksProps) => {
                         heading="External Links"
                         infoText="Configure links to third-party applications (e.g. Kibana, New Relic) for quick access. Configured
                     links will be available in the App details page."
-                        documentationLink={DOCUMENTATION.EXTERNAL_LINKS}
+                        documentationLink="EXTERNAL_LINKS"
                         iconClassName="icon-dim-20 fcn-6 ml-8"
                     />
                 </h3>
diff --git a/src/components/security/Security.tsx b/src/components/security/Security.tsx
@@ -87,7 +87,7 @@ export class Security extends Component<SecurityProps> {
                 headerName="Security"
                 tippyProps={{
                     isTippyCustomized: true,
-                    tippyRedirectLink: getDocumentationUrl({ docLinkKey: 'SECURITY' }),
+                    tippyRedirectLink: 'SECURITY' ,
                     additionalContent: this.getTippyContent(),
                 }}
                 showTabs
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -16,7 +16,6 @@
 
 import {
     CustomInput,
-    DOCUMENTATION,
     Drawer,
     OptionType,
     showError,
@@ -186,7 +185,7 @@ const EphemeralContainerDrawer = ({
                         heading={EPHEMERAL_CONTAINER.TITLE}
                         infoText={EPHEMERAL_CONTAINER.SUBTITLE}
                         iconClassName="icon-dim-20 fcn-6 ml-8"
-                        documentationLink={DOCUMENTATION.APP_EPHEMERAL_CONTAINER}
+                        documentationLink="APP_EPHEMERAL_CONTAINER"
                         documentationLinkText="View Documentation"
                     />
                 </h2>
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx b/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
@@ -303,8 +303,9 @@ const NodeComponent = ({
         return nodes.map((node, index) => {
             const nodeName = `${node.name}.${node.namespace} : ${node.port}`
             const _isSelected = markedNodes.current.get(node.name)
+            const showNodeHeader = showHeader && (index === 0 || _currentNodeHeader !== node.kind)
             // Only render node kind header when it's the first node or it's a different kind header
-            _currentNodeHeader = index === 0 || _currentNodeHeader !== node.kind ? node.kind : ''
+            _currentNodeHeader = node.kind
             const nodeStatus = getNodeStatus(node)
             const showAIButton =
                 ExplainWithAIButton && nodeStatus && !EXPLAIN_AI_EXCLUDED_STATUS.has(nodeStatus.toLowerCase())
@@ -334,7 +335,7 @@ const NodeComponent = ({
             return (
                 // eslint-disable-next-line react/no-array-index-key
                 <Fragment key={`grt${index}`}>
-                    {showHeader && !!_currentNodeHeader && (
+                    {showNodeHeader && (
                         <div className="node-row dc__border-bottom-n1 pt-6 pb-5 pl-18 pr-16">
                             <div className="fw-6">
                                 <SortableTableHeaderCell isSortable={false} title={node.kind} />
diff --git a/src/components/v2/devtronStackManager/DevtronStackManager.component.tsx b/src/components/v2/devtronStackManager/DevtronStackManager.component.tsx
@@ -34,6 +34,7 @@ import {
     Button,
     RAISE_ISSUE,
     getDocumentationUrl,
+    DISCORD_LINK,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -638,7 +639,7 @@ const GetHelpCard = (): JSX.Element => {
             <span className="fw-6 mb-10">Facing issues?</span>
             <a
                 className="module-details__help-chat cb-5 flex left"
-                href="https://discord.devtron.ai/"
+                href={DISCORD_LINK}
                 target="_blank"
                 rel="noreferrer noopener"
             >
@@ -810,7 +811,7 @@ export const InstallationWrapper = ({
                             <span className="cn-9 fs-13 fw-6">Facing issues?</span>
                             <a
                                 className="pre-requisite-modal__help-chat fs-13 cb-5 flex left"
-                                href="https://discord.devtron.ai/"
+                                href={DISCORD_LINK}
                                 target="_blank"
                                 rel="noreferrer noopener"
                             >
diff --git a/src/components/workflowEditor/nodes/WebhookNode.tsx b/src/components/workflowEditor/nodes/WebhookNode.tsx
@@ -21,7 +21,6 @@ import {
     TARGET_IDS,
     TippyTheme,
     TippyCustomized,
-    getDocumentationUrl,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link } from 'react-router-dom'
 import ToggleCDSelectButton from '../ToggleCDSelectButton'
@@ -93,7 +92,7 @@ export const WebhookNode = ({
                 onClose={toggleIsWebhookTippyOpen}
                 interactive
                 appendTo={document.getElementById(TARGET_IDS.WORKFLOW_EDITOR_CONTAINER)}
-                documentationLink={getDocumentationUrl({ docLinkKey: 'CONFIGURING_WEBHOOK' })}
+                documentationLink="CONFIGURING_WEBHOOK"
                 documentationLinkText="Documentation"
                 visible={isWebhookTippyOpen}
             >
diff --git a/src/components/workflowEditor/workflowEditor.tsx b/src/components/workflowEditor/workflowEditor.tsx
@@ -955,8 +955,8 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
                             }
                             documentationLink={
                                 this.props.isJobView
-                                    ? DOCUMENTATION.JOB_WORKFLOW_EDITOR
-                                    : DOCUMENTATION.APP_CREATE_WORKFLOW
+                                    ? "JOB_WORKFLOW_EDITOR"
+                                    : "APP_CREATE_WORKFLOW"
                             }
                             documentationLinkText={WORKFLOW_EDITOR_HEADER_TIPPY.DOCUMENTATION_LINK_TEXT}
                             placement="right"
diff --git a/src/stories/SelectPicker.stories.tsx b/src/stories/SelectPicker.stories.tsx
@@ -373,7 +373,7 @@ export const WithLabelHelperTippy: Story = {
         labelTippyCustomizedConfig: {
             heading: 'Heading',
             infoText: 'Info text',
-            documentationLink: 'https://www.devtron.ai',
+            documentationLink: 'HOME_PAGE',
             documentationLinkText: 'Documentation',
         },
     },
diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
@@ -241,7 +241,7 @@ export const WithLabelHelperTippy: Story = {
         labelTippyCustomizedConfig: {
             heading: 'Heading',
             infoText: 'Info text',
-            documentationLink: 'https://www.devtron.ai',
+            documentationLink: 'HOME_PAGE',
             documentationLinkText: 'Documentation',
         },
     },
diff --git a/src/stories/Textarea.stories.tsx b/src/stories/Textarea.stories.tsx

Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ const BuilderTippy = () => {`
`158`	`158`	`infoText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.infoText}`
`159`	`159`	`additionalContent={additionalBuilderTippyContent()}`
`160`	`160`	`documentationLinkText={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.documentationLinkText}`
`161`		`- documentationLink={DOCUMENTATION.APP_CI_CONFIG_BUILD_WITHOUT_DOCKER}`
	`161`	`+ documentationLink="APP_CI_CONFIG_BUILD_WITHOUT_DOCKER"`
`162`	`162`	`iconClassName="icon-dim-16 fcn-6 ml-4"`
`163`	`163`	`/>`
`164`	`164`	`)`