Publish getIsNavDrawerLocked$ method on core chrome service. (#60191)

* Remove isCollapsed, getIsCollapsed, and global_nav_state.

docs/development/core/public/kibana-plugin-core-public.chromestart.getiscollapsed_.md → docs/development/core/public/kibana-plugin-core-public.chromestart.getisnavdrawerlocked_.md

@@ -1,15 +1,15 @@
 <!-- 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; [getIsCollapsed$](./kibana-plugin-core-public.chromestart.getiscollapsed_.md)
+[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.getIsCollapsed$() method
+## ChromeStart.getIsNavDrawerLocked$() method
 
-Get an observable of the current collapsed state of the chrome.
+Get an observable of the current locked state of the nav drawer.
 
 <b>Signature:</b>
 
 ```typescript
-getIsCollapsed$(): Observable<boolean>;
+getIsNavDrawerLocked$(): Observable<boolean>;
 ```
 <b>Returns:</b>
 

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

@@ -56,7 +56,7 @@ core.chrome.setHelpExtension(elem => {
 |  [getBrand$()](./kibana-plugin-core-public.chromestart.getbrand_.md) | Get an observable of the current brand information. |
 |  [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 |
@@ -65,6 +65,5 @@ core.chrome.setHelpExtension(elem => {
 |  [setBreadcrumbs(newBreadcrumbs)](./kibana-plugin-core-public.chromestart.setbreadcrumbs.md) | Override the current set of breadcrumbs |
 |  [setHelpExtension(helpExtension)](./kibana-plugin-core-public.chromestart.sethelpextension.md) | Override the current set of custom help content |
 |  [setHelpSupportUrl(url)](./kibana-plugin-core-public.chromestart.sethelpsupporturl.md) | Override the default support URL shown in the help menu |
-|  [setIsCollapsed(isCollapsed)](./kibana-plugin-core-public.chromestart.setiscollapsed.md) | Set the collapsed state of the chrome navigation. |
 |  [setIsVisible(isVisible)](./kibana-plugin-core-public.chromestart.setisvisible.md) | Set the temporary visibility for the chrome. This does nothing if the chrome is hidden by default and should be used to hide the chrome for things like full-screen modes with an exit button. |
 

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

@@ -61,8 +61,6 @@ const createStartContractMock = () => {
     getBrand$: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),
-    setIsCollapsed: jest.fn(),
-    getIsCollapsed$: jest.fn(),
     addApplicationClass: jest.fn(),
     removeApplicationClass: jest.fn(),
     getApplicationClasses$: jest.fn(),
@@ -73,15 +71,16 @@ 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));
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));
-  startContract.getIsCollapsed$.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]));
   startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
+  startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));
   return startContract;
 };
 

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

@@ -259,40 +259,6 @@ describe('start', () => {
     });
   });
 
-  describe('is collapsed', () => {
-    it('updates/emits isCollapsed', async () => {
-      const { chrome, service } = await start();
-      const promise = chrome
-        .getIsCollapsed$()
-        .pipe(toArray())
-        .toPromise();
-
-      chrome.setIsCollapsed(true);
-      chrome.setIsCollapsed(false);
-      chrome.setIsCollapsed(true);
-      service.stop();
-
-      await expect(promise).resolves.toMatchInlineSnapshot(`
-        Array [
-          false,
-          true,
-          false,
-          true,
-        ]
-      `);
-    });
-
-    it('only stores true in localStorage', async () => {
-      const { chrome } = await start();
-
-      chrome.setIsCollapsed(true);
-      expect(store.size).toBe(1);
-
-      chrome.setIsCollapsed(false);
-      expect(store.size).toBe(0);
-    });
-  });
-
   describe('application classes', () => {
     it('updates/emits the application classes', async () => {
       const { chrome, service } = await start();
@@ -442,12 +408,12 @@ describe('start', () => {
 });
 
 describe('stop', () => {
-  it('completes applicationClass$, isCollapsed$, breadcrumbs$, isVisible$, and brand$ observables', async () => {
+  it('completes applicationClass$, getIsNavDrawerLocked, breadcrumbs$, isVisible$, and brand$ observables', async () => {
     const { chrome, service } = await start();
     const promise = Rx.combineLatest(
       chrome.getBrand$(),
       chrome.getApplicationClasses$(),
-      chrome.getIsCollapsed$(),
+      chrome.getIsNavDrawerLocked$(),
       chrome.getBreadcrumbs$(),
       chrome.getIsVisible$(),
       chrome.getHelpExtension$()
@@ -465,7 +431,7 @@ describe('stop', () => {
       Rx.combineLatest(
         chrome.getBrand$(),
         chrome.getApplicationClasses$(),
-        chrome.getIsCollapsed$(),
+        chrome.getIsNavDrawerLocked$(),
         chrome.getBreadcrumbs$(),
         chrome.getIsVisible$(),
         chrome.getHelpExtension$()

src/core/public/chrome/chrome_service.tsx

@@ -34,14 +34,14 @@ 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 {
@@ -146,18 +146,25 @@ export class ChromeService {
 
     const appTitle$ = new BehaviorSubject<string>('Kibana');
     const brand$ = new BehaviorSubject<ChromeBrand>({});
-    const isCollapsed$ = new BehaviorSubject(!!localStorage.getItem(IS_COLLAPSED_KEY));
     const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     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 +200,8 @@ export class ChromeService {
             recentlyAccessed$={recentlyAccessed.get$()}
             navControlsLeft$={navControls.getLeft$()}
             navControlsRight$={navControls.getRight$()}
+            onIsLockedUpdate={setIsNavDrawerLocked}
+            isLocked$={getIsNavDrawerLocked$}
           />
         </React.Fragment>
       ),
@@ -214,17 +223,6 @@ export class ChromeService {
 
       setIsVisible: (isVisible: boolean) => this.toggleHidden$.next(!isVisible),
 
-      getIsCollapsed$: () => isCollapsed$.pipe(takeUntil(this.stop$)),
-
-      setIsCollapsed: (isCollapsed: boolean) => {
-        isCollapsed$.next(isCollapsed);
-        if (isCollapsed) {
-          localStorage.setItem(IS_COLLAPSED_KEY, 'true');
-        } else {
-          localStorage.removeItem(IS_COLLAPSED_KEY);
-        }
-      },
-
       getApplicationClasses$: () =>
         applicationClasses$.pipe(
           map(set => [...set]),
@@ -262,6 +260,8 @@ export class ChromeService {
       },
 
       setHelpSupportUrl: (url: string) => helpSupportUrl$.next(url),
+
+      getIsNavDrawerLocked$: () => getIsNavDrawerLocked$,
     };
   }
 
@@ -353,16 +353,6 @@ export interface ChromeStart {
    */
   setIsVisible(isVisible: boolean): void;
 
-  /**
-   * Get an observable of the current collapsed state of the chrome.
-   */
-  getIsCollapsed$(): Observable<boolean>;
-
-  /**
-   * Set the collapsed state of the chrome navigation.
-   */
-  setIsCollapsed(isCollapsed: boolean): void;
-
   /**
    * Get the current set of classNames that will be set on the application container.
    */
@@ -413,6 +403,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}