chore: add breakdown items in command bar

Author: arunjaindev

src/Pages/Shared/CommandBar/utils.tsx

@@ -4,14 +4,14 @@ import {
     Icon,
     ImageWithFallback,
     InfrastructureManagementAppListType,
+    NavigationItemID,
     SERVER_MODE,
     URL_FILTER_KEYS,
     URLS as COMMON_URLS,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { QueryParams as ChartStoreQueryParams } from '@Components/charts/constants'
 import { NAVIGATION_LIST } from '@Components/Navigation/constants'
-import { NavigationRootItemID } from '@Components/Navigation/types'
 import { getClusterChangeRedirectionUrl } from '@Components/ResourceBrowser/Utils'
 import { URLS } from '@Config/routes'
 
@@ -37,7 +37,7 @@ export const getNewSelectedIndex = (prevIndex: number, type: 'up' | 'down', tota
     return prevIndex === totalItems - 1 ? 0 : prevIndex + 1
 }
 
-const getAppManagementAdditionalNavItems = (serverMode: SERVER_MODE): CommandBarGroupType['items'] => [
+const getAppManagementNavItemsBreakdown = (serverMode: SERVER_MODE): CommandBarGroupType['items'] => [
     ...(serverMode === SERVER_MODE.FULL
         ? [
               {
@@ -52,7 +52,7 @@ const getAppManagementAdditionalNavItems = (serverMode: SERVER_MODE): CommandBar
         : []),
 ]
 
-const getInfraManagementAdditionalNavItems = (isSuperAdmin: boolean): CommandBarGroupType['items'] => [
+const getInfraManagementNavItemsBreakdown = (isSuperAdmin: boolean): CommandBarGroupType['items'] => [
     {
         id: 'app-management-helm-app-list',
         title: 'Helm Applications',
@@ -93,25 +93,23 @@ const getInfraManagementAdditionalNavItems = (isSuperAdmin: boolean): CommandBar
         : []),
 ]
 
-const getAdditionalItems = (
-    groupId: NavigationRootItemID,
+const getNavItemBreakdownItems = (
+    rootId: NavigationItemID,
     serverMode: SERVER_MODE,
     isSuperAdmin: boolean,
 ): CommandBarGroupType['items'] => {
-    switch (groupId) {
-        case 'application-management':
-            return getAppManagementAdditionalNavItems(serverMode)
-        case 'infrastructure-management':
-            return getInfraManagementAdditionalNavItems(isSuperAdmin)
+    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 additionalItems = getAdditionalItems(group.id, serverMode, isSuperAdmin)
-
         const parsedItems = group.items.flatMap<CommandBarGroupType['items'][number]>(
             ({ hasSubMenu, subItems, title, href, id, icon, keywords }) => {
                 if (hasSubMenu && subItems?.length) {
@@ -126,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,
@@ -140,7 +144,7 @@ export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boole
         return {
             title: group.title,
             id: group.id,
-            items: [...additionalItems, ...parsedItems],
+            items: parsedItems,
         }
     })
 

src/components/app/list/DevtronAppListContainer.tsx

@@ -264,7 +264,7 @@ const DevtronAppList = ({
         <div className="app-list" data-testid="app-list-container">
             <div
                 ref={stickyElementRef}
-                className={`app-list__header ${!isArgoInstalled ? 'app-list__header--argo-not-installed' : ''} ${getClassNameForStickyHeaderWithShadow(
+                className={`app-list__header border__secondary--bottom ${!isArgoInstalled ? 'app-list__header--argo-not-installed' : ''} ${getClassNameForStickyHeaderWithShadow(
                     isHeaderStuck,
                     'dc__top-47',
                 )}`}