[Guided onboarding] Added an extension for nav controls in the header (#139496)

This commit is contained in:
Yulia Čech 2022-09-07 13:37:26 +02:00 committed by GitHub
parent 2c5fae2037
commit f29473b11b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 30 additions and 1 deletions

View file

@ -223,6 +223,7 @@ export class ChromeService {
navControlsLeft$={navControls.getLeft$()}
navControlsCenter$={navControls.getCenter$()}
navControlsRight$={navControls.getRight$()}
navControlsExtension$={navControls.getExtension$()}
onIsLockedUpdate={setIsNavDrawerLocked}
isLocked$={getIsNavDrawerLocked$}
/>

View file

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

View file

@ -65,6 +65,9 @@ exports[`Header renders 1`] = `
<div
class="euiHeaderSectionItem"
/>
<div
class="euiHeaderSectionItem"
/>
<div
class="euiHeaderSectionItem"
>

View file

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

View file

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

View file

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

View file

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