Skip to content

Commit 82db4ef

Browse files
DosantDosant
authored
[Chrome] Extension to append an element to the last breadcrumb (#82015) (#82142)
1 parent a4982ce commit 82db4ef

14 files changed

+288
-32
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ChromeStart](./kibana-plugin-core-public.chromestart.md) &gt; [getBreadcrumbsAppendExtension$](./kibana-plugin-core-public.chromestart.getbreadcrumbsappendextension_.md)
4+
5+
## ChromeStart.getBreadcrumbsAppendExtension$() method
6+
7+
Get an observable of the current extension appended to breadcrumbs
8+
9+
<b>Signature:</b>
10+
11+
```typescript
12+
getBreadcrumbsAppendExtension$(): Observable<ChromeBreadcrumbsAppendExtension | undefined>;
13+
```
14+
<b>Returns:</b>
15+
16+
`Observable<ChromeBreadcrumbsAppendExtension | undefined>`
17+

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ core.chrome.setHelpExtension(elem => {
5555
| [getBadge$()](./kibana-plugin-core-public.chromestart.getbadge_.md) | Get an observable of the current badge |
5656
| [getBrand$()](./kibana-plugin-core-public.chromestart.getbrand_.md) | Get an observable of the current brand information. |
5757
| [getBreadcrumbs$()](./kibana-plugin-core-public.chromestart.getbreadcrumbs_.md) | Get an observable of the current list of breadcrumbs |
58+
| [getBreadcrumbsAppendExtension$()](./kibana-plugin-core-public.chromestart.getbreadcrumbsappendextension_.md) | Get an observable of the current extension appended to breadcrumbs |
5859
| [getCustomNavLink$()](./kibana-plugin-core-public.chromestart.getcustomnavlink_.md) | Get an observable of the current custom nav link |
5960
| [getHelpExtension$()](./kibana-plugin-core-public.chromestart.gethelpextension_.md) | Get an observable of the current custom help conttent |
6061
| [getIsNavDrawerLocked$()](./kibana-plugin-core-public.chromestart.getisnavdrawerlocked_.md) | Get an observable of the current locked state of the nav drawer. |
@@ -64,6 +65,7 @@ core.chrome.setHelpExtension(elem => {
6465
| [setBadge(badge)](./kibana-plugin-core-public.chromestart.setbadge.md) | Override the current badge |
6566
| [setBrand(brand)](./kibana-plugin-core-public.chromestart.setbrand.md) | Set the brand configuration. |
6667
| [setBreadcrumbs(newBreadcrumbs)](./kibana-plugin-core-public.chromestart.setbreadcrumbs.md) | Override the current set of breadcrumbs |
68+
| [setBreadcrumbsAppendExtension(breadcrumbsAppendExtension)](./kibana-plugin-core-public.chromestart.setbreadcrumbsappendextension.md) | Mount an element next to the last breadcrumb |
6769
| [setCustomNavLink(newCustomNavLink)](./kibana-plugin-core-public.chromestart.setcustomnavlink.md) | Override the current set of custom nav link |
6870
| [setHelpExtension(helpExtension)](./kibana-plugin-core-public.chromestart.sethelpextension.md) | Override the current set of custom help content |
6971
| [setHelpSupportUrl(url)](./kibana-plugin-core-public.chromestart.sethelpsupporturl.md) | Override the default support URL shown in the help menu |

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ChromeStart](./kibana-plugin-core-public.chromestart.md) &gt; [setBreadcrumbsAppendExtension](./kibana-plugin-core-public.chromestart.setbreadcrumbsappendextension.md)
4+
5+
## ChromeStart.setBreadcrumbsAppendExtension() method
6+
7+
Mount an element next to the last breadcrumb
8+
9+
<b>Signature:</b>
10+
11+
```typescript
12+
setBreadcrumbsAppendExtension(breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension): void;
13+
```
14+
15+
## Parameters
16+
17+
| Parameter | Type | Description |
18+
| --- | --- | --- |
19+
| breadcrumbsAppendExtension | <code>ChromeBreadcrumbsAppendExtension</code> | |
20+
21+
<b>Returns:</b>
22+
23+
`void`
24+

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ const createStartContractMock = () => {
6363
setBadge: jest.fn(),
6464
getBreadcrumbs$: jest.fn(),
6565
setBreadcrumbs: jest.fn(),
66+
getBreadcrumbsAppendExtension$: jest.fn(),
67+
setBreadcrumbsAppendExtension: jest.fn(),
6668
getHelpExtension$: jest.fn(),
6769
setHelpExtension: jest.fn(),
6870
setHelpSupportUrl: jest.fn(),
@@ -76,6 +78,7 @@ const createStartContractMock = () => {
7678
startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
7779
startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
7880
startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));
81+
startContract.getBreadcrumbsAppendExtension$.mockReturnValue(new BehaviorSubject(undefined));
7982
startContract.getCustomNavLink$.mockReturnValue(new BehaviorSubject(undefined));
8083
startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
8184
startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));

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

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,25 @@ describe('start', () => {
363363
});
364364
});
365365

366+
describe('breadcrumbsAppendExtension$', () => {
367+
it('updates the breadcrumbsAppendExtension$', async () => {
368+
const { chrome, service } = await start();
369+
const promise = chrome.getBreadcrumbsAppendExtension$().pipe(toArray()).toPromise();
370+
371+
chrome.setBreadcrumbsAppendExtension({ content: (element) => () => {} });
372+
service.stop();
373+
374+
await expect(promise).resolves.toMatchInlineSnapshot(`
375+
Array [
376+
undefined,
377+
Object {
378+
"content": [Function],
379+
},
380+
]
381+
`);
382+
});
383+
});
384+
366385
describe('custom nav link', () => {
367386
it('updates/emits the current custom nav link', async () => {
368387
const { chrome, service } = await start();
@@ -429,33 +448,33 @@ describe('start', () => {
429448

430449
expect(docTitleResetSpy).toBeCalledTimes(1);
431450
await expect(promises).resolves.toMatchInlineSnapshot(`
432-
Array [
433-
Array [
434-
undefined,
435-
Object {
436-
"appName": "App name",
437-
},
438-
undefined,
439-
],
440-
Array [
441-
Array [],
442-
Array [
443-
Object {
444-
"text": "App breadcrumb",
445-
},
446-
],
447-
Array [],
448-
],
449-
Array [
450-
undefined,
451-
Object {
452-
"text": "App badge",
453-
"tooltip": "App tooltip",
454-
},
455-
undefined,
456-
],
457-
]
458-
`);
451+
Array [
452+
Array [
453+
undefined,
454+
Object {
455+
"appName": "App name",
456+
},
457+
undefined,
458+
],
459+
Array [
460+
Array [],
461+
Array [
462+
Object {
463+
"text": "App breadcrumb",
464+
},
465+
],
466+
Array [],
467+
],
468+
Array [
469+
undefined,
470+
Object {
471+
"text": "App badge",
472+
"tooltip": "App tooltip",
473+
},
474+
undefined,
475+
],
476+
]
477+
`);
459478
});
460479
});
461480
});

‎src/core/public/chrome/chrome_service.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { BehaviorSubject, combineLatest, merge, Observable, of, ReplaySubject }
2424
import { flatMap, map, takeUntil } from 'rxjs/operators';
2525
import { parse } from 'url';
2626
import { EuiLink } from '@elastic/eui';
27+
import { MountPoint } from '../types';
2728
import { mountReactNode } from '../utils/mount';
2829
import { InternalApplicationStart } from '../application';
2930
import { DocLinksStart } from '../doc_links';
@@ -58,6 +59,11 @@ export interface ChromeBrand {
5859
/** @public */
5960
export type ChromeBreadcrumb = EuiBreadcrumb;
6061

62+
/** @public */
63+
export interface ChromeBreadcrumbsAppendExtension {
64+
content: MountPoint<HTMLDivElement>;
65+
}
66+
6167
/** @public */
6268
export interface ChromeHelpExtension {
6369
/**
@@ -146,6 +152,9 @@ export class ChromeService {
146152
const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
147153
const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
148154
const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
155+
const breadcrumbsAppendExtension$ = new BehaviorSubject<
156+
ChromeBreadcrumbsAppendExtension | undefined
157+
>(undefined);
149158
const badge$ = new BehaviorSubject<ChromeBadge | undefined>(undefined);
150159
const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
151160
const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
@@ -225,6 +234,7 @@ export class ChromeService {
225234
badge$={badge$.pipe(takeUntil(this.stop$))}
226235
basePath={http.basePath}
227236
breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
237+
breadcrumbsAppendExtension$={breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$))}
228238
customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))}
229239
kibanaDocLink={docLinks.links.kibana}
230240
forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
@@ -290,6 +300,14 @@ export class ChromeService {
290300
breadcrumbs$.next(newBreadcrumbs);
291301
},
292302

303+
getBreadcrumbsAppendExtension$: () => breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$)),
304+
305+
setBreadcrumbsAppendExtension: (
306+
breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension
307+
) => {
308+
breadcrumbsAppendExtension$.next(breadcrumbsAppendExtension);
309+
},
310+
293311
getHelpExtension$: () => helpExtension$.pipe(takeUntil(this.stop$)),
294312

295313
setHelpExtension: (helpExtension?: ChromeHelpExtension) => {
@@ -431,6 +449,18 @@ export interface ChromeStart {
431449
*/
432450
setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
433451

452+
/**
453+
* Get an observable of the current extension appended to breadcrumbs
454+
*/
455+
getBreadcrumbsAppendExtension$(): Observable<ChromeBreadcrumbsAppendExtension | undefined>;
456+
457+
/**
458+
* Mount an element next to the last breadcrumb
459+
*/
460+
setBreadcrumbsAppendExtension(
461+
breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension
462+
): void;
463+
434464
/**
435465
* Get an observable of the current custom nav link
436466
*/

‎src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap‎

Lines changed: 98 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/public/chrome/ui/header/header.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function mockProps() {
4040
appTitle$: new BehaviorSubject('test'),
4141
badge$: new BehaviorSubject(undefined),
4242
breadcrumbs$: new BehaviorSubject([]),
43+
breadcrumbsAppendExtension$: new BehaviorSubject(undefined),
4344
homeHref: '/',
4445
isVisible$: new BehaviorSubject(true),
4546
kibanaDocLink: '/docs',

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import {
4242
} from '../..';
4343
import { InternalApplicationStart } from '../../../application/types';
4444
import { HttpStart } from '../../../http';
45-
import { ChromeHelpExtension } from '../../chrome_service';
45+
import { ChromeBreadcrumbsAppendExtension, ChromeHelpExtension } from '../../chrome_service';
4646
import { OnIsLockedUpdate } from './';
4747
import { CollapsibleNav } from './collapsible_nav';
4848
import { HeaderBadge } from './header_badge';
@@ -58,6 +58,7 @@ export interface HeaderProps {
5858
appTitle$: Observable<string>;
5959
badge$: Observable<ChromeBadge | undefined>;
6060
breadcrumbs$: Observable<ChromeBreadcrumb[]>;
61+
breadcrumbsAppendExtension$: Observable<ChromeBreadcrumbsAppendExtension | undefined>;
6162
customNavLink$: Observable<ChromeNavLink | undefined>;
6263
homeHref: string;
6364
isVisible$: Observable<boolean>;
@@ -169,6 +170,7 @@ export function Header({
169170
<HeaderBreadcrumbs
170171
appTitle$={observables.appTitle$}
171172
breadcrumbs$={observables.breadcrumbs$}
173+
breadcrumbsAppendExtension$={observables.breadcrumbsAppendExtension$}
172174
/>
173175

174176
<HeaderBadge badge$={observables.badge$} />

0 commit comments

Comments
 (0)