[Serverless nav] Handle groups and vertical space

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

@@ -43,4 +43,5 @@ export type {
   NodeDefinition,
   NodeDefinitionWithChildren,
   NodeRenderAs,
+  EuiThemeSize,
 } from './src';

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

@@ -42,4 +42,5 @@ export type {
   NodeDefinition,
   NodeDefinitionWithChildren,
   RenderAs as NodeRenderAs,
+  EuiThemeSize,
 } 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, IconType } from '@elastic/eui';
+import type { EuiAccordionProps, EuiThemeSizes, IconType } from '@elastic/eui';
 import type { AppId as DevToolsApp, DeepLinkId as DevToolsLink } from '@kbn/deeplinks-devtools';
 import type {
   AppId as AnalyticsApp,
@@ -53,6 +53,8 @@ export type SideNavNodeStatus = 'hidden' | 'visible';
 
 export type RenderAs = 'block' | 'accordion' | 'panelOpener' | 'item';
 
+export type EuiThemeSize = Exclude<typeof EuiThemeSizes[number], 'base' | 'xxs' | 'xxxl' | 'xxxxl'>;
+
 export type GetIsActiveFn = (params: {
   /** The current path name including the basePath + hash value but **without** any query params */
   pathNameSerialized: string;
@@ -93,16 +95,15 @@ interface NodeDefinitionBase {
    * Optional function to get the active state. This function is called whenever the location changes.
    */
   getIsActive?: GetIsActiveFn;
+  /**
+   * Add vertical space before this node
+   */
+  spaceBefore?: EuiThemeSize | null;
   /**
    * ----------------------------------------------------------------------------------------------
    * ------------------------------- 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

packages/default-nav/analytics/default_navigation.ts

@@ -19,6 +19,7 @@ export const defaultNavigation: AnalyticsNodeDefinition = {
     defaultMessage: 'Data exploration',
   }),
   icon: 'stats',
+  renderAs: 'accordion',
   children: [
     {
       link: 'discover',

packages/default-nav/devtools/default_navigation.ts

@@ -19,6 +19,7 @@ export const defaultNavigation: DevToolsNodeDefinition = {
   }),
   id: 'rootNav:devtools',
   icon: 'editorCodeBlock',
+  renderAs: 'accordion',
   children: [
     {
       link: 'dev_tools:console',

packages/default-nav/management/default_navigation.ts

@@ -27,6 +27,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
     defaultMessage: 'Management',
   }),
   icon: 'gear',
+  renderAs: 'accordion',
   children: [
     {
       link: 'monitoring',
@@ -36,6 +37,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
       title: i18n.translate('defaultNavigation.management.integrationManagement', {
         defaultMessage: 'Integration management',
       }),
+      renderAs: 'accordion',
       children: [
         {
           link: 'integrations',
@@ -53,12 +55,14 @@ export const defaultNavigation: ManagementNodeDefinition = {
       title: i18n.translate('defaultNavigation.management.stackManagement', {
         defaultMessage: 'Stack management',
       }),
+      renderAs: 'accordion',
       children: [
         {
           id: 'ingest',
           title: i18n.translate('defaultNavigation.management.ingest', {
             defaultMessage: 'Ingest',
           }),
+          renderAs: 'accordion',
           children: [
             {
               link: 'management:ingest_pipelines',
@@ -73,6 +77,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
           title: i18n.translate('defaultNavigation.management.stackManagementData', {
             defaultMessage: 'Data',
           }),
+          renderAs: 'accordion',
           children: [
             {
               link: 'management:index_management',
@@ -87,6 +92,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
           title: i18n.translate('defaultNavigation.management.alertAndInsights', {
             defaultMessage: 'Alerts and insights',
           }),
+          renderAs: 'accordion',
           children: [
             {
               // Rules
@@ -108,6 +114,7 @@ export const defaultNavigation: ManagementNodeDefinition = {
         {
           id: 'kibana',
           title: 'Kibana',
+          renderAs: 'accordion',
           children: [
             {
               link: 'management:dataViews',

packages/default-nav/ml/default_navigation.ts

@@ -38,6 +38,7 @@ export const defaultNavigation: MlNodeDefinition = {
         defaultMessage: 'Anomaly Detection',
       }),
       id: 'anomaly_detection',
+      renderAs: 'accordion',
       children: [
         {
           title: i18n.translate('defaultNavigation.ml.jobs', {
@@ -61,6 +62,7 @@ export const defaultNavigation: MlNodeDefinition = {
       title: i18n.translate('defaultNavigation.ml.dataFrameAnalytics', {
         defaultMessage: 'Data Frame Analytics',
       }),
+      renderAs: 'accordion',
       children: [
         {
           title: 'Jobs',
@@ -79,6 +81,7 @@ export const defaultNavigation: MlNodeDefinition = {
       title: i18n.translate('defaultNavigation.ml.modelManagement', {
         defaultMessage: 'Model Management',
       }),
+      renderAs: 'accordion',
       children: [
         {
           link: 'ml:nodesOverview',
@@ -93,6 +96,7 @@ export const defaultNavigation: MlNodeDefinition = {
       title: i18n.translate('defaultNavigation.ml.dataVisualizer', {
         defaultMessage: 'Data Visualizer',
       }),
+      renderAs: 'accordion',
       children: [
         {
           title: i18n.translate('defaultNavigation.ml.file', {
@@ -119,6 +123,7 @@ export const defaultNavigation: MlNodeDefinition = {
       title: i18n.translate('defaultNavigation.ml.aiopsLabs', {
         defaultMessage: 'AIOps labs',
       }),
+      renderAs: 'accordion',
       children: [
         {
           link: 'ml:logRateAnalysis',