maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
* Remove isCollapsed, getIsCollapsed, and global_nav_state.
This commit is contained in:
CJ Cenizal 2020-03-17 18:15:26 -07:00 committed by GitHub
parent 2e6c76fda7
commit 4deea08f23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 50 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

3
docs/development/core/public/kibana-plugin-core-public.chromestart.md
View file

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

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

@ -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`

5
src/core/public/chrome/chrome_service.mock.ts
View file

@ -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;
};

40
src/core/public/chrome/chrome_service.test.ts
View file

@ -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$()

43
src/core/public/chrome/chrome_service.tsx
View file

@ -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 */

27
src/core/public/chrome/ui/header/header.tsx
View file

@ -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}

45
src/core/public/chrome/ui/header/header_wrapper.tsx
View file

@ -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>
);
};

1
src/core/public/chrome/ui/header/index.ts
View file

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

1
src/core/public/chrome/ui/index.ts
View file

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

3
src/core/public/public.api.md
View file

@ -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;
}

1
src/legacy/ui/public/chrome/chrome.js
View file

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

45
src/legacy/ui/public/chrome/services/global_nav_state.js
View file

@ -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);
},
};
});

20
src/legacy/ui/public/chrome/services/index.js
View file

@ -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';