[Maps] fix selecting EMS basemap does not populate input (elastic#92711)

* [Maps] fix selecting EMS basemap does not populate input * tslint
nreese · Feb 26, 2021 · d97c87b · d97c87b
1 parent b706bb3
commit d97c87b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/create_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/create_source_editor.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Component } from 'react';
+import { EuiPanel } from '@elastic/eui';
+import { EmsTmsSourceConfig, TileServiceSelect } from './tile_service_select';
+
+interface Props {
+  onTileSelect: (sourceConfig: EmsTmsSourceConfig) => void;
+}
+
+interface State {
+  config?: EmsTmsSourceConfig;
+}
+
+export class CreateSourceEditor extends Component<Props, State> {
+  state: State = {};
+
+  componentDidMount() {
+    this._onTileSelect({ id: null, isAutoSelect: true });
+  }
+
+  _onTileSelect = (config: EmsTmsSourceConfig) => {
+    this.setState({ config });
+    this.props.onTileSelect(config);
+  };
+
+  render() {
+    return (
+      <EuiPanel>
+        <TileServiceSelect onTileSelect={this._onTileSelect} config={this.state.config} />
+      </EuiPanel>
+    );
+  }
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
@@ -7,14 +7,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiPanel } from '@elastic/eui';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 // @ts-ignore
 import { EMSTMSSource, getSourceTitle } from './ems_tms_source';
 // @ts-ignore
 import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_layer';
-// @ts-ignore
-import { TileServiceSelect } from './tile_service_select';
+import { EmsTmsSourceConfig } from './tile_service_select';
+import { CreateSourceEditor } from './create_source_editor';
 import { getEMSSettings } from '../../../kibana_services';
 import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 import { WorldMapLayerIcon } from '../../layers/icons/world_map_layer_icon';
@@ -45,18 +44,14 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = {
   },
   icon: WorldMapLayerIcon,
   renderWizard: ({ previewLayers }: RenderWizardArguments) => {
-    const onSourceConfigChange = (sourceConfig: unknown) => {
+    const onSourceConfigChange = (sourceConfig: EmsTmsSourceConfig) => {
       const layerDescriptor = VectorTileLayer.createDescriptor({
         sourceDescriptor: EMSTMSSource.createDescriptor(sourceConfig),
       });
       previewLayers([layerDescriptor]);
     };
 
-    return (
-      <EuiPanel>
-        <TileServiceSelect onTileSelect={onSourceConfigChange} />
-      </EuiPanel>
-    );
+    return <CreateSourceEditor onTileSelect={onSourceConfigChange} />;
   },
   title: getSourceTitle(),
 };
diff --git a/...ces/ems_tms_source/tile_service_select.js → ...es/ems_tms_source/tile_service_select.tsx b/...ces/ems_tms_source/tile_service_select.js → ...es/ems_tms_source/tile_service_select.tsx
@@ -5,17 +5,34 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiSelect, EuiFormRow } from '@elastic/eui';
+import React, { ChangeEvent, Component } from 'react';
+import { EuiSelect, EuiSelectOption, EuiFormRow } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
 import { getEmsTmsServices } from '../../../meta';
 import { getEmsUnavailableMessage } from '../../../components/ems_unavailable_message';
-import { i18n } from '@kbn/i18n';
 
 export const AUTO_SELECT = 'auto_select';
 
-export class TileServiceSelect extends React.Component {
-  state = {
+export interface EmsTmsSourceConfig {
+  id: string | null;
+  isAutoSelect: boolean;
+}
+
+interface Props {
+  config?: EmsTmsSourceConfig;
+  onTileSelect: (sourceConfig: EmsTmsSourceConfig) => void;
+}
+
+interface State {
+  emsTmsOptions: EuiSelectOption[];
+  hasLoaded: boolean;
+}
+
+export class TileServiceSelect extends Component<Props, State> {
+  private _isMounted = false;
+
+  state: State = {
     emsTmsOptions: [],
     hasLoaded: false,
   };
@@ -51,7 +68,7 @@ export class TileServiceSelect extends React.Component {
     this.setState({ emsTmsOptions, hasLoaded: true });
   };
 
-  _onChange = (e) => {
+  _onChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     const isAutoSelect = value === AUTO_SELECT;
     this.props.onTileSelect({
@@ -63,9 +80,9 @@ export class TileServiceSelect extends React.Component {
   render() {
     const helpText = this.state.emsTmsOptions.length === 0 ? getEmsUnavailableMessage() : null;
 
-    let selectedId;
+    let selectedId: string | undefined;
     if (this.props.config) {
-      selectedId = this.props.config.isAutoSelect ? AUTO_SELECT : this.props.config.id;
+      selectedId = this.props.config.isAutoSelect ? AUTO_SELECT : this.props.config.id!;
     }
 
     return (