Add ApplicationService Mounting #41007

joshdover · 2019-07-12T15:05:45Z

Summary

Implements RFC-0004
Related to #18843
Depends on #41251

This adds support for UI applications in the New Platform. With this change, CoreSystem on the frontend now has a "legacy mode" and normal mode.

In legacy mode, the ApplicationService does not mount its router on the page and instead gives control to the LegacyService.
In normal mode, the ApplicationService mounts its router on the page and controls mounting individual UI apps. The LegacyService does import any legacy code, though it does still provide some data and features to mirror Legacy behaviors.

This mode is toggled by the legacy renderApp function, which serves the bootstrapping page and bundles. When rendering a UI app that is unknown to the legacy platform, this function will instead serve the "core-only" bundle which does not include any legacy code or applications.

New Platform applications currently have some caveats:

Telemetry banner will not show (need Add Banners to OverlayService #41986 implemented)
No legacy code, including uiExport "hacks" are run when NP apps are running.
- This means some features will not work on these pages, such as reporting's polling for completed jobs.
- I've done an audit of all our uiExport hacks that need to be updated: Prepare uiExport hacks for New Platform #42984
~~Nav links for NP apps do not support "open in new window". To support this, we need EUI to support links with both href and onClick props (Allow href and onClick in ListGroupItem eui#1933)~~

Testing

To test the NP application service yourself, unzip these plugins into your plugins directory, run yarn kbn bootstrap, and start Kibana.

Alternatively, you can also start the functional test server with the config that loads some test applications:

node scripts/functional_tests_server.js --config test/plugin_functional/config.js

Dev Docs

Kibana Platform plugins may now register UI applications to display in the global navigation and be mounted inside Kibana as a single-page application. Example:

class MyPlugin {
  public setup(core) {
    core.application.register({
      id: 'myApp',
      async mount(context, params) {
        const { renderApp } = await import('./application');
        return renderApp(context, params);
      }
    });
  }
}

For more details, see the Application Mounting RFC.

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
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios

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

joshdover · 2019-08-27T20:59:54Z

@elastic/kibana-platform With the EUI update in, I've updated this to support "open in new tab" correctly. This should be 100% ready now, just looking for approvals.

elasticmachine · 2019-08-27T21:28:23Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-27T21:50:57Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

mshustov · 2019-08-28T12:58:17Z

test/plugin_functional/plugins/core_plugin_b/public/plugin.tsx

+ core.application.register({
+ id: 'bar',
+ title: 'Bar',
+ async mount(context, params) {


we need to create recommendation how to declare additional properties on context. if we delete this import https://github.com/elastic/kibana/pull/41007/files#diff-73111fdf9de323e24d3cf6695ad53aafR21 context doesn't contain methods provided by dependency. because dependency declaration is not imported

declare module 'kibana/public' { interface AppMountContext {...} }

probably we should recommend declaring context type manually, as we do for deps. in this case plugin will always import a type from dependency and read module declaration.

package.json

src/core/public/application/application_service.test.tsx

src/core/public/application/application_service.tsx

src/core/public/http/http_service.mock.ts

src/core/public/plugins/plugin_context.ts

mshustov · 2019-08-28T13:42:28Z

src/core/public/plugins/plugins_service.test.ts

- application: {
- capabilities: mockStartDeps.application.capabilities,
- },
+ application: expect.any(Object),


what we want to test here?

Yeah I'm starting to find these tests useless. We're basically just testing that the interface is right...which TS already does. What do you think about removing these assertions completely?

I'm not sure assertion works outside of expect. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jest/index.d.ts#L547-L563 this test uses it when creates a new object

In other places when we test interfaces it's excessive, because TS performs the same check

src/core/public/rendering/rendering_service.test.tsx

test/functional/page_objects/common_page.js

test/plugin_functional/plugins/core_plugin_a/public/plugin.tsx

src/core/public/application/ui/app_container.tsx

mshustov · 2019-08-29T14:17:44Z

src/core/public/chrome/ui/header/header.tsx

 };
 }

+function isModifiedEvent(event: MouseEvent) {


no tests. I'm not sure that our testing framework supports keyDown + click tho

This entire UI has no tests when I copied it from legacy. I plan to refactor and cleanup all of this header UI code after this is done.

elasticmachine · 2019-08-29T23:16:00Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-30T23:18:42Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-03T16:24:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-03T17:58:31Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* Add core-only bundle * Add ApplicationService mounting * Add LegacyCore{Setup,Start} * Fix PR comments * Add functional tests * Fix PR comments * Fix PR comments * Remove other usages of rootRoute * Use state field notation * Add support for open in new tab * Fix PR comments * Fix pesky await from the dead * Update docs * Bump @types/history

rayafratkina · 2019-11-13T21:51:13Z

@joshdover can you please add a DevDocs section?

joshdover · 2019-11-13T23:45:33Z

@rayafratkina Done.

elasticmachine · 2019-11-13T23:45:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4152e92

joshdover added Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc Feature:New Platform release_note:plugin_api_changes Contains a Plugin API changes section for the breaking plugin API changes section. v7.4.0 labels Jul 12, 2019