more aggressive lazy loading for ingest_manager (#79633)

* slim ingest_manager

* revert registerPackagePolicyComponent export

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/home_integration/index.ts

@@ -1,7 +0,0 @@
-/*
- * 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.
- */
-export { TutorialDirectoryNotice, TutorialDirectoryHeaderLink } from './tutorial_directory_notice';
-export { TutorialModuleNotice } from './tutorial_module_notice';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/home_integration/index.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 React from 'react';
+import type {
+  TutorialDirectoryNoticeComponent,
+  TutorialDirectoryHeaderLinkComponent,
+  TutorialModuleNoticeComponent,
+} from 'src/plugins/home/public';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+const TutorialDirectoryNoticeLazy = React.lazy(() => import('./tutorial_directory_notice'));
+export const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = () => (
+  <React.Suspense fallback={<EuiLoadingSpinner />}>
+    <TutorialDirectoryNoticeLazy />
+  </React.Suspense>
+);
+
+const TutorialDirectoryHeaderLinkLazy = React.lazy(
+  () => import('./tutorial_directory_header_link')
+);
+export const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = () => (
+  <React.Suspense fallback={<EuiLoadingSpinner />}>
+    <TutorialDirectoryHeaderLinkLazy />
+  </React.Suspense>
+);
+
+const TutorialModuleNoticeLazy = React.lazy(() => import('./tutorial_module_notice'));
+export const TutorialModuleNotice: TutorialModuleNoticeComponent = ({
+  moduleName,
+}: {
+  moduleName: string;
+}) => (
+  <React.Suspense fallback={<EuiLoadingSpinner />}>
+    <TutorialModuleNoticeLazy moduleName={moduleName} />
+  </React.Suspense>
+);

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/home_integration/tutorial_directory_header_link.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 React, { memo, useState, useEffect } from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import type { TutorialDirectoryHeaderLinkComponent } from 'src/plugins/home/public';
+import { useLink, useCapabilities } from '../../hooks';
+
+const tutorialDirectoryNoticeState$ = new BehaviorSubject({
+  settingsDataLoaded: false,
+  hasSeenNotice: false,
+});
+
+const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(() => {
+  const { getHref } = useLink();
+  const { show: hasIngestManager } = useCapabilities();
+  const [noticeState, setNoticeState] = useState({
+    settingsDataLoaded: false,
+    hasSeenNotice: false,
+  });
+
+  useEffect(() => {
+    const subscription = tutorialDirectoryNoticeState$.subscribe((value) => setNoticeState(value));
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? (
+    <EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
+      <FormattedMessage
+        id="xpack.ingestManager.homeIntegration.tutorialDirectory.ingestManagerAppButtonText"
+        defaultMessage="Try Ingest Manager Beta"
+      />
+    </EuiButtonEmpty>
+  ) : null;
+});
+
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default TutorialDirectoryHeaderLink;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/home_integration/tutorial_directory_notice.tsx

@@ -16,10 +16,7 @@ import {
   EuiCallOut,
   EuiSpacer,
 } from '@elastic/eui';
-import {
-  TutorialDirectoryNoticeComponent,
-  TutorialDirectoryHeaderLinkComponent,
-} from 'src/plugins/home/public';
+import type { TutorialDirectoryNoticeComponent } from 'src/plugins/home/public';
 import { sendPutSettings, useGetSettings, useLink, useCapabilities } from '../../hooks';
 
 const FlexItemButtonWrapper = styled(EuiFlexItem)`
@@ -33,7 +30,7 @@ const tutorialDirectoryNoticeState$ = new BehaviorSubject({
   hasSeenNotice: false,
 });
 
-export const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
+const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(() => {
   const { getHref } = useLink();
   const { show: hasIngestManager } = useCapabilities();
   const { data: settingsData, isLoading } = useGetSettings();
@@ -128,27 +125,6 @@ export const TutorialDirectoryNotice: TutorialDirectoryNoticeComponent = memo(()
   ) : null;
 });
 
-export const TutorialDirectoryHeaderLink: TutorialDirectoryHeaderLinkComponent = memo(() => {
-  const { getHref } = useLink();
-  const { show: hasIngestManager } = useCapabilities();
-  const [noticeState, setNoticeState] = useState({
-    settingsDataLoaded: false,
-    hasSeenNotice: false,
-  });
-
-  useEffect(() => {
-    const subscription = tutorialDirectoryNoticeState$.subscribe((value) => setNoticeState(value));
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, []);
-
-  return hasIngestManager && noticeState.settingsDataLoaded && noticeState.hasSeenNotice ? (
-    <EuiButtonEmpty size="s" iconType="link" flush="right" href={getHref('overview')}>
-      <FormattedMessage
-        id="xpack.ingestManager.homeIntegration.tutorialDirectory.ingestManagerAppButtonText"
-        defaultMessage="Try Ingest Manager Beta"
-      />
-    </EuiButtonEmpty>
-  ) : null;
-});
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default TutorialDirectoryNotice;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/home_integration/tutorial_module_notice.tsx

@@ -9,7 +9,7 @@ import { EuiText, EuiLink, EuiSpacer } from '@elastic/eui';
 import { TutorialModuleNoticeComponent } from 'src/plugins/home/public';
 import { useGetPackages, useLink, useCapabilities } from '../../hooks';
 
-export const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }) => {
+const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ moduleName }) => {
   const { getHref } = useLink();
   const { show: hasIngestManager } = useCapabilities();
   const { data: packagesData, isLoading } = useGetPackages();
@@ -72,3 +72,7 @@ export const TutorialModuleNotice: TutorialModuleNoticeComponent = memo(({ modul
 
   return null;
 });
+
+// Needed for React.lazy
+// eslint-disable-next-line import/no-default-export
+export default TutorialModuleNotice;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_license.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { LicenseService } from '../services';
+import { LicenseService } from '../../../../common/services/license';
 
 export const licenseService = new LicenseService();
 

x-pack/plugins/ingest_manager/public/index.ts

@@ -18,7 +18,7 @@ export {
   registerPackagePolicyComponent,
 } from './applications/ingest_manager/sections/agent_policy/create_package_policy_page/components/custom_package_policy';
 
-export { NewPackagePolicy } from './applications/ingest_manager/types';
+export type { NewPackagePolicy } from './applications/ingest_manager/types';
 export * from './applications/ingest_manager/types/intra_app_route_state';
 
 export { pagePathGetters } from './applications/ingest_manager/constants';

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

@@ -23,7 +23,8 @@ import { BASE_PATH } from './applications/ingest_manager/constants';
 
 import { IngestManagerConfigType } from '../common/types';
 import { setupRouteService, appRoutesService } from '../common';
-import { setHttpClient, licenseService } from './applications/ingest_manager/hooks';
+import { licenseService } from './applications/ingest_manager/hooks/use_license';
+import { setHttpClient } from './applications/ingest_manager/hooks/use_request/use_request';
 import {
   TutorialDirectoryNotice,
   TutorialDirectoryHeaderLink,