[Serverless] Add panels to side nav

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -80,6 +80,7 @@ export class ChromeService {
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation = new ProjectNavigationService();
   private mutationObserver: MutationObserver | undefined;
+  private readonly isSideNavCollapsed$ = new BehaviorSubject<boolean>(true);
 
   constructor(private readonly params: ConstructorParams) {}
 
@@ -386,6 +387,9 @@ export class ChromeService {
                 docLinks={docLinks}
                 kibanaVersion={injectedMetadata.getKibanaVersion()}
                 prependBasePath={http.basePath.prepend}
+                toggleSideNav={(isCollapsed) => {
+                  this.isSideNavCollapsed$.next(isCollapsed);
+                }}
               >
                 <SideNavComponent activeNodes={activeNodes} />
               </ProjectHeader>
@@ -508,6 +512,7 @@ export class ChromeService {
       getBodyClasses$: () => bodyClasses$.pipe(takeUntil(this.stop$)),
       setChromeStyle,
       getChromeStyle$: () => chromeStyle$.pipe(takeUntil(this.stop$)),
+      getIsSideNavCollapsed$: () => this.isSideNavCollapsed$.asObservable(),
       project: {
         setHome: setProjectHome,
         setProjectsUrl,

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

@@ -17,13 +17,17 @@ interface AppMenuBarProps {
 }
 export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
   const { euiTheme } = useEuiTheme();
+  const zIndex =
+    typeof euiTheme.levels.header === 'number'
+      ? euiTheme.levels.header - 1 // We want it to appear right below the header
+      : euiTheme.levels.header;
 
   return (
     <div
       className="header__actionMenu"
       data-test-subj="kibanaProjectHeaderActionMenu"
       css={css`
-        z-index: ${euiTheme.levels.header};
+        z-index: ${zIndex};
         background: ${euiTheme.colors.emptyShade};
         border-bottom: ${euiTheme.border.thin};
         display: flex;

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

@@ -36,6 +36,7 @@ describe('Header', () => {
     navControlsCenter$: Rx.of([]),
     navControlsRight$: Rx.of([]),
     prependBasePath: (str) => `hello/world/${str}`,
+    toggleSideNav: jest.fn(),
   };
 
   it('renders', async () => {

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

@@ -110,6 +110,7 @@ export interface Props {
   navControlsCenter$: Observable<ChromeNavControl[]>;
   navControlsRight$: Observable<ChromeNavControl[]>;
   prependBasePath: (url: string) => string;
+  toggleSideNav: (isCollapsed: boolean) => void;
 }
 
 const LOADING_DEBOUNCE_TIME = 80;
@@ -172,6 +173,7 @@ export const ProjectHeader = ({
   children,
   prependBasePath,
   docLinks,
+  toggleSideNav,
   ...observables
 }: Props) => {
   const headerActionMenuMounter = useHeaderActionMenuMounter(observables.actionMenu$);
@@ -196,7 +198,7 @@ export const ProjectHeader = ({
           <EuiHeader position="fixed" className="header__firstBar">
             <EuiHeaderSection grow={false}>
               <Router history={application.history}>
-                <ProjectNavigation>{children}</ProjectNavigation>
+                <ProjectNavigation toggleSideNav={toggleSideNav}>{children}</ProjectNavigation>
               </Router>
 
               <EuiHeaderSectionItem>

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

@@ -6,24 +6,39 @@
  * Side Public License, v 1.
  */
 
+import React, { useEffect, useRef } from 'react';
 import { EuiCollapsibleNavBeta } from '@elastic/eui';
-import React from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 
 const LOCAL_STORAGE_IS_COLLAPSED_KEY = 'PROJECT_NAVIGATION_COLLAPSED' as const;
 
-export const ProjectNavigation: React.FC = ({ children }) => {
+export const ProjectNavigation: React.FC<{
+  toggleSideNav: (isVisible: boolean) => void;
+}> = ({ children, toggleSideNav }) => {
+  const isMounted = useRef(false);
   const [isCollapsed, setIsCollapsed] = useLocalStorage(LOCAL_STORAGE_IS_COLLAPSED_KEY, false);
   const onCollapseToggle = (nextIsCollapsed: boolean) => {
     setIsCollapsed(nextIsCollapsed);
+    toggleSideNav(nextIsCollapsed);
   };
 
+  useEffect(() => {
+    if (!isMounted.current && isCollapsed !== undefined) {
+      toggleSideNav(isCollapsed);
+    }
+    isMounted.current = true;
+  }, [isCollapsed, toggleSideNav]);
+
   return (
     <EuiCollapsibleNavBeta
       data-test-subj="projectLayoutSideNav"
       initialIsCollapsed={isCollapsed}
       onCollapseToggle={onCollapseToggle}
-      css={isCollapsed ? { display: 'none;' } : {}}
+      css={
+        isCollapsed
+          ? { display: 'none;' }
+          : { overflow: 'visible', clipPath: 'polygon(0 0, 300% 0, 300% 100%, 0 100%)' }
+      }
     >
       {children}
     </EuiCollapsibleNavBeta>

packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts

@@ -50,6 +50,7 @@ const createStartContractMock = () => {
     setBadge: jest.fn(),
     getBreadcrumbs$: jest.fn(),
     setBreadcrumbs: jest.fn(),
+    getIsSideNavCollapsed$: jest.fn(),
     getBreadcrumbsAppendExtension$: jest.fn(),
     setBreadcrumbsAppendExtension: jest.fn(),
     getGlobalHelpExtensionMenuLinks$: jest.fn(),

packages/core/chrome/core-chrome-browser/index.ts

@@ -37,8 +37,10 @@ export type {
   CloudLinkId,
   SideNavCompProps,
   SideNavComponent,
+  SideNavNodeStatus,
   ChromeProjectBreadcrumb,
   ChromeSetProjectBreadcrumbsParams,
   NodeDefinition,
   NodeDefinitionWithChildren,
+  NodeRenderAs,
 } from './src';

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

@@ -171,4 +171,9 @@ export interface ChromeStart {
    * Get an observable of the current style type of the chrome.
    */
   getChromeStyle$(): Observable<ChromeStyle>;
+
+  /**
+   * Get an observable of the current collapsed state of the side nav.
+   */
+  getIsSideNavCollapsed$(): Observable<boolean>;
 }

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

@@ -36,8 +36,10 @@ export type {
   CloudLinkId,
   SideNavCompProps,
   SideNavComponent,
+  SideNavNodeStatus,
   ChromeSetProjectBreadcrumbsParams,
   ChromeProjectBreadcrumb,
   NodeDefinition,
   NodeDefinitionWithChildren,
+  RenderAs as NodeRenderAs,
 } from './project_navigation';

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

@@ -8,7 +8,7 @@
 
 import type { ComponentType } from 'react';
 import type { Location } from 'history';
-import { EuiAccordionProps } from '@elastic/eui';
+import { EuiAccordionProps, IconType } from '@elastic/eui';
 import type { AppId as DevToolsApp, DeepLinkId as DevToolsLink } from '@kbn/deeplinks-devtools';
 import type {
   AppId as AnalyticsApp,
@@ -49,6 +49,10 @@ export type AppDeepLinkId =
 /** @public */
 export type CloudLinkId = 'userAndRoles' | 'performance' | 'billingAndSub' | 'deployment';
 
+export type SideNavNodeStatus = 'hidden' | 'visible';
+
+export type RenderAs = 'block' | 'accordion' | 'panelOpener' | 'item';
+
 export type GetIsActiveFn = (params: {
   /** The current path name including the basePath + hash value but **without** any query params */
   pathNameSerialized: string;
@@ -58,8 +62,99 @@ export type GetIsActiveFn = (params: {
   prepend: (path: string) => string;
 }) => boolean;
 
+/**
+ * Base definition of navigation nodes. A node can either be a "group" or an "item".
+ * Each have commmon properties and specific properties.
+ */
+interface NodeDefinitionBase {
+  /**
+   * Optional icon for the navigation node. Note: not all navigation depth will render the icon
+   */
+  icon?: IconType;
+  /**
+   * href for absolute links only. Internal links should use "link".
+   */
+  href?: string;
+  /**
+   * Optional status to indicate if the breadcrumb should be hidden when this node is active.
+   * @default 'visible'
+   */
+  breadcrumbStatus?: 'hidden' | 'visible';
+  /**
+   * Optional status to for the side navigation. "hidden" and "visible" are self explanatory.
+   * The `renderAsItem` status is _only_ for group nodes (nodes with children declared or with
+   * the "nodeType" set to `group`) and allow to render the node as an "item" instead of the head of
+   * a group. This is usefull to have sub-pages declared in the tree that will correctly be mapped
+   * in the Breadcrumbs, but are not rendered in the side navigation.
+   * @default 'visible'
+   */
+  sideNavStatus?: SideNavNodeStatus;
+  /**
+   * Optional function to get the active state. This function is called whenever the location changes.
+   */
+  getIsActive?: GetIsActiveFn;
+  /**
+   * ----------------------------------------------------------------------------------------------
+   * ------------------------------- GROUP NODES ONLY PROPS ---------------------------------------
+   * ----------------------------------------------------------------------------------------------
+   */
+  /**
+   * ["group" nodes only] Optional flag to indicate if the node must be treated as a group title.
+   * Can not be used with `children`
+   */
+  isGroupTitle?: boolean;
+  /**
+   * ["group" nodes only] Property to indicate how the group should be rendered.
+   * - Accordion: wraps the items in an EuiAccordion
+   * - PanelOpener: renders a button to open a panel on the right of the side nav
+   * - item: renders the group as an item in the side nav
+   * @default 'block'
+   */
+  renderAs?: RenderAs;
+  /**
+   * ["group" nodes only] Optional flag to indicate if a horizontal rule should be rendered after the node.
+   * Note: this property is currently only used for (1) "group" nodes and (2) in the navigation
+   * panel opening on the right of the side nav.
+   */
+  appendHorizontalRule?: boolean;
+  /**
+   * ["group" nodes only] Temp prop. Will be removed once the new navigation is fully implemented.
+   */
+  accordionProps?: Partial<EuiAccordionProps>;
+  /**
+   * ----------------------------------------------------------------------------------------------
+   * -------------------------------- ITEM NODES ONLY PROPS ---------------------------------------
+   * ----------------------------------------------------------------------------------------------
+   */
+  /**
+   * ["item" nodes only] Optional flag to indicate if the target page should be opened in a new Browser tab.
+   * Note: this property is currently only used in the navigation panel opening on the right of the side nav.
+   */
+  openInNewTab?: boolean;
+  /**
+   * ["item" nodes only] Optional flag to indicate if a badge should be rendered next to the text.
+   * Note: this property is currently only used in the navigation panel opening on the right of the side nav.
+   */
+  withBadge?: boolean;
+  /**
+   * ["item" nodes only] If `withBadge` is true, this object can be used to customize the badge.
+   */
+  badgeOptions?: {
+    /** The text of the badge. Default: "Beta" */
+    text?: string;
+  };
+}
+
 /** @public */
-export interface ChromeProjectNavigationNode {
+/**
+ * Chrome project navigation node. This is the tree definition stored in the Chrome service
+ * that is generated based on the NodeDefinition below.
+ * Some of the process that occurs between the 2 are:
+ * - "link" prop get converted to existing ChromNavLink
+ * - "path" is added to each node based on where it is located in the tree
+ * - "isActive" state is set for each node if its URL matches the current location
+ */
+export interface ChromeProjectNavigationNode extends NodeDefinitionBase {
   /** Optional id, if not passed a "link" must be provided. */
   id: string;
   /** Optional title. If not provided and a "link" is provided the title will be the Deep link title */
@@ -68,32 +163,15 @@ export interface ChromeProjectNavigationNode {
   path: string[];
   /** App id or deeplink id */
   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[];
   /**
-   * href for absolute links only. Internal links should use "link".
+   * Optional children of the navigation node. Once a node has "children" defined it is
+   * considered a "group" node.
    */
-  href?: string;
+  children?: ChromeProjectNavigationNode[];
   /**
    * Flag to indicate if the node is currently active.
    */
   isActive?: boolean;
-  /**
-   * Optional function to get the active state. This function is called whenever the location changes.
-   */
-  getIsActive?: GetIsActiveFn;
-
-  /**
-   * Optional flag to indicate if the breadcrumb should be hidden when this node is active.
-   * @default 'visible'
-   */
-  breadcrumbStatus?: 'hidden' | 'visible';
-
-  accordionProps?: Partial<EuiAccordionProps>;
 }
 
 /** @public */
@@ -120,7 +198,8 @@ export interface ChromeSetProjectBreadcrumbsParams {
   absolute: boolean;
 }
 
-type NonEmptyArray<T> = [T, ...T[]];
+// --- NOTE: The following types are the ones that the consumer uses to configure their navigation.
+// ---       They are converted to the ChromeProjectNavigationNode type above.
 
 /**
  * @public
@@ -134,7 +213,7 @@ export interface NodeDefinition<
   LinkId extends AppDeepLinkId = AppDeepLinkId,
   Id extends string = string,
   ChildrenId extends string = Id
-> {
+> extends NodeDefinitionBase {
   /** Optional id, if not passed a "link" must be provided. */
   id?: Id;
   /** Optional title. If not provided and a "link" is provided the title will be the Deep link title */
@@ -143,31 +222,8 @@ export interface NodeDefinition<
   link?: LinkId;
   /** Cloud link id */
   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.
-   * Can not be used with `children`
-   */
-  isGroupTitle?: boolean;
   /** Optional children of the navigation node. Can not be used with `isGroupTitle` */
-  children?: NonEmptyArray<NodeDefinition<LinkId, Id, ChildrenId>>;
-  /**
-   * Use href for absolute links only. Internal links should use "link".
-   */
-  href?: string;
-  /**
-   * Optional function to get the active state. This function is called whenever the location changes.
-   */
-  getIsActive?: GetIsActiveFn;
-
-  /**
-   * Optional flag to indicate if the breadcrumb should be hidden when this node is active.
-   * @default 'visible'
-   */
-  breadcrumbStatus?: 'hidden' | 'visible';
-
-  accordionProps?: Partial<EuiAccordionProps>;
+  children?: Array<NodeDefinition<LinkId, Id, ChildrenId>>;
 }
 
 /**

packages/shared-ux/chrome/navigation/index.ts

@@ -12,11 +12,15 @@ export { DefaultNavigation, getPresets, Navigation } from './src/ui';
 
 export type {
   GroupDefinition,
+  PresetDefinition,
+  ItemDefinition,
   NavigationGroupPreset,
   NavigationTreeDefinition,
   ProjectNavigationDefinition,
   RecentlyAccessedDefinition,
   RootNavigationItemDefinition,
+  PanelComponentProps,
+  PanelContent,
 } from './src/ui';
 
 export type { NavigationServices } from './types';

packages/shared-ux/chrome/navigation/mocks/src/jest.ts

@@ -29,6 +29,7 @@ export const getServicesMock = ({
     navigateToUrl,
     onProjectNavigationChange: jest.fn(),
     activeNodes$: of(activeNodes),
+    isSideNavCollapsed: false,
     cloudLinks: {
       billingAndSub: {
         title: 'Mock Billing & Subscriptions',