load assets lazily in es-ui plugins (#62487) (#62578)

* load assets lazily

* addres cj comments

Author: mshustov

src/plugins/share/public/services/short_url_redirect_app.ts

@@ -19,7 +19,6 @@
 
 import { CoreSetup } from 'kibana/public';
 import { getUrlIdFromGotoRoute, getUrlPath, GOTO_PREFIX } from '../../common/short_url_routes';
-import { hashUrl } from '../../../kibana_utils/public';
 
 export const createShortUrlRedirectApp = (core: CoreSetup, location: Location) => ({
   id: 'short_url_redirect',
@@ -35,6 +34,7 @@ export const createShortUrlRedirectApp = (core: CoreSetup, location: Location) =
 
     const response = await core.http.get<{ url: string }>(getUrlPath(urlId));
     const redirectUrl = response.url;
+    const { hashUrl } = await import('../../../kibana_utils/public');
     const hashedUrl = hashUrl(redirectUrl);
     const url = core.http.basePath.prepend(hashedUrl);
 

x-pack/plugins/index_management/public/application/mount_management_section.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreSetup } from 'src/core/public';
+import { ManagementAppMountParams } from 'src/plugins/management/public/';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+
+import { ExtensionsService } from '../services';
+import { IndexMgmtMetricsType } from '../types';
+import { AppDependencies } from './app_context';
+import { breadcrumbService } from './services/breadcrumbs';
+import { documentationService } from './services/documentation';
+import { HttpService, NotificationService, UiMetricService } from './services';
+
+import { renderApp } from '.';
+
+interface InternalServices {
+  httpService: HttpService;
+  notificationService: NotificationService;
+  uiMetricService: UiMetricService<IndexMgmtMetricsType>;
+  extensionsService: ExtensionsService;
+}
+
+export async function mountManagementSection(
+  coreSetup: CoreSetup,
+  usageCollection: UsageCollectionSetup,
+  services: InternalServices,
+  params: ManagementAppMountParams
+) {
+  const { element, setBreadcrumbs } = params;
+  const [core] = await coreSetup.getStartServices();
+  const { docLinks, fatalErrors } = core;
+
+  breadcrumbService.setup(setBreadcrumbs);
+  documentationService.setup(docLinks);
+
+  const appDependencies: AppDependencies = {
+    core: {
+      fatalErrors,
+    },
+    plugins: {
+      usageCollection,
+    },
+    services,
+  };
+
+  return renderApp(element, { core, dependencies: appDependencies });
+}

x-pack/plugins/index_management/public/plugin.ts

@@ -10,10 +10,7 @@ import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/p
 import { ManagementSetup } from '../../../../src/plugins/management/public';
 import { UIM_APP_NAME, PLUGIN } from '../common/constants';
 
-import { AppDependencies } from './application';
 import { httpService } from './application/services/http';
-import { breadcrumbService } from './application/services/breadcrumbs';
-import { documentationService } from './application/services/documentation';
 import { notificationService } from './application/services/notification';
 import { UiMetricService } from './application/services/ui_metric';
 
@@ -44,7 +41,7 @@ export class IndexMgmtUIPlugin {
   }
 
   public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): IndexMgmtSetup {
-    const { http, notifications, getStartServices } = coreSetup;
+    const { http, notifications } = coreSetup;
     const { usageCollection, management } = plugins;
 
     httpService.setup(http);
@@ -55,30 +52,15 @@ export class IndexMgmtUIPlugin {
       id: PLUGIN.id,
       title: i18n.translate('xpack.idxMgmt.appTitle', { defaultMessage: 'Index Management' }),
       order: 1,
-      mount: async ({ element, setBreadcrumbs }) => {
-        const [core] = await getStartServices();
-        const { docLinks, fatalErrors } = core;
-
-        breadcrumbService.setup(setBreadcrumbs);
-        documentationService.setup(docLinks);
-
-        const appDependencies: AppDependencies = {
-          core: {
-            fatalErrors,
-          },
-          plugins: {
-            usageCollection,
-          },
-          services: {
-            uiMetricService: this.uiMetricService,
-            extensionsService: this.extensionsService,
-            httpService,
-            notificationService,
-          },
+      mount: async params => {
+        const { mountManagementSection } = await import('./application/mount_management_section');
+        const services = {
+          httpService,
+          notificationService,
+          uiMetricService: this.uiMetricService,
+          extensionsService: this.extensionsService,
         };
-
-        const { renderApp } = await import('./application');
-        return renderApp(element, { core, dependencies: appDependencies });
+        return mountManagementSection(coreSetup, usageCollection, services, params);
       },
     });
 

x-pack/plugins/snapshot_restore/public/application/mount_management_section.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { CoreSetup } from 'src/core/public';
+import { ManagementAppMountParams } from 'src/plugins/management/public';
+import { i18n } from '@kbn/i18n';
+
+import { ClientConfigType } from '../types';
+import { httpService } from './services/http';
+import { UiMetricService } from './services';
+import { breadcrumbService, docTitleService } from './services/navigation';
+import { documentationLinksService } from './services/documentation';
+import { AppDependencies } from './app_context';
+import { renderApp } from '.';
+
+export async function mountManagementSection(
+  coreSetup: CoreSetup,
+  services: {
+    uiMetricService: UiMetricService;
+  },
+  config: ClientConfigType,
+  params: ManagementAppMountParams
+) {
+  const { element, setBreadcrumbs } = params;
+  const [core] = await coreSetup.getStartServices();
+  const {
+    docLinks,
+    chrome: { docTitle },
+  } = core;
+
+  docTitleService.setup(docTitle.change);
+  breadcrumbService.setup(setBreadcrumbs);
+  documentationLinksService.setup(docLinks);
+
+  const appDependencies: AppDependencies = {
+    core,
+    config,
+    services: {
+      httpService,
+      uiMetricService: services.uiMetricService,
+      i18n,
+    },
+  };
+
+  return renderApp(element, appDependencies);
+}

x-pack/plugins/snapshot_restore/public/plugin.ts

@@ -9,11 +9,9 @@ import { CoreSetup, PluginInitializerContext } from 'src/core/public';
 import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 import { ManagementSetup } from '../../../../src/plugins/management/public';
 import { PLUGIN } from '../common/constants';
-import { AppDependencies } from './application';
+
 import { ClientConfigType } from './types';
 
-import { breadcrumbService, docTitleService } from './application/services/navigation';
-import { documentationLinksService } from './application/services/documentation';
 import { httpService, setUiMetricService } from './application/services/http';
 import { textService } from './application/services/text';
 import { UiMetricService } from './application/services';
@@ -34,7 +32,7 @@ export class SnapshotRestoreUIPlugin {
 
   public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): void {
     const config = this.initializerContext.config.get<ClientConfigType>();
-    const { http, getStartServices } = coreSetup;
+    const { http } = coreSetup;
     const { management, usageCollection } = plugins;
 
     // Initialize services
@@ -48,29 +46,12 @@ export class SnapshotRestoreUIPlugin {
         defaultMessage: 'Snapshot and Restore',
       }),
       order: 7,
-      mount: async ({ element, setBreadcrumbs }) => {
-        const [core] = await getStartServices();
-        const {
-          docLinks,
-          chrome: { docTitle },
-        } = core;
-
-        docTitleService.setup(docTitle.change);
-        breadcrumbService.setup(setBreadcrumbs);
-        documentationLinksService.setup(docLinks);
-
-        const appDependencies: AppDependencies = {
-          core,
-          config,
-          services: {
-            httpService,
-            uiMetricService: this.uiMetricService,
-            i18n,
-          },
+      mount: async params => {
+        const { mountManagementSection } = await import('./application/mount_management_section');
+        const services = {
+          uiMetricService: this.uiMetricService,
         };
-
-        const { renderApp } = await import('./application');
-        return renderApp(element, appDependencies);
+        return await mountManagementSection(coreSetup, services, config, params);
       },
     });
   }

x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { CoreSetup } from 'src/core/public';
+import { ManagementAppMountParams } from '../../../../../src/plugins/management/public';
+import { renderApp } from './render_app';
+
+export async function mountManagementSection(
+  coreSetup: CoreSetup,
+  isCloudEnabled: boolean,
+  params: ManagementAppMountParams
+) {
+  const [{ i18n, docLinks }] = await coreSetup.getStartServices();
+  return renderApp({
+    element: params.element,
+    isCloudEnabled,
+    http: coreSetup.http,
+    i18n,
+    docLinks,
+  });
+}

x-pack/plugins/upgrade_assistant/public/plugin.ts

@@ -12,16 +12,14 @@ import { ManagementSetup } from '../../../../src/plugins/management/public';
 import { NEXT_MAJOR_VERSION } from '../common/version';
 import { Config } from '../common/config';
 
-import { renderApp } from './application/render_app';
-
 interface Dependencies {
   cloud: CloudSetup;
   management: ManagementSetup;
 }
 
 export class UpgradeAssistantUIPlugin implements Plugin {
   constructor(private ctx: PluginInitializerContext) {}
-  setup({ http, getStartServices }: CoreSetup, { cloud, management }: Dependencies) {
+  setup(coreSetup: CoreSetup, { cloud, management }: Dependencies) {
     const { enabled } = this.ctx.config.get<Config>();
     if (!enabled) {
       return;
@@ -36,9 +34,9 @@ export class UpgradeAssistantUIPlugin implements Plugin {
         values: { version: `${NEXT_MAJOR_VERSION}.0` },
       }),
       order: 1000,
-      async mount({ element }) {
-        const [{ i18n: i18nDep, docLinks }] = await getStartServices();
-        return renderApp({ element, isCloudEnabled, http, i18n: i18nDep, docLinks });
+      async mount(params) {
+        const { mountManagementSection } = await import('./application/mount_management_section');
+        return mountManagementSection(coreSetup, isCloudEnabled, params);
       },
     });
   }