Allow plugin apps to use React on top level

[timroes]

Currently the whole app infrastructure within plugins is tightly coupled with Angular. It's not "easily" possible to create an app within a plugin, that uses React at the top level. The easiest way I currently found is:

uiModules.get('kibana/myComponent', [])
  .component('myComponent', {
    controller: ($element) => {
      ReactDOM.render(
        <MyComponent />,
        $element[0]
      );
    }
  });

uiRoutes.enable();
uiRoutes.when('/', {
  template: '<my-component></my-component>',
  reloadOnSearch: false,
});

If you don't use the uiRoutes.enable (e.g. by just using chrome.setRootTemplate), you will

(a) have to somehow wait for Angular to boot up and the next digest cycle for the chrome to actually render the template, which can easily lead to ugly code like:

uiModules.get('kibana')
.run($timeout => $timeout(() => { /* mount react here */ }));

(b) as long as you don't use uiRoutes not all services will work as expected, since some setup work will be done via the uiRoutes.addSetupWorks methods. All those services (e.g. timefilter) would need manual setup work when not using the Angular routing.

I think we should have a high level API, like chrome.setRootComponent(<MyComponent />) to mount React components and still have all the services that an application might need in tact, unless they are all able to work without Angular.

[epixa]

This is a non-issue in the new platform, and we don't plan to change this in the legacy core, so I'm going to close this out.

Follow along on #16253