Fix dashboard active state & breadcrumbs

elastic · Mar 5, 2025 · 5c929cd · 5c929cd
1 parent a5dbe5c
commit 5c929cd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/x-pack/solutions/security/packages/navigation/src/constants.ts b/x-pack/solutions/security/packages/navigation/src/constants.ts
@@ -30,6 +30,8 @@ export enum LinkCategoryType {
  * The path should not be used for links displayed in the main left navigation, since highlighting won't work.
  **/
 export enum ExternalPageName {
+  // Dashboards
+  dashboards = 'dashboards',
   // Discover
   discover = 'discover:',
   // Osquery

diff --git a/...ions/security/plugins/security_solution/public/app/solution_navigation/navigation_tree.ts b/...ions/security/plugins/security_solution/public/app/solution_navigation/navigation_tree.ts
@@ -18,7 +18,11 @@ import {
   isAccordionLinkCategory,
 } from '@kbn/security-solution-navigation';
 import type { SolutionPageName, SolutionLinkCategory, SolutionNavLink } from '../../common/links';
-import { getNavLinkIdFromSolutionPageName, isBreadcrumbHidden } from './util';
+import {
+  getNavLinkIdFromSolutionPageName,
+  isBreadcrumbHidden,
+  isSideNavStatusHidden,
+} from './util';
 import { SOLUTION_NAME } from '../../common/translations';
 
 export const formatNavigationTree = (
@@ -51,22 +55,24 @@ export const formatNavigationTree = (
 
 const formatNodesFromLinks = (
   solutionNavLinks: SolutionNavLink[],
-  parentCategories?: Readonly<Array<LinkCategory<SolutionPageName>>>
+  parentCategories: Readonly<Array<LinkCategory<SolutionPageName>>>,
+  parentId?: SolutionPageName
 ): NodeDefinition[] => {
   const nodes: NodeDefinition[] = [];
   if (parentCategories?.length) {
     parentCategories.forEach((category) => {
-      nodes.push(...formatNodesFromLinksWithCategory(solutionNavLinks, category));
+      nodes.push(...formatNodesFromLinksWithCategory(solutionNavLinks, category, parentId));
     }, []);
   } else {
-    nodes.push(...formatNodesFromLinksWithoutCategory(solutionNavLinks));
+    nodes.push(...formatNodesFromLinksWithoutCategory(solutionNavLinks, parentId));
   }
   return nodes;
 };
 
 const formatNodesFromLinksWithCategory = (
   solutionNavLinks: SolutionNavLink[],
-  category: LinkCategory<SolutionPageName>
+  category: LinkCategory<SolutionPageName>,
+  parentId?: SolutionPageName
 ): NodeDefinition[] => {
   if (!category?.linkIds) {
     return [];
@@ -76,7 +82,7 @@ const formatNodesFromLinksWithCategory = (
     const children = category.linkIds.reduce<NodeDefinition[]>((acc, linkId) => {
       const solutionNavLink = solutionNavLinks.find(({ id }) => id === linkId);
       if (solutionNavLink != null) {
-        acc.push(createNodeFromSolutionNavLink(solutionNavLink));
+        acc.push(createNodeFromSolutionNavLink(solutionNavLink, parentId));
       }
       return acc;
     }, []);
@@ -99,23 +105,29 @@ const formatNodesFromLinksWithCategory = (
 };
 
 const formatNodesFromLinksWithoutCategory = (
-  solutionNavLinks: SolutionNavLink[]
-): NodeDefinition[] =>
-  solutionNavLinks.map((solutionNavLink) => createNodeFromSolutionNavLink(solutionNavLink));
+  solutionNavLinks: SolutionNavLink[],
+  parentId?: SolutionPageName
+): NodeDefinition[] => {
+  return solutionNavLinks.map((solutionNavLink) =>
+    createNodeFromSolutionNavLink(solutionNavLink, parentId)
+  );
+};
 
-const createNodeFromSolutionNavLink = (solutionNavLink: SolutionNavLink): NodeDefinition => {
+const createNodeFromSolutionNavLink = (
+  solutionNavLink: SolutionNavLink,
+  parentId?: SolutionPageName
+): NodeDefinition => {
   const { id, title, links, categories, disabled } = solutionNavLink;
   const link = getNavLinkIdFromSolutionPageName(id);
   const node: NodeDefinition = {
     id,
     link: link as AppDeepLinkId,
     title,
     ...(isBreadcrumbHidden(id) && { breadcrumbStatus: 'hidden' }),
-    ...(disabled && { sideNavStatus: 'hidden' }),
+    ...((isSideNavStatusHidden(id, parentId) || disabled) && { sideNavStatus: 'hidden' }),
   };
-  // do not create child nav nodes for "Dashboards"
-  if (links?.length && id !== 'dashboards') {
-    node.children = formatNodesFromLinks(links, categories);
+  if (links?.length) {
+    node.children = formatNodesFromLinks(links, categories ?? [], id);
   }
   return node;
 };

diff --git a/x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/util.ts b/x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/util.ts
@@ -49,3 +49,11 @@ export const isBreadcrumbHidden = (id: SolutionPageName): boolean =>
   HIDDEN_BREADCRUMBS.has(id) ||
   /* management sub-pages set their breadcrumbs themselves, the main Management breadcrumb is configured with our navigationTree definition */
   (id.startsWith(ExternalPageName.management) && id !== ExternalPageName.management);
+
+export const isSideNavStatusHidden = (
+  _id: SolutionPageName,
+  parentId?: SolutionPageName
+): boolean => {
+  /* in solution navigation, dashboard should simply navigate to a landing page, rather than showing children */
+  return parentId === ExternalPageName.dashboards;
+};