[Maps] Separate layer wizards for Clusters and heatmap (#60870) (#62254)

* [Maps] source registry and register seperate clusters and heat map sources

* split into to registries

* add EMS file source

* add geojson upload layer

* register rest of sources

* i18n changes

* ts lint errors

* fix jest test

* fix pew-pew source

* review feedback

* import registires in plugin so they exist in embeddable

* remove order parameter and move all layer registies into single file

* fix functionalt est

* pass constructor to sourceREgistry instead of factory

* review feedback

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

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

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

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

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

@@ -5,28 +5,20 @@
  */
 
 import React, { Fragment } from 'react';
-import { ALL_SOURCES } from '../../../layers/sources/all_sources';
 import { EuiSpacer, EuiPanel, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const SourceEditor = ({
   clearSource,
-  sourceType,
+  layerWizard,
   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}`);
+  if (!layerWizard) {
+    return null;
   }
-  const editor = Source.renderEditor(editorProperties);
+
   return (
     <Fragment>
       {isIndexingTriggered ? null : (
@@ -40,7 +32,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({
+        layerWizard: layerWizard,
+        isIndexingSource: !!layerWizard.isIndexingSource,
+      });
+    };
 
     return (
-      <Fragment key={Source.type}>
+      <Fragment key={layerWizard.title}>
         <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,
+    layerWizard: null,
     layer: null,
     importView: false,
     layerImportAddReady: false,
@@ -35,9 +35,9 @@ export class AddLayerPanel extends Component {
   }
 
   _getPanelDescription() {
-    const { sourceType, importView, layerImportAddReady } = this.state;
+    const { layerWizard, importView, layerImportAddReady } = this.state;
     let panelDescription;
-    if (!sourceType) {
+    if (!layerWizard) {
       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 ? { layerWizard: null, importView: false } : {}),
     });
     this.props.removeTransientLayer();
   };
 
-  _onSourceSelectionChange = ({ type, isIndexingSource }) => {
-    this.setState({ sourceType: type, importView: isIndexingSource });
+  _onSourceSelectionChange = ({ layerWizard, isIndexingSource }) => {
+    this.setState({ layerWizard, importView: isIndexingSource });
   };
 
   _layerAddHandler = () => {
@@ -118,8 +118,8 @@ export class AddLayerPanel extends Component {
   };
 
   _renderAddLayerPanel() {
-    const { sourceType, importView } = this.state;
-    if (!sourceType) {
+    const { layerWizard, importView } = this.state;
+    if (!layerWizard) {
       return <SourceSelect updateSourceSelection={this._onSourceSelectionChange} />;
     }
     if (importView) {
@@ -134,7 +134,7 @@ export class AddLayerPanel extends Component {
     return (
       <SourceEditor
         clearSource={this._clearLayerData}
-        sourceType={sourceType}
+        layerWizard={layerWizard}
         previewLayer={this._viewLayer}
       />
     );
@@ -148,7 +148,7 @@ export class AddLayerPanel extends Component {
 
     return (
       <FlyoutFooter
-        showNextButton={!!this.state.sourceType}
+        showNextButton={!!this.state.layerWizard}
         disableNextButton={!buttonEnabled}
         onClick={this._layerAddHandler}
         nextButtonText={buttonDescription}

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

@@ -0,0 +1,30 @@
+/*
+ * 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;
+  isIndexingSource?: boolean;
+  renderWizard({
+    onPreviewSource,
+    inspectorAdapters,
+  }: {
+    onPreviewSource: () => void;
+    inspectorAdapters: unknown;
+  }): unknown;
+  title: string;
+};
+
+const registry: LayerWizard[] = [];
+
+export function registerLayerWizard(layerWizard: LayerWizard) {
+  registry.push(layerWizard);
+}
+
+export function getLayerWizards(): LayerWizard[] {
+  return [...registry];
+}

x-pack/legacy/plugins/maps/public/layers/load_layer_wizards.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { registerLayerWizard } from './layer_wizard_registry';
+import { uploadLayerWizardConfig } from './sources/client_file_source';
+import { esDocumentsLayerWizardConfig } from './sources/es_search_source';
+import { clustersLayerWizardConfig, heatmapLayerWizardConfig } from './sources/es_geo_grid_source';
+import { point2PointLayerWizardConfig } from './sources/es_pew_pew_source/es_pew_pew_source';
+import { emsBoundariesLayerWizardConfig } from './sources/ems_file_source';
+import { emsBaseMapLayerWizardConfig } from './sources/ems_tms_source';
+import { kibanaRegionMapLayerWizardConfig } from './sources/kibana_regionmap_source';
+import { kibanaBasemapLayerWizardConfig } from './sources/kibana_tilemap_source';
+import { tmsLayerWizardConfig } from './sources/xyz_tms_source';
+import { wmsLayerWizardConfig } from './sources/wms_source';
+
+// Registration order determines display order
+registerLayerWizard(uploadLayerWizardConfig);
+registerLayerWizard(esDocumentsLayerWizardConfig);
+registerLayerWizard(clustersLayerWizardConfig);
+registerLayerWizard(heatmapLayerWizardConfig);
+registerLayerWizard(point2PointLayerWizardConfig);
+registerLayerWizard(emsBoundariesLayerWizardConfig);
+registerLayerWizard(emsBaseMapLayerWizardConfig);
+registerLayerWizard(kibanaRegionMapLayerWizardConfig);
+registerLayerWizard(kibanaBasemapLayerWizardConfig);
+registerLayerWizard(tmsLayerWizardConfig);
+registerLayerWizard(wmsLayerWizardConfig);