feat: enhance CommandBarBackdrop with recent actions update and error logging

Author: AbhishekA1509

src/Pages/Shared/CommandBar/CommandBarBackdrop.tsx

@@ -7,16 +7,19 @@ import {
     GenericFilterEmptyState,
     getUserPreferences,
     KeyboardShortcut,
+    logExceptionToSentry,
     ResponseType,
     SearchBar,
     stopPropagation,
+    updateUserPreferences,
     useQuery,
     useRegisterShortcut,
+    UserPreferencesType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import CommandGroup from './CommandGroup'
 import { NAVIGATION_GROUPS, RECENT_ACTIONS_GROUP, RECENT_NAVIGATION_ITEM_ID_PREFIX, SHORT_CUTS } from './constants'
-import { CommandBarBackdropProps, CommandBarGroupType } from './types'
+import { CommandBarActionIdType, CommandBarBackdropProps, CommandBarGroupType, CommandBarItemType } from './types'
 
 const CommandBarBackdrop = ({ handleClose }: CommandBarBackdropProps) => {
     const history = useHistory()
@@ -38,7 +41,7 @@ const CommandBarBackdrop = ({ handleClose }: CommandBarBackdropProps) => {
         queryKey: ['recentNavigationActions'],
         select: ({ result }) =>
             result.commandBar.recentNavigationActions.reduce<CommandBarGroupType>((acc, action) => {
-                const requiredGroup = NAVIGATION_GROUPS.find((group) =>
+                const requiredGroup = structuredClone(NAVIGATION_GROUPS).find((group) =>
                     group.items.some((item) => item.id === action.id),
                 )
 
@@ -169,12 +172,40 @@ const CommandBarBackdrop = ({ handleClose }: CommandBarBackdropProps) => {
         }
     }, [itemFlatList])
 
-    const onItemClick = (item: CommandBarGroupType['items'][number]) => {
-        if (item.href) {
-            history.push(item.href)
+    const sanitizeItemId = (item: CommandBarItemType) =>
+        (item.id.startsWith(RECENT_NAVIGATION_ITEM_ID_PREFIX)
+            ? item.id.replace(RECENT_NAVIGATION_ITEM_ID_PREFIX, '')
+            : item.id) as CommandBarActionIdType
+
+    const onItemClick = async (item: CommandBarGroupType['items'][number]) => {
+        if (!item.href) {
+            logExceptionToSentry(new Error(`CommandBar item with id ${item.id} does not have a valid href`))
+            return
         }
 
+        history.push(item.href)
         handleClose()
+
+        const currentItemId = sanitizeItemId(item)
+
+        // const updatedRecentActions = recentActionsGroup?.items.filter((action) => action.id !== currentItemId)
+        // In this now we will put the id as first item in the list and keep first 5 items then
+        const updatedRecentActions: UserPreferencesType['commandBar']['recentNavigationActions'] = [
+            {
+                id: currentItemId as CommandBarActionIdType,
+            },
+            ...(recentActionsGroup?.items
+                .filter((action) => sanitizeItemId(action) !== currentItemId)
+                .slice(0, 4)
+                .map((action) => ({
+                    id: sanitizeItemId(action),
+                })) || []),
+        ]
+
+        await updateUserPreferences({
+            path: 'commandBar.recentNavigationActions',
+            value: updatedRecentActions,
+        })
     }
 
     const renderNavigationGroups = (baseIndex: number) => {

src/Pages/Shared/CommandBar/constants.ts

@@ -407,15 +407,14 @@ export const NAVIGATION_LIST: NavigationGroupType[] = [
     },
 ]
 
-export const NAVIGATION_GROUPS: CommandBarGroupType[] = NAVIGATION_LIST.map((group) => ({
+export const NAVIGATION_GROUPS: CommandBarGroupType[] = NAVIGATION_LIST.map<CommandBarGroupType>((group) => ({
     title: group.title,
     id: group.id,
     items: group.items.flatMap(({ hasSubMenu, subItems, title, href, id, icon }) => {
-        if (hasSubMenu && subItems) {
-            return subItems.map((subItem) => ({
+        if (hasSubMenu && subItems?.length) {
+            return subItems.map<CommandBarGroupType['items'][number]>((subItem) => ({
                 title: `${title} / ${subItem.title}`,
-                id,
-                dataTestId: subItem.dataTestId,
+                id: subItem.id,
                 // Since icon is not present for some subItems, using from group
                 icon: group.icon,
                 // TODO: No href present for some subItems
@@ -439,7 +438,7 @@ export const RECENT_ACTIONS_GROUP: CommandBarGroupType = {
     title: 'Recent Navigation',
 }
 
-export const RECENT_NAVIGATION_ITEM_ID_PREFIX = 'recent-navigation-'
+export const RECENT_NAVIGATION_ITEM_ID_PREFIX = 'recent-navigation-' as const
 
 export const SHORT_CUTS: Record<
     'OPEN_COMMAND_BAR' | 'FOCUS_SEARCH_BAR' | 'NAVIGATE_UP' | 'NAVIGATE_DOWN',

src/Pages/Shared/CommandBar/types.ts

@@ -5,10 +5,13 @@ import {
     NavigationSubMenuItemID,
     Never,
     URLS as CommonURLS,
+    UserPreferencesType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { URLS } from '@Config/routes'
 
+import { RECENT_NAVIGATION_ITEM_ID_PREFIX } from './constants'
+
 export type NavigationRootItemID =
     | 'application-management'
     | 'infrastructure-management'
@@ -52,8 +55,10 @@ export interface NavigationGroupType extends Pick<CommonNavigationItemType, 'tit
     items: NavigationItemType[]
 }
 
+export type CommandBarActionIdType = UserPreferencesType['commandBar']['recentNavigationActions'][number]['id']
+
 export type CommandBarItemType = {
-    id: string
+    id: CommandBarActionIdType | `${typeof RECENT_NAVIGATION_ITEM_ID_PREFIX}${CommandBarActionIdType}`
     title: string
     icon: IconsProps['name']
 } & (