Navbar directive

[w33ble]

Uses navbarExtensions to inject controls into the navbar

• Turns <navbar> into a directive, injecting controls based on its name attribute
  • Mapped to appName in the registry objects
  • Sorted by order, default controls are order 0
    • Allow controls to be injected before the Kibana defaults

Closes #5198

[spalger]

this would probably read cleaner if it was broken up a bit. Also, _spread 'em!_

const buttons = $buttonGroup.children().detach().toArray();
const controls = [
  ...buttons.map((button) => {
    return {
      order: 0,
      $el: $(button)
    };
  }),

  ...extensions.map((extension, index) => {
    return {
      extension,
      index,
      order: extension.order
    };
  })
]

[w33ble]

Oooooh, I hadn't thought about spread that way before. That's hawt!

[spalger]

Made a couple non-required suggestions. LGTM

[spalger]

LGTM

[blachniet]

Are there any sample navbar injection plugins that we could use as a reference for building our own?

[w33ble]

@blachniet not currently, and also note that the structure is changing with #7508. That PR basically makes it work the same as any other top nav link.

Basically, items are are added to the navbar_extensions registry, and the format is the same as any other kbn_top_nav item. kbn_top_nav_controller is the best source of available parameters for the definition. Here's an example of how it's used in Discover.

Using this in your plugin requires 2 parts. First, you define your navbarExtensions via the uiExports property when you created you Kibana Plugin instance, similar to this:

return new kibana.Plugin({
    id: 'my-plugin',
    require: ['kibana'],

    uiExports: {
      navbarExtensions: [
        'plugins/my-plugin/path/to/definition'
      ],
    },
});

Then in your plugin's public/path/to/definition.js file:

const navbarExtensions = require('ui/registry/navbar_extensions');

function myPluginControlProvider() {
  return {
    appName: 'discover', // the name of the app you want to inject into
    key: 'my-plugin-control', // unique key/name for your control
    label: 'Click Me', // [optional] label to use, otherwise it uses whatever you put in 'key'
    template: '<h1>OH HAI!</h1>', // [optional] markup to inject into the "config" section below the menu
    description: 'Dashboard Report', // [optional] aria-label, may get a tooltip in the future, uses 'key' by default
  };
}

navbarExtensions.register(myPluginControlProvider);

Note that the name property comes from the attribute on the kbn-top-nav directive. Here's it being used in Discover

If you don't need to add controls in the "config" section under the menu, but instead just need to do something once your control is clicked, you use the run property in the definition; the New Search control in Discover is a good example.

I hope that's helpful.

[varunsharma27]

Would it be possible to inject controls to navBar and hide it (Using hideButton()) when viewMode:edit?
(navbar for dashboardApp)

[trevan]

@varundbest, yes it is possible. Inject "getAppState" into your registered function to create the navbar extension and then "getAppState().viewMode === 'edit'" will return true if it is in edit mode.