chore: modification of feature description

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.8",
+    "version": "0.1.8-beta-19",
     "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

@@ -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,7 @@ 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}
             />
         </div>
 

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -34,6 +34,7 @@ const FeatureTitleWithInfo = ({
     showInfoIconTippy,
     docLinkText = 'View Documentation',
     dataTestId = 'feature-title-with-info',
+    additionalContent,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -47,11 +48,14 @@ const FeatureTitleWithInfo = ({
     const renderTitle = () => {
         if (showInfoIconTippy) {
             return (
-                <div className="flex left fs-16 cn-9 fw-6 mb-20 dc__gap-4" data-testid={dataTestId}>
-                    {title}
+                <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}
@@ -60,7 +64,7 @@ const FeatureTitleWithInfo = ({
                 </div>
             )
         }
-        if (breadCrumbs) {
+        if (breadCrumbs?.length > 0) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-4">
                     <BreadCrumb breadcrumbs={breadCrumbs} />
@@ -69,16 +73,15 @@ const FeatureTitleWithInfo = ({
             )
         }
 
-        return title
+        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 w-100 ${additionalContainerClasses ?? ''}`}
+                className={`feature-description flexbox dc__content-space dc__align-items-center ${additionalContainerClasses ?? ''}`}
             >
                 {renderTitle()}
-
                 {children}
             </div>
             {showFeatureDescriptionModal && (

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -37,4 +37,5 @@ export interface DescriptorProps extends FeatureDescriptionModalProps {
     showInfoIconTippy?: boolean
     docLinkText?: string
     dataTestId?: string
+    additionalContent?: ReactNode
 }