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

* Remove isCollapsed, getIsCollapsed, and global_nav_state.

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. |
 

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

@@ -1,24 +0,0 @@
-<!-- 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; [setIsCollapsed](./kibana-plugin-core-public.chromestart.setiscollapsed.md)
-
-## ChromeStart.setIsCollapsed() method
-
-Set the collapsed state of the chrome navigation.
-
-<b>Signature:</b>
-
-```typescript
-setIsCollapsed(isCollapsed: boolean): void;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  isCollapsed | <code>boolean</code> |  |
-
-<b>Returns:</b>
-
-`void`
-

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}

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

@@ -1,45 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { FunctionComponent, useState } from 'react';
-import classnames from 'classnames';
-import { Header, HeaderProps } from './';
-
-const IS_LOCKED_KEY = 'core.chrome.isLocked';
-
-export const HeaderWrapper: FunctionComponent<HeaderProps> = props => {
-  const initialIsLocked = localStorage.getItem(IS_LOCKED_KEY);
-  const [isLocked, setIsLocked] = useState(initialIsLocked === 'true');
-  const setIsLockedStored = (locked: boolean) => {
-    localStorage.setItem(IS_LOCKED_KEY, `${locked}`);
-    setIsLocked(locked);
-  };
-  const className = classnames(
-    'chrHeaderWrapper',
-    {
-      'chrHeaderWrapper--navIsLocked': isLocked,
-    },
-    'hide-for-sharing'
-  );
-  return (
-    <div className={className} data-test-subj="headerGlobalNav">
-      <Header {...props} onIsLockedUpdate={setIsLockedStored} isLocked={isLocked} />
-    </div>
-  );
-};

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,7 +337,7 @@ export interface ChromeStart {
     getBrand$(): Observable<ChromeBrand>;
     getBreadcrumbs$(): Observable<ChromeBreadcrumb[]>;
     getHelpExtension$(): Observable<ChromeHelpExtension | undefined>;
-    getIsCollapsed$(): Observable<boolean>;
+    getIsNavDrawerLocked$(): Observable<boolean>;
     getIsVisible$(): Observable<boolean>;
     navControls: ChromeNavControls;
     navLinks: ChromeNavLinks;
@@ -349,7 +349,6 @@ export interface ChromeStart {
     setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
     setHelpExtension(helpExtension?: ChromeHelpExtension): void;
     setHelpSupportUrl(url: string): void;
-    setIsCollapsed(isCollapsed: boolean): void;
     setIsVisible(isVisible: boolean): void;
 }
 

src/legacy/ui/public/chrome/chrome.js

@@ -28,7 +28,6 @@ import '../private';
 import '../promises';
 import '../directives/storage';
 import '../directives/watch_multi';
-import './services';
 import '../react_components';
 import '../i18n';
 

src/legacy/ui/public/chrome/services/global_nav_state.js

@@ -1,45 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { distinctUntilChanged } from 'rxjs/operators';
-import { npStart } from 'ui/new_platform';
-import { uiModules } from '../../modules';
-
-const newPlatformChrome = npStart.core.chrome;
-
-uiModules.get('kibana').service('globalNavState', $rootScope => {
-  let isOpen = false;
-  newPlatformChrome
-    .getIsCollapsed$()
-    .pipe(distinctUntilChanged())
-    .subscribe(isCollapsed => {
-      $rootScope.$evalAsync(() => {
-        isOpen = !isCollapsed;
-        $rootScope.$broadcast('globalNavState:change');
-      });
-    });
-
-  return {
-    isOpen: () => isOpen,
-
-    setOpen: newValue => {
-      newPlatformChrome.setIsCollapsed(!newValue);
-    },
-  };
-});

src/legacy/ui/public/chrome/services/index.js

@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import './global_nav_state';