fix: add more wfr status to cater helm apps

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.0",
+    "version": "1.14.0-pre-0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -22,16 +22,6 @@ export const DEVTRON_HOME_PAGE = 'https://devtron.ai/'
 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`,
-    TENANT_INSTALLATION: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/software-distribution-hub/tenants`,
-}
 
 export const PATTERNS = {
     STRING: /^[a-zA-Z0-9_]+$/,

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
 import { TippyCustomized } from '../TippyCustomized'
 import { TippyTheme } from '../Types'
-import { DOCUMENTATION } from '../Constants'
 
 export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
     const additionalInfo = () => (
@@ -47,7 +45,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             showCloseButton
             trigger="click"
             interactive
-            documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
+            documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}
             documentationLinkText="View Documentation"
         >
             <div className="flexbox cursor">

src/Common/TippyCustomized.tsx

@@ -19,15 +19,15 @@ import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
 import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg'
-import { ReactComponent as ICOpenInNew } from '../Assets/Icon/ic-open-in-new.svg'
 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 } 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
@@ -79,6 +79,8 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
             additionalContent,
             documentationLink,
             documentationLinkText,
+            isEnterprise,
+            isExternalLink,
         } = props
         return (
             <>
@@ -156,17 +158,16 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
                 )}
                 {additionalContent}
                 {documentationLink && (
-                    <div className="pl-12 pb-12">
-                        <a
-                            href={documentationLink}
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            className="fs-13 cb-5 flex left"
+                    <div className="px-12 pb-12 flexbox">
+                        <DocLink
+                            text={documentationLinkText}
+                            dataTestId="learn-more-about-tippy-link"
+                            showExternalIcon
                             onClick={closeTippy}
-                        >
-                            {documentationLinkText || 'Learn more'}
-                            <ICOpenInNew className="icon-dim-14 ml-4 scb-5" />
-                        </a>
+                            isEnterprise={isEnterprise}
+                            isExternalLink={isExternalLink}
+                            docLinkKey={documentationLink}
+                        />
                     </div>
                 )}
             </>

src/Common/Types.ts

@@ -33,6 +33,7 @@ import {
     ACTION_STATE,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
+    DOCUMENTATION,
     RefVariableType,
     SortingOrder,
     TaskErrorObj,
@@ -119,52 +120,60 @@ 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?: string
-    documentationLinkText?: string
-    children: React.ReactElement<any>
-    disableClose?: boolean
-}
-
-export interface InfoIconTippyProps
+export type TippyWithBaseDocLinkTypes<T extends boolean> = {
+    isExternalLink?: T
+    isEnterprise?: boolean
+    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 Pick<
-        TippyCustomizedProps,
+        TippyCustomizedProps<T>,
         | 'heading'
         | 'infoText'
         | 'iconClass'
-        | 'documentationLink'
         | 'documentationLinkText'
         | 'additionalContent'
         | 'placement'
         | 'Icon'
         | 'headingInfo'
+        | 'documentationLink'
+        | 'isEnterprise'
+        | 'isExternalLink'
     > {
     dataTestid?: string
-    children?: TippyCustomizedProps['children']
+    children?: TippyCustomizedProps<T>['children']
     iconClassName?: string
     buttonPadding?: string
 }

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'

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

@@ -16,7 +16,6 @@
 
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
 import { Checkbox } from '@Common/Checkbox'
-import { DOCUMENTATION } from '@Common/Constants'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
 import { CHECKBOX_VALUE } from '@Common/Types'
@@ -96,7 +95,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="APP_METRICS"
                     documentationLinkText="Learn more"
                     dataTestid="app-metrics-info"
                     iconClassName="dc__no-shrink icon-dim-16 fcn-6"

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -16,7 +16,7 @@
 
 import { InfoIconTippy } from '@Shared/Components/InfoIconTippy'
 
-import { BreadCrumb, DOCUMENTATION } from '../../../Common'
+import { BreadCrumb } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { BuildInfraDescriptorProps } from './types'
 
@@ -38,7 +38,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="GLOBAL_CONFIG_BUILD_INFRA"
                         documentationLinkText="View Documentation"
                         iconClassName="icon-dim-20 fcn-6"
                     />

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -19,7 +19,7 @@ import { getAppStatusMessageFromAppDetails } from './utils'
 
 const InfoCardItem = ({ heading, value, isLast = false, alignCenter = false }: InfoCardItemProps) => (
     <div
-        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${alignCenter ? 'dc__align-items-center' : ''} ${!isLast ? 'border__secondary--bottom' : ''} ${alignCenter ? 'dc__align-center' : ''}`}
+        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${alignCenter ? 'dc__align-items-center' : ''} ${!isLast ? 'border__secondary--bottom' : ''}`}
     >
         <Tooltip content={heading}>
             <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink">{heading}</h3>

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -24,17 +24,11 @@ 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 '@Shared/DocLink'
 import { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
 import { useDownload } from '@Shared/Hooks'
 
-import {
-    ClipboardButton,
-    DOCUMENTATION,
-    extractImage,
-    GenericEmptyState,
-    ImageTagsContainer,
-    useGetUserRoles,
-} from '../../../Common'
+import { ClipboardButton, extractImage, GenericEmptyState, ImageTagsContainer, useGetUserRoles } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
@@ -274,14 +268,11 @@ const Artifacts = ({
                         <span className="fs-13 fw-4 mr-8 ml-8">
                             {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.StoreFiles}
                         </span>
-                        <a
-                            className="fs-13 fw-6 cb-5 dc__no-decor"
-                            href={DOCUMENTATION.BLOB_STORAGE}
-                            target="_blank"
-                            rel="noreferrer"
-                        >
-                            {EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
-                        </a>
+                        <DocLink
+                            docLinkKey="BLOB_STORAGE"
+                            text={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
+                            dataTestId="configure-blob-storage"
+                        />
                         <OpenInNew className="icon-dim-20 ml-8" />
                     </div>
                 </div>