[6.x] [chrome/breadcrumbs] migrate to the new platform (#25914) (#25975)

* [chrome/breadcrumbs] migrate to the new platform (#25914)

* [chrome/breadcrumbs] migrate to the new platform

* expand some comments

* typo

* [apm] fix breadcrumbs tests

* fix bad merge

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

@@ -202,19 +202,62 @@ Array [
     "baz",
   ],
 ]
+`);
+    });
+  });
+
+  describe('breadcrumbs', () => {
+    it('updates/emits the current set of breadcrumbs', async () => {
+      const service = new ChromeService();
+      const start = service.start();
+      const promise = start
+        .getBreadcrumbs$()
+        .pipe(toArray())
+        .toPromise();
+
+      start.setBreadcrumbs([{ text: 'foo' }, { text: 'bar' }]);
+      start.setBreadcrumbs([{ text: 'foo' }]);
+      start.setBreadcrumbs([{ text: 'bar' }]);
+      start.setBreadcrumbs([]);
+      service.stop();
+
+      await expect(promise).resolves.toMatchInlineSnapshot(`
+Array [
+  Array [],
+  Array [
+    Object {
+      "text": "foo",
+    },
+    Object {
+      "text": "bar",
+    },
+  ],
+  Array [
+    Object {
+      "text": "foo",
+    },
+  ],
+  Array [
+    Object {
+      "text": "bar",
+    },
+  ],
+  Array [],
+]
 `);
     });
   });
 });
 
 describe('stop', () => {
-  it('completes applicationClass$, isCollapsed$, isVisible$, and brand$ observables', async () => {
+  it('completes applicationClass$, isCollapsed$, breadcrumbs$, isVisible$, and brand$ observables', async () => {
     const service = new ChromeService();
     const start = service.start();
     const promise = Rx.combineLatest(
       start.getBrand$(),
       start.getApplicationClasses$(),
       start.getIsCollapsed$(),
+      start.getBreadcrumbs$(),
       start.getIsVisible$()
     ).toPromise();
 
@@ -232,6 +275,7 @@ describe('stop', () => {
         start.getBrand$(),
         start.getApplicationClasses$(),
         start.getIsCollapsed$(),
+        start.getBreadcrumbs$(),
         start.getIsVisible$()
       ).toPromise()
     ).resolves.toBe(undefined);

src/core/public/chrome/chrome_service.ts

@@ -34,6 +34,11 @@ export interface Brand {
   smallLogo?: string;
 }
 
+export interface Breadcrumb {
+  text: string;
+  href?: string;
+}
+
 export class ChromeService {
   private readonly stop$ = new Rx.ReplaySubject(1);
 
@@ -44,6 +49,7 @@ export class ChromeService {
     const isVisible$ = new Rx.BehaviorSubject(true);
     const isCollapsed$ = new Rx.BehaviorSubject(!!localStorage.getItem(IS_COLLAPSED_KEY));
     const applicationClasses$ = new Rx.BehaviorSubject<Set<string>>(new Set());
+    const breadcrumbs$ = new Rx.BehaviorSubject<Breadcrumb[]>([]);
 
     return {
       /**
@@ -135,6 +141,18 @@ export class ChromeService {
           map(set => [...set]),
           takeUntil(this.stop$)
         ),
+
+      /**
+       * Get an observable of the current list of breadcrumbs
+       */
+      getBreadcrumbs$: () => breadcrumbs$.pipe(takeUntil(this.stop$)),
+
+      /**
+       * Override the current set of breadcrumbs
+       */
+      setBreadcrumbs: (newBreadcrumbs: Breadcrumb[]) => {
+        breadcrumbs$.next(newBreadcrumbs);
+      },
     };
   }
 

src/core/public/chrome/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { ChromeService, ChromeStartContract, Brand } from './chrome_service';
+export { Breadcrumb, ChromeService, ChromeStartContract, Brand } from './chrome_service';

src/core/public/legacy_platform/__snapshots__/legacy_platform_service.test.ts.snap

@@ -11,6 +11,7 @@ Array [
   "ui/chrome/api/injected_vars",
   "ui/chrome/api/controls",
   "ui/chrome/api/theme",
+  "ui/chrome/api/breadcrumbs",
   "ui/chrome/services/global_nav_state",
   "ui/chrome",
   "legacy files",
@@ -28,6 +29,7 @@ Array [
   "ui/chrome/api/injected_vars",
   "ui/chrome/api/controls",
   "ui/chrome/api/theme",
+  "ui/chrome/api/breadcrumbs",
   "ui/chrome/services/global_nav_state",
   "ui/test_harness",
   "legacy files",

src/core/public/legacy_platform/legacy_platform_service.test.ts

@@ -110,6 +110,14 @@ jest.mock('ui/chrome/api/theme', () => {
   };
 });
 
+const mockChromeBreadcrumbsInit = jest.fn();
+jest.mock('ui/chrome/api/breadcrumbs', () => {
+  mockLoadOrder.push('ui/chrome/api/breadcrumbs');
+  return {
+    __newPlatformInit__: mockChromeBreadcrumbsInit,
+  };
+});
+
 const mockGlobalNavStateInit = jest.fn();
 jest.mock('ui/chrome/services/global_nav_state', () => {
   mockLoadOrder.push('ui/chrome/services/global_nav_state');
@@ -272,6 +280,17 @@ describe('#start()', () => {
       expect(mockChromeThemeInit).toHaveBeenCalledWith(chromeStartContract);
     });
 
+    it('passes chrome service to ui/chrome/api/breadcrumbs', () => {
+      const legacyPlatform = new LegacyPlatformService({
+        ...defaultParams,
+      });
+
+      legacyPlatform.start(defaultStartDeps);
+
+      expect(mockChromeBreadcrumbsInit).toHaveBeenCalledTimes(1);
+      expect(mockChromeBreadcrumbsInit).toHaveBeenCalledWith(chromeStartContract);
+    });
+
     it('passes chrome service to ui/chrome/api/global_nav_state', () => {
       const legacyPlatform = new LegacyPlatformService({
         ...defaultParams,

src/core/public/legacy_platform/legacy_platform_service.ts

@@ -72,6 +72,7 @@ export class LegacyPlatformService {
     require('ui/chrome/api/injected_vars').__newPlatformInit__(injectedMetadata);
     require('ui/chrome/api/controls').__newPlatformInit__(chrome);
     require('ui/chrome/api/theme').__newPlatformInit__(chrome);
+    require('ui/chrome/api/breadcrumbs').__newPlatformInit__(chrome);
     require('ui/chrome/services/global_nav_state').__newPlatformInit__(chrome);
 
     // Load the bootstrap module before loading the legacy platform files so that

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -85,11 +85,9 @@ app.directive('dashboardApp', function ($injector) {
       $rootScope,
       $route,
       $routeParams,
-      $location,
       getAppState,
       dashboardConfig,
       localStorage,
-      breadcrumbState,
       i18n,
     ) {
       const filterManager = Private(FilterManagerProvider);
@@ -182,7 +180,7 @@ app.directive('dashboardApp', function ($injector) {
 
       // Push breadcrumbs to new header navigation
       const updateBreadcrumbs = () => {
-        breadcrumbState.set([
+        chrome.breadcrumbs.set([
           {
             text: i18n('kbn.dashboard.dashboardAppBreadcrumbsTitle', {
               defaultMessage: 'Dashboard',

src/core_plugins/kibana/public/dashboard/index.js

@@ -22,6 +22,7 @@ import './dashboard_app';
 import './saved_dashboard/saved_dashboards';
 import './dashboard_config';
 import uiRoutes from 'ui/routes';
+import chrome from 'ui/chrome';
 import { toastNotifications } from 'ui/notify';
 
 import dashboardTemplate from './dashboard_app.html';
@@ -57,7 +58,7 @@ uiRoutes
   })
   .when(DashboardConstants.LANDING_PAGE_PATH, {
     template: dashboardListingTemplate,
-    controller($injector, $location, $scope, Private, config, breadcrumbState, i18n) {
+    controller($injector, $location, $scope, Private, config, i18n) {
       const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
       const dashboardConfig = $injector.get('dashboardConfig');
 
@@ -70,7 +71,7 @@ uiRoutes
       };
       $scope.hideWriteControls = dashboardConfig.getHideWriteControls();
       $scope.initialFilter = ($location.search()).filter || EMPTY_FILTER;
-      breadcrumbState.set([{
+      chrome.breadcrumbs.set([{
         text: i18n('kbn.dashboard.dashboardBreadcrumbsTitle', {
           defaultMessage: 'Dashboards',
         }),

src/core_plugins/kibana/public/discover/controllers/discover.js

@@ -20,6 +20,7 @@
 import _ from 'lodash';
 import React from 'react';
 import angular from 'angular';
+import chrome from 'ui/chrome';
 import { getSort } from 'ui/doc_table/lib/get_sort';
 import * as columnActions from 'ui/doc_table/actions/columns';
 import * as filterActions from 'ui/doc_table/actions/filter';
@@ -156,7 +157,6 @@ function discoverController(
   courier,
   kbnUrl,
   localStorage,
-  breadcrumbState
 ) {
   const Vis = Private(VisProvider);
   const docTitle = Private(DocTitleProvider);
@@ -301,12 +301,12 @@ function discoverController(
   });
 
   if (savedSearch.id && savedSearch.title) {
-    breadcrumbState.set([{
+    chrome.breadcrumbs.set([{
       text: discoverBreadcrumbsTitle,
       href: '#/discover'
     }, { text: savedSearch.title }]);
   } else {
-    breadcrumbState.set([{
+    chrome.breadcrumbs.set([{
       text: discoverBreadcrumbsTitle,
     }]);
   }

src/core_plugins/kibana/public/visualize/listing/visualize_listing.js

@@ -23,6 +23,7 @@ import 'ui/pager';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
 import { i18n } from '@kbn/i18n';
+import chrome from 'ui/chrome';
 
 import { VisualizeListingTable } from './visualize_listing_table';
 
@@ -35,7 +36,6 @@ export function VisualizeListingController($injector) {
   const Notifier = $injector.get('Notifier');
   const Private = $injector.get('Private');
   const config = $injector.get('config');
-  const breadcrumbState = $injector.get('breadcrumbState');
 
   timefilter.disableAutoRefreshSelector();
   timefilter.disableTimeRangeSelector();
@@ -61,7 +61,7 @@ export function VisualizeListingController($injector) {
       .catch(error => notify.error(error));
   };
 
-  breadcrumbState.set([{
+  chrome.breadcrumbs.set([{
     text: i18n.translate('kbn.visualize.visualizeListingBreadcrumbsTitle', {
       defaultMessage: 'Visualize',
     })

src/ui/public/chrome/api/angular.js

@@ -67,6 +67,7 @@ export function initAngularApi(chrome, internals) {
         $locationProvider.hashPrefix('');
       })
       .run(internals.capture$httpLoadingCount)
+      .run(internals.$setupBreadcrumbsAutoClear)
       .run(($location, $rootScope, Private, config) => {
         chrome.getFirstPathSegment = () => {
           return $location.path().split('/')[1];

src/ui/public/chrome/api/breadcrumbs.ts

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+import { Breadcrumb, ChromeStartContract } from '../../../../core/public/chrome';
+export { Breadcrumb };
+
+let newPlatformChrome: ChromeStartContract;
+export function __newPlatformInit__(instance: ChromeStartContract) {
+  if (newPlatformChrome) {
+    throw new Error('ui/chrome/api/breadcrumbs is already initialized');
+  }
+
+  newPlatformChrome = instance;
+}
+
+export function initBreadcrumbsApi(
+  chrome: { [key: string]: any },
+  internals: { [key: string]: any }
+) {
+  // A flag used to determine if we should automatically
+  // clear the breadcrumbs between angular route changes.
+  let shouldClear = false;
+
+  // reset shouldClear any time the breadcrumbs change, even
+  // if it was done directly through the new platform
+  newPlatformChrome.getBreadcrumbs$().subscribe({
+    next() {
+      shouldClear = false;
+    },
+  });
+
+  chrome.breadcrumbs = {
+    get$() {
+      return newPlatformChrome.getBreadcrumbs$();
+    },
+
+    set(newBreadcrumbs: Breadcrumb[]) {
+      newPlatformChrome.setBreadcrumbs(newBreadcrumbs);
+    },
+  };
+
+  // define internal angular run function that will be called when angular
+  // bootstraps and lets us integrate with the angular router so that we can
+  // automatically clear the breadcrumbs if we switch to a Kibana app that
+  // does not use breadcrumbs correctly
+  internals.$setupBreadcrumbsAutoClear = ($rootScope: any) => {
+    $rootScope.$on('$routeChangeStart', () => {
+      shouldClear = true;
+    });
+
+    $rootScope.$on('$routeChangeSuccess', () => {
+      if (shouldClear) {
+        newPlatformChrome.setBreadcrumbs([]);
+      }
+    });
+  };
+}

src/ui/public/chrome/chrome.js

@@ -35,6 +35,7 @@ import { initAngularApi } from './api/angular';
 import appsApi from './api/apps';
 import { initChromeControlsApi } from './api/controls';
 import { initChromeNavApi } from './api/nav';
+import { initBreadcrumbsApi } from './api/breadcrumbs';
 import templateApi from './api/template';
 import { initChromeThemeApi } from './api/theme';
 import { initChromeXsrfApi } from './api/xsrf';
@@ -67,6 +68,7 @@ initChromeXsrfApi(chrome, internals);
 initChromeBasePathApi(chrome);
 initChromeInjectedVarsApi(chrome);
 initChromeNavApi(chrome, internals);
+initBreadcrumbsApi(chrome, internals);
 initLoadingCountApi(chrome, internals);
 initAngularApi(chrome, internals);
 initChromeControlsApi(chrome);

src/ui/public/chrome/directives/header_global_nav/components/__snapshots__/header_breadcrumbs.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HeaderBreadcrumbs renders updates to the breadcrumbs observable 1`] = `
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = `
 <span
   aria-current="page"
   className="euiBreadcrumb euiBreadcrumb--last"
@@ -10,7 +10,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs observable 1`] = `
 </span>
 `;
 
-exports[`HeaderBreadcrumbs renders updates to the breadcrumbs observable 2`] = `
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] = `
 Array [
   <EuiLink
     className="euiBreadcrumb"
@@ -43,4 +43,4 @@ Array [
 ]
 `;
 
-exports[`HeaderBreadcrumbs renders updates to the breadcrumbs observable 3`] = `null`;
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 3`] = `null`;