Replace kbn_top_nav with a new React component

[lizozom]

Replace the kbn_top_nav angular component with a react component, in a manner that's as backwards compatible as possible, but still allow apps to use the new class directly as they move to React.

Apps using kbn-top-nav

• Dashboard
• Visualizations
• Discover
• Maps
• Timelion
• Console
• Graph
• ML migrated away to own component
• Monitoring

Cleanup

• Swap the old and new directives
• Solve the TopNav UX issue DISCUSS

Configuration

kbn_top_nav receives it's configuration via the config attribute. At the moment, this format won't change, to increase backwards compatibility. The only item that will be deprecated is template.

This is an example of a menu item configuration:

[{
      id: 'new',
      label: 'new'
      description: 'New Search',
      run: function () { kbnUrl.change('/discover'); },
      testId: 'discoverNewButton',
}, 
...
];

Currently kbn_top_nav supports the following options:

• id (key is still supported on the directive, but not in the React component)
• label
• description
• run
• template - to be deprecated
• testId
• disableButton - a value or a function, which if truthy, disables the menu item.
• tooltip - Is it needed?

Template deprecation

The new TopNavMenu won't be responsible for rendering the actions. Rather, those will be rendered by the run method, and convenience methods (showPanel, showModal) may be used.

Therefore, any existing menus that provide a template for kbn_top_nav to render, need to be migrated to use run functions instead.

• DevTools
• DevTools 2
• Graph
• Timelion

Transcluded items

Previously, top nav was extended (most frequently with search bar \ query bar \ filter bar \ date picker) by transcluding those directives inside the kbn-top-nav directive.

Moving to React, the new TopNavMenu won't support adding custom views into it.
Instead, it supports rendering search bar \ query bar \ filter bar \ date picker, by passing their options directly to TopNavMenu (or to the reactDirective, in case of Angular code).

[elasticmachine]

Pinging @elastic/kibana-app-arch

[peteharverson]

Note that work is already underway in ML to replace the Angular based top nav with a React component - see #39325.

[lukeelmers]

@lizozom I think this was closed by #40262, but feel free to re-open if that's not the case.

[lizozom]

@lukeelmers The issue is actually not closed yet.

We still need to do the following tasks:

• Replace top nav in Graph Switched graph to use new top nav #41966 @flash1293
• Remove top nav from Monitoring (or move the old directive into monitoring) @chrisronline
• Swap the old and new directives (get rid of kbn-top-nav-v2) @lizozom
• Solve the UX issues explained in [DISCUSS] Top Nav \ Search Bar behavior consistency #41900
• Improve the SearchBar \ TopNav API [DISCUSS] TopNavMenu \ SearchBar API #42350

I'll keep this issue open to track these tasks.

[flash1293]

@lizozom Is there a hard time limit prior to 8.0 for this? I probably won't get around to do this for a few more months.

[lizozom]

@flash1293 I would really like to push this in 7.4
If we could do a quick session and review some of the code, I might be able to do it myself.