Publish getIsNavDrawerLocked$ method on core chrome service.

docs/development/core/public/kibana-plugin-core-public.chromestart.getisnavdrawerlocked_.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; [getIsNavDrawerLocked$](./kibana-plugin-core-public.chromestart.getisnavdrawerlocked_.md)
+
+## ChromeStart.getIsNavDrawerLocked$() method
+
+Get an observable of the current locked state of the nav drawer.
+
+<b>Signature:</b>
+
+```typescript
+getIsNavDrawerLocked$(): Observable<boolean>;
+```
+<b>Returns:</b>
+
+`Observable<boolean>`
+

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

@@ -57,6 +57,7 @@ core.chrome.setHelpExtension(elem => {
 |  [getBreadcrumbs$()](./kibana-plugin-core-public.chromestart.getbreadcrumbs_.md) | Get an observable of the current list of breadcrumbs |
 |  [getHelpExtension$()](./kibana-plugin-core-public.chromestart.gethelpextension_.md) | Get an observable of the current custom help conttent |
 |  [getIsCollapsed$()](./kibana-plugin-core-public.chromestart.getiscollapsed_.md) | Get an observable of the current collapsed state of the chrome. |
+|  [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. |
 |  [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 |

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

@@ -73,6 +73,7 @@ const createStartContractMock = () => {
     getHelpExtension$: jest.fn(),
     setHelpExtension: jest.fn(),
     setHelpSupportUrl: jest.fn(),
+    getIsNavDrawerLocked$: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
   startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
@@ -82,6 +83,7 @@ const createStartContractMock = () => {
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
   startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));
   startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
+  startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));
   return startContract;
 };
 

src/core/public/chrome/chrome_service.tsx

@@ -34,14 +34,15 @@ 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, HeaderWrapper as Header } from './ui';
+import { LoadingIndicator, Header } from './ui';
 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';
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_COLLAPSED_KEY = 'core.chrome.isCollapsed';
+const IS_LOCKED_KEY = 'core.chrome.isLocked';
 
 /** @public */
 export interface ChromeBadge {
@@ -152,12 +153,20 @@ export class ChromeService {
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
     const badge$ = new BehaviorSubject<ChromeBadge | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
+    const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
 
     const navControls = this.navControls.start();
     const navLinks = this.navLinks.start({ application, http });
     const recentlyAccessed = await this.recentlyAccessed.start({ http });
     const docTitle = this.docTitle.start({ document: window.document });
 
+    const setIsNavDrawerLocked = (isLocked: boolean) => {
+      isNavDrawerLocked$.next(isLocked);
+      localStorage.setItem(IS_LOCKED_KEY, `${isLocked}`);
+    };
+
+    const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
+
     if (!this.params.browserSupportsCsp && injectedMetadata.getCspConfig().warnLegacyBrowsers) {
       notifications.toasts.addWarning(
         i18n.translate('core.chrome.legacyBrowserWarning', {
@@ -193,6 +202,8 @@ export class ChromeService {
             recentlyAccessed$={recentlyAccessed.get$()}
             navControlsLeft$={navControls.getLeft$()}
             navControlsRight$={navControls.getRight$()}
+            onIsLockedUpdate={setIsNavDrawerLocked}
+            isLocked$={getIsNavDrawerLocked$}
           />
         </React.Fragment>
       ),
@@ -262,6 +273,8 @@ export class ChromeService {
       },
 
       setHelpSupportUrl: (url: string) => helpSupportUrl$.next(url),
+
+      getIsNavDrawerLocked$: () => getIsNavDrawerLocked$,
     };
   }
 
@@ -413,6 +426,11 @@ export interface ChromeStart {
    * @param url The updated support URL
    */
   setHelpSupportUrl(url: string): void;
+
+  /**
+   * Get an observable of the current locked state of the nav drawer.
+   */
+  getIsNavDrawerLocked$(): Observable<boolean>;
 }
 
 /** @internal */

src/core/public/chrome/ui/header/header.tsx

@@ -30,6 +30,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Component, createRef } from 'react';
+import classnames from 'classnames';
 import * as Rx from 'rxjs';
 import {
   ChromeBadge,
@@ -68,8 +69,8 @@ export interface HeaderProps {
   navControlsLeft$: Rx.Observable<readonly ChromeNavControl[]>;
   navControlsRight$: Rx.Observable<readonly ChromeNavControl[]>;
   basePath: HttpStart['basePath'];
-  isLocked?: boolean;
-  onIsLockedUpdate?: OnIsLockedUpdate;
+  isLocked$: Rx.Observable<boolean>;
+  onIsLockedUpdate: OnIsLockedUpdate;
 }
 
 interface State {
@@ -81,6 +82,7 @@ interface State {
   navControlsLeft: readonly ChromeNavControl[];
   navControlsRight: readonly ChromeNavControl[];
   currentAppId: string | undefined;
+  isLocked: boolean;
 }
 
 export class Header extends Component<HeaderProps, State> {
@@ -99,6 +101,7 @@ export class Header extends Component<HeaderProps, State> {
       navControlsLeft: [],
       navControlsRight: [],
       currentAppId: '',
+      isLocked: false,
     };
   }
 
@@ -109,11 +112,12 @@ export class Header extends Component<HeaderProps, State> {
       this.props.forceAppSwitcherNavigation$,
       this.props.navLinks$,
       this.props.recentlyAccessed$,
-      // Types for combineLatest only handle up to 6 inferred types so we combine these two separately.
+      // Types for combineLatest only handle up to 6 inferred types so we combine these separately.
       Rx.combineLatest(
         this.props.navControlsLeft$,
         this.props.navControlsRight$,
-        this.props.application.currentAppId$
+        this.props.application.currentAppId$,
+        this.props.isLocked$
       )
     ).subscribe({
       next: ([
@@ -122,7 +126,7 @@ export class Header extends Component<HeaderProps, State> {
         forceNavigation,
         navLinks,
         recentlyAccessed,
-        [navControlsLeft, navControlsRight, currentAppId],
+        [navControlsLeft, navControlsRight, currentAppId, isLocked],
       ]) => {
         this.setState({
           appTitle,
@@ -133,6 +137,7 @@ export class Header extends Component<HeaderProps, State> {
           navControlsLeft,
           navControlsRight,
           currentAppId,
+          isLocked,
         });
       },
     });
@@ -181,8 +186,16 @@ export class Header extends Component<HeaderProps, State> {
       return null;
     }
 
+    const className = classnames(
+      'chrHeaderWrapper',
+      {
+        'chrHeaderWrapper--navIsLocked': this.state.isLocked,
+      },
+      'hide-for-sharing'
+    );
+
     return (
-      <header>
+      <header className={className} data-test-subj="headerGlobalNav">
         <EuiHeader>
           <EuiHeaderSection grow={false}>
             <EuiShowFor sizes={['xs', 's']}>
@@ -220,7 +233,7 @@ export class Header extends Component<HeaderProps, State> {
           </EuiHeaderSection>
         </EuiHeader>
         <NavDrawer
-          isLocked={this.props.isLocked}
+          isLocked={this.state.isLocked}
           onIsLockedUpdate={this.props.onIsLockedUpdate}
           navLinks={navLinks}
           chromeNavLinks={this.state.navLinks}

src/core/public/chrome/ui/header/index.ts

@@ -18,7 +18,6 @@
  */
 
 export { Header, HeaderProps } from './header';
-export { HeaderWrapper } from './header_wrapper';
 export {
   ChromeHelpExtensionMenuLink,
   ChromeHelpExtensionMenuCustomLink,

src/core/public/chrome/ui/index.ts

@@ -20,7 +20,6 @@
 export { LoadingIndicator } from './loading_indicator';
 export {
   Header,
-  HeaderWrapper,
   ChromeHelpExtensionMenuLink,
   ChromeHelpExtensionMenuCustomLink,
   ChromeHelpExtensionMenuDiscussLink,

src/core/public/public.api.md

@@ -337,6 +337,7 @@ export interface ChromeStart {
     getBreadcrumbs$(): Observable<ChromeBreadcrumb[]>;
     getHelpExtension$(): Observable<ChromeHelpExtension | undefined>;
     getIsCollapsed$(): Observable<boolean>;
+    getIsNavDrawerLocked$(): Observable<boolean>;
     getIsVisible$(): Observable<boolean>;
     navControls: ChromeNavControls;
     navLinks: ChromeNavLinks;