New nav

docs/development/core/public/kibana-plugin-core-public.appcategory.id.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [AppCategory](./kibana-plugin-core-public.appcategory.md) &gt; [id](./kibana-plugin-core-public.appcategory.id.md)
+
+## AppCategory.id property
+
+Unique identifier for the categories
+
+<b>Signature:</b>
+
+```typescript
+id: string;
+```

docs/development/core/public/kibana-plugin-core-public.appcategory.md

@@ -18,6 +18,7 @@ export interface AppCategory
 |  --- | --- | --- |
 |  [ariaLabel](./kibana-plugin-core-public.appcategory.arialabel.md) | <code>string</code> | If the visual label isn't appropriate for screen readers, can override it here |
 |  [euiIconType](./kibana-plugin-core-public.appcategory.euiicontype.md) | <code>string</code> | Define an icon to be used for the category If the category is only 1 item, and no icon is defined, will default to the product icon Defaults to initials if no icon is defined |
+|  [id](./kibana-plugin-core-public.appcategory.id.md) | <code>string</code> | Unique identifier for the categories |
 |  [label](./kibana-plugin-core-public.appcategory.label.md) | <code>string</code> | Label used for cateogry name. Also used as aria-label if one isn't set. |
 |  [order](./kibana-plugin-core-public.appcategory.order.md) | <code>number</code> | The order that categories will be sorted in Prefer large steps between categories to allow for further editing (Default categories are in steps of 1000) |
 

docs/development/core/public/kibana-plugin-core-public.chromestart.getnavtype_.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ChromeStart](./kibana-plugin-core-public.chromestart.md) &gt; [getNavType$](./kibana-plugin-core-public.chromestart.getnavtype_.md)
+
+## ChromeStart.getNavType$() method
+
+Get the navigation type TODO \#64541 Can delete
+
+<b>Signature:</b>
+
+```typescript
+getNavType$(): Observable<NavType>;
+```
+<b>Returns:</b>
+
+`Observable<NavType>`
+

docs/development/core/public/kibana-plugin-core-public.chromestart.md

@@ -58,6 +58,7 @@ core.chrome.setHelpExtension(elem => {
 |  [getHelpExtension$()](./kibana-plugin-core-public.chromestart.gethelpextension_.md) | Get an observable of the current custom help conttent |
 |  [getIsNavDrawerLocked$()](./kibana-plugin-core-public.chromestart.getisnavdrawerlocked_.md) | Get an observable of the current locked state of the nav drawer. |
 |  [getIsVisible$()](./kibana-plugin-core-public.chromestart.getisvisible_.md) | Get an observable of the current visibility state of the chrome. |
+|  [getNavType$()](./kibana-plugin-core-public.chromestart.getnavtype_.md) | Get the navigation type TODO \#64541 Can delete |
 |  [removeApplicationClass(className)](./kibana-plugin-core-public.chromestart.removeapplicationclass.md) | Remove a className added with <code>addApplicationClass()</code>. If className is unknown it is ignored. |
 |  [setAppTitle(appTitle)](./kibana-plugin-core-public.chromestart.setapptitle.md) | Sets the current app's title |
 |  [setBadge(badge)](./kibana-plugin-core-public.chromestart.setbadge.md) | Override the current badge |

docs/development/core/public/kibana-plugin-core-public.md

@@ -146,6 +146,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [IContextProvider](./kibana-plugin-core-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. |
 |  [IToasts](./kibana-plugin-core-public.itoasts.md) | Methods for adding and removing global toast messages. See [ToastsApi](./kibana-plugin-core-public.toastsapi.md)<!-- -->. |
 |  [MountPoint](./kibana-plugin-core-public.mountpoint.md) | A function that should mount DOM content inside the provided container element and return a handler to unmount it. |
+|  [NavType](./kibana-plugin-core-public.navtype.md) |  |
 |  [PluginInitializer](./kibana-plugin-core-public.plugininitializer.md) | The <code>plugin</code> export at the root of a plugin's <code>public</code> directory should conform to this interface. |
 |  [PluginOpaqueId](./kibana-plugin-core-public.pluginopaqueid.md) |  |
 |  [PublicUiSettingsParams](./kibana-plugin-core-public.publicuisettingsparams.md) | A sub-set of [UiSettingsParams](./kibana-plugin-core-public.uisettingsparams.md) exposed to the client-side. |

docs/development/core/public/kibana-plugin-core-public.navtype.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [NavType](./kibana-plugin-core-public.navtype.md)
+
+## NavType type
+
+<b>Signature:</b>
+
+```typescript
+export declare type NavType = 'modern' | 'legacy';
+```

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,

package.json

@@ -125,7 +125,7 @@
     "@elastic/charts": "18.4.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.8.0",
-    "@elastic/eui": "22.3.0",
+    "@elastic/eui": "22.3.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.4.0",

packages/kbn-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "18.4.2",
-    "@elastic/eui": "22.3.0",
+    "@elastic/eui": "22.3.1",
     "@kbn/i18n": "1.0.0",
     "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.7.9",

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,25 +1,12 @@
-@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) {
-  top: $euiHeaderChildSize;
-  left: $euiHeaderChildSize;
-
-  // HOTFIX: Temporary fix for flyouts not inside portals
-  // SASSTODO: Find an actual solution
-  .euiFlyout {
-    top: $euiHeaderChildSize;
-    height: calc(100% - #{$euiHeaderChildSize});
-  }
-}
-
 .chrHeaderHelpMenu__version {
   text-transform: none;
 }
@@ -29,19 +16,8 @@
   margin-right: $euiSize;
 }
 
-// Mobile header is smaller
-@include euiBreakpoint('xs', 's') {
-  .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
-    left: 0;
-  }
-}
-
-@include euiBreakpoint('xl') {
-  .chrHeaderWrapper--navIsLocked {
-    ~ .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
-      transition: left $euiAnimSpeedFast $euiAnimSlightResistance;
-    }
+.header__toggleNavButtonSection {
+  .euiBody--collapsibleNavIsDocked & {
+    display: none;
   }
 }