chore: doc link component added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-9",
+    "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/SegmentedBarChart/SegmentedBarChart.tsx

@@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types'
 import './styles.scss'
 
 const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
+    hideLegend,
     entities: userEntities = [FALLBACK_ENTITY],
     rootClassName,
     countClassName,
@@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
     const filteredEntities = entities.filter((entity) => !!entity.value)
 
-    const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
+    const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%`
 
     const renderLabel = (label: Entity['label']) =>
         isLoading ? (
@@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         ))
     }
 
-    const renderLegend = () => (
-        <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
-            {renderContent()}
-        </div>
-    )
+    const renderLegend = () => {
+        if (hideLegend) {
+            return null
+        }
+
+        return (
+            <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
+                {renderContent()}
+            </div>
+        )
+    }
 
     const renderBar = () => (
         <motion.div
@@ -112,7 +119,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
                         index === map.length - 1 ? 'dc__right-radius-4' : ''
                     } ${isLoading ? 'shimmer' : ''}`}
-                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
+                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }}
                 />
             ))}
         </motion.div>

src/Common/SegmentedBarChart/types.ts

@@ -20,13 +20,22 @@ export type Entity = {
     value: number
 }
 
-export interface SegmentedBarChartProps {
-    entities: NonNullable<Entity[]>
+type EntityPropType =
+    | {
+          hideLegend?: false
+          entities: NonNullable<Entity[]>
+      }
+    | {
+          hideLegend: true
+          entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
+      }
+
+export type SegmentedBarChartProps = {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
     isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
     isLoading?: boolean
-}
+} & EntityPropType

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/Pages/ResourceBrowser/NodeDrainOptions.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, FocusEvent } from 'react'
+import { ChangeEvent, FocusEvent, useEffect } from 'react'
 
 import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg'
 import { Checkbox } from '@Common/Checkbox'
@@ -37,6 +37,10 @@ const NodeDrainOptions = ({
         ignoreAllDaemonSets: false,
     }
 
+    useEffect(() => {
+        setNodeDrainOptions(nodeDrainOptions)
+    }, [])
+
     const handleGracePeriodOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setNodeDrainOptions({
             ...nodeDrainOptions,

src/Pages/ResourceBrowser/types.ts

@@ -16,6 +16,7 @@
 
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 
+import { TabProps } from '@Shared/Components'
 import { InstallationClusterType } from '@Shared/types'
 
 import { NodeActionRequest } from './ResourceBrowser.Types'
@@ -113,6 +114,11 @@ export interface AdditionalConfirmationModalOptionsProps<T = unknown> {
     children?: ReactElement
 }
 
+export type NodeDetailTabsInfoType = (Pick<TabProps, 'label' | 'icon'> & {
+    id: string
+    renderComponent: () => JSX.Element
+})[]
+
 export interface InstallationClusterStepType {
     lastTransitionTime: string
     lastProbeTime: string