Merge branch 'kubecon-2025' of https://github.com/devtron-labs/dashboard into feat/application-management-overview

Author: arunjaindev

.env

@@ -76,3 +76,4 @@ FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE=false
 FEATURE_FLUX_DEPLOYMENTS_ENABLE=false
 FEATURE_LINK_EXTERNAL_FLUX_ENABLE=false
 FEATURE_CANARY_ROLLOUT_PROGRESS_ENABLE=true
+COMMAND_BAR_REFETCH_INTERVAL=3600

.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

config.md

@@ -52,5 +52,5 @@
 | LOGIN_PAGE_IMAGE                                          |                                          | Login page image url                                                                                             |
 | FEATURE_FLUX_DEPLOYMENTS_ENABLE                           | false                                    | Enables flux cd deployment type for devtron apps and devtron charts                                              |
 | FEATURE_LINK_EXTERNAL_FLUX_ENABLE                         | false                                    | Enables external flux cd migration                                                                               |
-
+| COMMAND_BAR_REFETCH_INTERVAL                               | 3600                                     | Time interval in seconds to refetch command bar data - Applications List                                        |
 # DASHBOARD CONFIG SECRET

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.0-pre-2",
+        "@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,10 +1,21 @@
 import { lazy } from 'react'
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 
-import { noop, PageHeader, SERVER_MODE, URLS as COMMON_URLS, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    BreadCrumb,
+    getApplicationManagementBreadcrumb,
+    noop,
+    PageHeader,
+    SERVER_MODE,
+    SideNavigation,
+    URLS as COMMON_URLS,
+    useBreadcrumb,
+    useMainContext,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import ChartRepo from '@Components/chartRepo/ChartRepo'
 import { importComponentFromFELibrary } from '@Components/common'
+import { APPLICATION_MANAGEMENT_CONFIGURATIONS } from '@Components/Navigation'
 import { AddNotification } from '@Components/notifications/AddNotification'
 import { URLS } from '@Config/routes'
 
@@ -23,6 +34,7 @@ const BuildInfra = lazy(() =>
 const CatalogFramework = importComponentFromFELibrary('CatalogFramework')
 
 export const Configurations = () => {
+    const { pathname } = useLocation()
     const { featureGitOpsFlags: isFeatureGitOpsEnabled, serverMode, isSuperAdmin } = useMainContext()
 
     const getDefaultRoute = () => {
@@ -33,13 +45,29 @@ 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 Rohit: 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="border__primary--right">SidePanel</div>
-                <div className="bg__secondary">
+                <div className="py-12 pl-8 pr-7 border__primary--right">
+                    <SideNavigation list={APPLICATION_MANAGEMENT_CONFIGURATIONS} />
+                </div>
+                <div className="bg__secondary dc__overflow-auto">
                     <Switch>
                         {isFeatureGitOpsEnabled && (
                             <Route

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/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -1,47 +1,44 @@
 import { useEffect } from 'react'
 
-import { useRegisterShortcut, UseRegisterShortcutProvider } from '@devtron-labs/devtron-fe-common-lib'
+import { useQuery } from '@devtron-labs/devtron-fe-common-lib'
+
+import { getAppListMin } from '@Services/service'
 
 import CommandBarBackdrop from './CommandBarBackdrop'
-import { SHORT_CUTS } from './constants'
 import { CommandBarProps } from './types'
 
 import './CommandBar.scss'
 
 const CommandBar = ({ showCommandBar, setShowCommandBar }: CommandBarProps) => {
-    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
-
-    const handleOpen = () => {
-        setShowCommandBar(true)
-    }
+    const { isLoading: isLoadingAppList, data: appList } = useQuery({
+        queryKey: ['commandBar__app-list'],
+        queryFn: () => getAppListMin(),
+        refetchInterval: (+window._env_.COMMAND_BAR_REFETCH_INTERVAL || 3600) * 1000,
+        select: ({ result }) => result,
+    })
 
     const handleClose = () => {
         setShowCommandBar(false)
     }
 
     useEffect(() => {
-        const { keys } = SHORT_CUTS.OPEN_COMMAND_BAR
-
-        registerShortcut({
-            keys,
-            description: SHORT_CUTS.OPEN_COMMAND_BAR.description,
-            callback: handleOpen,
-        })
-
+        const handleOpen = (e: KeyboardEvent) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault()
+                setShowCommandBar(true)
+            }
+        }
+        window.addEventListener('keydown', handleOpen)
         return () => {
-            unregisterShortcut(keys)
+            window.removeEventListener('keydown', handleOpen)
         }
     }, [])
 
     if (!showCommandBar) {
         return null
     }
 
-    return (
-        <UseRegisterShortcutProvider ignoreTags={[]}>
-            <CommandBarBackdrop handleClose={handleClose} />
-        </UseRegisterShortcutProvider>
-    )
+    return <CommandBarBackdrop handleClose={handleClose} appList={appList} isLoadingAppList={isLoadingAppList} />
 }
 
 export default CommandBar