[management/security] implement k7Breadcrumbs (#26603)

## Summary

This PR updates the security management routes to provide k7Breadcrumbs used by the new header navigation. See #25884 for general information about the integration with the router and #25689 for the breadcrumb taxonomy

![2018-12-03 19 05 40](https://user-images.githubusercontent.com/1329312/49416328-764b4200-f72e-11e8-9db7-aeb1294d131b.gif)

### Checklist

- [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)

src/ui/public/management/breadcrumbs.js → src/ui/public/management/breadcrumbs.ts

@@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
 
 export const MANAGEMENT_BREADCRUMB = Object.freeze({
   text: i18n.translate('common.ui.management.breadcrumb', {
-    defaultMessage: 'Management'
+    defaultMessage: 'Management',
   }),
-  href: '#/management'
+  href: '#/management',
 });

x-pack/plugins/security/public/views/account/account.html

@@ -1,4 +1,4 @@
-<kbn-top-nav class="navbar navbar-default navbar-static-top" name="account-nav">
+<kbn-top-nav class="navbar navbar-default navbar-static-top" name="account-nav" ng-if="!k7design">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Title. -->

x-pack/plugins/security/public/views/account/account.js

@@ -10,17 +10,26 @@ import routes from 'ui/routes';
 import template from './account.html';
 import '../management/change_password_form/change_password_form';
 import '../../services/shield_user';
+import { i18n } from '@kbn/i18n';
 
 routes.when('/account', {
   template,
+  k7Breadcrumbs: () => [
+    {
+      text: i18n.translate('xpack.security.account.breadcrumb', {
+        defaultMessage: 'Account',
+      })
+    }
+  ],
   resolve: {
     user(ShieldUser) {
       return ShieldUser.getCurrent().$promise;
     }
   },
   controllerAs: 'accountController',
-  controller($scope, $route, Notifier) {
+  controller($scope, $route, Notifier, config) {
     $scope.user = $route.current.locals.user;
+    config.bindToScope($scope, 'k7design');
 
     const notifier = new Notifier();
 

x-pack/plugins/security/public/views/management/breadcrumbs.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { MANAGEMENT_BREADCRUMB } from 'ui/management/breadcrumbs';
+
+export function getUsersBreadcrumbs() {
+  return [
+    MANAGEMENT_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.security.users.breadcrumb', {
+        defaultMessage: 'Users',
+      }),
+      href: '#/management/security/users',
+    },
+  ];
+}
+
+export function getEditUserBreadcrumbs($route: Record<string, any>) {
+  const { username } = $route.current.params;
+  return [
+    ...getUsersBreadcrumbs(),
+    {
+      text: username,
+      href: `#/management/security/users/edit/${username}`,
+    },
+  ];
+}
+
+export function getCreateUserBreadcrumbs() {
+  return [
+    ...getUsersBreadcrumbs(),
+    {
+      text: i18n.translate('xpack.security.users.createBreadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}
+
+export function getRolesBreadcrumbs() {
+  return [
+    MANAGEMENT_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.security.roles.breadcrumb', {
+        defaultMessage: 'Roles',
+      }),
+      href: '#/management/security/roles',
+    },
+  ];
+}
+
+export function getEditRoleBreadcrumbs($route: Record<string, any>) {
+  const { name } = $route.current.params;
+  return [
+    ...getRolesBreadcrumbs(),
+    {
+      text: name,
+      href: `#/management/security/roles/edit/${name}`,
+    },
+  ];
+}
+
+export function getCreateRoleBreadcrumbs() {
+  return [
+    ...getUsersBreadcrumbs(),
+    {
+      text: i18n.translate('xpack.security.roles.createBreadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}

x-pack/plugins/security/public/views/management/edit_role/index.js

@@ -22,6 +22,7 @@ import { SpacesManager } from '../../../../../spaces/public/lib';
 import { UserProfileProvider } from 'plugins/xpack_main/services/user_profile';
 import { checkLicenseError } from 'plugins/security/lib/check_license_error';
 import { EDIT_ROLES_PATH, ROLES_PATH } from '../management_urls';
+import { getEditRoleBreadcrumbs, getCreateRoleBreadcrumbs } from '../breadcrumbs';
 
 import { EditRolePage } from './components';
 
@@ -32,6 +33,11 @@ import { I18nProvider } from '@kbn/i18n/react';
 
 routes.when(`${EDIT_ROLES_PATH}/:name?`, {
   template,
+  k7Breadcrumbs: ($injector, $route) => $injector.invoke(
+    $route.current.params.name
+      ? getEditRoleBreadcrumbs
+      : getCreateRoleBreadcrumbs
+  ),
   resolve: {
     role($route, ShieldRole, kbnUrl, Promise, Notifier) {
       const name = $route.current.params.name;

x-pack/plugins/security/public/views/management/edit_user.js

@@ -15,6 +15,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { createApiClient } from '../../lib/api';
 import { I18nProvider } from '@kbn/i18n/react';
+import { getEditUserBreadcrumbs, getCreateUserBreadcrumbs } from './breadcrumbs';
 
 const renderReact = (elem, httpClient, changeUrl, username) => {
   render(
@@ -31,6 +32,11 @@ const renderReact = (elem, httpClient, changeUrl, username) => {
 
 routes.when(`${EDIT_USERS_PATH}/:username?`, {
   template,
+  k7Breadcrumbs: ($injector, $route) => $injector.invoke(
+    $route.current.params.username
+      ? getEditUserBreadcrumbs
+      : getCreateUserBreadcrumbs
+  ),
   controllerAs: 'editUser',
   controller($scope, $route, kbnUrl, Notifier, confirmModal, $http) {
     $scope.$on('$destroy', () => {

x-pack/plugins/security/public/views/management/roles.js

@@ -13,9 +13,11 @@ import template from 'plugins/security/views/management/roles.html';
 import 'plugins/security/services/shield_role';
 import { checkLicenseError } from 'plugins/security/lib/check_license_error';
 import { ROLES_PATH, EDIT_ROLES_PATH } from './management_urls';
+import { getRolesBreadcrumbs } from './breadcrumbs';
 
 routes.when(ROLES_PATH, {
   template,
+  k7Breadcrumbs: getRolesBreadcrumbs,
   resolve: {
     roles(ShieldRole, kbnUrl, Promise, Private) {
       // $promise is used here because the result is an ngResource, not a promise itself

x-pack/plugins/security/public/views/management/users.js

@@ -13,6 +13,8 @@ import { SECURITY_PATH, USERS_PATH } from './management_urls';
 import { Users } from '../../components/management/users';
 import { createApiClient } from '../../lib/api';
 import { I18nProvider } from '@kbn/i18n/react';
+import { getUsersBreadcrumbs } from './breadcrumbs';
+
 routes.when(SECURITY_PATH, {
   redirectTo: USERS_PATH,
 });
@@ -23,6 +25,7 @@ const renderReact = (elem, httpClient, changeUrl) => {
 
 routes.when(USERS_PATH, {
   template,
+  k7Breadcrumbs: getUsersBreadcrumbs,
   controller($scope, $route, $q, confirmModal, $http, kbnUrl) {
     $scope.$on('$destroy', () => {
       const elem = document.getElementById('usersReactRoot');