Make Field a React.lazy export (#78483)

* Make Field a React.lazy export

* Fix broken types

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/advanced_settings/public/index.ts

@@ -17,11 +17,19 @@
  * under the License.
  */
 
+import React from 'react';
 import { PluginInitializerContext } from 'kibana/public';
 import { AdvancedSettingsPlugin } from './plugin';
 export { AdvancedSettingsSetup, AdvancedSettingsStart } from './types';
 export { ComponentRegistry } from './component_registry';
-export { Field } from './management_app/components/field';
+
+/**
+ * Exports the field component as a React.lazy component. We're explicitly naming it lazy here
+ * so any plugin that would import that can clearly see it's lazy loaded and can only be used
+ * inside a suspense context.
+ */
+const LazyField = React.lazy(() => import('./management_app/components/field'));
+export { LazyField };
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new AdvancedSettingsPlugin();

src/plugins/advanced_settings/public/management_app/components/field/index.ts

@@ -18,3 +18,6 @@
  */
 
 export { Field, getEditableValue } from './field';
+
+// eslint-disable-next-line import/no-default-export
+export { Field as default } from './field';

src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx

@@ -21,6 +21,7 @@ import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import TelemetryManagementSection from './telemetry_management_section';
 import { TelemetryService } from '../../../telemetry/public/services';
 import { coreMock } from '../../../../core/public/mocks';
+import { render } from '@testing-library/react';
 
 describe('TelemetryManagementSectionComponent', () => {
   const coreStart = coreMock.createStart();
@@ -73,19 +74,31 @@ describe('TelemetryManagementSectionComponent', () => {
       http: coreSetup.http,
     });
 
-    const component = mountWithIntl(
-      <TelemetryManagementSection
-        telemetryService={telemetryService}
-        onQueryMatchChange={onQueryMatchChange}
-        showAppliesSettingMessage={false}
-        enableSaving={true}
-        toasts={coreStart.notifications.toasts}
-      />
+    const component = render(
+      <React.Suspense fallback={<span>Fallback</span>}>
+        <TelemetryManagementSection
+          telemetryService={telemetryService}
+          onQueryMatchChange={onQueryMatchChange}
+          showAppliesSettingMessage={false}
+          enableSaving={true}
+          toasts={coreStart.notifications.toasts}
+        />
+      </React.Suspense>
     );
+
     try {
-      expect(
-        component.setProps({ ...component.props(), query: { text: 'asssdasdsad' } })
-      ).toMatchSnapshot();
+      component.rerender(
+        <React.Suspense fallback={<span>Fallback</span>}>
+          <TelemetryManagementSection
+            query={{ text: 'asdasdasd' }}
+            telemetryService={telemetryService}
+            onQueryMatchChange={onQueryMatchChange}
+            showAppliesSettingMessage={false}
+            enableSaving={true}
+            toasts={coreStart.notifications.toasts}
+          />
+        </React.Suspense>
+      );
       expect(onQueryMatchChange).toHaveBeenCalledWith(false);
       expect(onQueryMatchChange).toHaveBeenCalledTimes(1);
     } finally {

src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx

@@ -34,7 +34,7 @@ import { i18n } from '@kbn/i18n';
 import { TelemetryPluginSetup } from 'src/plugins/telemetry/public';
 import { PRIVACY_STATEMENT_URL } from '../../../telemetry/common/constants';
 import { OptInExampleFlyout } from './opt_in_example_flyout';
-import { Field } from '../../../advanced_settings/public';
+import { LazyField } from '../../../advanced_settings/public';
 import { ToastsStart } from '../../../../core/public';
 
 type TelemetryService = TelemetryPluginSetup['telemetryService'];
@@ -119,7 +119,7 @@ export class TelemetryManagementSection extends Component<Props, State> {
 
             {this.maybeGetAppliesSettingMessage()}
             <EuiSpacer size="s" />
-            <Field
+            <LazyField
               setting={
                 {
                   type: 'boolean',