Merge pull request #217 from devtron-labs/chore/doc-link

chore: Feature description added for basic title & Doc Link

Author: shivani170

package-lock.json

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

package.json

@@ -26,6 +26,7 @@ export const DOCUMENTATION = {
     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`,
 }
 
 export const PATTERNS = {

src/Common/Constants.ts

@@ -100,7 +100,7 @@ export interface TippyCustomizedProps {
     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?: string
+    infoText?: React.ReactNode
     showCloseButton?: boolean
     arrow?: boolean
     interactive?: boolean

src/Common/Types.ts

@@ -15,7 +15,7 @@
  */
 
 import { DescriptorProps } from './types'
-import { BreadCrumb } from '../../../Common'
+import { BreadCrumb, DOCUMENTATION } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { InfoIconTippy } from '../../../Shared'
 
@@ -34,7 +34,9 @@ const Descriptor = ({
                 infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
                 additionalContent={tippyAdditionalContent}
                 heading={BUILD_INFRA_TEXT.HEADING}
-                iconClassName="icon-dim-20"
+                documentationLink={DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA}
+                documentationLinkText="View Documentation"
+                iconClassName="icon-dim-20 fcn-6"
             />
         </div>
 

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -61,7 +61,7 @@ export const FeatureDescriptionModal = ({
         >
             {docLink.length > 0 && (
                 <a
-                    className="flex dc__link en-2 bw-1 dc__gap-6 br-4 fw-6 lh-20 px-8 py-6 h-32"
+                    className="flex dc__link en-2 bw-1 dc__gap-6 br-4 fw-6 lh-20 px-8 py-6 h-32 anchor dc__hover-n50"
                     href={docLink}
                     target="_blank"
                     rel="noreferrer"

src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

@@ -19,17 +19,22 @@ import { DescriptorProps } from './types'
 import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
 import { BreadCrumb } from '../../../Common'
 import { FeatureDescriptionModal } from './FeatureDescriptionModal'
+import { InfoIconTippy } from '../InfoIconTippy'
 
 const FeatureTitleWithInfo = ({
     additionalContainerClasses,
-    breadCrumbs,
+    breadCrumbs = [],
     children,
-    iconClassName,
+    iconClassName = 'icon-dim-20 fcn-6',
     title,
     renderDescriptionContent,
     closeModalText,
     docLink,
     SVGImage,
+    showInfoIconTippy,
+    docLinkText = 'View Documentation',
+    dataTestId = 'feature-title-with-info',
+    additionalContent,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -39,16 +44,44 @@ const FeatureTitleWithInfo = ({
     const closeModal = () => {
         setShowFeatureDescriptionModal(false)
     }
-    return (
-        <>
-            <div
-                className={`feature-description flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}
-            >
+
+    const renderTitle = () => {
+        if (showInfoIconTippy) {
+            return (
+                <div className="flex left fs-16 cn-9 fw-6 dc__gap-4">
+                    <span data-testid={dataTestId} className="lh-32">
+                        {title}
+                    </span>
+                    <InfoIconTippy
+                        heading={title}
+                        infoText={renderDescriptionContent()}
+                        additionalContent={additionalContent}
+                        iconClassName={iconClassName}
+                        documentationLink={docLink}
+                        documentationLinkText={docLinkText}
+                        dataTestid="info-tippy-button"
+                    />
+                </div>
+            )
+        }
+        if (breadCrumbs?.length > 0) {
+            return (
                 <div className="flexbox dc__align-items-center dc__gap-4">
                     <BreadCrumb breadcrumbs={breadCrumbs} />
                     <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
                 </div>
+            )
+        }
 
+        return <span className="fs-16 fw-6 cn-9 lh-32">{title}</span>
+    }
+
+    return (
+        <>
+            <div
+                className={`feature-description flexbox dc__content-space dc__align-items-center ${additionalContainerClasses ?? ''}`}
+            >
+                {renderTitle()}
                 {children}
             </div>
             {showFeatureDescriptionModal && (

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+import React, { ReactNode } from 'react'
 import { ImageType } from '../../../Common'
 import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
 
 export interface FeatureDescriptionModalProps {
     title: string
-    renderDescriptionContent?: () => JSX.Element
+    renderDescriptionContent?: () => ReactNode
     closeModalText?: string
     docLink?: string
     closeModal?: () => void
@@ -29,8 +30,12 @@ export interface FeatureDescriptionModalProps {
 }
 
 export interface DescriptorProps extends FeatureDescriptionModalProps {
-    breadCrumbs: Breadcrumb[]
+    breadCrumbs?: Breadcrumb[]
     additionalContainerClasses?: string
     iconClassName?: string
     children?: React.ReactNode
+    showInfoIconTippy?: boolean
+    docLinkText?: string
+    dataTestId?: string
+    additionalContent?: ReactNode
 }