Core: add hideFromMenu for child items (#22494)

public/app/core/components/sidemenu/SideMenuDropDown.test.tsx

@@ -32,4 +32,19 @@ describe('Render', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should not render hideFromMenu children', () => {
+    const wrapper = setup({
+      link: {
+        text: 'link',
+        children: [
+          { id: 1, hideFromMenu: false },
+          { id: 2, hideFromMenu: true },
+          { id: 3, hideFromMenu: false },
+        ],
+      },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import _ from 'lodash';
 import DropDownChild from './DropDownChild';
 import { NavModelItem } from '@grafana/data';
 
@@ -8,6 +9,11 @@ interface Props {
 
 const SideMenuDropDown: FC<Props> = props => {
   const { link } = props;
+  let childrenLinks: NavModelItem[] = [];
+  if (link.children) {
+    childrenLinks = _.filter(link.children, item => !item.hideFromMenu);
+  }
+
   return (
     <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
       <li className="side-menu-header">
@@ -15,10 +21,9 @@ const SideMenuDropDown: FC<Props> = props => {
           <span className="sidemenu-item-text">{link.text}</span>
         </a>
       </li>
-      {link.children &&
+      {childrenLinks.map((child, index) => {
-        link.children.map((child, index) => {
+        return <DropDownChild child={child} key={`${child.url}-${index}`} />;
-          return <DropDownChild child={child} key={`${child.url}-${index}`} />;
+      })}
-        })}
     </ul>
   );
 };

public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap

@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Render should not render hideFromMenu children 1`] = `
+<ul
+  className="dropdown-menu dropdown-menu--sidemenu"
+  role="menu"
+>
+  <li
+    className="side-menu-header"
+  >
+    <a
+      className="side-menu-header-link"
+    >
+      <span
+        className="sidemenu-item-text"
+      >
+        link
+      </span>
+    </a>
+  </li>
+  <DropDownChild
+    child={
+      Object {
+        "hideFromMenu": false,
+        "id": 1,
+      }
+    }
+    key="undefined-0"
+  />
+  <DropDownChild
+    child={
+      Object {
+        "hideFromMenu": false,
+        "id": 3,
+      }
+    }
+    key="undefined-1"
+  />
+</ul>
+`;
+
 exports[`Render should render children 1`] = `
 <ul
   className="dropdown-menu dropdown-menu--sidemenu"