mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[Guided onboarding] Added an extension for nav controls in the header (#139496)
This commit is contained in:
parent
2c5fae2037
commit
f29473b11b
7 changed files with 30 additions and 1 deletions
|
@ -223,6 +223,7 @@ export class ChromeService {
|
|||
navControlsLeft$={navControls.getLeft$()}
|
||||
navControlsCenter$={navControls.getCenter$()}
|
||||
navControlsRight$={navControls.getRight$()}
|
||||
navControlsExtension$={navControls.getExtension$()}
|
||||
onIsLockedUpdate={setIsNavDrawerLocked}
|
||||
isLocked$={getIsNavDrawerLocked$}
|
||||
/>
|
||||
|
|
|
@ -19,6 +19,7 @@ export class NavControlsService {
|
|||
const navControlsLeft$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
|
||||
const navControlsRight$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
|
||||
const navControlsCenter$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
|
||||
const navControlsExtension$ = new BehaviorSubject<ReadonlySet<ChromeNavControl>>(new Set());
|
||||
|
||||
return {
|
||||
// In the future, registration should be moved to the setup phase. This
|
||||
|
@ -32,6 +33,9 @@ export class NavControlsService {
|
|||
registerCenter: (navControl: ChromeNavControl) =>
|
||||
navControlsCenter$.next(new Set([...navControlsCenter$.value.values(), navControl])),
|
||||
|
||||
registerExtension: (navControl: ChromeNavControl) =>
|
||||
navControlsExtension$.next(new Set([...navControlsExtension$.value.values(), navControl])),
|
||||
|
||||
getLeft$: () =>
|
||||
navControlsLeft$.pipe(
|
||||
map((controls) => sortBy([...controls.values()], 'order')),
|
||||
|
@ -47,6 +51,11 @@ export class NavControlsService {
|
|||
map((controls) => sortBy([...controls.values()], 'order')),
|
||||
takeUntil(this.stop$)
|
||||
),
|
||||
getExtension$: () =>
|
||||
navControlsExtension$.pipe(
|
||||
map((controls) => sortBy([...controls.values()], 'order')),
|
||||
takeUntil(this.stop$)
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -65,6 +65,9 @@ exports[`Header renders 1`] = `
|
|||
<div
|
||||
class="euiHeaderSectionItem"
|
||||
/>
|
||||
<div
|
||||
class="euiHeaderSectionItem"
|
||||
/>
|
||||
<div
|
||||
class="euiHeaderSectionItem"
|
||||
>
|
||||
|
|
|
@ -38,6 +38,7 @@ function mockProps() {
|
|||
navControlsLeft$: new BehaviorSubject([]),
|
||||
navControlsCenter$: new BehaviorSubject([]),
|
||||
navControlsRight$: new BehaviorSubject([]),
|
||||
navControlsExtension$: new BehaviorSubject([]),
|
||||
basePath: http.basePath,
|
||||
isLocked$: new BehaviorSubject(false),
|
||||
loadingCount$: new BehaviorSubject(0),
|
||||
|
|
|
@ -65,6 +65,7 @@ export interface HeaderProps {
|
|||
navControlsLeft$: Observable<readonly ChromeNavControl[]>;
|
||||
navControlsCenter$: Observable<readonly ChromeNavControl[]>;
|
||||
navControlsRight$: Observable<readonly ChromeNavControl[]>;
|
||||
navControlsExtension$: Observable<readonly ChromeNavControl[]>;
|
||||
basePath: HttpStart['basePath'];
|
||||
isLocked$: Observable<boolean>;
|
||||
loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
|
||||
|
@ -135,7 +136,13 @@ export function Header({
|
|||
{
|
||||
items: [
|
||||
<EuiHideFor sizes={['m', 'l', 'xl']}>
|
||||
<HeaderNavControls navControls$={observables.navControlsCenter$} />
|
||||
<>
|
||||
<HeaderNavControls navControls$={observables.navControlsExtension$} />
|
||||
<HeaderNavControls navControls$={observables.navControlsCenter$} />
|
||||
</>
|
||||
</EuiHideFor>,
|
||||
<EuiHideFor sizes={['xs', 's']}>
|
||||
<HeaderNavControls navControls$={observables.navControlsExtension$} />
|
||||
</EuiHideFor>,
|
||||
<HeaderHelpMenu
|
||||
helpExtension$={observables.helpExtension$}
|
||||
|
|
|
@ -36,9 +36,11 @@ const createStartContractMock = () => {
|
|||
registerLeft: jest.fn(),
|
||||
registerCenter: jest.fn(),
|
||||
registerRight: jest.fn(),
|
||||
registerExtension: jest.fn(),
|
||||
getLeft$: jest.fn(),
|
||||
getCenter$: jest.fn(),
|
||||
getRight$: jest.fn(),
|
||||
getExtension$: jest.fn(),
|
||||
},
|
||||
setIsVisible: jest.fn(),
|
||||
getIsVisible$: jest.fn(),
|
||||
|
|
|
@ -41,6 +41,9 @@ export interface ChromeNavControls {
|
|||
/** Register a nav control to be presented on the top-center side of the chrome header. */
|
||||
registerCenter(navControl: ChromeNavControl): void;
|
||||
|
||||
/** Register an extension to be presented to the left of the top-right side of the chrome header. */
|
||||
registerExtension(navControl: ChromeNavControl): void;
|
||||
|
||||
/** @internal */
|
||||
getLeft$(): Observable<ChromeNavControl[]>;
|
||||
|
||||
|
@ -49,4 +52,7 @@ export interface ChromeNavControls {
|
|||
|
||||
/** @internal */
|
||||
getCenter$(): Observable<ChromeNavControl[]>;
|
||||
|
||||
/** @internal */
|
||||
getExtension$(): Observable<ChromeNavControl[]>;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue