[7.x] [Chrome] Extension to append an element to the last breadcrumb (#82015)

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

@@ -0,0 +1,17 @@
+<!-- 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; [getBreadcrumbsAppendExtension$](./kibana-plugin-core-public.chromestart.getbreadcrumbsappendextension_.md)
+
+## ChromeStart.getBreadcrumbsAppendExtension$() method
+
+Get an observable of the current extension appended to breadcrumbs
+
+<b>Signature:</b>
+
+```typescript
+getBreadcrumbsAppendExtension$(): Observable<ChromeBreadcrumbsAppendExtension | undefined>;
+```
+<b>Returns:</b>
+
+`Observable<ChromeBreadcrumbsAppendExtension | undefined>`
+

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

@@ -55,6 +55,7 @@ core.chrome.setHelpExtension(elem => {
 |  [getBadge$()](./kibana-plugin-core-public.chromestart.getbadge_.md) | Get an observable of the current badge |
 |  [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 |
+|  [getBreadcrumbsAppendExtension$()](./kibana-plugin-core-public.chromestart.getbreadcrumbsappendextension_.md) | Get an observable of the current extension appended to breadcrumbs |
 |  [getCustomNavLink$()](./kibana-plugin-core-public.chromestart.getcustomnavlink_.md) | Get an observable of the current custom nav link |
 |  [getHelpExtension$()](./kibana-plugin-core-public.chromestart.gethelpextension_.md) | Get an observable of the current custom help conttent |
 |  [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 => {
 |  [setBadge(badge)](./kibana-plugin-core-public.chromestart.setbadge.md) | Override the current badge |
 |  [setBrand(brand)](./kibana-plugin-core-public.chromestart.setbrand.md) | Set the brand configuration. |
 |  [setBreadcrumbs(newBreadcrumbs)](./kibana-plugin-core-public.chromestart.setbreadcrumbs.md) | Override the current set of breadcrumbs |
+|  [setBreadcrumbsAppendExtension(breadcrumbsAppendExtension)](./kibana-plugin-core-public.chromestart.setbreadcrumbsappendextension.md) | Mount an element next to the last breadcrumb |
 |  [setCustomNavLink(newCustomNavLink)](./kibana-plugin-core-public.chromestart.setcustomnavlink.md) | Override the current set of custom nav link |
 |  [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 |

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

@@ -0,0 +1,24 @@
+<!-- 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; [setBreadcrumbsAppendExtension](./kibana-plugin-core-public.chromestart.setbreadcrumbsappendextension.md)
+
+## ChromeStart.setBreadcrumbsAppendExtension() method
+
+Mount an element next to the last breadcrumb
+
+<b>Signature:</b>
+
+```typescript
+setBreadcrumbsAppendExtension(breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  breadcrumbsAppendExtension | <code>ChromeBreadcrumbsAppendExtension</code> |  |
+
+<b>Returns:</b>
+
+`void`
+

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

@@ -63,6 +63,8 @@ const createStartContractMock = () => {
     setBadge: jest.fn(),
     getBreadcrumbs$: jest.fn(),
     setBreadcrumbs: jest.fn(),
+    getBreadcrumbsAppendExtension$: jest.fn(),
+    setBreadcrumbsAppendExtension: jest.fn(),
     getHelpExtension$: jest.fn(),
     setHelpExtension: jest.fn(),
     setHelpSupportUrl: jest.fn(),
@@ -76,6 +78,7 @@ const createStartContractMock = () => {
   startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
   startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));
+  startContract.getBreadcrumbsAppendExtension$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getCustomNavLink$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));

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

@@ -363,6 +363,25 @@ describe('start', () => {
     });
   });
 
+  describe('breadcrumbsAppendExtension$', () => {
+    it('updates the breadcrumbsAppendExtension$', async () => {
+      const { chrome, service } = await start();
+      const promise = chrome.getBreadcrumbsAppendExtension$().pipe(toArray()).toPromise();
+
+      chrome.setBreadcrumbsAppendExtension({ content: (element) => () => {} });
+      service.stop();
+
+      await expect(promise).resolves.toMatchInlineSnapshot(`
+              Array [
+                undefined,
+                Object {
+                  "content": [Function],
+                },
+              ]
+            `);
+    });
+  });
+
   describe('custom nav link', () => {
     it('updates/emits the current custom nav link', async () => {
       const { chrome, service } = await start();
@@ -429,33 +448,33 @@ describe('start', () => {
 
       expect(docTitleResetSpy).toBeCalledTimes(1);
       await expect(promises).resolves.toMatchInlineSnapshot(`
-        Array [
-          Array [
-            undefined,
-            Object {
-              "appName": "App name",
-            },
-            undefined,
-          ],
-          Array [
-            Array [],
-            Array [
-              Object {
-                "text": "App breadcrumb",
-              },
-            ],
-            Array [],
-          ],
-          Array [
-            undefined,
-            Object {
-              "text": "App badge",
-              "tooltip": "App tooltip",
-            },
-            undefined,
-          ],
-        ]
-      `);
+                      Array [
+                        Array [
+                          undefined,
+                          Object {
+                            "appName": "App name",
+                          },
+                          undefined,
+                        ],
+                        Array [
+                          Array [],
+                          Array [
+                            Object {
+                              "text": "App breadcrumb",
+                            },
+                          ],
+                          Array [],
+                        ],
+                        Array [
+                          undefined,
+                          Object {
+                            "text": "App badge",
+                            "tooltip": "App tooltip",
+                          },
+                          undefined,
+                        ],
+                      ]
+                  `);
     });
   });
 });

src/core/public/chrome/chrome_service.tsx

@@ -24,6 +24,7 @@ import { BehaviorSubject, combineLatest, merge, Observable, of, ReplaySubject }
 import { flatMap, map, takeUntil } from 'rxjs/operators';
 import { parse } from 'url';
 import { EuiLink } from '@elastic/eui';
+import { MountPoint } from '../types';
 import { mountReactNode } from '../utils/mount';
 import { InternalApplicationStart } from '../application';
 import { DocLinksStart } from '../doc_links';
@@ -58,6 +59,11 @@ export interface ChromeBrand {
 /** @public */
 export type ChromeBreadcrumb = EuiBreadcrumb;
 
+/** @public */
+export interface ChromeBreadcrumbsAppendExtension {
+  content: MountPoint<HTMLDivElement>;
+}
+
 /** @public */
 export interface ChromeHelpExtension {
   /**
@@ -146,6 +152,9 @@ export class ChromeService {
     const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
+    const breadcrumbsAppendExtension$ = new BehaviorSubject<
+      ChromeBreadcrumbsAppendExtension | undefined
+    >(undefined);
     const badge$ = new BehaviorSubject<ChromeBadge | undefined>(undefined);
     const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
@@ -225,6 +234,7 @@ export class ChromeService {
           badge$={badge$.pipe(takeUntil(this.stop$))}
           basePath={http.basePath}
           breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+          breadcrumbsAppendExtension$={breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$))}
           customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))}
           kibanaDocLink={docLinks.links.kibana}
           forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
@@ -290,6 +300,14 @@ export class ChromeService {
         breadcrumbs$.next(newBreadcrumbs);
       },
 
+      getBreadcrumbsAppendExtension$: () => breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$)),
+
+      setBreadcrumbsAppendExtension: (
+        breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension
+      ) => {
+        breadcrumbsAppendExtension$.next(breadcrumbsAppendExtension);
+      },
+
       getHelpExtension$: () => helpExtension$.pipe(takeUntil(this.stop$)),
 
       setHelpExtension: (helpExtension?: ChromeHelpExtension) => {
@@ -431,6 +449,18 @@ export interface ChromeStart {
    */
   setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
 
+  /**
+   * Get an observable of the current extension appended to breadcrumbs
+   */
+  getBreadcrumbsAppendExtension$(): Observable<ChromeBreadcrumbsAppendExtension | undefined>;
+
+  /**
+   * Mount an element next to the last breadcrumb
+   */
+  setBreadcrumbsAppendExtension(
+    breadcrumbsAppendExtension?: ChromeBreadcrumbsAppendExtension
+  ): void;
+
   /**
    * Get an observable of the current custom nav link
    */

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

@@ -40,6 +40,7 @@ function mockProps() {
     appTitle$: new BehaviorSubject('test'),
     badge$: new BehaviorSubject(undefined),
     breadcrumbs$: new BehaviorSubject([]),
+    breadcrumbsAppendExtension$: new BehaviorSubject(undefined),
     homeHref: '/',
     isVisible$: new BehaviorSubject(true),
     kibanaDocLink: '/docs',

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

@@ -42,7 +42,7 @@ import {
 } from '../..';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
-import { ChromeHelpExtension } from '../../chrome_service';
+import { ChromeBreadcrumbsAppendExtension, ChromeHelpExtension } from '../../chrome_service';
 import { OnIsLockedUpdate } from './';
 import { CollapsibleNav } from './collapsible_nav';
 import { HeaderBadge } from './header_badge';
@@ -58,6 +58,7 @@ export interface HeaderProps {
   appTitle$: Observable<string>;
   badge$: Observable<ChromeBadge | undefined>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
+  breadcrumbsAppendExtension$: Observable<ChromeBreadcrumbsAppendExtension | undefined>;
   customNavLink$: Observable<ChromeNavLink | undefined>;
   homeHref: string;
   isVisible$: Observable<boolean>;
@@ -169,6 +170,7 @@ export function Header({
             <HeaderBreadcrumbs
               appTitle$={observables.appTitle$}
               breadcrumbs$={observables.breadcrumbs$}
+              breadcrumbsAppendExtension$={observables.breadcrumbsAppendExtension$}
             />
 
             <HeaderBadge badge$={observables.badge$} />