[kbnDevToolsApp] allow extending the top nav

The kbn-dev-tools-app directive renders a navbar above each devtool, giving it breadcrumbs and links to the other devtools. This collides with the toolbars used in devtools like console and causes two mostly-empty toolbars to be stacked.

To fix this, we are merging the navbar from kbn-dev-tools-app and the toolbar provided by the devtools into a single kbn-top-nav toolbar. Console already used the kbn-top-nav directive for it's navbar, so kbn-dev-tools-app just needed to be extended to consume and render the kbn-top-nav configuration (a controller in this instance).

src/core_plugins/console/public/console.js

@@ -15,7 +15,6 @@ require('./src/directives/sense_history');
 require('./src/directives/sense_settings');
 require('./src/directives/sense_help');
 require('./src/directives/sense_welcome');
-require('./src/directives/sense_navbar');
 
 devTools.register(() => ({
   order: 1,

src/core_plugins/console/public/index.html

@@ -1,6 +1,4 @@
-<kbn-dev-tools-app data-test-subj="console">
-  <sense-navbar></sense-navbar>
-
+<kbn-dev-tools-app data-test-subj="console" top-nav-config="topNavController">
   <div id="editor_output_container">
     <div id="editor_container">
       <ul id="autocomplete"></ul>

src/core_plugins/console/public/src/controllers/sense_controller.js

@@ -5,6 +5,7 @@ import { initializeInput } from '../input';
 import { initializeOutput } from '../output';
 import es from '../es';
 import init from '../app';
+import { SenseTopNavController } from './sense_top_nav_controller';
 
 const module = require('ui/modules').get('app/sense');
 
@@ -16,14 +17,14 @@ module.run(function (Private, $rootScope) {
   };
 });
 
-module.controller('SenseController', function SenseController($scope, $timeout, $location, docTitle) {
-
+module.controller('SenseController', function SenseController(Private, $scope, $timeout, $location, docTitle) {
   docTitle.change('Console');
 
-  let input, output;
+  $scope.topNavController = Private(SenseTopNavController)
 
   // We need to wait for these elements to be rendered before we can select them with jQuery
   // and then initialize this app
+  let input, output;
   $timeout(() => {
     output = initializeOutput($('#output'));
     input = initializeInput($('#editor'), $('#editor_actions'), $('#copy_as_curl'), output);

src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js

@@ -0,0 +1,35 @@
+import KbnTopNavControllerProvider from 'ui/kbn_top_nav/kbn_top_nav_controller';
+import storage from '../storage';
+
+export function SenseTopNavController(Private) {
+  const KbnTopNavController = Private(KbnTopNavControllerProvider);
+
+  const controller = new KbnTopNavController([
+    {
+      key: 'welcome',
+      hideButton: true,
+      template: `<sense-welcome></sense-welcome>`
+    },
+    {
+      key: 'history',
+      description: 'History',
+      template: `<sense-history></sense-history>`
+    },
+    {
+      key: 'settings',
+      description: 'Settings',
+      template: `<sense-settings></sense-settings>`
+    },
+    {
+      key: 'help',
+      description: 'Help',
+      template: `<sense-help></sense-help>`
+    },
+  ]);
+
+  if (storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
+    controller.open('welcome')
+  }
+
+  return controller
+}

src/core_plugins/console/public/src/directives/sense_navbar.html

@@ -1 +0,0 @@
-<kbn-top-nav name="console" ng-if="sense" config="navbar.menu" data-test-subj="top-nav"></kbn-top-nav>

src/core_plugins/console/public/src/directives/sense_navbar.js

@@ -1,53 +0,0 @@
-const history = require('../history');
-const es = require('../es');
-const storage = require('../storage');
-require('ui/kbn_top_nav');
-const KbnTopNavControllerProvider = require('ui/kbn_top_nav/kbn_top_nav_controller');
-
-require('ui/modules')
-.get('app/sense')
-.directive('senseNavbar', function () {
-  return {
-    restrict: 'E',
-    template: require('./sense_navbar.html'),
-    require: '^ngController',
-    scope: {},
-    link($scope, $el, attrs, sense) {
-      $scope.sense = sense
-    },
-    controllerAs: 'navbar',
-    controller: class SenseNavbarController {
-      constructor($scope, $timeout, $element, Private) {
-        const KbnTopNavController = Private(KbnTopNavControllerProvider);
-
-        this.menu = new KbnTopNavController([
-          {
-            key: 'welcome',
-            hideButton: true,
-            template: `<sense-welcome></sense-welcome>`
-          },
-          {
-            key: 'history',
-            description: 'History',
-            template: `<sense-history></sense-history>`
-          },
-          {
-            key: 'settings',
-            description: 'Settings',
-            template: `<sense-settings></sense-settings>`
-          },
-          {
-            key: 'help',
-            description: 'Help',
-            template: `<sense-help></sense-help>`
-          },
-        ]);
-
-        if (storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
-          this.menu.open('welcome')
-        }
-
-      }
-    }
-  };
-});

src/core_plugins/kibana/public/dev_tools/directives/dev_tools_app.js

@@ -1,5 +1,5 @@
 import uiModules from 'ui/modules';
-import devTools from 'ui/registry/dev_tools';
+import DevToolsRegistryProvider from 'ui/registry/dev_tools';
 import template from 'plugins/kibana/dev_tools/partials/dev_tools_app.html';
 import 'plugins/kibana/dev_tools/styles/dev_tools_app.less';
 import 'ui/kbn_top_nav';
@@ -7,14 +7,21 @@ import 'ui/kbn_top_nav';
 uiModules
 .get('apps/dev_tools')
 .directive('kbnDevToolsApp', function (Private, $location) {
+  const devToolsRegistry = Private(DevToolsRegistryProvider);
+
   return {
     restrict: 'E',
     replace: true,
     template,
     transclude: true,
-    link: function ($scope) {
-      $scope.devTools = Private(devTools).inOrder;
-      $scope.currentPath = `#${$location.path()}`;
+    scope: {
+      topNavConfig: '='
+    },
+    bindToController: true,
+    controllerAs: 'kbnDevToolsApp',
+    controller() {
+      this.devTools = devToolsRegistry.inOrder;
+      this.currentPath = `#${$location.path()}`;
     }
   };
 });

src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html

@@ -1,16 +1,16 @@
-<div class="dev-tools-app-container app-container">
+<div class="dev-tools__app-container app-container">
   <bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
-  <kbn-top-nav name="devtools">
+  <kbn-top-nav name="devtools" config="kbnDevToolsApp.topNavConfig">
     <div class="localTabs">
       <a
-        ng-repeat="item in devTools"
+        ng-repeat="item in kbnDevToolsApp.devTools"
         class="localTab"
-        ng-class="{'localTab-isSelected': currentPath === item.url}"
+        ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
         kbn-href="{{::item.url}}"
       >
         {{::item.display}}
       </a>
     </div>
   </kbn-top-nav>
-  <div role="main" class="dev-tools-container" ng-transclude></div>
+  <div role="main" class="dev-tools__container" ng-transclude></div>
 </div>

src/core_plugins/kibana/public/dev_tools/styles/dev_tools_app.less

@@ -1,9 +1,10 @@
 @import (reference) "~ui/styles/mixins.less";
+@import (reference) "~ui/styles/variables.less";
 
-.dev-tools-app-container {
+.dev-tools__container {
   .flex-parent;
 }
 
-.dev-tools-container {
+.dev-tools__app-container {
   .flex-parent;
 }

src/ui/public/kbn_top_nav/kbn_top_nav.js

@@ -54,6 +54,18 @@ module.directive('kbnTopNav', function (Private) {
     restrict: 'E',
     transclude: true,
     template,
+
+    // TODO: The kbnTopNav currently requires that it share a scope with
+    // it's parent directive. This allows it to export the kbnTopNav controller
+    // and allows the config templates to use values from the parent scope.
+    //
+    // Moving this to an isolate scope will require modifying the config
+    // directive to support child directives, instead of templates, so that
+    // parent controllers can be imported/required rather than simply referenced
+    // directly in the template.
+    //
+    // scope: {}
+
     controller($scope, $attrs, $element) {
       const extensions = getNavbarExtensions($attrs.name);
       let controls = _.get($scope, $attrs.config, []);
@@ -65,6 +77,7 @@ module.directive('kbnTopNav', function (Private) {
 
       $scope.kbnTopNav = new KbnTopNavController(controls);
       $scope.kbnTopNav._link($scope, $element);
+
       return $scope.kbnTopNav;
     }
   };