Merge pull request #2920 from devtron-labs/fix/navigation-route

chore: application and job Header fixes

Author: shivani170

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.1-pre-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.1-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages-Devtron-2.0/ApplicationManagement/Configurations/ConfigurationsRouter.tsx

@@ -51,7 +51,6 @@ export const Configurations = () => {
                 ...getApplicationManagementBreadcrumb(),
                 configurations: {
                     component: <span className="cn-9 fs-16 fw-6 lh-24">Configurations</span>,
-                    linked: true,
                 },
             },
         },

src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetailsRoute.tsx

@@ -32,6 +32,11 @@ const ExternalFluxAppDetailsRoute = () => {
                 title={AppListConstants.AppTabs.FLUX_APPS}
                 redirectURL={`${URLS.APPLICATION_MANAGEMENT_APP}/${URLS.APP_LIST}/${AppListConstants.AppType.FLUX_APPS}`}
                 showAppDetailsOnly
+                breadCrumbConfig={{
+                    ':namespace': null,
+                    'external-flux': null,
+                    ':templateType': null,
+                }}
             />
             <Suspense fallback={<Progressing pageLoader />}>
                 <Switch>

src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

@@ -85,6 +85,10 @@ export const ChartDetails = () => {
         {
             alias: {
                 ...getApplicationManagementBreadcrumb(),
+                discover: {
+                    component: 'Chart Store',
+                    linked: true,
+                },
                 ':chartSegment?': null,
                 ':chartId': {
                     component: (

src/components/ApplicationGroup/List/EnvironmentsList.tsx

@@ -19,6 +19,7 @@ import { useLocation } from 'react-router-dom'
 
 import {
     BreadCrumb,
+    BreadcrumbText,
     ErrorScreenManager,
     FilterChips,
     FilterSelectPicker,
@@ -209,9 +210,9 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
             alias: {
                 ...getApplicationManagementBreadcrumb(),
                 'application-group': {
-                    component: <span className="cb-5 fs-16 dc__capitalize">Application groups</span>,
-                    linked: true,
+                    component: <BreadcrumbText heading="Application Groups" isActive />,
                 },
+                list: null,
             },
         },
         [pathname],

src/components/Jobs/JobDetails/JobDetails.tsx

@@ -37,6 +37,7 @@ import {
     TabGroup,
     URLS as CommonURLS,
     handleAnalyticsEvent,
+    BreadcrumbText,
 } from '@devtron-labs/devtron-fe-common-lib'
 import AppConfig from '../../../Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig'
 import Overview from '../../app/Overview/Overview'
@@ -152,8 +153,8 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
                     ),
                     linked: false,
                 },
-                app: {
-                    component: <span className="cb-5 fs-16 dc__capitalize">Jobs</span>,
+                job: {
+                    component: <BreadcrumbText heading="Job" />,
                     linked: true,
                 },
             },

src/components/Jobs/JobList/JobListView.tsx

@@ -201,10 +201,12 @@ export default function JobListView(props: JobListViewProps) {
     }
     if (props.view === JobListViewType.EMPTY || props.view === JobListViewType.NO_RESULT) {
         return (
+            <>
             <JobsEmptyState
                 view={props.view}
                 clickHandler={props.view === JobListViewType.EMPTY ? createJobHandler : props.clearFilters}
             />
+            </>
         )
     }
     if (props.view === JobListViewType.ERROR) {

src/components/Jobs/JobList/JobsList.tsx

@@ -40,7 +40,6 @@ import {
 } from '../Types'
 import { getJobStatusLabelFromValue, parseSearchParams } from '../Utils'
 import JobListContainer from './JobListContainer'
-import { renderAdditionalJobsHeaderInfo } from './utils'
 
 import '../../app/list/list.scss'
 
@@ -156,7 +155,7 @@ const JobsList = () => {
             )}
             {dataStateType === JobListViewType.LIST && (
                 <>
-                    <HeaderWithCreateButton headerName="" additionalHeaderInfo={renderAdditionalJobsHeaderInfo} />
+                    <HeaderWithCreateButton isJobView />
                     {renderCreateJobRouter()}
                     <JobListContainer
                         masterFilters={masterFilters}

src/components/ResourceBrowser/ClusterInstallationStatus.tsx

@@ -17,7 +17,12 @@
 import { useMemo } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 
-import { getInfrastructureManagementBreadcrumb, useAsync, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    BreadcrumbText,
+    getInfrastructureManagementBreadcrumb,
+    useAsync,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 
@@ -62,8 +67,7 @@ const ClusterInstallationStatus = () => {
             alias: {
                 ...getInfrastructureManagementBreadcrumb(),
                 'resource-browser': {
-                    component: <span className="cn-9 fs-16 fw-6 lh-24">Resource Browser</span>,
-                    linked: true,
+                    component: <BreadcrumbText heading="Resource Browser" isActive />,
                 },
                 'installation-cluster': {
                     component: (

src/components/ResourceBrowser/Constants.ts

@@ -386,13 +386,5 @@ export const ResourceBrowserRouteToTabIdMap: Partial<
     [`${URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER}/:clusterId/resource-recommender`]: RESOURCE_RECOMMENDER_TAB_ID,
 }
 
-export const INFRASTRUCTURE_MANAGEMENT_BREADCRUMB_CONFIG = [
-    {
-        key: 'resource-browser',
-        route: URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER,
-        heading: 'Resource Browser',
-    },
-]
-
 export const KUBERNETES_RESOURCE_BROWSER_DESCRIPTION =
     'The Resource Browser gives you a powerful, centralized view of all your Kubernetes objects across clusters. Effortlessly troubleshoot and manage resources with features like live manifest editing, log viewing, and direct resource creation or deletion—right from the UI. All in one place, across all your cluster'