From 135042515bfcf886e14cd50ffc804034c080144e Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Fri, 28 May 2021 12:37:21 +0100
Subject: [PATCH 1/7] [Home] Adding file upload to add data page

---
 .../components/tutorial_directory.js          | 13 ++++-
 .../public/application/kibana_services.ts     |  2 +
 src/plugins/home/public/mocks.ts              |  2 +
 src/plugins/home/public/plugin.test.mocks.ts  |  3 ++
 src/plugins/home/public/plugin.ts             |  9 ++++
 .../add_data/add_data_service.mock.ts         | 31 ++++++++++++
 .../add_data/add_data_service.test.tsx        | 49 +++++++++++++++++++
 .../services/add_data/add_data_service.ts     | 42 ++++++++++++++++
 .../home/public/services/add_data/index.ts    | 11 +++++
 src/plugins/home/public/services/index.ts     |  3 ++
 .../plugins/file_data_visualizer/kibana.json  |  3 +-
 .../file_data_visualizer/public/plugin.ts     | 15 ++++--
 .../public/register_home.ts                   | 20 ++++++++
 13 files changed, 195 insertions(+), 8 deletions(-)
 create mode 100644 src/plugins/home/public/services/add_data/add_data_service.mock.ts
 create mode 100644 src/plugins/home/public/services/add_data/add_data_service.test.tsx
 create mode 100644 src/plugins/home/public/services/add_data/add_data_service.ts
 create mode 100644 src/plugins/home/public/services/add_data/index.ts
 create mode 100644 x-pack/plugins/file_data_visualizer/public/register_home.ts

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index 094ac302fcebeb..fb61bc74836dcd 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -42,6 +42,8 @@ class TutorialDirectoryUi extends React.Component {
   constructor(props) {
     super(props);
 
+    const extraTabs = getServices().addDataService.getAddDataTabs();
+
     this.tabs = [
       {
         id: ALL_TAB_ID,
@@ -77,7 +79,13 @@ class TutorialDirectoryUi extends React.Component {
           id: 'home.tutorial.tabs.sampleDataTitle',
           defaultMessage: 'Sample data',
         }),
+        content: <SampleDataSetCards addBasePath={this.props.addBasePath} />,
       },
+      ...extraTabs.map(({ id, name, component: Component }) => ({
+        id,
+        name,
+        content: <Component />,
+      })),
     ];
 
     let openTab = ALL_TAB_ID;
@@ -190,8 +198,9 @@ class TutorialDirectoryUi extends React.Component {
   };
 
   renderTabContent = () => {
-    if (this.state.selectedTabId === SAMPLE_DATA_TAB_ID) {
-      return <SampleDataSetCards addBasePath={this.props.addBasePath} />;
+    const tab = this.tabs.find(({ id }) => id === this.state.selectedTabId);
+    if (tab !== undefined && tab.content !== undefined) {
+      return tab.content;
     }
 
     return (
diff --git a/src/plugins/home/public/application/kibana_services.ts b/src/plugins/home/public/application/kibana_services.ts
index 73a8ab41bcfd29..af9f956889547d 100644
--- a/src/plugins/home/public/application/kibana_services.ts
+++ b/src/plugins/home/public/application/kibana_services.ts
@@ -20,6 +20,7 @@ import { UiCounterMetricType } from '@kbn/analytics';
 import { TelemetryPluginStart } from '../../../telemetry/public';
 import { UrlForwardingStart } from '../../../url_forwarding/public';
 import { TutorialService } from '../services/tutorials';
+import { AddDataService } from '../services/add_data';
 import { FeatureCatalogueRegistry } from '../services/feature_catalogue';
 import { EnvironmentService } from '../services/environment';
 import { ConfigSchema } from '../../config';
@@ -44,6 +45,7 @@ export interface HomeKibanaServices {
   environmentService: EnvironmentService;
   telemetry?: TelemetryPluginStart;
   tutorialService: TutorialService;
+  addDataService: AddDataService;
 }
 
 let services: HomeKibanaServices | null = null;
diff --git a/src/plugins/home/public/mocks.ts b/src/plugins/home/public/mocks.ts
index 32bec31153ba0d..10c186ee3f4e30 100644
--- a/src/plugins/home/public/mocks.ts
+++ b/src/plugins/home/public/mocks.ts
@@ -10,11 +10,13 @@ import { featureCatalogueRegistryMock } from './services/feature_catalogue/featu
 import { environmentServiceMock } from './services/environment/environment.mock';
 import { configSchema } from '../config';
 import { tutorialServiceMock } from './services/tutorials/tutorial_service.mock';
+import { addDataServiceMock } from './services/add_data/add_data_service.mock';
 
 const createSetupContract = () => ({
   featureCatalogue: featureCatalogueRegistryMock.createSetup(),
   environment: environmentServiceMock.createSetup(),
   tutorials: tutorialServiceMock.createSetup(),
+  addData: addDataServiceMock.createSetup(),
   config: configSchema.validate({}),
 });
 
diff --git a/src/plugins/home/public/plugin.test.mocks.ts b/src/plugins/home/public/plugin.test.mocks.ts
index 779ab2e7003526..c3e3c50a2fe0f3 100644
--- a/src/plugins/home/public/plugin.test.mocks.ts
+++ b/src/plugins/home/public/plugin.test.mocks.ts
@@ -9,12 +9,15 @@
 import { featureCatalogueRegistryMock } from './services/feature_catalogue/feature_catalogue_registry.mock';
 import { environmentServiceMock } from './services/environment/environment.mock';
 import { tutorialServiceMock } from './services/tutorials/tutorial_service.mock';
+import { addDataServiceMock } from './services/add_data/add_data_service.mock';
 
 export const registryMock = featureCatalogueRegistryMock.create();
 export const environmentMock = environmentServiceMock.create();
 export const tutorialMock = tutorialServiceMock.create();
+export const addDataMock = addDataServiceMock.create();
 jest.doMock('./services', () => ({
   FeatureCatalogueRegistry: jest.fn(() => registryMock),
   EnvironmentService: jest.fn(() => environmentMock),
   TutorialService: jest.fn(() => tutorialMock),
+  AddDataService: jest.fn(() => addDataMock),
 }));
diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts
index 89c7600a1d85d9..b3b5ce487b747d 100644
--- a/src/plugins/home/public/plugin.ts
+++ b/src/plugins/home/public/plugin.ts
@@ -24,6 +24,8 @@ import {
   FeatureCatalogueRegistrySetup,
   TutorialService,
   TutorialServiceSetup,
+  AddDataService,
+  AddDataServiceSetup,
 } from './services';
 import { ConfigSchema } from '../config';
 import { setServices } from './application/kibana_services';
@@ -56,6 +58,7 @@ export class HomePublicPlugin
   private readonly featuresCatalogueRegistry = new FeatureCatalogueRegistry();
   private readonly environmentService = new EnvironmentService();
   private readonly tutorialService = new TutorialService();
+  private readonly addDataService = new AddDataService();
 
   constructor(private readonly initializerContext: PluginInitializerContext<ConfigSchema>) {}
 
@@ -94,6 +97,7 @@ export class HomePublicPlugin
           urlForwarding: urlForwardingStart,
           homeConfig: this.initializerContext.config.get(),
           tutorialService: this.tutorialService,
+          addDataService: this.addDataService,
           featureCatalogue: this.featuresCatalogueRegistry,
         });
         coreStart.chrome.docTitle.change(
@@ -126,6 +130,7 @@ export class HomePublicPlugin
       featureCatalogue,
       environment: { ...this.environmentService.setup() },
       tutorials: { ...this.tutorialService.setup() },
+      addData: { ...this.addDataService.setup() },
     };
   }
 
@@ -163,9 +168,13 @@ export type EnvironmentSetup = EnvironmentServiceSetup;
 /** @public */
 export type TutorialSetup = TutorialServiceSetup;
 
+/** @public */
+export type AddDataSetup = AddDataServiceSetup;
+
 /** @public */
 export interface HomePublicPluginSetup {
   tutorials: TutorialServiceSetup;
+  addData: AddDataServiceSetup;
   featureCatalogue: FeatureCatalogueSetup;
   /**
    * The environment service is only available for a transition period and will
diff --git a/src/plugins/home/public/services/add_data/add_data_service.mock.ts b/src/plugins/home/public/services/add_data/add_data_service.mock.ts
new file mode 100644
index 00000000000000..e0b4d129097919
--- /dev/null
+++ b/src/plugins/home/public/services/add_data/add_data_service.mock.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { PublicMethodsOf } from '@kbn/utility-types';
+import { AddDataService, AddDataServiceSetup } from './add_data_service';
+
+const createSetupMock = (): jest.Mocked<AddDataServiceSetup> => {
+  const setup = {
+    registerAddDataTab: jest.fn(),
+  };
+  return setup;
+};
+
+const createMock = (): jest.Mocked<PublicMethodsOf<AddDataService>> => {
+  const service = {
+    setup: jest.fn(),
+    getAddDataTabs: jest.fn(() => []),
+  };
+  service.setup.mockImplementation(createSetupMock);
+  return service;
+};
+
+export const addDataServiceMock = {
+  createSetup: createSetupMock,
+  create: createMock,
+};
diff --git a/src/plugins/home/public/services/add_data/add_data_service.test.tsx b/src/plugins/home/public/services/add_data/add_data_service.test.tsx
new file mode 100644
index 00000000000000..b04b80ac19eec5
--- /dev/null
+++ b/src/plugins/home/public/services/add_data/add_data_service.test.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { AddDataService } from './add_data_service';
+
+describe('AddDataService', () => {
+  describe('setup', () => {
+    test('allows multiple register directory header link calls', () => {
+      const setup = new AddDataService().setup();
+      expect(() => {
+        setup.registerAddDataTab({ id: 'abc', name: 'a b c', component: () => <a>123</a> });
+        setup.registerAddDataTab({ id: 'def', name: 'a b c', component: () => <a>456</a> });
+      }).not.toThrow();
+    });
+
+    test('throws when same directory header link is registered twice', () => {
+      const setup = new AddDataService().setup();
+      expect(() => {
+        setup.registerAddDataTab({ id: 'abc', name: 'a b c', component: () => <a>123</a> });
+        setup.registerAddDataTab({ id: 'abc', name: 'a b c', component: () => <a>456</a> });
+      }).toThrow();
+    });
+  });
+
+  describe('getDirectoryHeaderLinks', () => {
+    test('returns empty array', () => {
+      const service = new AddDataService();
+      expect(service.getAddDataTabs()).toEqual([]);
+    });
+
+    test('returns last state of register calls', () => {
+      const service = new AddDataService();
+      const setup = service.setup();
+      const links = [
+        { id: 'abc', name: 'a b c', component: () => <a>123</a> },
+        { id: 'def', name: 'a b c', component: () => <a>456</a> },
+      ];
+      setup.registerAddDataTab(links[0]);
+      setup.registerAddDataTab(links[1]);
+      expect(service.getAddDataTabs()).toEqual(links);
+    });
+  });
+});
diff --git a/src/plugins/home/public/services/add_data/add_data_service.ts b/src/plugins/home/public/services/add_data/add_data_service.ts
new file mode 100644
index 00000000000000..f7cb78a97905e3
--- /dev/null
+++ b/src/plugins/home/public/services/add_data/add_data_service.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+/** @public */
+export interface AddDataTab {
+  id: string;
+  name: string;
+  component: React.FC;
+}
+
+export class AddDataService {
+  private addDataTabs: {
+    [key: string]: AddDataTab;
+  } = {};
+
+  public setup() {
+    return {
+      /**
+       * Registers a component that will be rendered next to tutorial directory title/header area.
+       */
+      registerAddDataTab: (tab: AddDataTab) => {
+        if (this.addDataTabs[tab.id]) {
+          throw new Error(`Tab ${tab.id} already exists`);
+        }
+        this.addDataTabs[tab.id] = tab;
+      },
+    };
+  }
+
+  public getAddDataTabs() {
+    return Object.values(this.addDataTabs);
+  }
+}
+
+export type AddDataServiceSetup = ReturnType<AddDataService['setup']>;
diff --git a/src/plugins/home/public/services/add_data/index.ts b/src/plugins/home/public/services/add_data/index.ts
new file mode 100644
index 00000000000000..f2367ca320e9fa
--- /dev/null
+++ b/src/plugins/home/public/services/add_data/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { AddDataService } from './add_data_service';
+
+export type { AddDataServiceSetup, AddDataTab } from './add_data_service';
diff --git a/src/plugins/home/public/services/index.ts b/src/plugins/home/public/services/index.ts
index 8cd4c8d84e0f78..65913df6310b19 100644
--- a/src/plugins/home/public/services/index.ts
+++ b/src/plugins/home/public/services/index.ts
@@ -26,3 +26,6 @@ export type {
   TutorialDirectoryHeaderLinkComponent,
   TutorialModuleNoticeComponent,
 } from './tutorials';
+
+export { AddDataService } from './add_data';
+export type { AddDataServiceSetup, AddDataTab } from './add_data';
diff --git a/x-pack/plugins/file_data_visualizer/kibana.json b/x-pack/plugins/file_data_visualizer/kibana.json
index 721352cff7c957..eb70960066c5a3 100644
--- a/x-pack/plugins/file_data_visualizer/kibana.json
+++ b/x-pack/plugins/file_data_visualizer/kibana.json
@@ -10,7 +10,8 @@
     "embeddable",
     "share",
     "discover",
-    "fileUpload"
+    "fileUpload",
+    "home"
   ],
   "optionalPlugins": [
     "security",
diff --git a/x-pack/plugins/file_data_visualizer/public/plugin.ts b/x-pack/plugins/file_data_visualizer/public/plugin.ts
index a94c0fce45cd40..e666a309b555ce 100644
--- a/x-pack/plugins/file_data_visualizer/public/plugin.ts
+++ b/x-pack/plugins/file_data_visualizer/public/plugin.ts
@@ -5,21 +5,24 @@
  * 2.0.
  */
 
-import { CoreStart } from 'kibana/public';
+import { CoreSetup, CoreStart } from 'kibana/public';
 import type { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import type { SharePluginStart } from '../../../../src/plugins/share/public';
 import { Plugin } from '../../../../src/core/public';
 
 import { setStartServices } from './kibana_services';
-import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
+import type { DataPublicPluginStart } from '../../../../src/plugins/data/public';
+import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
 import type { FileUploadPluginStart } from '../../file_upload/public';
 import type { MapsStartApi } from '../../maps/public';
 import type { SecurityPluginSetup } from '../../security/public';
 import { getFileDataVisualizerComponent } from './api';
 import { getMaxBytesFormatted } from './application/util/get_max_bytes';
+import { registerHomeAddData } from './register_home';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface FileDataVisualizerSetupDependencies {}
+export interface FileDataVisualizerSetupDependencies {
+  home: HomePublicPluginSetup;
+}
 export interface FileDataVisualizerStartDependencies {
   data: DataPublicPluginStart;
   fileUpload: FileUploadPluginStart;
@@ -40,7 +43,9 @@ export class FileDataVisualizerPlugin
       FileDataVisualizerSetupDependencies,
       FileDataVisualizerStartDependencies
     > {
-  public setup() {}
+  public setup(core: CoreSetup, plugins: FileDataVisualizerSetupDependencies) {
+    registerHomeAddData(plugins.home);
+  }
 
   public start(core: CoreStart, plugins: FileDataVisualizerStartDependencies) {
     setStartServices(core, plugins);
diff --git a/x-pack/plugins/file_data_visualizer/public/register_home.ts b/x-pack/plugins/file_data_visualizer/public/register_home.ts
new file mode 100644
index 00000000000000..c50671f9d4bd72
--- /dev/null
+++ b/x-pack/plugins/file_data_visualizer/public/register_home.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import { FileDataVisualizer } from './application/file_datavisualizer';
+
+export function registerHomeAddData(home: HomePublicPluginSetup) {
+  home.addData.registerAddDataTab({
+    id: 'fileDataViz',
+    name: i18n.translate('xpack.fileDataVisualizer.embeddedTabTitle', {
+      defaultMessage: 'Upload file',
+    }),
+    component: FileDataVisualizer,
+  });
+}

From 7908c10d4824fb076120b88e9993c0caa293cdd8 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Fri, 28 May 2021 12:40:10 +0100
Subject: [PATCH 2/7] updating comment

---
 src/plugins/home/public/services/add_data/add_data_service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/home/public/services/add_data/add_data_service.ts b/src/plugins/home/public/services/add_data/add_data_service.ts
index f7cb78a97905e3..d90034f4cdb0f0 100644
--- a/src/plugins/home/public/services/add_data/add_data_service.ts
+++ b/src/plugins/home/public/services/add_data/add_data_service.ts
@@ -23,7 +23,7 @@ export class AddDataService {
   public setup() {
     return {
       /**
-       * Registers a component that will be rendered next to tutorial directory title/header area.
+       * Registers a component that will be rendered as a new tab in the Add data page
        */
       registerAddDataTab: (tab: AddDataTab) => {
         if (this.addDataTabs[tab.id]) {

From 0dbb1f44376a0829c2ab86431fc8d7eeb7decc5e Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Fri, 28 May 2021 12:42:07 +0100
Subject: [PATCH 3/7] tiny refactor

---
 .../home/public/application/components/tutorial_directory.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index fb61bc74836dcd..7bfcd3a0ba17d5 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -199,7 +199,7 @@ class TutorialDirectoryUi extends React.Component {
 
   renderTabContent = () => {
     const tab = this.tabs.find(({ id }) => id === this.state.selectedTabId);
-    if (tab !== undefined && tab.content !== undefined) {
+    if (tab?.content !== undefined) {
       return tab.content;
     }
 

From 3cb64d2a3a8405f9bd2dea44eda5a5b2198a6f27 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Sat, 29 May 2021 10:59:07 +0100
Subject: [PATCH 4/7] attempting to reduce bundle size

---
 x-pack/plugins/file_data_visualizer/public/plugin.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/file_data_visualizer/public/plugin.ts b/x-pack/plugins/file_data_visualizer/public/plugin.ts
index e666a309b555ce..14f4e876e8a374 100644
--- a/x-pack/plugins/file_data_visualizer/public/plugin.ts
+++ b/x-pack/plugins/file_data_visualizer/public/plugin.ts
@@ -18,7 +18,6 @@ import type { MapsStartApi } from '../../maps/public';
 import type { SecurityPluginSetup } from '../../security/public';
 import { getFileDataVisualizerComponent } from './api';
 import { getMaxBytesFormatted } from './application/util/get_max_bytes';
-import { registerHomeAddData } from './register_home';
 
 export interface FileDataVisualizerSetupDependencies {
   home: HomePublicPluginSetup;
@@ -44,7 +43,9 @@ export class FileDataVisualizerPlugin
       FileDataVisualizerStartDependencies
     > {
   public setup(core: CoreSetup, plugins: FileDataVisualizerSetupDependencies) {
-    registerHomeAddData(plugins.home);
+    import('./register_home').then(({ registerHomeAddData }) => {
+      registerHomeAddData(plugins.home);
+    });
   }
 
   public start(core: CoreStart, plugins: FileDataVisualizerStartDependencies) {

From a7b490e722db1cf5c53f1ad85f432143534e0d0d Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Tue, 1 Jun 2021 17:13:53 +0100
Subject: [PATCH 5/7] reverting to original home register import

---
 x-pack/plugins/file_data_visualizer/public/plugin.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/file_data_visualizer/public/plugin.ts b/x-pack/plugins/file_data_visualizer/public/plugin.ts
index 14f4e876e8a374..e666a309b555ce 100644
--- a/x-pack/plugins/file_data_visualizer/public/plugin.ts
+++ b/x-pack/plugins/file_data_visualizer/public/plugin.ts
@@ -18,6 +18,7 @@ import type { MapsStartApi } from '../../maps/public';
 import type { SecurityPluginSetup } from '../../security/public';
 import { getFileDataVisualizerComponent } from './api';
 import { getMaxBytesFormatted } from './application/util/get_max_bytes';
+import { registerHomeAddData } from './register_home';
 
 export interface FileDataVisualizerSetupDependencies {
   home: HomePublicPluginSetup;
@@ -43,9 +44,7 @@ export class FileDataVisualizerPlugin
       FileDataVisualizerStartDependencies
     > {
   public setup(core: CoreSetup, plugins: FileDataVisualizerSetupDependencies) {
-    import('./register_home').then(({ registerHomeAddData }) => {
-      registerHomeAddData(plugins.home);
-    });
+    registerHomeAddData(plugins.home);
   }
 
   public start(core: CoreStart, plugins: FileDataVisualizerStartDependencies) {

From 79a5440f69994db676bf9fbe273800c164c9b54b Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Tue, 1 Jun 2021 17:31:56 +0100
Subject: [PATCH 6/7] lazy load tab contents

---
 .../lazy_load_bundle/component_wrapper.tsx    | 24 +++++++++++++++++++
 .../public/register_home.ts                   |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx

diff --git a/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx b/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
new file mode 100644
index 00000000000000..20e4821e6b1f08
--- /dev/null
+++ b/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useState, useEffect } from 'react';
+
+export const FileDataVisualizerWrapper: FC = () => {
+  const [FileDataVisualizerComponent, setFileDataVisualizerComponent] = useState<FC<{}> | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (FileDataVisualizerComponent === null) {
+      import('../application/file_datavisualizer').then(({ FileDataVisualizer }) => {
+        setFileDataVisualizerComponent(FileDataVisualizer);
+      });
+    }
+  }, [FileDataVisualizerComponent]);
+
+  return <>{FileDataVisualizerComponent}</>;
+};
diff --git a/x-pack/plugins/file_data_visualizer/public/register_home.ts b/x-pack/plugins/file_data_visualizer/public/register_home.ts
index c50671f9d4bd72..e54c37a8d06bc0 100644
--- a/x-pack/plugins/file_data_visualizer/public/register_home.ts
+++ b/x-pack/plugins/file_data_visualizer/public/register_home.ts
@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
-import { FileDataVisualizer } from './application/file_datavisualizer';
+import { FileDataVisualizerWrapper } from './lazy_load_bundle/component_wrapper';
 
 export function registerHomeAddData(home: HomePublicPluginSetup) {
   home.addData.registerAddDataTab({
@@ -15,6 +15,6 @@ export function registerHomeAddData(home: HomePublicPluginSetup) {
     name: i18n.translate('xpack.fileDataVisualizer.embeddedTabTitle', {
       defaultMessage: 'Upload file',
     }),
-    component: FileDataVisualizer,
+    component: FileDataVisualizerWrapper,
   });
 }

From b532118bd2a9a35510b3a5ca1389498de89f1fdd Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Wed, 2 Jun 2021 11:58:18 +0100
Subject: [PATCH 7/7] changes based on review

---
 .../components/tutorial_directory.js          |  2 +-
 .../services/add_data/add_data_service.ts     |  4 +---
 .../plugins/file_data_visualizer/kibana.json  |  6 +++---
 .../application/file_datavisualizer.tsx       |  4 ++++
 .../lazy_load_bundle/component_wrapper.tsx    | 20 +++++++------------
 .../file_data_visualizer/public/plugin.ts     |  6 ++++--
 6 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index 7bfcd3a0ba17d5..1fda865ebd8476 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -199,7 +199,7 @@ class TutorialDirectoryUi extends React.Component {
 
   renderTabContent = () => {
     const tab = this.tabs.find(({ id }) => id === this.state.selectedTabId);
-    if (tab?.content !== undefined) {
+    if (tab?.content) {
       return tab.content;
     }
 
diff --git a/src/plugins/home/public/services/add_data/add_data_service.ts b/src/plugins/home/public/services/add_data/add_data_service.ts
index d90034f4cdb0f0..668c373f8314d3 100644
--- a/src/plugins/home/public/services/add_data/add_data_service.ts
+++ b/src/plugins/home/public/services/add_data/add_data_service.ts
@@ -16,9 +16,7 @@ export interface AddDataTab {
 }
 
 export class AddDataService {
-  private addDataTabs: {
-    [key: string]: AddDataTab;
-  } = {};
+  private addDataTabs: Record<string, AddDataTab> = {};
 
   public setup() {
     return {
diff --git a/x-pack/plugins/file_data_visualizer/kibana.json b/x-pack/plugins/file_data_visualizer/kibana.json
index eb70960066c5a3..eea52bb6e98b2c 100644
--- a/x-pack/plugins/file_data_visualizer/kibana.json
+++ b/x-pack/plugins/file_data_visualizer/kibana.json
@@ -10,12 +10,12 @@
     "embeddable",
     "share",
     "discover",
-    "fileUpload",
-    "home"
+    "fileUpload"
   ],
   "optionalPlugins": [
     "security",
-    "maps"
+    "maps",
+    "home"
   ],
   "requiredBundles": [
     "kibanaReact",
diff --git a/x-pack/plugins/file_data_visualizer/public/application/file_datavisualizer.tsx b/x-pack/plugins/file_data_visualizer/public/application/file_datavisualizer.tsx
index f291076557bb83..c8f327496842a0 100644
--- a/x-pack/plugins/file_data_visualizer/public/application/file_datavisualizer.tsx
+++ b/x-pack/plugins/file_data_visualizer/public/application/file_datavisualizer.tsx
@@ -28,3 +28,7 @@ export const FileDataVisualizer: FC = () => {
     </KibanaContextProvider>
   );
 };
+
+// exporting as default so it can be used with React.lazy
+// eslint-disable-next-line import/no-default-export
+export default FileDataVisualizer;
diff --git a/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx b/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
index 20e4821e6b1f08..e6835d9e7a668b 100644
--- a/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
+++ b/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
@@ -5,20 +5,14 @@
  * 2.0.
  */
 
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC } from 'react';
+
+const FileDataVisualizerComponent = React.lazy(() => import('../application/file_datavisualizer'));
 
 export const FileDataVisualizerWrapper: FC = () => {
-  const [FileDataVisualizerComponent, setFileDataVisualizerComponent] = useState<FC<{}> | null>(
-    null
+  return (
+    <React.Suspense fallback={<div />}>
+      <FileDataVisualizerComponent />
+    </React.Suspense>
   );
-
-  useEffect(() => {
-    if (FileDataVisualizerComponent === null) {
-      import('../application/file_datavisualizer').then(({ FileDataVisualizer }) => {
-        setFileDataVisualizerComponent(FileDataVisualizer);
-      });
-    }
-  }, [FileDataVisualizerComponent]);
-
-  return <>{FileDataVisualizerComponent}</>;
 };
diff --git a/x-pack/plugins/file_data_visualizer/public/plugin.ts b/x-pack/plugins/file_data_visualizer/public/plugin.ts
index e666a309b555ce..0064f96195eafb 100644
--- a/x-pack/plugins/file_data_visualizer/public/plugin.ts
+++ b/x-pack/plugins/file_data_visualizer/public/plugin.ts
@@ -21,7 +21,7 @@ import { getMaxBytesFormatted } from './application/util/get_max_bytes';
 import { registerHomeAddData } from './register_home';
 
 export interface FileDataVisualizerSetupDependencies {
-  home: HomePublicPluginSetup;
+  home?: HomePublicPluginSetup;
 }
 export interface FileDataVisualizerStartDependencies {
   data: DataPublicPluginStart;
@@ -44,7 +44,9 @@ export class FileDataVisualizerPlugin
       FileDataVisualizerStartDependencies
     > {
   public setup(core: CoreSetup, plugins: FileDataVisualizerSetupDependencies) {
-    registerHomeAddData(plugins.home);
+    if (plugins.home) {
+      registerHomeAddData(plugins.home);
+    }
   }
 
   public start(core: CoreStart, plugins: FileDataVisualizerStartDependencies) {