chore: BuildInfraDescriptorProps type & NestedBreadCrumb component refactoring

Author: shivani170

src/Common/BreadCrumb/NestedBreadCrumb.tsx

@@ -1,17 +1,32 @@
+import React from 'react'
 import { Link } from 'react-router-dom'
 
 import { BreadcrumbText, getBreadCrumbSeparator } from './BreadcrumbStore'
 import { NestedBreadCrumbProps } from './Types'
 
-export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => (
-    <div className="flex left flex-grow-1">
-        <Link
-            className="active dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155"
-            to={redirectUrl}
-        >
-            {linkText}
-        </Link>
-        {getBreadCrumbSeparator()}
-        <BreadcrumbText heading={profileName} isActive />
-    </div>
-)
+export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => {
+    const breadcrumbLinkClass = 'active dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155'
+
+    const breadcrumbs = [
+        { type: 'link', label: linkText, to: redirectUrl },
+        { type: 'link', label: 'Profiles', to: redirectUrl },
+        { type: 'text', label: profileName },
+    ]
+
+    return (
+        <div className="flex left flex-grow-1 dc__gap-4">
+            {breadcrumbs.map((crumb, index) => (
+                <React.Fragment key={crumb.label}>
+                    {crumb.type === 'link' ? (
+                        <Link to={crumb.to!} className={breadcrumbLinkClass}>
+                            {crumb.label}
+                        </Link>
+                    ) : (
+                        <BreadcrumbText heading={crumb.label} isActive />
+                    )}
+                    {index < breadcrumbs.length - 1 && getBreadCrumbSeparator()}
+                </React.Fragment>
+            ))}
+        </div>
+    )
+}

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -14,26 +14,30 @@
  * limitations under the License.
  */
 
+import { NestedBreadCrumb, URLS } from '@Common/index'
 import { InfoIconTippy } from '@Shared/Components/InfoIconTippy'
 
-import { BreadCrumb } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { BuildInfraDescriptorProps } from './types'
 
 const Descriptor = ({
     additionalContainerClasses,
-    breadCrumbs,
     children,
     tippyInfoText,
     tippyAdditionalContent,
     tooltipNode,
     tooltipHeading,
+    profileName,
 }: BuildInfraDescriptorProps) => (
     <div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
         <div className="flexbox dc__align-items-center dc__gap-4">
             {tooltipNode || (
                 <>
-                    <BreadCrumb breadcrumbs={breadCrumbs} />
+                    <NestedBreadCrumb
+                        redirectUrl={URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA_PROFILES}
+                        linkText={BUILD_INFRA_TEXT.HEADING}
+                        profileName={profileName}
+                    />
                     <InfoIconTippy
                         infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
                         additionalContent={tippyAdditionalContent}

src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -19,7 +19,6 @@ import { FormEvent, FunctionComponent, ReactNode, SyntheticEvent } from 'react'
 import { BUILD_INFRA_INHERIT_ACTIONS, useBuildInfraForm } from '@Pages/index'
 
 import { ServerErrors } from '../../../Common'
-import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
 import {
     CMSecretComponentType,
     CMSecretConfigData,
@@ -76,21 +75,31 @@ export enum BuildInfraProfileVariants {
     CUSTOM = 'CUSTOM',
 }
 
-export interface BuildInfraDescriptorProps {
+export type BuildInfraDescriptorProps = {
     /**
      * In case we want to restrict the max-width
      */
     additionalContainerClasses?: string
-    breadCrumbs?: Breadcrumb[]
     /**
      * Would stick at right of div
      */
     children?: ReactNode
-    tippyInfoText?: string
-    tippyAdditionalContent?: ReactNode
-    tooltipNode?: ReactNode
-    tooltipHeading?: string
-}
+} & (
+    | {
+          tooltipNode: ReactNode
+          tippyInfoText?: never
+          tooltipHeading?: never
+          tippyAdditionalContent?: never
+          profileName?: never
+      }
+    | {
+          tooltipNode?: never
+          tippyInfoText: string
+          tooltipHeading?: string
+          tippyAdditionalContent?: ReactNode
+          profileName?: string
+      }
+)
 
 export type NumericBuildInfraConfigTypes = Extract<
     BuildInfraConfigTypes,