feature description modifies with title

Author: shivani170

src/Common/Types.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/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -19,17 +19,19 @@ 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,
     title,
     renderDescriptionContent,
     closeModalText,
     docLink,
     SVGImage,
+    showInfoIconTippy,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -39,15 +41,37 @@ const FeatureTitleWithInfo = ({
     const closeModal = () => {
         setShowFeatureDescriptionModal(false)
     }
+
+    const renderTitle = () => {
+        if (breadCrumbs)
+            <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>
+        else if (showInfoIconTippy) {
+            return (
+                <div>
+                    {title}
+                    <InfoIconTippy
+                        heading={title}
+                        infoText={renderDescriptionContent()}
+                        iconClassName={iconClassName}
+                        documentationLink={docLink}
+                        documentationLinkText={docLink}
+                        dataTestid="info-tippy-button"
+                    />
+                </div>
+            )
+        }
+        return title
+    }
+
     return (
         <>
             <div
                 className={`feature-description flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}
             >
-                <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>
+                {renderTitle()}
 
                 {children}
             </div>

src/Shared/Components/FeatureDescription/types.ts

@@ -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,9 @@ export interface FeatureDescriptionModalProps {
 }
 
 export interface DescriptorProps extends FeatureDescriptionModalProps {
-    breadCrumbs: Breadcrumb[]
+    breadCrumbs?: Breadcrumb[]
     additionalContainerClasses?: string
     iconClassName?: string
     children?: React.ReactNode
+    showInfoIconTippy?: boolean
 }