set and use isNavLocked observable

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

@@ -56,6 +56,8 @@ const createStartContractMock = () => {
     getIsVisible$: jest.fn(),
     setIsCollapsed: jest.fn(),
     getIsCollapsed$: jest.fn(),
+    setIsNavLocked: jest.fn(),
+    getIsNavLocked$: jest.fn(),
     addApplicationClass: jest.fn(),
     removeApplicationClass: jest.fn(),
     getApplicationClasses$: jest.fn(),
@@ -70,6 +72,7 @@ const createStartContractMock = () => {
   startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));
   startContract.getIsCollapsed$.mockReturnValue(new BehaviorSubject(false));
+  startContract.getIsNavLocked$.mockReturnValue(new BehaviorSubject(false));
   startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
   startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));

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

@@ -211,6 +211,42 @@ Array [
     });
   });
 
+  describe('is nav locked', () => {
+    it('updates/emits isNavLocked', async () => {
+      const service = new ChromeService({ browserSupportsCsp: true });
+      const start = await service.start(defaultStartDeps());
+      const promise = start
+        .getIsNavLocked$()
+        .pipe(toArray())
+        .toPromise();
+
+      start.setIsNavLocked(true);
+      start.setIsNavLocked(false);
+      start.setIsNavLocked(true);
+      service.stop();
+
+      await expect(promise).resolves.toMatchInlineSnapshot(`
+Array [
+  false,
+  true,
+  false,
+  true,
+]
+`);
+    });
+
+    it('only stores true in localStorage', async () => {
+      const service = new ChromeService({ browserSupportsCsp: true });
+      const start = await service.start(defaultStartDeps());
+
+      start.setIsNavLocked(true);
+      expect(store.size).toBe(1);
+
+      start.setIsNavLocked(false);
+      expect(store.size).toBe(0);
+    });
+  });
+
   describe('application classes', () => {
     it('updates/emits the application classes', async () => {
       const service = new ChromeService({ browserSupportsCsp: true });
@@ -361,13 +397,14 @@ Array [
 });
 
 describe('stop', () => {
-  it('completes applicationClass$, isCollapsed$, breadcrumbs$, isVisible$, and brand$ observables', async () => {
+  it('completes applicationClass$, isCollapsed$, isNavLocked$, breadcrumbs$, isVisible$, and brand$ observables', async () => {
     const service = new ChromeService({ browserSupportsCsp: true });
     const start = await service.start(defaultStartDeps());
     const promise = Rx.combineLatest(
       start.getBrand$(),
       start.getApplicationClasses$(),
       start.getIsCollapsed$(),
+      start.getIsNavLocked$(),
       start.getBreadcrumbs$(),
       start.getIsVisible$(),
       start.getHelpExtension$()
@@ -387,6 +424,7 @@ describe('stop', () => {
         start.getBrand$(),
         start.getApplicationClasses$(),
         start.getIsCollapsed$(),
+        start.getIsNavLocked$(),
         start.getBreadcrumbs$(),
         start.getIsVisible$(),
         start.getHelpExtension$()

src/core/public/chrome/chrome_service.tsx

@@ -33,12 +33,13 @@ import { HttpStart } from '../http';
 import { ChromeNavLinks, NavLinksService } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
 import { NavControlsService, ChromeNavControls } from './nav_controls';
-import { LoadingIndicator, HeaderWrapper as Header } from './ui';
+import { LoadingIndicator, Header } from './ui';
 import { DocLinksStart } from '../doc_links';
 
 export { ChromeNavControls, ChromeRecentlyAccessed };
 
 const IS_COLLAPSED_KEY = 'core.chrome.isCollapsed';
+export const IS_NAV_LOCKED_KEY = 'core.chrome.isNavLocked';
 
 function isEmbedParamInHash() {
   const { query } = Url.parse(String(window.location.hash).slice(1), true);
@@ -103,6 +104,7 @@ export class ChromeService {
     const brand$ = new BehaviorSubject<ChromeBrand>({});
     const isVisible$ = new BehaviorSubject(true);
     const isCollapsed$ = new BehaviorSubject(!!localStorage.getItem(IS_COLLAPSED_KEY));
+    const isNavLocked$ = new BehaviorSubject(!!localStorage.getItem(IS_NAV_LOCKED_KEY));
     const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
@@ -120,6 +122,15 @@ export class ChromeService {
       );
     }
 
+    const setIsNavLocked = (isNavLocked: boolean) => {
+      isNavLocked$.next(isNavLocked);
+      if (isNavLocked) {
+        localStorage.setItem(IS_NAV_LOCKED_KEY, 'true');
+      } else {
+        localStorage.removeItem(IS_NAV_LOCKED_KEY);
+      }
+    };
+
     return {
       navControls,
       navLinks,
@@ -143,6 +154,8 @@ export class ChromeService {
               map(visibility => (FORCE_HIDDEN ? false : visibility)),
               takeUntil(this.stop$)
             )}
+            isNavLocked$={isNavLocked$.pipe(takeUntil(this.stop$))}
+            onIsNavLockedUpdate={setIsNavLocked}
             kibanaVersion={injectedMetadata.getKibanaVersion()}
             legacyMode={injectedMetadata.getLegacyMode()}
             navLinks$={navLinks.getNavLinks$()}
@@ -175,7 +188,6 @@ export class ChromeService {
       setIsVisible: (visibility: boolean) => {
         isVisible$.next(visibility);
       },
-
       getIsCollapsed$: () => isCollapsed$.pipe(takeUntil(this.stop$)),
 
       setIsCollapsed: (isCollapsed: boolean) => {
@@ -187,6 +199,10 @@ export class ChromeService {
         }
       },
 
+      getIsNavLocked$: () => isNavLocked$.pipe(takeUntil(this.stop$)),
+
+      setIsNavLocked,
+
       getApplicationClasses$: () =>
         applicationClasses$.pipe(
           map(set => [...set]),
@@ -321,6 +337,16 @@ export interface ChromeStart {
    */
   setIsCollapsed(isCollapsed: boolean): void;
 
+  /**
+   * Get an observable of the current locked open state of the chrome.
+   */
+  getIsNavLocked$(): Observable<boolean>;
+
+  /**
+   * Set the locked open state of the chrome navigation.
+   */
+  setIsNavLocked(isCollapsed: boolean): void;
+
   /**
    * Get the current set of classNames that will be set on the application container.
    */

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

@@ -21,6 +21,7 @@ import Url from 'url';
 
 import React, { Component, createRef, Fragment } from 'react';
 import * as Rx from 'rxjs';
+import classnames from 'classnames';
 
 import {
   // TODO: add type annotations
@@ -64,7 +65,7 @@ import {
   ChromeNavControl,
 } from '../..';
 import { HttpStart } from '../../../http';
-import { ChromeHelpExtension } from '../../chrome_service';
+import { ChromeHelpExtension, IS_NAV_LOCKED_KEY } from '../../chrome_service';
 import { ApplicationStart, InternalApplicationStart } from '../../../application/types';
 
 // Providing a buffer between the limit and the cut off index
@@ -177,8 +178,8 @@ interface Props {
   navControlsRight$: Rx.Observable<readonly ChromeNavControl[]>;
   intl: InjectedIntl;
   basePath: HttpStart['basePath'];
-  isLocked?: boolean;
-  onIsLockedUpdate?: (isLocked: boolean) => void;
+  isNavLocked$: Rx.Observable<boolean>;
+  onIsNavLockedUpdate?: (isNavLocked: boolean) => void;
 }
 
 interface State {
@@ -190,6 +191,7 @@ interface State {
   forceNavigation: boolean;
   navControlsLeft: readonly ChromeNavControl[];
   navControlsRight: readonly ChromeNavControl[];
+  isNavLocked: boolean;
 }
 
 class HeaderUI extends Component<Props, State> {
@@ -207,6 +209,7 @@ class HeaderUI extends Component<Props, State> {
       forceNavigation: false,
       navControlsLeft: [],
       navControlsRight: [],
+      isNavLocked: !!localStorage.getItem(IS_NAV_LOCKED_KEY),
     };
   }
 
@@ -221,7 +224,8 @@ class HeaderUI extends Component<Props, State> {
       Rx.combineLatest(
         this.props.navControlsLeft$,
         this.props.navControlsRight$,
-        this.props.application.currentAppId$
+        this.props.application.currentAppId$,
+        this.props.isNavLocked$
       )
     ).subscribe({
       next: ([
@@ -230,7 +234,7 @@ class HeaderUI extends Component<Props, State> {
         forceNavigation,
         navLinks,
         recentlyAccessed,
-        [navControlsLeft, navControlsRight, currentAppId],
+        [navControlsLeft, navControlsRight, currentAppId, isNavLocked],
       ]) => {
         this.setState({
           appTitle,
@@ -245,6 +249,7 @@ class HeaderUI extends Component<Props, State> {
           navControlsLeft,
           navControlsRight,
           currentAppId,
+          isNavLocked,
         });
       },
     });
@@ -291,10 +296,9 @@ class HeaderUI extends Component<Props, State> {
       breadcrumbs$,
       helpExtension$,
       intl,
-      isLocked,
       kibanaDocLink,
       kibanaVersion,
-      onIsLockedUpdate,
+      onIsNavLockedUpdate,
       legacyMode,
     } = this.props;
     const {
@@ -305,6 +309,7 @@ class HeaderUI extends Component<Props, State> {
       navControlsRight,
       navLinks,
       recentlyAccessed,
+      isNavLocked,
     } = this.state;
 
     if (!isVisible) {
@@ -375,8 +380,16 @@ class HeaderUI extends Component<Props, State> {
       },
     ];
 
+    const className = classnames(
+      'chrHeaderWrapper',
+      {
+        'chrHeaderWrapper--navIsLocked': isNavLocked,
+      },
+      'hide-for-sharing'
+    );
+
     return (
-      <Fragment>
+      <div className={className} data-test-subj="headerGlobalNav">
         <EuiHeader>
           <EuiHeaderSection grow={false}>
             <EuiShowFor sizes={['xs', 's']}>
@@ -404,14 +417,14 @@ class HeaderUI extends Component<Props, State> {
         <EuiNavDrawer
           ref={this.navDrawerRef}
           data-test-subj="navDrawer"
-          isLocked={isLocked}
-          onIsLockedUpdate={onIsLockedUpdate}
+          isLocked={isNavLocked}
+          onIsLockedUpdate={onIsNavLockedUpdate}
         >
           <EuiNavDrawerGroup listItems={recentLinksArray} />
           <EuiHorizontalRule margin="none" />
           <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
         </EuiNavDrawer>
-      </Fragment>
+      </div>
     );
   }
 

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

@@ -18,4 +18,3 @@
  */
 
 export { Header, HeaderProps } from './header';
-export { HeaderWrapper } from './header_wrapper';