chore: doc link component added

src/Common/Constants.ts

@@ -23,13 +23,13 @@ export const DOCUMENTATION_VERSION = '/v/v0.7'
 export const DISCORD_LINK = 'https://discord.devtron.ai/'
 export const DEFAULT_JSON_SCHEMA_URI = 'https://json-schema.org/draft/2020-12/schema'
 export const DOCUMENTATION = {
-    APP_METRICS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/app-details/app-metrics`,
-    APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
-    APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
-    BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
-    GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
-    ENTERPRISE_LICENSE: `${DOCUMENTATION_HOME_PAGE}/enterprise-license`,
-    KUBE_CONFIG: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/resource-browser#running-kubectl-commands-locally`,
+    APP_METRICS: `usage/applications/app-details/app-metrics`,
+    APP_TAGS: `usage/applications/create-application#tags`,
+    APP_OVERVIEW_TAGS: `usage/applications/overview#manage-tags`,
+    BLOB_STORAGE: `getting-started/install/installation-configuration#configuration-of-blob-storage`,
+    GLOBAL_CONFIG_BUILD_INFRA: `global-configurations/build-infra`,
+    ENTERPRISE_LICENSE: `enterprise-license`,
+    KUBE_CONFIG: `usage/resource-browser#running-kubectl-commands-locally`,
     TENANT_INSTALLATION: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/software-distribution-hub/tenants`,
 }
 

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -20,6 +20,7 @@ import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outli
 import { TippyCustomized } from '../TippyCustomized'
 import { TippyTheme } from '../Types'
 import { DOCUMENTATION } from '../Constants'
+import { getDocumentationUrl } from '@Common/DocLink'
 
 export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
     const additionalInfo = () => (
@@ -47,7 +48,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             showCloseButton
             trigger="click"
             interactive
-            documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
+            documentationLink={isCreateApp ? getDocumentationUrl(DOCUMENTATION.APP_TAGS) : getDocumentationUrl(DOCUMENTATION.APP_OVERVIEW_TAGS)}
             documentationLinkText="View Documentation"
         >
             <div className="flexbox cursor">

src/Common/DocLink/DocLink.tsx

@@ -0,0 +1,19 @@
+import { DOCUMENTATION_HOME_PAGE, DOCUMENTATION_VERSION } from '..'
+import { DocLinkProps } from './types'
+
+export const appendUtmToUrl = (docLink: string) => `${docLink}?utm_source=product`
+
+export const getDocumentationUrl = (docLink: string) =>
+    `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/${appendUtmToUrl(docLink)}`
+
+export const DocLink = ({ docLink, docLinkText = 'Learn more', dataTestId, className = 'dc__link' }: DocLinkProps) => (
+    <a
+        href={getDocumentationUrl(docLink)}
+        target="_blank"
+        rel="noreferrer noopener"
+        data-testid={dataTestId || ''}
+        className={className}
+    >
+        {docLinkText}
+    </a>
+)

src/Common/DocLink/index.ts

@@ -0,0 +1 @@
+export { DocLink, getDocumentationUrl } from './DocLink'

src/Common/DocLink/types.ts

@@ -0,0 +1,6 @@
+export interface DocLinkProps {
+    docLink: string
+    dataTestId: string
+    docLinkText?: string
+    className?: string
+}

src/Common/index.ts

@@ -30,6 +30,7 @@ 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'

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx

@@ -17,6 +17,7 @@
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
 import { Checkbox } from '@Common/Checkbox'
 import { DOCUMENTATION } from '@Common/Constants'
+import { getDocumentationUrl } from '@Common/DocLink'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
 import { CHECKBOX_VALUE } from '@Common/Types'
@@ -96,7 +97,7 @@ const DTApplicationMetricsFormField = ({
                 <InfoIconTippy
                     heading="Application Metrics"
                     infoText="Capture and show key application metrics over time. (E.g. Status codes 2xx, 3xx, 5xx; throughput and latency)."
-                    documentationLink={DOCUMENTATION.APP_METRICS}
+                    documentationLink={getDocumentationUrl(DOCUMENTATION.APP_METRICS)}
                     documentationLinkText="Learn more"
                     dataTestid="app-metrics-info"
                     iconClassName="dc__no-shrink icon-dim-16 fcn-6"

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { getDocumentationUrl } from '@Common/DocLink'
 import { InfoIconTippy } from '@Shared/Components/InfoIconTippy'
 
 import { BreadCrumb, DOCUMENTATION } from '../../../Common'
@@ -38,7 +39,7 @@ const Descriptor = ({
                         infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
                         additionalContent={tippyAdditionalContent}
                         heading={tooltipHeading || BUILD_INFRA_TEXT.HEADING}
-                        documentationLink={DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA}
+                        documentationLink={getDocumentationUrl(DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA)}
                         documentationLinkText="View Documentation"
                         iconClassName="icon-dim-20 fcn-6"
                     />

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -24,6 +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 { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
 import { useDownload } from '@Shared/Hooks'
 
@@ -274,14 +275,19 @@ const Artifacts = ({
                         <span className="fs-13 fw-4 mr-8 ml-8">
                             {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.StoreFiles}
                         </span>
-                        <a
+                        {/* <a
                             className="fs-13 fw-6 cb-5 dc__no-decor"
-                            href={DOCUMENTATION.BLOB_STORAGE}
+                            href={getDocumentationUrl(DOCUMENTATION.BLOB_STORAGE)}
                             target="_blank"
                             rel="noreferrer"
                         >
                             {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
-                        </a>
+                        </a> */}
+                        <DocLink
+                            docLink={DOCUMENTATION.BLOB_STORAGE}
+                            docLinkText={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
+                            dataTestId="configure-blob-storage"
+                        />
                         <OpenInNew className="icon-dim-20 ml-8" />
                     </div>
                 </div>

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -22,6 +22,7 @@ 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 { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers'
 import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
@@ -82,14 +83,12 @@ const renderBlobNotConfigured = (): JSX.Element => (
         <div className="flexbox configure-blob-container pt-8 pr-12 pb-8 pl-12 bcv-1 br-4">
             <HelpIcon className="icon-dim-20 fcv-5" />
             <span className="fs-13 fw-4 mr-8 ml-8 text__white">Want to store logs to view later?</span>
-            <a
-                className="fs-13 fw-6 cb-5 dc__no-decor"
-                href={DOCUMENTATION.BLOB_STORAGE}
-                target="_blank"
-                rel="noreferrer"
-            >
-                Configure blob storage
-            </a>
+
+            <DocLink
+                docLink={DOCUMENTATION.BLOB_STORAGE}
+                docLinkText="Configure blob storage"
+                dataTestId="configure-blob-storage"
+            />
             <OpenInNew className="icon-dim-20 ml-8" />
         </div>
     </>

src/Shared/Components/License/License.components.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICClipboard } from '@Icons/ic-copy.svg'
 import { DOCUMENTATION } from '@Common/Constants'
+import { getDocumentationUrl } from '@Common/DocLink'
 import { ClipboardButton, copyToClipboard, showError } from '@Common/index'
 
 import { Backdrop, Button, ButtonStyleType, ButtonVariantType, Icon, InfoIconTippy, QRCode } from '..'
@@ -90,7 +91,7 @@ const InstallationFingerprintInfo = ({ fingerprint, showHelpTooltip = false }: I
                     documentationLinkText="Documentation"
                     iconClassName="icon-dim-20 fcn-6"
                     placement="right"
-                    documentationLink={DOCUMENTATION.ENTERPRISE_LICENSE}
+                    documentationLink={getDocumentationUrl(DOCUMENTATION.ENTERPRISE_LICENSE)}
                 />
             )}
         </div>