WIP: [ML] NavMenu conversion to React

[alvarezmelissa87]

Summary

NavMenu rewrite to React/eui.

Along with the navigation tabs, this PR replaces the kbn_top_nav angular dependency (datepicker and refresh button) with a react TopNav component consisting of the same EuiSuperDatePicker component.

This PR wraps the legacy timefilter in a local class and only pulls the legacy timfilter in that file. All the files that used to pull in the old timefilter now import the new timefilter. This will allow us to easily replace the legacy timefilter when it is replaced in the new platform.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/ml-ui

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[peteharverson]

The name of this function and subscribeToRefreshIntervalUpdate are inconsistent. Maybe just drop the s to give subscribeToUpdate or maybe subscribeToTimeFilterUpdate?

[alvarezmelissa87]

subscribeToUpdates listens for fetch being emitted by the timefilter dependency - this happens both on time update and on refreshInterval update while the subscribeToRefreshIntervalUpdate only listens for the refreshInterval update event. That's why I had the naming that way.

Maybe I can be more explicit? subscribeToTimeAndRefreshIntervalUpdates, subscribeToRefreshIntervalUpdate, maybe if we need to only listen for the time update add a subscribeToTimeUpdate? That way it will be very clear which events are being listened to? Open to ideas on this.

[peteharverson]

Ah ok, in that case I think subscribeToUpdates is fine as it is. Just add a comment clarifying that it happens for both types of update event. Adding a subscribeToTimeUpdate probably worth adding for completeness.

[peteharverson]

Is this comment still needed?

[peteharverson]

Are these TODOs still needed?

[peteharverson]

Has this TODO been done?

[peteharverson]

Are these needed?

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[lizozom]

@peteharverson @ppisljar,

While in most apps kbn-top-nav is used to display an options menu (New, Save, Settings, etc.), it seems to me, like in ML (and also Monitoring app) it's used to display content in a tabular fashion.

I think these should be two different components (OptionsMenu and TabbedContent?).

The component I'm working on is used to display options menus (should be ready within a week or so).

I would love to use the work you're doing on displaying tabbed content to create a component that will be offered as part of the arch team react helper components.

I'd love to hear your thoughts on this.

[alvarezmelissa87]

Closing in lieu of #40830