Dev on Kibana plugin: navbar icon disappear when switching tabs

Elastic Stack Kibana
2

Are you using the uiExports: { navbarExtensions: [...] } definition in your plugin, or are you using a hack? It's not really clear from your comment. If you are using navbarExtensions, then the control shouldn't disappear like that. If you're injecting it with a hack, using jquery or something, then that could explain what you're seeing.

Anyway, using navbarExtensions is actually pretty easy, if poorly documented (and not having a lot of examples). Essentially, you add the following to your plugin definition:

uiExports: {
      navbarExtensions: [
        'plugins/<your-plugin-name>/<path-to-file>',
      ]
}

Do that for every control you want to add. Next, you register your navbarExtension so that it loads in the app(s) you'd like. The comments in kbn_top_nav.js are helpful here, since that's where navbarExtensions inject themselves:

/*
* @param {Array<Object>|KbnTopNavController} config
* @param {string} config[].key
*        - the uniq key for this menu item.
* @param {string} [config[].label]
*        - optional, string that will be displayed for the menu button.
*        Defaults to the key
* @param {string} [config[].description]
*        - optional, used for the screen-reader description of this menu
*        item, defaults to "Toggle ${key} view" for templated menu items
*        and just "${key}" for programatic menu items
* @param {boolean} [config[].hideButton]
*        - optional, set to true to prevent a menu item from being created.
*        This allow injecting templates into the navbar that don't have
*        an associated template
* @param {function} [config[].run]
*        - optional, function to call when the menu item is clicked, defaults
*        to toggling the template
*/

You will need to define, at a minimum, an appName (the name of the app to inject into), a unique key, and I'd encourage you to add a label too since it'll display that text then, which can be more user-friendly. And for basic functionality, you'll probably want a run property as well. So we're left with something like this:

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

function discoverControlProvider() {
  return {
    appName: 'discover',
    key: 'plugin-name-discover',
    label: 'Click Me',
    run: () => { alert('hey, quit poking me!'); },
  };
}

navbarExtensions.register(discoverControlProvider);

Here, discoverControlProvider can use Angular's dependency injection, so if you need to inject any custom logic to customize the display, or add a tooltip, or show/hide/disable the button, that can be pretty handy. If you want to get really fancy, you can use the template property, which will be evaluated in Angular. With that you can run any custom directive you want, so you can open up a config menu with a bunch of custom controls, for example, which is exactly how Reporting works.

I hope that helps.