[k7] Make breadcrumbs more consistent

[spalger]

Breadcrumbs are an important navigational element in the new k7 redesign, and in an effort to have consistent and predictable breadcrumbs that users can rely on we need to re-evaluate which breadcrumbs we use in different applications. Many applications already use breadcrumbs, but in a way that violates the guidelines for breadcrumbs set out by the Breadcrumb taxonomy issue.

This issue represents the effort I'll be heading up to get the breadcrumbs in shape before 7.0.0-alpha2, which hopefully will give us some time to gather feedback from the community about the new navigation with more of it's components properly implemented before 7.0 GA.

Integrating with the breadcrumbs is pretty straightforward, to set the breadcrumbs use the chrome.breadcrumbs api:

import chrome from 'ui/chrome';

chrome.breadcrumbs.set([
  // each breadcrumb must have a `text` property and optionally an `href` property
  {
    text: 'Section',
    href: '#/some/href'
  },
  // The last breadcrumb should represent the current page and should not have an href
  {
    text: 'Page',
  },
])

If your app uses the angular router then the breadcrumbs will be cleared after each route navigation completes, unless new breadcrumbs have been set since route navigation started. If you are not using the angular router then your app will be responsible for setting/clearing the breadcrumbs between pages. The easiest way to do this is with the k7Breadcrumbs property on your angular routes. This function is called at after your route's resolve functions have been called so they can be accessed with $route.current.locals and should return the breadcrumbs to be used for this route:

uiRoutes.when('/some/path', {
  template,
  // if you have many routes that nest you might want to try breaking them out into
  // their own module like https://github.com/elastic/kibana/blob/16e56bf78715d40eb84b48c833cc63141be29b27/src/legacy/core_plugins/kibana/public/management/sections/indices/breadcrumbs.js
  k7Breadcrumbs: ($route) => [
    { text: 'Foo', href: '#/bar' },
    { text: $route.current.locals.indexPattern.title }
  ]
});

If your app already shows its own breadcrumbs you should conditionally render them by checking the k7Design uiSetting. When this setting is true you should stop rendering the breadcrumbs yourself and instead pass breadcrumbs to the chrome.breadcrumbs API described above.

In non-angular contexts, do this with the uiSettingsClient:

import chrome from 'ui/chrome'
const uiSettings = chrome.getUiSettingsClient();

const k7design = uiSettings.get('k7design');

// if your app is integrated into the Kibana app, please
// subscribe to updates and react on changes
const subscription = uiSettings.getUpdate$().subscribe({
  next: ({ key, newValue }) => {
    if (key === 'k7design') {
      ...
    }
  }
});

// when your component unmounts or whatever
subscription.unsubscribe();

In angular controllers/directives you can bind this config value to your scope with:

.directive('someDirective', {
  ...
  controller($scope, config) {
    config.bindToScope($scope, 'k7design'[, 'optionalAltPropertyName']);
  }
});

Issues:

• [chrome/breadcrumbs] migrate to the new platform #25914 Migrate breadcrumbs to the new platform
• [Kibana/Management] Remove disabled "kibana" breadcrumb #25893 Kibana Management
• [visualize] implement k7Breadcrumbs #26584 Visualize
• [k7/discover] remove Saved Search name from top nav #25894 Discover
• [k7/rollup] Move breadcrumbs to k7 header #25910 Rollups
• [management/security] implement k7Breadcrumbs #26603 Security
• [k7/graph] Fix title breadcrumb #25901 Graph
• [errors][dev tools] implement k7Breadcrumbs #26598 DevTools, Errors
• [spaces] Add "Edit/Create" space breadcrumbs #25888 Spaces Management
• [k7/canvas] Include breadcrumb for current workpad #25896 Canvas
• [k7/Logstash] Remove unnecessary tabs and breadcrumbs #25912 Logstash Pipeline Management
• [reporting] implement k7Breadcrumbs #26724 Reporting
• [k7/addData] Move breadcrumbs to k7 navbar, include current item #25907 Add Data
• [es/management] k7 breadcrumbs #25885 ES Management
• [k7/timelion] Move saved sheet title into breadcrumbs #25895 Timelion
• [Infra UI] Align breadcrumbs with the Kibana breadcrumb taxonomy #26582 Infra UI
• [k7/APM] Make breadcrumbs more consistent #25906 APM
• [ML] [k7] Make breadcrumbs more consistent #25900 ML
• [beats/management] Move breadcrumbs to chrome #25887 Beats
• [k7/Monitoring] Make breadcrumbs more consistent #25903 Monitoring

[elasticmachine]

Pinging @elastic/kibana-platform