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

feat: navigation route

Author: shivani170

.eslintignore

@@ -285,7 +285,6 @@ src/components/scopedVariables/__tests__/utils.test.tsx
 src/components/scopedVariables/utils.tsx
 src/components/security/AddCveModal.tsx
 src/components/security/DeleteCVEModal.tsx
-src/components/security/Security.tsx
 src/components/security/SecurityPoliciesTab.tsx
 src/components/security/SecurityPolicyApp.tsx
 src/components/security/SecurityPolicyCluster.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.0-alpha-4",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.1-pre-1",
         "@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

@@ -1,12 +1,15 @@
 import { lazy } from 'react'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 
 import {
+    BreadCrumb,
+    getApplicationManagementBreadcrumb,
     noop,
     PageHeader,
     SERVER_MODE,
     SideNavigation,
     URLS as COMMON_URLS,
+    useBreadcrumb,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -31,6 +34,7 @@ const BuildInfra = lazy(() =>
 const CatalogFramework = importComponentFromFELibrary('CatalogFramework')
 
 export const Configurations = () => {
+    const { pathname } = useLocation()
     const { featureGitOpsFlags: isFeatureGitOpsEnabled, serverMode, isSuperAdmin } = useMainContext()
 
     const getDefaultRoute = () => {
@@ -41,10 +45,24 @@ export const Configurations = () => {
         return URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_EXTERNAL_LINKS
     }
 
+    const { breadcrumbs } = useBreadcrumb(
+        {
+            alias: {
+                ...getApplicationManagementBreadcrumb(),
+                configurations: {
+                    component: <span className="cn-9 fs-16 fw-6 lh-24">Configurations</span>,
+                    linked: true,
+                },
+            },
+        },
+        [pathname],
+    )
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
     return (
         <>
-            {/* TODO: Update with Application Management Header */}
-            <PageHeader headerName="Application Management / Configurations" />
+            <PageHeader breadCrumbs={renderBreadcrumbs} isBreadcrumbs />
             <div className="application-management-configurations dc__grid flex-grow-1 dc__overflow-auto">
                 <div className="py-12 pl-8 pr-7 border__primary--right">
                     <SideNavigation list={APPLICATION_MANAGEMENT_CONFIGURATIONS} />

src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

@@ -20,6 +20,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import {
     APIResponseHandler,
     BreadCrumb,
+    getApplicationManagementBreadcrumb,
     handleAnalyticsEvent,
     PageHeader,
     SegmentedControl,
@@ -83,6 +84,7 @@ export const ChartDetails = () => {
     const { breadcrumbs } = useBreadcrumb(
         {
             alias: {
+                ...getApplicationManagementBreadcrumb(),
                 ':chartSegment?': null,
                 ':chartId': {
                     component: (

src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

@@ -42,6 +42,7 @@ import {
     DeleteConfirmationModal,
     useMainContext,
     OptionType,
+    getApplicationManagementBreadcrumb
 } from '@devtron-labs/devtron-fe-common-lib'
 import ReactGA from 'react-ga4'
 import { MultiValue } from 'react-select'
@@ -587,6 +588,7 @@ export const EnvHeader = ({
     const { breadcrumbs } = useBreadcrumb(
         {
             alias: {
+                ...getApplicationManagementBreadcrumb(),
                 ':envId': {
                     component: <EnvSelector onChange={handleEnvChange} envId={+envId} envName={envName} />,
                     linked: false,

src/components/ApplicationGroup/Constants.ts

@@ -249,3 +249,4 @@ export const BULK_CI_BUILD_STATUS = (noOfApps) => ({
 
 export const ENV_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'envGroup__filter'
 export const APP_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'appGroup__filter'
+export const APP_GROUP_TIPPY_CONTENT = 'Application Groups represent an environment and display all applications deployed to it. They simplify deploying interdependent microservices by allowing you to build and deploy multiple applications together.'

src/components/ApplicationGroup/List/EnvironmentsList.tsx

@@ -15,18 +15,21 @@
  */
 
 import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import {
+    BreadCrumb,
     ErrorScreenManager,
-    FeatureTitleWithInfo,
     FilterChips,
     FilterSelectPicker,
     GenericEmptyState,
+    getApplicationManagementBreadcrumb,
     ImageType,
     PageHeader,
     SearchBar,
     SelectPickerOptionType,
     useAsync,
+    useBreadcrumb,
     useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -36,22 +39,11 @@ import { getClusterListMinWithoutAuth } from '../../../services/service'
 import { getEnvAppList } from '../AppGroup.service'
 import { AppGroupAdminType, AppGroupUrlFilters, AppGroupUrlFiltersType } from '../AppGroup.types'
 import { parseSearchParams } from '../AppGroup.utils'
+import { APP_GROUP_TIPPY_CONTENT } from '../Constants'
 import EnvironmentsListView from './EnvironmentListView'
 
 import './EnvironmentsList.scss'
 
-const renderAppGroupDescriptionContent = () =>
-    'Application Groups represent an environment and display all applications deployed to it. They simplify deploying interdependent microservices by allowing you to build and deploy multiple applications together.'
-
-const renderAdditionalHeaderInfo = () => (
-    <FeatureTitleWithInfo
-        title="Application Groups"
-        docLink="APP_GROUP"
-        showInfoIconTippy
-        renderDescriptionContent={renderAppGroupDescriptionContent}
-    />
-)
-
 const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
     const urlFilters = useUrlFilters<never, AppGroupUrlFiltersType>({
         parseSearchParams,
@@ -210,10 +202,35 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
             </div>
         )
     }
+    const { pathname } = useLocation()
+
+    const { breadcrumbs } = useBreadcrumb(
+        {
+            alias: {
+                ...getApplicationManagementBreadcrumb(),
+                'application-group': {
+                    component: <span className="cb-5 fs-16 dc__capitalize">Application groups</span>,
+                    linked: true,
+                },
+            },
+        },
+        [pathname],
+    )
+
+    const renderBreadCrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
 
     return (
         <div className="flexbox-col h-100 dc__overflow-auto">
-            <PageHeader additionalHeaderInfo={renderAdditionalHeaderInfo} />
+            <PageHeader
+                isBreadcrumbs
+                breadCrumbs={renderBreadCrumbs}
+                tippyProps={{
+                    isTippyCustomized: true,
+                    tippyRedirectLink: 'APP_GROUP',
+                    tippyMessage: APP_GROUP_TIPPY_CONTENT,
+                    tippyHeader: 'Application Groups',
+                }}
+            />
             {renderBody()}
         </div>
     )

src/components/ResourceBrowser/ClusterInstallationStatus.tsx

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

src/components/ResourceBrowser/Constants.ts

@@ -385,3 +385,14 @@ export const ResourceBrowserRouteToTabIdMap: Partial<
     [`${URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER}/:clusterId/terminal`]: ResourceBrowserTabsId.terminal,
     [`${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'

src/components/ResourceBrowser/ResourceBrowser.tsx

@@ -15,22 +15,26 @@
  */
 
 import React, { useEffect, useMemo, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import {
+    BreadCrumb,
     ClusterDetail,
     DevtronProgressing,
     ErrorScreenManager,
     PageHeader,
     useAsync,
+    useBreadcrumb,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ClusterListView } from '@Components/ClusterNodes/ClusterList'
 import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type'
 
 import { sortObjectArrayAlphabetically } from '../common'
+import { KUBERNETES_RESOURCE_BROWSER_DESCRIPTION } from './Constants'
 import { renderNewClusterButton } from './PageHeader.buttons'
 import { getClusterListing } from './ResourceBrowser.service'
-import { renderAdditionalBrowserHeaderInfo } from './Utils'
+import { getInfrastructureManagementBreadcrumbsConfig } from './Utils'
 
 const ResourceBrowser: React.FC = () => {
     const parentRef = useRef<HTMLDivElement>(null)
@@ -41,6 +45,9 @@ const ResourceBrowser: React.FC = () => {
     )
     const [initialLoading, clusterListMinData, error] = useAsync(() => getClusterListing(true, abortControllerRef))
 
+    const { pathname } = useLocation()
+    const { breadcrumbs } = useBreadcrumb(getInfrastructureManagementBreadcrumbsConfig(pathname), [pathname])
+
     useEffect(
         () => () => {
             abortControllerRef.current.abort()
@@ -83,11 +90,19 @@ const ResourceBrowser: React.FC = () => {
         return <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
     }
 
+    const renderBreadcrumb = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
     return (
         <div className="flexbox-col h-100 bg__primary" ref={parentRef}>
             <PageHeader
-                additionalHeaderInfo={renderAdditionalBrowserHeaderInfo}
-                isBreadcrumbs={false}
+                tippyProps={{
+                    isTippyCustomized: true,
+                    tippyRedirectLink: 'RESOURCE_BROWSER',
+                    tippyMessage: KUBERNETES_RESOURCE_BROWSER_DESCRIPTION,
+                    tippyHeader: 'Resource Browser',
+                }}
+                isBreadcrumbs
+                breadCrumbs={renderBreadcrumb}
                 renderActionButtons={renderNewClusterButton(reloadDetailClusterList, sortedClusterList.length)}
             />
             {renderContent()}