From 252c5283905c96fdf7907d69e111373455b7486e Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 25 Feb 2021 17:09:52 -0700 Subject: [PATCH] [Maps] fix selecting EMS basemap does not populate input (#92711) * [Maps] fix selecting EMS basemap does not populate input * tslint --- .../ems_tms_source/create_source_editor.tsx | 39 +++++++++++++++++++ .../ems_base_map_layer_wizard.tsx | 13 ++----- ...vice_select.js => tile_service_select.tsx} | 33 ++++++++++++---- 3 files changed, 68 insertions(+), 17 deletions(-) create mode 100644 x-pack/plugins/maps/public/classes/sources/ems_tms_source/create_source_editor.tsx rename x-pack/plugins/maps/public/classes/sources/ems_tms_source/{tile_service_select.js => tile_service_select.tsx} (78%) 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 new file mode 100644 index 0000000000000..16e4986f4d8a6 --- /dev/null +++ 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 { + state: State = {}; + + componentDidMount() { + this._onTileSelect({ id: null, isAutoSelect: true }); + } + + _onTileSelect = (config: EmsTmsSourceConfig) => { + this.setState({ config }); + this.props.onTileSelect(config); + }; + + render() { + return ( + + + + ); + } +} 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 index 3cb707f377b70..859d8b95cef3f 100644 --- 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 ( - - - - ); + return ; }, title: getSourceTitle(), }; diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.tsx similarity index 78% rename from x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js rename to x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.tsx index 42ff1789df8f4..5f0f406d53e86 100644 --- a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js +++ b/x-pack/plugins/maps/public/classes/sources/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 { + 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) => { 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 (