Merge branch 'kubecon-2025' of https://github.com/devtron-labs/dashboard into feat/cmd-bar-chart-search

Author: AbhishekA1509

.eslintignore

@@ -253,10 +253,7 @@ src/components/globalConfigurations/GlobalConfiguration.tsx
 src/components/globalConfigurations/GlobalConfigurationProvider.tsx
 src/components/hostURL/HostURL.tsx
 src/components/hyperion/EnvironmentSelect.tsx
-src/components/material/CreateMaterial.tsx
-src/components/material/MaterialList.tsx
 src/components/material/MaterialView.tsx
-src/components/material/UpdateMaterial.tsx
 src/components/notifications/AddNotification.tsx
 src/components/notifications/ModifyRecipientsModal.tsx
 src/components/notifications/NotificationTab.tsx
@@ -288,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-pre-5",
+        "@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/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts

@@ -165,7 +165,6 @@ export interface AppConfigurationContextType
     isJobView: boolean
     envIdToEnvApprovalConfigurationMap: ResourceIdToResourceApprovalPolicyConfigMapType
     lastUnlockedStage: string
-    isWorkflowEditorUnlocked: boolean
     getRepo: string
     envConfig: EnvConfigurationState
 }

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfiguration.provider.tsx

@@ -54,7 +54,6 @@ export const AppConfigurationProvider = (props: AppConfigurationProviderProps) =
             deleteApp,
             canShowExternalLinks,
             showCannotDeleteTooltip,
-            isWorkflowEditorUnlocked: state.isUnlocked.workflowEditor,
             toggleRepoSelectionTippy,
             getRepo: showRepoOnDelete,
             isJobView: resourceKind === ResourceKindType.job,

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx

@@ -108,7 +108,6 @@ const AppComposeRouter = () => {
                     <div className="flex-grow-1 dc__overflow-auto">
                         <MaterialList
                             respondOnSuccess={respondOnSuccess}
-                            isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
                             toggleRepoSelectionTippy={toggleRepoSelectionTippy}
                             setRepo={setRepoState}
                             isJobView={isJobView}
@@ -201,7 +200,6 @@ const AppComposeRouter = () => {
                     <div className="flex-grow-1 dc__overflow-auto">
                         <MaterialList
                             respondOnSuccess={respondOnSuccess}
-                            isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
                             toggleRepoSelectionTippy={toggleRepoSelectionTippy}
                             setRepo={setRepoState}
                             isTemplateView={isTemplateView}

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>
     )