[7.x] New nav (#64018) (#65411)

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

@@ -158,6 +158,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

@@ -123,7 +123,7 @@
     "@elastic/charts": "19.2.0",
     "@elastic/datemath": "5.0.2",
     "@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": "19.2.0",
-    "@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.test.ts

@@ -17,18 +17,18 @@
  * under the License.
  */
 
-import * as Rx from 'rxjs';
-import { take, toArray } from 'rxjs/operators';
 import { shallow } from 'enzyme';
 import React from 'react';
-
+import * as Rx from 'rxjs';
+import { take, toArray } from 'rxjs/operators';
+import { App } from '../application';
 import { applicationServiceMock } from '../application/application_service.mock';
+import { docLinksServiceMock } from '../doc_links/doc_links_service.mock';
 import { httpServiceMock } from '../http/http_service.mock';
 import { injectedMetadataServiceMock } from '../injected_metadata/injected_metadata_service.mock';
 import { notificationServiceMock } from '../notifications/notifications_service.mock';
-import { docLinksServiceMock } from '../doc_links/doc_links_service.mock';
+import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
 import { ChromeService } from './chrome_service';
-import { App } from '../application';
 
 class FakeApp implements App {
   public title = `${this.id} App`;
@@ -51,6 +51,7 @@ function defaultStartDeps(availableApps?: App[]) {
     http: httpServiceMock.createStartContract(),
     injectedMetadata: injectedMetadataServiceMock.createStartContract(),
     notifications: notificationServiceMock.createStartContract(),
+    uiSettings: uiSettingsServiceMock.createStartContract(),
   };
 
   if (availableApps) {

src/core/public/chrome/chrome_service.tsx

@@ -17,27 +17,26 @@
  * under the License.
  */
 
+import { Breadcrumb as EuiBreadcrumb, IconType } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { BehaviorSubject, Observable, ReplaySubject, combineLatest, of, merge } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, Observable, of, ReplaySubject } from 'rxjs';
 import { flatMap, map, takeUntil } from 'rxjs/operators';
 import { parse } from 'url';
-
-import { i18n } from '@kbn/i18n';
-import { IconType, Breadcrumb as EuiBreadcrumb } from '@elastic/eui';
-
-import { InjectedMetadataStart } from '../injected_metadata';
-import { NotificationsStart } from '../notifications';
 import { InternalApplicationStart } from '../application';
+import { DocLinksStart } from '../doc_links';
 import { HttpStart } from '../http';
-
+import { InjectedMetadataStart } from '../injected_metadata';
+import { NotificationsStart } from '../notifications';
+import { IUiSettingsClient } from '../ui_settings';
+import { KIBANA_ASK_ELASTIC_LINK } from './constants';
+import { ChromeDocTitle, DocTitleService } from './doc_title';
+import { ChromeNavControls, NavControlsService } from './nav_controls';
 import { ChromeNavLinks, NavLinksService } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
-import { NavControlsService, ChromeNavControls } from './nav_controls';
-import { DocTitleService, ChromeDocTitle } from './doc_title';
-import { LoadingIndicator, Header } from './ui';
-import { DocLinksStart } from '../doc_links';
+import { Header, LoadingIndicator } from './ui';
+import { NavType } from './ui/header';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
-import { KIBANA_ASK_ELASTIC_LINK } from './constants';
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -84,6 +83,7 @@ interface StartDeps {
   http: HttpStart;
   injectedMetadata: InjectedMetadataStart;
   notifications: NotificationsStart;
+  uiSettings: IUiSettingsClient;
 }
 
 /** @internal */
@@ -136,6 +136,7 @@ export class ChromeService {
     http,
     injectedMetadata,
     notifications,
+    uiSettings,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
 
@@ -160,6 +161,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', {
@@ -197,6 +202,7 @@ export class ChromeService {
             navControlsRight$={navControls.getRight$()}
             onIsLockedUpdate={setIsNavDrawerLocked}
             isLocked$={getIsNavDrawerLocked$}
+            navType$={getNavType$}
           />
         </React.Fragment>
       ),
@@ -257,6 +263,8 @@ export class ChromeService {
       setHelpSupportUrl: (url: string) => helpSupportUrl$.next(url),
 
       getIsNavDrawerLocked$: () => getIsNavDrawerLocked$,
+
+      getNavType$: () => getNavType$,
     };
   }
 
@@ -403,6 +411,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';