New nav

docs/management/advanced-options.asciidoc

@@ -68,6 +68,9 @@ into the document when displaying it.
 `metrics:max_buckets`:: The maximum numbers of buckets that a single
 data source can return. This might arise when the user selects a
 short interval (for example, 1s) for a long time period (1 year).
+`pageNavigation`:: The style of navigation menu for Kibana.
+Choices are Legacy, the legacy style where every plugin is represented in the nav,
+and Modern, a new format that bundles related plugins together in flyaway nested navigation.
 `query:allowLeadingWildcards`:: Allows a wildcard (*) as the first character
 in a query clause. Only applies when experimental query features are
 enabled in the query bar. To disallow leading wildcards in Lucene queries,

src/core/public/_core.scss

@@ -6,4 +6,10 @@
   overflow-x: hidden;
   min-width: 100%;
   min-height: 100%;
+
+  // TODO remove when EUI is updated
+  // Patch from eui#3386 or v23.2.0
+  &.euiBody--headerIsFixed {
+    padding-top: 49px;
+  }
 }

src/core/public/chrome/chrome_service.mock.ts

@@ -23,7 +23,8 @@ import {
   ChromeBreadcrumb,
   ChromeService,
   InternalChromeStart,
-} from './chrome_service';
+  NavType,
+} from './';
 
 const createStartContractMock = () => {
   const startContract: DeeplyMockedKeys<InternalChromeStart> = {
@@ -72,6 +73,7 @@ const createStartContractMock = () => {
     setHelpExtension: jest.fn(),
     setHelpSupportUrl: jest.fn(),
     getIsNavDrawerLocked$: jest.fn(),
+    getNavType$: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
   startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
@@ -81,6 +83,7 @@ const createStartContractMock = () => {
   startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));
   startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));
+  startContract.getNavType$.mockReturnValue(new BehaviorSubject('modern' as NavType));
   return startContract;
 };
 

src/core/public/chrome/chrome_service.tsx

@@ -39,6 +39,7 @@ import { DocLinksStart } from '../doc_links';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 import { KIBANA_ASK_ELASTIC_LINK } from './constants';
 import { IUiSettingsClient } from '../ui_settings';
+import { NavType } from './ui/header';
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -165,6 +166,10 @@ export class ChromeService {
 
     const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
 
+    // TODO #64541
+    // Can delete
+    const getNavType$ = uiSettings.get$('pageNavigation').pipe(takeUntil(this.stop$));
+
     if (!this.params.browserSupportsCsp && injectedMetadata.getCspConfig().warnLegacyBrowsers) {
       notifications.toasts.addWarning(
         i18n.translate('core.chrome.legacyBrowserWarning', {
@@ -202,6 +207,7 @@ export class ChromeService {
             navControlsRight$={navControls.getRight$()}
             onIsLockedUpdate={setIsNavDrawerLocked}
             isLocked$={getIsNavDrawerLocked$}
+            navType$={getNavType$}
           />
         </React.Fragment>
       ),
@@ -262,6 +268,8 @@ export class ChromeService {
       setHelpSupportUrl: (url: string) => helpSupportUrl$.next(url),
 
       getIsNavDrawerLocked$: () => getIsNavDrawerLocked$,
+
+      getNavType$: () => getNavType$,
     };
   }
 
@@ -408,6 +416,13 @@ export interface ChromeStart {
    * Get an observable of the current locked state of the nav drawer.
    */
   getIsNavDrawerLocked$(): Observable<boolean>;
+
+  /**
+   * Get the navigation type
+   * TODO #64541
+   * Can delete
+   */
+  getNavType$(): Observable<NavType>;
 }
 
 /** @internal */

src/core/public/chrome/index.ts

@@ -33,6 +33,7 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
 } from './ui/header/header_help_menu';
+export { NavType } from './ui';
 export { ChromeNavLink, ChromeNavLinks, ChromeNavLinkUpdateableFields } from './nav_links';
 export { ChromeRecentlyAccessed, ChromeRecentlyAccessedHistoryItem } from './recently_accessed';
 export { ChromeNavControl, ChromeNavControls } from './nav_controls';

src/core/public/chrome/ui/header/_index.scss

@@ -1,14 +1,18 @@
 @import '@elastic/eui/src/components/header/variables';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
-.chrHeaderWrapper {
+// TODO #64541
+// Delete this block
+.chrHeaderWrapper:not(.headerWrapper) {
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 10;
 }
 
-.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+// TODO #64541
+// Delete this block
+.chrHeaderWrapper:not(.headerWrapper) ~ .app-wrapper:not(.hidden-chrome) {
   top: $euiHeaderChildSize;
   left: $euiHeaderChildSize;
 
@@ -30,14 +34,18 @@
 }
 
 // Mobile header is smaller
+// TODO #64541
+// Delete this block
 @include euiBreakpoint('xs', 's') {
-  .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+  .chrHeaderWrapper:not(.headerWrapper) ~ .app-wrapper:not(.hidden-chrome) {
     left: 0;
   }
 }
 
+// TODO #64541
+// Delete this block
 @include euiBreakpoint('xl') {
-  .chrHeaderWrapper--navIsLocked {
+  .chrHeaderWrapper--navIsLocked:not(.headerWrapper) {
     ~ .app-wrapper:not(.hidden-chrome) {
       // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
       left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important