[Maps] Separate layer wizards for Clusters and heatmap

x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/import_editor/view.js

@@ -5,13 +5,14 @@
  */
 
 import React, { Fragment } from 'react';
-import { GeojsonFileSource } from '../../../layers/sources/client_file_source';
+import { getLayerWizard } from '../../../layers/layer_wizard_registry';
 import { EuiSpacer, EuiPanel, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { GEOJSON_FILE } from '../../../../common/constants';
 
 export const ImportEditor = ({ clearSource, isIndexingTriggered, ...props }) => {
   const editorProperties = getEditorProperties({ isIndexingTriggered, ...props });
-  const editor = GeojsonFileSource.renderEditor(editorProperties);
+  const layerWizard = getLayerWizard(GEOJSON_FILE);
   return (
     <Fragment>
       {isIndexingTriggered ? null : (
@@ -25,7 +26,9 @@ export const ImportEditor = ({ clearSource, isIndexingTriggered, ...props }) =>
           <EuiSpacer size="s" />
         </Fragment>
       )}
-      <EuiPanel style={{ position: 'relative' }}>{editor}</EuiPanel>
+      <EuiPanel style={{ position: 'relative' }}>
+        {layerWizard.renderWizard(editorProperties)}
+      </EuiPanel>
     </Fragment>
   );
 };

x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/source_editor/view.js

@@ -5,28 +5,22 @@
  */
 
 import React, { Fragment } from 'react';
-import { ALL_SOURCES } from '../../../layers/sources/all_sources';
+import { getLayerWizard } from '../../../layers/layer_wizard_registry';
 import { EuiSpacer, EuiPanel, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const SourceEditor = ({
   clearSource,
-  sourceType,
+  layerWizardId,
   isIndexingTriggered,
   inspectorAdapters,
   previewLayer,
 }) => {
-  const editorProperties = {
-    onPreviewSource: previewLayer,
-    inspectorAdapters,
-  };
-  const Source = ALL_SOURCES.find(Source => {
-    return Source.type === sourceType;
-  });
-  if (!Source) {
-    throw new Error(`Unexpected source type: ${sourceType}`);
+  const layerWizard = getLayerWizard(layerWizardId);
+  if (!layerWizard) {
+    return null;
   }
-  const editor = Source.renderEditor(editorProperties);
+
   return (
     <Fragment>
       {isIndexingTriggered ? null : (
@@ -40,7 +34,9 @@ export const SourceEditor = ({
           <EuiSpacer size="s" />
         </Fragment>
       )}
-      <EuiPanel>{editor}</EuiPanel>
+      <EuiPanel>
+        {layerWizard.renderWizard({ onPreviewSource: previewLayer, inspectorAdapters })}
+      </EuiPanel>
     </Fragment>
   );
 };

x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/source_select/source_select.js

@@ -5,30 +5,33 @@
  */
 
 import React, { Fragment } from 'react';
-import { ALL_SOURCES } from '../../../layers/sources/all_sources';
+import { getLayerWizards } from '../../../layers/layer_wizard_registry';
 import { EuiTitle, EuiSpacer, EuiCard, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import _ from 'lodash';
 
 export function SourceSelect({ updateSourceSelection }) {
-  const sourceCards = ALL_SOURCES.map(Source => {
-    const icon = Source.icon ? <EuiIcon type={Source.icon} size="l" /> : null;
+  const sourceCards = getLayerWizards().map(layerWizard => {
+    const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : null;
 
-    const sourceTitle = Source.title;
+    const onClick = () => {
+      updateSourceSelection({
+        layerWizardId: layerWizard.id,
+        isIndexingSource: !!layerWizard.isIndexingSource,
+      });
+    };
 
     return (
-      <Fragment key={Source.type}>
+      <Fragment key={layerWizard.id}>
         <EuiSpacer size="s" />
         <EuiCard
           className="mapLayerAddpanel__card"
-          title={sourceTitle}
+          title={layerWizard.title}
           icon={icon}
-          onClick={() =>
-            updateSourceSelection({ type: Source.type, isIndexingSource: Source.isIndexingSource })
-          }
-          description={Source.description}
+          onClick={onClick}
+          description={layerWizard.description}
           layout="horizontal"
-          data-test-subj={_.camelCase(Source.title)}
+          data-test-subj={_.camelCase(layerWizard.title)}
         />
       </Fragment>
     );

x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js

@@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
 
 export class AddLayerPanel extends Component {
   state = {
-    sourceType: null,
+    layerWizardId: null,
     layer: null,
     importView: false,
     layerImportAddReady: false,
@@ -35,9 +35,9 @@ export class AddLayerPanel extends Component {
   }
 
   _getPanelDescription() {
-    const { sourceType, importView, layerImportAddReady } = this.state;
+    const { layerWizardId, importView, layerImportAddReady } = this.state;
     let panelDescription;
-    if (!sourceType) {
+    if (!layerWizardId) {
       panelDescription = i18n.translate('xpack.maps.addLayerPanel.selectSource', {
         defaultMessage: 'Select source',
       });
@@ -85,13 +85,13 @@ export class AddLayerPanel extends Component {
 
     this.setState({
       layer: null,
-      ...(!keepSourceType ? { sourceType: null, importView: false } : {}),
+      ...(!keepSourceType ? { layerWizardId: null, importView: false } : {}),
     });
     this.props.removeTransientLayer();
   };
 
-  _onSourceSelectionChange = ({ type, isIndexingSource }) => {
-    this.setState({ sourceType: type, importView: isIndexingSource });
+  _onSourceSelectionChange = ({ layerWizardId, isIndexingSource }) => {
+    this.setState({ layerWizardId, importView: isIndexingSource });
   };
 
   _layerAddHandler = () => {
@@ -118,8 +118,8 @@ export class AddLayerPanel extends Component {
   };
 
   _renderAddLayerPanel() {
-    const { sourceType, importView } = this.state;
-    if (!sourceType) {
+    const { layerWizardId, importView } = this.state;
+    if (!layerWizardId) {
       return <SourceSelect updateSourceSelection={this._onSourceSelectionChange} />;
     }
     if (importView) {
@@ -134,7 +134,7 @@ export class AddLayerPanel extends Component {
     return (
       <SourceEditor
         clearSource={this._clearLayerData}
-        sourceType={sourceType}
+        layerWizardId={layerWizardId}
         previewLayer={this._viewLayer}
       />
     );
@@ -148,7 +148,7 @@ export class AddLayerPanel extends Component {
 
     return (
       <FlyoutFooter
-        showNextButton={!!this.state.sourceType}
+        showNextButton={!!this.state.layerWizardId}
         disableNextButton={!buttonEnabled}
         onClick={this._layerAddHandler}
         nextButtonText={buttonDescription}

x-pack/legacy/plugins/maps/public/index.ts

@@ -6,6 +6,19 @@
 
 import './kibana_services';
 
+import './layers/layer_wizard_registry';
+import './layers/sources/source_registry';
+import './layers/sources/ems_file_source';
+import './layers/sources/ems_tms_source';
+import './layers/sources/client_file_source';
+import './layers/sources/xyz_tms_source';
+import './layers/sources/wms_source';
+import './layers/sources/kibana_tilemap_source';
+import './layers/sources/kibana_regionmap_source';
+import './layers/sources/es_geo_grid_source';
+import './layers/sources/es_search_source';
+import './layers/sources/es_pew_pew_source/es_pew_pew_source';
+
 // import the uiExports that we want to "use"
 import 'uiExports/inspectorViews';
 import 'uiExports/search';

x-pack/legacy/plugins/maps/public/layers/layer_wizard_registry.ts

@@ -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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+type LayerWizard = {
+  description: string;
+  icon: string;
+  id: string;
+  isIndexingSource?: boolean;
+  order: number; // number to control display order in UI. Lower numbers display first
+  renderWizard({
+    onPreviewSource,
+    inspectorAdapters,
+  }: {
+    onPreviewSource: () => void;
+    inspectorAdapters: unknown;
+  }): unknown;
+  title: string;
+  sourceType: string;
+};
+
+const registry: LayerWizard[] = [];
+
+export function registerLayerWizard(layerWizard: LayerWizard) {
+  registry.push(layerWizard);
+}
+
+export function getLayerWizards(): LayerWizard[] {
+  return registry.sort(function(a: LayerWizard, b: LayerWizard) {
+    return a.order - b.order;
+  });
+}
+
+export function getLayerWizard(id: string): LayerWizard | undefined {
+  return registry.find((layerWizard: LayerWizard) => layerWizard.id === id);
+}