Project Side Navigation: Use EuiCollapsibleNavBeta component

packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx

@@ -13,7 +13,6 @@ import React from 'react';
 import { HeaderActionMenu } from '../header/header_action_menu';
 
 interface AppMenuBarProps {
-  isOpen: boolean;
   headerActionMenuMounter: { mount: MountPoint<HTMLElement> | undefined };
 }
 export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {

packages/core/chrome/core-chrome-browser-internal/src/ui/project/header.tsx

@@ -12,10 +12,7 @@ import {
   EuiHeaderLogo,
   EuiHeaderSection,
   EuiHeaderSectionItem,
-  EuiHeaderSectionItemButton,
-  EuiIcon,
   EuiLoadingSpinner,
-  htmlIdGenerator,
   useEuiTheme,
   EuiThemeComputed,
 } from '@elastic/eui';
@@ -35,8 +32,7 @@ import { MountPoint } from '@kbn/core-mount-utils-browser';
 import { i18n } from '@kbn/i18n';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { Router } from '@kbn/shared-ux-router';
-import React, { createRef, useCallback, useState } from 'react';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import React, { useCallback } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { debounceTime, Observable, of } from 'rxjs';
 import { useHeaderActionMenuMounter } from '../header/header_action_menu';
@@ -66,13 +62,6 @@ const getHeaderCss = ({ size }: EuiThemeComputed) => ({
       top: 2px;
     `,
   },
-  nav: {
-    toggleNavButton: css`
-      border-right: 1px solid #d3dae6;
-      margin-left: -1px;
-      padding-right: ${size.xs};
-    `,
-  },
 });
 
 type HeaderCss = ReturnType<typeof getHeaderCss>;
@@ -116,7 +105,6 @@ export interface Props {
   prependBasePath: (url: string) => string;
 }
 
-const LOCAL_STORAGE_IS_OPEN_KEY = 'PROJECT_NAVIGATION_OPEN' as const;
 const LOADING_DEBOUNCE_TIME = 80;
 
 type LogoProps = Pick<Props, 'application' | 'homeHref$' | 'loadingCount$' | 'prependBasePath'> & {
@@ -179,9 +167,6 @@ export const ProjectHeader = ({
   docLinks,
   ...observables
 }: Props) => {
-  const [navId] = useState(htmlIdGenerator()());
-  const [isOpen, setIsOpen] = useLocalStorage(LOCAL_STORAGE_IS_OPEN_KEY, true);
-  const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const headerActionMenuMounter = useHeaderActionMenuMounter(observables.actionMenu$);
   const projectsUrl = useObservable(observables.projectsUrl$);
   const { euiTheme } = useEuiTheme();
@@ -202,34 +187,9 @@ export const ProjectHeader = ({
         <div id="globalHeaderBars" data-test-subj="headerGlobalNav" className="header__bars">
           <EuiHeader position="fixed" className="header__firstBar">
             <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem css={headerCss.nav.toggleNavButton}>
-                <Router history={application.history}>
-                  <ProjectNavigation
-                    isOpen={isOpen!}
-                    closeNav={() => {
-                      setIsOpen(false);
-                      if (toggleCollapsibleNavRef.current) {
-                        toggleCollapsibleNavRef.current.focus();
-                      }
-                    }}
-                    button={
-                      <EuiHeaderSectionItemButton
-                        data-test-subj="toggleNavButton"
-                        aria-label={headerStrings.nav.closeNavAriaLabel}
-                        onClick={() => setIsOpen(!isOpen)}
-                        aria-expanded={isOpen!}
-                        aria-pressed={isOpen!}
-                        aria-controls={navId}
-                        ref={toggleCollapsibleNavRef}
-                      >
-                        <EuiIcon type={isOpen ? 'menuLeft' : 'menuRight'} size="m" />
-                      </EuiHeaderSectionItemButton>
-                    }
-                  >
-                    {children}
-                  </ProjectNavigation>
-                </Router>
-              </EuiHeaderSectionItem>
+              <Router history={application.history}>
+                <ProjectNavigation>{children}</ProjectNavigation>
+              </Router>
 
               <EuiHeaderSectionItem>
                 <Logo
@@ -285,7 +245,7 @@ export const ProjectHeader = ({
       </header>
 
       {headerActionMenuMounter.mount && (
-        <AppMenuBar isOpen={isOpen ?? false} headerActionMenuMounter={headerActionMenuMounter} />
+        <AppMenuBar headerActionMenuMounter={headerActionMenuMounter} />
       )}
     </>
   );

packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx

@@ -7,54 +7,16 @@
  */
 
 import React from 'react';
-import { css } from '@emotion/react';
-import { EuiCollapsibleNav, EuiCollapsibleNavProps } from '@elastic/eui';
-
-const SIZE_EXPANDED = 248;
-const SIZE_COLLAPSED = 0;
-
-export interface ProjectNavigationProps {
-  isOpen: boolean;
-  closeNav: () => void;
-  button: EuiCollapsibleNavProps['button'];
-}
-
-export const ProjectNavigation: React.FC<ProjectNavigationProps> = ({
-  children,
-  isOpen,
-  closeNav,
-  button,
-}) => {
-  const collabsibleNavCSS = css`
-    border-inline-end-width: 1,
-    display: flex,
-    flex-direction: row,
-  `;
-
-  const DOCKED_BREAKPOINT = 's' as const;
-  const isVisible = isOpen;
+import { EuiCollapsibleNavBeta } from '@elastic/eui';
 
+export const ProjectNavigation: React.FC = ({ children }) => {
   return (
     <>
       {
-        /* must render the tree to initialize the navigation, even if it shouldn't be visible */
-        !isOpen && <div hidden>{children}</div>
+        /* must render the tree to initialize the navigation, even if hidden internally in EUI */
+        <div hidden>{children}</div>
       }
-      <EuiCollapsibleNav
-        className="projectLayoutSideNav"
-        css={collabsibleNavCSS}
-        isOpen={isVisible /* only affects docked state */}
-        showButtonIfDocked={true}
-        onClose={closeNav}
-        isDocked={true}
-        size={isVisible ? SIZE_EXPANDED : SIZE_COLLAPSED}
-        hideCloseButton={false}
-        dockedBreakpoint={DOCKED_BREAKPOINT}
-        ownFocus={false}
-        button={button}
-      >
-        {isOpen && children}
-      </EuiCollapsibleNav>
+      <EuiCollapsibleNavBeta>{children}</EuiCollapsibleNavBeta>
     </>
   );
 };

packages/core/chrome/core-chrome-browser/src/project_navigation.ts

@@ -68,6 +68,8 @@ export interface ChromeProjectNavigationNode {
   deepLink?: ChromeNavLink;
   /** Optional icon for the navigation node. Note: not all navigation depth will render the icon */
   icon?: string;
+  /** Optional flag to indicate if the node must be treated as a group title */
+  isGroupTitle?: boolean;
   /** Optional children of the navigation node */
   children?: ChromeProjectNavigationNode[];
   /**
@@ -139,6 +141,8 @@ export interface NodeDefinition<
   cloudLink?: CloudLinkId;
   /** Optional icon for the navigation node. Note: not all navigation depth will render the icon */
   icon?: string;
+  /** Optional flag to indicate if the node must be treated as a group title */
+  isGroupTitle?: boolean;
   /** Optional children of the navigation node */
   children?: NonEmptyArray<NodeDefinition<LinkId, Id, ChildrenId>>;
   /**

packages/default-nav/analytics/default_navigation.ts

@@ -21,18 +21,13 @@ export const defaultNavigation: AnalyticsNodeDefinition = {
   icon: 'stats',
   children: [
     {
-      id: 'root',
-      children: [
-        {
-          link: 'discover',
-        },
-        {
-          link: 'dashboards',
-        },
-        {
-          link: 'visualize',
-        },
-      ],
+      link: 'discover',
+    },
+    {
+      link: 'dashboards',
+    },
+    {
+      link: 'visualize',
     },
   ],
 };

packages/default-nav/devtools/default_navigation.ts

@@ -21,21 +21,16 @@ export const defaultNavigation: DevToolsNodeDefinition = {
   icon: 'editorCodeBlock',
   children: [
     {
-      id: 'root',
-      children: [
-        {
-          link: 'dev_tools:console',
-        },
-        {
-          link: 'dev_tools:searchprofiler',
-        },
-        {
-          link: 'dev_tools:grokdebugger',
-        },
-        {
-          link: 'dev_tools:painless_lab',
-        },
-      ],
+      link: 'dev_tools:console',
+    },
+    {
+      link: 'dev_tools:searchprofiler',
+    },
+    {
+      link: 'dev_tools:grokdebugger',
+    },
+    {
+      link: 'dev_tools:painless_lab',
     },
   ],
 };

packages/default-nav/management/default_navigation.ts

@@ -29,13 +29,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
   icon: 'gear',
   children: [
     {
-      id: 'root',
-      title: '',
-      children: [
-        {
-          link: 'monitoring',
-        },
-      ],
+      link: 'monitoring',
     },
     {
       id: 'integration_management',