feat: Dependabot alerts

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "4.0.6-pre-0",
+        "@devtron-labs/devtron-fe-common-lib": "4.0.9",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@sentry/browser": "7.119.1",
         "@sentry/integrations": "7.50.0",
@@ -92,7 +92,7 @@
         "svgo": "^3.3.2",
         "ts-node": "10.9.2",
         "typescript": "5.5.4",
-        "vite": "8.0.8",
+        "vite": "8.0.16",
         "vite-plugin-compression2": "2.4.0",
         "vite-plugin-pwa": "1.2.0",
         "vite-plugin-require-transform": "1.0.21",
@@ -110,7 +110,7 @@
     "packageManager": "yarn@4.9.2",
     "overrides": {
         "vite-plugin-svgr": {
-            "vite": "8.0.8"
+            "vite": "8.0.16"
         }
     }
 }

src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx

@@ -153,7 +153,7 @@ const ApiTokens = () => {
     )
 
     const redirectToCreate = () => {
-        navigate(`../create`)
+        navigate('create')
     }
 
     const renderGenerateButton = () => (

src/Pages/Shared/CommandBar/utils.tsx

@@ -11,6 +11,7 @@ import {
 
 import { QueryParams as ChartStoreQueryParams } from '@Components/charts/constants'
 import { getNavigationList } from '@Components/Navigation'
+import { hasNavigationGroupItems } from '@Components/Navigation/utils'
 import { getClusterChangeRedirectionUrl } from '@Components/ResourceBrowser/Utils'
 import { URLS } from '@Config/routes'
 
@@ -103,36 +104,46 @@ const getNavItemBreakdownItems = (
 
 export const getNavigationGroups = (serverMode: SERVER_MODE, isSuperAdmin: boolean): CommandBarGroupType[] =>
     getNavigationList(serverMode).map<CommandBarGroupType>((group) => {
-        const parsedItems = group.items.flatMap<CommandBarGroupType['items'][number]>(
-            ({ 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: NAV_SUB_ITEMS_ICON_MAPPING[id] || group.icon,
-                        // TODO: No href present for some subItems
-                        href: subItem.href ?? null,
-                        keywords: subItem.keywords || [],
-                    }))
-                }
-
-                const breakdownItems = getNavItemBreakdownItems(id, serverMode, isSuperAdmin)
-
-                if (breakdownItems.length) {
-                    return breakdownItems
-                }
-
-                return {
-                    title,
-                    id,
-                    icon: icon || 'ic-arrow-right',
-                    // TODO: No href present for some items
-                    href: href ?? null,
-                    keywords: keywords || [],
-                }
-            },
-        )
+        const parsedItems = hasNavigationGroupItems(group)
+            ? group.items.flatMap<CommandBarGroupType['items'][number]>(
+                  ({ 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: NAV_SUB_ITEMS_ICON_MAPPING[id] || group.icon,
+                              // TODO: No href present for some subItems
+                              href: subItem.href ?? null,
+                              keywords: subItem.keywords || [],
+                          }))
+                      }
+
+                      const breakdownItems = getNavItemBreakdownItems(id, serverMode, isSuperAdmin)
+
+                      if (breakdownItems.length) {
+                          return breakdownItems
+                      }
+
+                      return {
+                          title,
+                          id,
+                          icon: icon || 'ic-arrow-right',
+                          // TODO: No href present for some items
+                          href: href ?? null,
+                          keywords: keywords || [],
+                      }
+                  },
+              )
+            : [
+                  {
+                      title: group.title,
+                      id: group.id,
+                      icon: group.icon,
+                      href: group.href,
+                      keywords: [],
+                  } as CommandBarGroupType['items'][number],
+              ]
 
         return {
             title: group.title,

src/components/ClusterNodes/NodeDetails.tsx

@@ -708,18 +708,13 @@ const NodeDetails = ({ lowercaseKindToResourceGroupMap, updateTabUrl }: ClusterL
 
     const handleResourceClick = (e) => {
         const { name, tab = ResourceBrowserActionMenuEnum.manifest, namespace } = e.currentTarget.dataset
-        navigate(
-            getUrlWithSearchParams(
-                generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
-                    clusterId,
-                    group: selectedResource?.gvk.Group.toLowerCase() || K8S_EMPTY_GROUP,
-                    kind: 'pod',
-                    name,
-                    namespace,
-                }),
-                { tab },
-            ),
-        )
+        navigate(generatePath(`${RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL}/${tab}`, {
+                clusterId,
+                group: selectedResource?.gvk.Group.toLowerCase() || K8S_EMPTY_GROUP,
+                kind: 'pod',
+                name,
+                namespace,
+            }))
     }
 
     const getTriggerSortingHandler =

src/components/Navigation/Navigation.tsx

@@ -42,7 +42,13 @@ import { NavGroup } from './NavGroup'
 import { NavigationLogo, NavigationLogoExpanded } from './NavigationLogo'
 import { NavItem } from './NavItem'
 import { NavGroupProps, NavigationProps } from './types'
-import { doesNavigationItemMatchPath, filterNavigationItems, findActiveNavigationItemOfNavGroup } from './utils'
+import {
+    doesNavigationGroupMatchPath,
+    doesNavigationItemMatchPath,
+    filterNavigationItems,
+    findActiveNavigationItemOfNavGroup,
+    hasNavigationGroupItems,
+} from './utils'
 
 import './styles.scss'
 
@@ -143,17 +149,23 @@ export const Navigation = ({
     const NAVIGATION_LIST = useMemo(() => getNavigationList(serverMode), [serverMode])
 
     const selectedNavGroup = useMemo(
-        () => NAVIGATION_LIST.find(({ items }) => items.some((item) => doesNavigationItemMatchPath(item, pathname))),
-        [pathname],
+        () => NAVIGATION_LIST.find((group) => doesNavigationGroupMatchPath(group, pathname)),
+        [NAVIGATION_LIST, pathname],
+    )
+
+    const selectedExpandableNavGroup = useMemo(
+        () => (hasNavigationGroupItems(selectedNavGroup) ? selectedNavGroup : null),
+        [selectedNavGroup],
     )
 
     // The current navigation group is the one that is hovered or the one that is active, \
     // this is used to determine which nav group items are to be shown in expanded state.
-    const currentNavGroup = hoveredNavGroup || selectedNavGroup
+    const currentNavGroup = hoveredNavGroup || selectedExpandableNavGroup
     const isExpanded = !!hoveredNavGroup
 
     const navItems = useMemo<NavigationGroupType['items']>(
-        () => (currentNavGroup ? filterNavigationItems(currentNavGroup.items, searchText) : []),
+        () =>
+            hasNavigationGroupItems(currentNavGroup) ? filterNavigationItems(currentNavGroup.items, searchText) : [],
         [currentNavGroup, searchText],
     )
 
@@ -164,6 +176,7 @@ export const Navigation = ({
             // Prevent navigation, if the item is already active
             if (
                 selectedNavGroup?.id === navItem.id &&
+                hasNavigationGroupItems(selectedNavGroup) &&
                 doesNavigationItemMatchPath(findActiveNavigationItemOfNavGroup(selectedNavGroup.items), pathname)
             ) {
                 e.preventDefault()
@@ -172,6 +185,13 @@ export const Navigation = ({
                 category: 'Navigation',
                 action: `nav-${navItem.id}`,
             })
+
+            if (!hasNavigationGroupItems(navItem)) {
+                setHoveredNavGroup(null)
+                setSearchText('')
+                return
+            }
+
             setHoveredNavGroup(navItem)
             setSearchText('')
         }
@@ -186,25 +206,27 @@ export const Navigation = ({
             setSearchText('')
         }
 
-    const handleNavGroupHover = (navGroup: typeof hoveredNavGroup) => (isHovered: boolean) => {
-        clearTimeout(timeoutRef.current)
+    const handleNavGroupHover =
+        (navGroup: NavigationGroupType & { items: NonNullable<NavigationGroupType['items']> }) =>
+        (isHovered: boolean) => {
+            clearTimeout(timeoutRef.current)
 
-        if (isHovered) {
-            if (!hoveredNavGroup) {
-                setHoveredNavGroup(navGroup)
-                return
-            }
+            if (isHovered) {
+                if (!hoveredNavGroup) {
+                    setHoveredNavGroup(navGroup)
+                    return
+                }
 
-            timeoutRef.current = setTimeout(() => {
-                setHoveredNavGroup(navGroup)
-                setSearchText('')
-            }, 50)
+                timeoutRef.current = setTimeout(() => {
+                    setHoveredNavGroup(navGroup)
+                    setSearchText('')
+                }, 50)
+            }
         }
-    }
 
     const handleOpenExpandedNavigation = (e: MouseEvent<HTMLDivElement>) => {
         if (!hoveredNavGroup && e.target === e.currentTarget) {
-            setHoveredNavGroup(selectedNavGroup)
+            setHoveredNavGroup(selectedExpandableNavGroup)
         }
     }
 
@@ -253,8 +275,16 @@ export const Navigation = ({
                             isExpanded={isExpanded}
                             isSelected={hoveredNavGroup?.id === item.id || selectedNavGroup?.id === item.id}
                             onClick={handleNavGroupClick(item)}
-                            to={findActiveNavigationItemOfNavGroup(item.items)?.href}
-                            onHover={handleNavGroupHover(item)}
+                            to={
+                                hasNavigationGroupItems(item)
+                                    ? findActiveNavigationItemOfNavGroup(item.items)?.href
+                                    : item.href
+                            }
+                            onHover={
+                                hasNavigationGroupItems(item)
+                                    ? handleNavGroupHover(item)
+                                    : handleCloseExpandedNavigation(true)
+                            }
                             showTooltip={item.disabled}
                         />
                     ))}

src/components/Navigation/constants.ts

@@ -2,7 +2,7 @@ import { NavigationGroupType, NavigationItemType, ROUTER_URLS, SERVER_MODE } fro
 
 import { importComponentFromFELibrary } from '@Components/common'
 
-import { filterNavGroupAndItem } from './utils'
+import { filterNavGroupAndItem, hasNavigationGroupItems } from './utils'
 
 const APPLICATION_MANAGEMENT_POLICIES_NAV_ITEM: NavigationItemType = importComponentFromFELibrary(
     'APPLICATION_MANAGEMENT_POLICIES_NAV_ITEM',
@@ -322,6 +322,12 @@ const NAVIGATION_LIST: NavigationGroupType[] = [
         ],
         isAvailableInEA: true,
     },
+    {
+        id: 'audit-logs',
+        title: 'Audit logs',
+        icon: 'ic-file-log-search',
+        href: `${ROUTER_URLS.AUDIT_LOGS}?sortBy=timeStamp&sortOrder=DESC`,
+    },
 ]
 
 export const getNavigationList = (serverMode: SERVER_MODE): NavigationGroupType[] => {
@@ -332,37 +338,41 @@ export const getNavigationList = (serverMode: SERVER_MODE): NavigationGroupType[
         ),
     )
 
-    const filteredNavItems = filteredNavGroup.map((group) => {
-        const filteredItems = group.items.filter((item) =>
-            filterNavGroupAndItem(
-                {
-                    forceHideEnvKey: item.forceHideEnvKey,
-                    hideNav: item.hideNav,
-                    isAvailableInEA: item.isAvailableInEA,
-                },
-                serverMode,
-            ),
-        )
-        return { ...group, items: filteredItems }
-    })
+    return filteredNavGroup.map((group) => {
+        if (!hasNavigationGroupItems(group)) {
+            return group
+        }
+
+        const filteredItems = group.items
+            .filter((item) =>
+                filterNavGroupAndItem(
+                    {
+                        forceHideEnvKey: item.forceHideEnvKey,
+                        hideNav: item.hideNav,
+                        isAvailableInEA: item.isAvailableInEA,
+                    },
+                    serverMode,
+                ),
+            )
+            .map((item) => {
+                if (item.hasSubMenu && item.subItems) {
+                    const filteredSubItems = item.subItems.filter((subItem) =>
+                        filterNavGroupAndItem(
+                            {
+                                forceHideEnvKey: subItem.forceHideEnvKey,
+                                hideNav: subItem.hideNav,
+                                isAvailableInEA: subItem.isAvailableInEA,
+                            },
+                            serverMode,
+                        ),
+                    )
 
-    return filteredNavItems.map((group) => ({
-        ...group,
-        items: group.items.map((item) => {
-            if (item.hasSubMenu && item.subItems) {
-                const filteredSubItems = item.subItems.filter((subItem) =>
-                    filterNavGroupAndItem(
-                        {
-                            forceHideEnvKey: subItem.forceHideEnvKey,
-                            hideNav: subItem.hideNav,
-                            isAvailableInEA: subItem.isAvailableInEA,
-                        },
-                        serverMode,
-                    ),
-                )
-                return { ...item, subItems: filteredSubItems }
-            }
-            return item
-        }),
-    }))
+                    return { ...item, subItems: filteredSubItems }
+                }
+
+                return item
+            })
+
+        return { ...group, items: filteredItems } as NavigationGroupType
+    })
 }