Merge pull request #2916 from devtron-labs/feat/cmd-bar-ux

AbhishekA1509 · web-flow · commit a9a1012f9af0 · 2025-09-05T15:04:41.000+05:30
chore: enhance CommandBarBackdrop with keyword search and icon mapping
diff --git a/src/Pages/Shared/CommandBar/CommandBarBackdrop.tsx b/src/Pages/Shared/CommandBar/CommandBarBackdrop.tsx
@@ -97,7 +97,11 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
 
         const additionalGroups = getAdditionalNavGroups(searchText, appList)
         const parsedGroups = navigationGroups.reduce<typeof navigationGroups>((acc, group) => {
-            const filteredItems = group.items.filter((item) => item.title.toLowerCase().includes(lowerCaseSearchText))
+            const filteredItems = group.items.filter(
+                (item) =>
+                    item.title.toLowerCase().includes(lowerCaseSearchText) ||
+                    item.keywords?.some((keyword) => keyword.toLowerCase().includes(lowerCaseSearchText)),
+            )
 
             if (filteredItems.length > 0) {
                 acc.push({
@@ -146,7 +150,7 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
             const item = itemFlatList[newIndex]
             const itemElement = itemRefMap.current[item.id]
             if (itemElement) {
-                itemElement.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
+                itemElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
             }
             return newIndex
         })
@@ -202,7 +206,7 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
 
                 const itemElement = itemRefMap.current[itemFlatList[selectedIndex]?.id]
                 if (itemElement) {
-                    itemElement.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
+                    itemElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
                 }
 
                 setSelectedItemIndex(selectedIndex)
@@ -295,7 +299,7 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
     }
 
     const renderKeyboardShortcuts = (keys: SupportedKeyboardKeysType[], label: string) => (
-        <div className="flexbox dc__gap-8 dc__align-items-center">
+        <div className="flexbox dc__gap-6 dc__align-items-center">
             {keys.map((key) => (
                 <KeyboardShortcut key={key} keyboardKey={key} />
             ))}
@@ -312,10 +316,10 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
         >
             <div
                 onClick={stopPropagation}
-                className="dc__mxw-720 mxh-500 flexbox-col dc__overflow-hidden dc__content-space br-12 bg__modal--primary command-bar__container w-100 h-100"
+                className="dc__mxw-720 mxh-500 flexbox-col dc__overflow-hidden dc__content-space br-12 bg__modal--primary command-bar__container border__secondary-translucent w-100 h-100"
             >
                 <div className="flexbox-col dc__overflow-hidden flex-grow-1">
-                    <div className="px-16 py-12">
+                    <div className="px-16 py-12 bg__modal--secondary border__primary--bottom">
                         <SearchBar
                             inputProps={{
                                 autoFocus: true,
@@ -340,7 +344,7 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
                         />
                     ) : (
                         <div
-                            className="flexbox-col dc__overflow-auto border__primary--top"
+                            className="flexbox-col dc__overflow-auto"
                             role="listbox"
                             aria-label="Command Menu"
                             aria-activedescendant={itemFlatList[selectedItemIndex]?.id}
@@ -364,7 +368,7 @@ const CommandBarBackdrop = ({ handleClose, isLoadingAppList, appList }: CommandB
                     )}
                 </div>
 
-                <div className="flexbox dc__content-space dc__align-items-center px-20 py-12 border__primary--top bg__secondary">
+                <div className="flexbox dc__content-space dc__align-items-center px-20 py-12 border__secondary--top bg__secondary">
                     <div
                         className={`flexbox dc__gap-20 dc__align-items-center flex-grow-1 ${showEmptyState ? 'dc__content-center' : ''}`}
                     >
diff --git a/src/Pages/Shared/CommandBar/constants.ts b/src/Pages/Shared/CommandBar/constants.ts
@@ -1,4 +1,4 @@
-import { SupportedKeyboardKeysType } from '@devtron-labs/devtron-fe-common-lib'
+import { IconName, NavigationItemID, SupportedKeyboardKeysType } from '@devtron-labs/devtron-fe-common-lib'
 
 import { CommandBarGroupType } from './types'
 
@@ -31,3 +31,9 @@ export const SHORT_CUTS: Record<
         description: 'Select Item',
     },
 }
+
+export const NAV_SUB_ITEMS_ICON_MAPPING: Partial<Record<NavigationItemID, IconName>> = {
+    'application-management-configurations': 'ic-gear',
+    'application-management-policies': 'ic-gavel',
+    'global-configuration-authorization': 'ic-key',
+}
diff --git a/src/Pages/Shared/CommandBar/types.ts b/src/Pages/Shared/CommandBar/types.ts
@@ -13,8 +13,9 @@ export type CommandBarItemType = {
     id: CommandBarActionIdType | `${typeof RECENT_NAVIGATION_ITEM_ID_PREFIX}${CommandBarActionIdType}`
     title: string
     icon: IconsProps['name']
-    iconColor?: IconBaseColorType | 'none'
+    keywords: string[]
     href: NavigationItemType['href']
+    iconColor?: IconBaseColorType | 'none'
 } & (
     | {
           onSelect?: never
diff --git a/src/Pages/Shared/CommandBar/utils.ts b/src/Pages/Shared/CommandBar/utils.ts
@@ -3,7 +3,11 @@ import { SERVER_MODE, URLS as COMMON_URLS } from '@devtron-labs/devtron-fe-commo
 import { NAVIGATION_LIST } from '@Components/Navigation/constants'
 import { URLS } from '@Config/routes'
 
-import { DEVTRON_APPLICATIONS_COMMAND_GROUP_ID, RECENT_NAVIGATION_ITEM_ID_PREFIX } from './constants'
+import {
+    DEVTRON_APPLICATIONS_COMMAND_GROUP_ID,
+    NAV_SUB_ITEMS_ICON_MAPPING,
+    RECENT_NAVIGATION_ITEM_ID_PREFIX,
+} from './constants'
 import { CommandBarActionIdType, CommandBarBackdropProps, CommandBarGroupType, CommandBarItemType } from './types'
 
 export const sanitizeItemId = (item: CommandBarItemType) =>
@@ -30,6 +34,7 @@ const getAppManagementAdditionalNavItems = (
                   icon: 'ic-devtron-app',
                   iconColor: 'none',
                   href: URLS.DEVTRON_APP_LIST,
+                  keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
         : []),
@@ -39,6 +44,7 @@ const getAppManagementAdditionalNavItems = (
         icon: 'ic-helm-app',
         iconColor: 'none',
         href: URLS.HELM_APP_LIST,
+        keywords: [],
     },
     ...(window._env_?.ENABLE_EXTERNAL_ARGO_CD && isSuperAdmin
         ? [
@@ -48,6 +54,7 @@ const getAppManagementAdditionalNavItems = (
                   icon: 'ic-argocd-app',
                   iconColor: 'none',
                   href: URLS.ARGO_APP_LIST,
+                  keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
         : []),
@@ -59,6 +66,7 @@ const getAppManagementAdditionalNavItems = (
                   icon: 'ic-fluxcd-app',
                   iconColor: 'none',
                   href: URLS.FLUX_APP_LIST,
+                  keywords: [],
               } satisfies CommandBarGroupType['items'][number],
           ]
         : []),
@@ -70,15 +78,16 @@ export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boole
         const additionalItems = isAppManagementBlock ? getAppManagementAdditionalNavItems(serverMode, isSuperAdmin) : []
 
         const parsedItems = group.items.flatMap<CommandBarGroupType['items'][number]>(
-            ({ hasSubMenu, subItems, title, href, id, icon }) => {
+            ({ hasSubMenu, subItems, title, href, id, icon, keywords }) => {
                 if (hasSubMenu && subItems?.length) {
                     return subItems.map<CommandBarGroupType['items'][number]>((subItem) => ({
                         title: `${title} / ${subItem.title}`,
                         id: subItem.id,
                         // Since icon is not present for some subItems, using from group
-                        icon: group.icon,
+                        icon: NAV_SUB_ITEMS_ICON_MAPPING[id] || group.icon,
                         // TODO: No href present for some subItems
                         href: subItem.href ?? null,
+                        keywords: subItem.keywords || [],
                     }))
                 }
 
@@ -88,6 +97,7 @@ export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boole
                     icon: icon || 'ic-arrow-right',
                     // TODO: No href present for some items
                     href: href ?? null,
+                    keywords: keywords || [],
                 }
             },
         )
@@ -114,6 +124,7 @@ export const parseAppListToNavItems = (appList: CommandBarBackdropProps['appList
                 icon: 'ic-devtron-app',
                 iconColor: 'none',
                 href: `${COMMON_URLS.APPLICATION_MANAGEMENT_APP}/${app.id}/${URLS.APP_OVERVIEW}`,
+                keywords: [],
             })),
         },
     ]
