From 7dcbbb4fde1654835cd79f6c5948cd35b8c857a9 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 24 Sep 2020 20:52:30 +0200
Subject: [PATCH 1/2] Make Field a React.lazy export

---
 src/plugins/advanced_settings/public/index.ts |  10 +-
 .../management_app/components/field/index.ts  |   5 +-
 ...telemetry_management_section.test.tsx.snap | 203 +-----------------
 .../telemetry_management_section.test.tsx     |  35 ++-
 .../telemetry_management_section.tsx          |   4 +-
 5 files changed, 40 insertions(+), 217 deletions(-)

diff --git a/src/plugins/advanced_settings/public/index.ts b/src/plugins/advanced_settings/public/index.ts
index db478fa1579e62..0e621e7cd7d1a4 100644
--- a/src/plugins/advanced_settings/public/index.ts
+++ b/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();
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/index.ts b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
index d1b9b34515532e..1203adbfc97115 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/index.ts
+++ b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
@@ -17,4 +17,7 @@
  * under the License.
  */
 
-export { Field, getEditableValue } from './field';
+export { getEditableValue } from './field';
+
+// eslint-disable-next-line import/no-default-export
+export { Field as default } from './field';
diff --git a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
index ab29656c557c2a..bed1bbeabb0449 100644
--- a/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
+++ b/src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`TelemetryManagementSectionComponent renders as expected 1`] = `
       <EuiSpacer
         size="s"
       />
-      <Field
+      <lazy
         dockLinks={null}
         enableSaving={true}
         handleChange={[Function]}
@@ -286,205 +286,4 @@ exports[`TelemetryManagementSectionComponent renders null because allowChangingO
 />
 `;
 
-exports[`TelemetryManagementSectionComponent renders null because query does not match the SEARCH_TERMS 1`] = `
-<TelemetryManagementSection
-  enableSaving={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  onQueryMatchChange={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          false,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  query={
-    Object {
-      "text": "asssdasdsad",
-    }
-  }
-  showAppliesSettingMessage={false}
-  telemetryService={
-    TelemetryService {
-      "defaultConfig": Object {
-        "allowChangingOptInStatus": true,
-        "banner": true,
-        "enabled": true,
-        "optIn": false,
-        "optInStatusUrl": "",
-        "sendUsageFrom": "browser",
-        "url": "",
-      },
-      "fetchExample": [Function],
-      "fetchTelemetry": [Function],
-      "getCanChangeOptInStatus": [Function],
-      "getIsOptedIn": [Function],
-      "getOptInStatusUrl": [Function],
-      "getTelemetryUrl": [Function],
-      "http": Object {
-        "addLoadingCountSource": [MockFunction],
-        "anonymousPaths": Object {
-          "isAnonymous": [MockFunction],
-          "register": [MockFunction],
-        },
-        "basePath": BasePath {
-          "basePath": "",
-          "get": [Function],
-          "prepend": [Function],
-          "remove": [Function],
-          "serverBasePath": "",
-        },
-        "delete": [MockFunction],
-        "fetch": [MockFunction],
-        "get": [MockFunction],
-        "getLoadingCount$": [MockFunction],
-        "head": [MockFunction],
-        "intercept": [MockFunction],
-        "options": [MockFunction],
-        "patch": [MockFunction],
-        "post": [MockFunction],
-        "put": [MockFunction],
-      },
-      "notifications": Object {
-        "toasts": Object {
-          "add": [MockFunction],
-          "addDanger": [MockFunction],
-          "addError": [MockFunction],
-          "addInfo": [MockFunction],
-          "addSuccess": [MockFunction],
-          "addWarning": [MockFunction],
-          "get$": [MockFunction],
-          "remove": [MockFunction],
-        },
-      },
-      "reportOptInStatus": [Function],
-      "reportOptInStatusChange": false,
-      "setOptIn": [Function],
-      "setUserHasSeenNotice": [Function],
-      "updatedConfig": undefined,
-    }
-  }
-  toasts={
-    Object {
-      "add": [MockFunction],
-      "addDanger": [MockFunction],
-      "addError": [MockFunction],
-      "addInfo": [MockFunction],
-      "addSuccess": [MockFunction],
-      "addWarning": [MockFunction],
-      "get$": [MockFunction],
-      "remove": [MockFunction],
-    }
-  }
-/>
-`;
-
 exports[`TelemetryManagementSectionComponent test the wrapper (for coverage purposes) 1`] = `null`;
diff --git a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx b/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
index c13f639f314475..0e2855f055540a 100644
--- a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
+++ b/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 {
diff --git a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx b/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx
index db104e9c7baabc..9ae0a3d12fbb52 100644
--- a/src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx
+++ b/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',

From afe6ab1dff0e324a5949eda798c9af490d2bbc01 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Fri, 25 Sep 2020 09:04:53 +0200
Subject: [PATCH 2/2] Fix broken types

---
 .../public/management_app/components/field/index.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/advanced_settings/public/management_app/components/field/index.ts b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
index 1203adbfc97115..c486dc96bfc335 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/index.ts
+++ b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export { getEditableValue } from './field';
+export { Field, getEditableValue } from './field';
 
 // eslint-disable-next-line import/no-default-export
 export { Field as default } from './field';