Merge pull request #910 from devtron-labs/feat/nested-navigation-route

feat: Nested Routing (breadcrumb optional in buildInfraDescription props)

Author: shivani170

package-lock.json

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

package.json

@@ -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/BreadCrumb.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/BreadcrumbStore.tsx

@@ -0,0 +1,44 @@
+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) => {
+    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 },
+        ...(profileName
+            ? [
+                  { type: 'link', label: 'Profiles', to: redirectUrl },
+                  {
+                      type: 'text',
+                      label: profileName,
+                  },
+              ]
+            : [
+                  {
+                      type: 'text',
+                      label: 'Create Profile',
+                  },
+              ]),
+    ]
+
+    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/Common/BreadCrumb/NestedBreadCrumb.tsx

@@ -52,3 +52,19 @@ export interface BreadcrumbTextProps {
      */
     shouldTruncate?: boolean
 }
+
+export interface NestedBreadCrumbProps {
+    /**
+     * It is the url to which the link should redirect
+     */
+    redirectUrl: string
+    /**
+     * It is the text of the link
+     */
+    linkText: string
+    /**
+     * It is the name of the profile
+     * If not given, would show "Create Profile"
+     */
+    profileName: string
+}

src/Common/BreadCrumb/Types.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/Constants.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/Common/index.ts

@@ -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,
+    tooltipNode,
     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/Descriptor.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,