feat: Nested Routing (breadcrumb optional in buildInfraDescription props)

package.json

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

src/Common/BreadCrumb/BreadCrumb.tsx

@@ -16,7 +16,7 @@
 
 import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
-import { useBreadcrumbContext } from './BreadcrumbStore'
+import { useBreadcrumbContext, getBreadCrumbSeparator } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
 import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 
@@ -115,7 +115,7 @@ export const BreadCrumb: React.FC<Breadcrumbs> = ({
                     </ConditionalWrap>
 
                     {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
-                        <span className="dc__devtron-breadcrumb__item__separator">{sep}</span>
+                       getBreadCrumbSeparator(sep)
                     )}
                 </React.Fragment>
             ))}

src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -25,6 +25,10 @@ export const BreadcrumbText = ({ heading, isActive, shouldTruncate = false }: Br
     <span className={`dc__breadcrumb-text cb-5 fs-16 lh-1-5 ${shouldTruncate ? 'dc__truncate' : ''} ${isActive ? 'cn-9 fw-6' : 'cb-5 fw-4 dc__mxw-155 dc__ellipsis-right'}`}>{heading}</span>
 )
 
+export const getBreadCrumbSeparator = (sep: string = '/') => (
+    <span className="dc__devtron-breadcrumb__item__separator">{sep}</span>
+)
+
 const Store = ({ children }) => {
     const [state, setState] = useState(initialState)
     return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>

src/Common/BreadCrumb/NestedBreadCrumb.tsx

@@ -0,0 +1,17 @@
+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>
+)

src/Common/BreadCrumb/Types.ts

@@ -52,3 +52,9 @@ export interface BreadcrumbTextProps {
      */
     shouldTruncate?: boolean
 }
+
+export interface NestedBreadCrumbProps {
+    redirectUrl: string
+    linkText: string
+    profileName: string
+}

src/Common/Constants.ts

@@ -100,6 +100,7 @@ export const URLS = {
     APPLICATION_MANAGEMENT_CONFIGURATIONS_DEPLOYMENT_CHARTS: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/deployment-charts`,
     APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/scoped-variables`,
     APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/build-infra`,
+    APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA_PROFILES: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/build-infra/profiles`,
     APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/notifications`,
     // INFRASTRUCTURE MANAGEMENT
     INFRASTRUCTURE_MANAGEMENT: INFRASTRUCTURE_MANAGEMENT_ROOT,

src/Common/index.ts

@@ -18,6 +18,7 @@ export * from './AddCDButton'
 export * from './API'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
 export { default as BreadcrumbStore, BreadcrumbText } from './BreadCrumb/BreadcrumbStore'
+export { NestedBreadCrumb } from './BreadCrumb/NestedBreadCrumb'
 export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
 export * from './Checkbox'
 export * from './CIPipeline.Types'

src/Pages/GlobalConfigurations/BuildInfra/constants.tsx

@@ -19,7 +19,6 @@ import { ReactComponent as ICTag } from '@Icons/ic-tag.svg'
 import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg'
 import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
 import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg'
-import { UseBreadcrumbProps } from '@Common/BreadCrumb/Types'
 import { CMSecretComponentType } from '@Shared/Services'
 
 import {
@@ -82,17 +81,6 @@ export const BUILD_INFRA_TEXT = {
     INVALID_FORM_MESSAGE: 'Valid input is required for all mandatory fields.',
 } as const
 
-export const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps = {
-    alias: {
-        'application-management': null,
-        configurations: null,
-        'build-infra': {
-            component: <h2 className="m-0 cn-9 fs-16 fw-6 lh-32">{BUILD_INFRA_TEXT.HEADING}</h2>,
-            linked: false,
-        },
-    },
-}
-
 export const BUILD_INFRA_LOCATOR_MARKER_MAP: Readonly<Record<BuildInfraLocators, BuildInfraFormFieldType['marker']>> = {
     [BuildInfraLocators.CPU]: ICCpu,
     [BuildInfraLocators.MEMORY]: ICMemory,

src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -81,7 +81,7 @@ export interface BuildInfraDescriptorProps {
      * In case we want to restrict the max-width
      */
     additionalContainerClasses?: string
-    breadCrumbs: Breadcrumb[]
+    breadCrumbs?: Breadcrumb[]
     /**
      * Would stick at right of div
      */