chromeNavControls not working with v7.0.0

Elastic Stack Kibana
1

I'm currently in the process of upgrading our custom Kibana from v6.2.4 to v7.0.0. It is a giant leap. I've already made most of our custom plugins except for a few things. One of which is the chromeNavControls of our plugins are all NOT showing up anymore on the sidebar. Our uiExports looks like:

uiExports: {
      styleSheetPaths: resolve(__dirname, 'public/theme/index.scss'),
      chromeNavControls: ['plugins/sonark/ui/nav_control'],
      hacks: ['plugins/sonark/ui/services'],
      savedObjectSchemas: {
        space: {
          isNamespaceAgnostic: true,
        },
      }
    }

Our chromeNavControls path points to:

import { chromeNavControlsRegistry } from 'ui/registry/chrome_nav_controls';

import '../../../common/polyfill';
import './../../management';


import '../decorator/response_handlers';
import '../decorator/response_error_handlers';

import '../directives/logout_button_sidebar/logout_button_sidebar';
import '../directives/kill_current_op_button_sidebar/kill_current_op_button_sidebar';

// Add button to the sidebar.
chromeNavControlsRegistry.register(function () {
  return {
    name: 'logout',
    order: 1000,
    template: '<logout-button-sidebar></logout-button-sidebar>'
  };
});

chromeNavControlsRegistry.register(function () {
  return {
    name: 'kill all user operation',
    order: 1000,
    template: '<kill-current-op-button-sidebar all-kibana-user-op="true"></kill-current-op-button-sidebar>'
  };
});

chromeNavControlsRegistry.register(function () {
  return {
    name: 'kill operation',
    order: 1000,
    template: '<kill-current-op-button-sidebar></kill-current-op-button-sidebar>'
  };
});

What could I possibly be doing wrong? I've been googling and looking for code usage, but I seem to be doing what is required. There is something I am missing.

2

Hi there!

The new navigation uses a new registry for rendering nav controls which is a bit different. You'll now need to import the chromeHeaderNavControlsRegistry from ui/registry/chrome_header_nav_controls.

When you call register on this registry, instead of providing a template string, you'll actually need to provide a render function which will receive a HTMLElement to render into. You can use any rendering framework you'd like, here's an example of how to use React: https://github.com/elastic/kibana/blob/master/x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx#L97

You'll also need to provide a side property to tell the nav to render your control either on the left or right side of the screen. Let me know if that helps!