chromeNavControls not working with v7.0.0

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.

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!

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.