feat: app list segregation and chart store

.env

@@ -72,7 +72,6 @@ FEATURE_ASK_DEVTRON_EXPERT=false
 FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false
 FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false
-FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE=false
 FEATURE_FLUX_DEPLOYMENTS_ENABLE=false
 FEATURE_LINK_EXTERNAL_FLUX_ENABLE=false
 FEATURE_CANARY_ROLLOUT_PROGRESS_ENABLE=true

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.6-pre-30",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.6-pre-31",
         "@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

@@ -112,21 +112,22 @@ export const Configurations = () => {
                         >
                             {(props) => <Notifications {...props} isSuperAdmin={isSuperAdmin} />}
                         </Route>
-                        {...serverMode !== SERVER_MODE.EA_ONLY &&
-                            window._env_.ENABLE_SCOPED_VARIABLES && [
-                                <Route
-                                    key={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES}
-                                    path={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES}
-                                >
-                                    <ScopedVariables isSuperAdmin={isSuperAdmin} />
-                                </Route>,
-                                <Route
-                                    key={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA}
-                                    path={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA}
-                                >
-                                    <BuildInfra isSuperAdmin={isSuperAdmin} />
-                                </Route>,
-                            ]}
+                        {...serverMode !== SERVER_MODE.EA_ONLY && window._env_.ENABLE_SCOPED_VARIABLES
+                            ? [
+                                  <Route
+                                      key={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES}
+                                      path={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES}
+                                  >
+                                      <ScopedVariables isSuperAdmin={isSuperAdmin} />
+                                  </Route>,
+                                  <Route
+                                      key={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA}
+                                      path={COMMON_URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA}
+                                  >
+                                      <BuildInfra isSuperAdmin={isSuperAdmin} />
+                                  </Route>,
+                              ]
+                            : []}
                         <Redirect to={getDefaultRoute()} />
                     </Switch>
                 </div>

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

@@ -17,7 +17,9 @@
 import { lazy, Suspense } from 'react'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
-import { AppListConstants, Progressing, URLS } from '@devtron-labs/devtron-fe-common-lib'
+import { AppListConstants, Progressing } from '@devtron-labs/devtron-fe-common-lib'
+
+import { URLS } from '@Config/routes'
 
 import EAHeaderComponent from '../../../../components/v2/headers/EAHeader.component'
 
@@ -30,7 +32,7 @@ const ExternalFluxAppDetailsRoute = () => {
         <>
             <EAHeaderComponent
                 title={AppListConstants.AppTabs.FLUX_APPS}
-                redirectURL={`${URLS.APPLICATION_MANAGEMENT_APP}/${URLS.APP_LIST}/${AppListConstants.AppType.FLUX_APPS}`}
+                redirectURL={URLS.FLUX_APP_LIST}
                 showAppDetailsOnly
                 breadCrumbConfig={{
                     ':namespace': null,

src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

@@ -20,7 +20,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import {
     APIResponseHandler,
     BreadCrumb,
-    getApplicationManagementBreadcrumb,
+    getInfrastructureManagementBreadcrumb,
     handleAnalyticsEvent,
     PageHeader,
     SegmentedControl,
@@ -84,7 +84,7 @@ export const ChartDetails = () => {
     const { breadcrumbs } = useBreadcrumb(
         {
             alias: {
-                ...getApplicationManagementBreadcrumb(),
+                ...getInfrastructureManagementBreadcrumb(),
                 discover: {
                     component: 'Chart Store',
                     linked: true,

src/Pages/ChartStore/ChartDetails/ChartDetailsReadme.tsx

@@ -84,7 +84,7 @@ export const ChartDetailsReadme = ({
                 errorScreenManagerProps={{
                     code: error?.code,
                     reload,
-                    redirectURL: URLS.APPLICATION_MANAGEMENT_CHART_STORE_DISCOVER,
+                    redirectURL: URLS.INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER,
                 }}
             >
                 {!readme ? (

src/Pages/ChartStore/ChartDetails/ChartDetailsTableComponents.tsx

@@ -35,6 +35,7 @@ import {
     SearchBar,
     SERVER_MODE,
     stringComparatorBySortOrder,
+    URLS as CommonURLS,
     UserIdentifier,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -260,8 +261,8 @@ const DeploymentsTableLinkCellComponent = ({ row }: DeploymentsTableCellComponen
             className="flex left fs-13 lh-20 dc__truncate dc__w-fit-content"
             to={
                 appOfferingMode === SERVER_MODE.EA_ONLY
-                    ? `${URLS.APPLICATION_MANAGEMENT_APP}/${URLS.EXTERNAL_APPS}/${getAppId({ clusterId, namespace, appName })}/${appName}`
-                    : `${URLS.APPLICATION_MANAGEMENT_APP}/${URLS.DEVTRON_CHARTS}/deployments/${installedAppId}/env/${environmentId}`
+                    ? `${CommonURLS.INFRASTRUCTURE_MANAGEMENT_APP}/${URLS.EXTERNAL_APPS}/${getAppId({ clusterId, namespace, appName })}/${appName}`
+                    : `${CommonURLS.INFRASTRUCTURE_MANAGEMENT_APP}/${URLS.DEVTRON_CHARTS}/deployments/${installedAppId}/env/${environmentId}`
             }
         >
             {row.data.appName}

src/Pages/Shared/CommandBar/utils.tsx

@@ -1,6 +1,10 @@
+import { generatePath } from 'react-router-dom'
+
 import {
     Icon,
     ImageWithFallback,
+    InfrastructureManagementAppListType,
+    NavigationItemID,
     SERVER_MODE,
     URL_FILTER_KEYS,
     URLS as COMMON_URLS,
@@ -33,28 +37,30 @@ export const getNewSelectedIndex = (prevIndex: number, type: 'up' | 'down', tota
     return prevIndex === totalItems - 1 ? 0 : prevIndex + 1
 }
 
-const getAppManagementAdditionalNavItems = (
-    serverMode: SERVER_MODE,
-    isSuperAdmin: boolean,
-): CommandBarGroupType['items'] => [
+const getAppManagementNavItemsBreakdown = (serverMode: SERVER_MODE): CommandBarGroupType['items'] => [
     ...(serverMode === SERVER_MODE.FULL
         ? [
               {
                   id: 'app-management-devtron-app-list',
                   title: 'Devtron Applications',
                   icon: 'ic-devtron-app',
                   iconColor: 'none',
-                  href: URLS.DEVTRON_APP_LIST,
+                  href: COMMON_URLS.APPLICATION_MANAGEMENT_APP_LIST,
                   keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
         : []),
+]
+
+const getInfraManagementNavItemsBreakdown = (isSuperAdmin: boolean): CommandBarGroupType['items'] => [
     {
         id: 'app-management-helm-app-list',
         title: 'Helm Applications',
         icon: 'ic-helm-app',
         iconColor: 'none',
-        href: URLS.HELM_APP_LIST,
+        href: generatePath(COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_APP_LIST, {
+            appType: InfrastructureManagementAppListType.HELM,
+        }),
         keywords: [],
     },
     ...(window._env_?.ENABLE_EXTERNAL_ARGO_CD && isSuperAdmin
@@ -64,7 +70,9 @@ const getAppManagementAdditionalNavItems = (
                   title: 'ArgoCD Applications',
                   icon: 'ic-argocd-app',
                   iconColor: 'none',
-                  href: URLS.ARGO_APP_LIST,
+                  href: generatePath(COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_APP_LIST, {
+                      appType: InfrastructureManagementAppListType.ARGO_CD,
+                  }),
                   keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
@@ -76,18 +84,32 @@ const getAppManagementAdditionalNavItems = (
                   title: 'FluxCD Applications',
                   icon: 'ic-fluxcd-app',
                   iconColor: 'none',
-                  href: URLS.FLUX_APP_LIST,
+                  href: generatePath(COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_APP_LIST, {
+                      appType: InfrastructureManagementAppListType.FLUX_CD,
+                  }),
                   keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
         : []),
 ]
 
+const getNavItemBreakdownItems = (
+    rootId: NavigationItemID,
+    serverMode: SERVER_MODE,
+    isSuperAdmin: boolean,
+): CommandBarGroupType['items'] => {
+    switch (rootId) {
+        case 'application-management-devtron-applications':
+            return getAppManagementNavItemsBreakdown(serverMode)
+        case 'infrastructure-management-applications':
+            return getInfraManagementNavItemsBreakdown(isSuperAdmin)
+        default:
+            return []
+    }
+}
+
 export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boolean): CommandBarGroupType[] =>
     NAVIGATION_LIST.map<CommandBarGroupType>((group) => {
-        const isAppManagementBlock = group.id === 'application-management'
-        const additionalItems = isAppManagementBlock ? getAppManagementAdditionalNavItems(serverMode, isSuperAdmin) : []
-
         const parsedItems = group.items.flatMap<CommandBarGroupType['items'][number]>(
             ({ hasSubMenu, subItems, title, href, id, icon, keywords }) => {
                 if (hasSubMenu && subItems?.length) {
@@ -102,6 +124,12 @@ export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boole
                     }))
                 }
 
+                const breakdownItems = getNavItemBreakdownItems(id, serverMode, isSuperAdmin)
+
+                if (breakdownItems.length) {
+                    return breakdownItems
+                }
+
                 return {
                     title,
                     id,
@@ -116,7 +144,7 @@ export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boole
         return {
             title: group.title,
             id: group.id,
-            items: [...additionalItems, ...parsedItems],
+            items: parsedItems,
         }
     })
 
@@ -169,7 +197,7 @@ export const parseChartListToNavItems = (
                         fallbackImage={<Icon name="ic-helm-app" color={null} size={20} />}
                     />
                 ),
-                href: `${COMMON_URLS.APPLICATION_MANAGEMENT_CHART_STORE_DISCOVER}${URLS.CHART}/${chart.id}`,
+                href: `${COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER}${URLS.CHART}/${chart.id}`,
                 keywords: [],
             })),
         },
@@ -224,7 +252,7 @@ export const parseHelmAppListToNavItems = (
                         fallbackImage={<Icon name="ic-helm-app" color={null} size={20} />}
                     />
                 ),
-                href: `${URLS.APPLICATION_MANAGEMENT_APP}/${URLS.DEVTRON_CHARTS}/deployments/${helmApp.appId}/env/${helmApp.environmentDetail?.environmentId}`,
+                href: `${COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_APP}/${URLS.DEVTRON_CHARTS}/deployments/${helmApp.appId}/env/${helmApp.environmentDetail?.environmentId}`,
                 keywords: [],
             })),
         },
@@ -276,7 +304,7 @@ const getTopFiveAppListGroup = (
     return parsedAppList[0]
         ? topFiveGroupParser(parsedAppList[0], {
               id: 'search-app-list-view',
-              href: `${URLS.DEVTRON_APP_LIST}?${URL_FILTER_KEYS.SEARCH_KEY}=${encodeURIComponent(searchText)}`,
+              href: `${COMMON_URLS.APPLICATION_MANAGEMENT_APP_LIST}?${URL_FILTER_KEYS.SEARCH_KEY}=${encodeURIComponent(searchText)}`,
           })
         : parsedAppList
 }
@@ -294,7 +322,7 @@ const getTopFiveHelmAppListGroup = (
     return parsedHelmAppList[0]
         ? topFiveGroupParser(parsedHelmAppList[0], {
               id: 'search-helm-app-list-view',
-              href: `${URLS.HELM_APP_LIST}?${URL_FILTER_KEYS.SEARCH_KEY}=${encodeURIComponent(searchText)}`,
+              href: `${generatePath(COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_APP_LIST, { appType: InfrastructureManagementAppListType.HELM })}?${URL_FILTER_KEYS.SEARCH_KEY}=${encodeURIComponent(searchText)}`,
           })
         : parsedHelmAppList
 }
@@ -332,7 +360,7 @@ const getTopFiveChartListGroup = (
     return parsedChartList[0]
         ? topFiveGroupParser(parsedChartList[0], {
               id: 'search-chart-list-view',
-              href: `${COMMON_URLS.APPLICATION_MANAGEMENT_CHART_STORE_DISCOVER}?${ChartStoreQueryParams.AppStoreName}=${encodeURIComponent(
+              href: `${COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER}?${ChartStoreQueryParams.AppStoreName}=${encodeURIComponent(
                   searchText,
               )}`,
           })

src/Pages/Shared/ConfigMapSecret/helpers.tsx

@@ -35,7 +35,7 @@ export const renderESOInfo = (isESO: boolean) =>
             description={
                 <p className="m-0 cn-9 fs-13 fw-4 lh-20">
                     <Link
-                        to={`${URLS.APPLICATION_MANAGEMENT_CHART_STORE_DISCOVER}?appStoreName=external-secret`}
+                        to={`${URLS.INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER}?appStoreName=external-secret`}
                         className="anchor"
                         target="_blank"
                     >

src/components/Jobs/JobList/JobsList.tsx

@@ -155,7 +155,7 @@ const JobsList = () => {
             )}
             {dataStateType === JobListViewType.LIST && (
                 <>
-                    <HeaderWithCreateButton isJobView />
+                    <HeaderWithCreateButton viewType="jobs" />
                     {renderCreateJobRouter()}
                     <JobListContainer
                         masterFilters={masterFilters}

src/components/Navigation/Navigation.tsx

@@ -228,7 +228,7 @@ export const Navigation = ({
                     />
                     <NavGroup
                         title="Overview"
-                        icon="ic-speedometer"
+                        icon="ic-global-overview"
                         to="/dummy-url"
                         isExpanded={isExpanded}
                         onHover={handleCloseExpandedNavigation(true)}