diff --git a/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap index 7faa589c303a8..3882d1bda6f52 100644 --- a/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap @@ -96,18 +96,7 @@ exports[`LayerPanel is rendered 1`] = ` - + { - dispatch(updateLayerStyleForSelectedLayer(styleDescriptor)); - } + layer: getSelectedLayer(state) }; } -function mapStateToProps(state, props) { +function mapDispatchToProps(dispatch) { return { - layer: props.layer + updateStyleDescriptor: styleDescriptor => { + dispatch(updateLayerStyleForSelectedLayer(styleDescriptor)); + } }; } -const connectedFlyoutBody = connect(mapStateToProps, mapDispatchToProps)(StyleTabs); -export { connectedFlyoutBody as StyleTabs }; +const connectedStyleSettings = connect(mapStateToProps, mapDispatchToProps)(StyleSettings); +export { connectedStyleSettings as StyleSettings }; diff --git a/x-pack/plugins/maps/public/components/layer_panel/style_settings/style_settings.js b/x-pack/plugins/maps/public/components/layer_panel/style_settings/style_settings.js new file mode 100644 index 0000000000000..f82fed0313d2b --- /dev/null +++ b/x-pack/plugins/maps/public/components/layer_panel/style_settings/style_settings.js @@ -0,0 +1,51 @@ +/* + * 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 React, { Fragment } from 'react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiPanel, + EuiSpacer, +} from '@elastic/eui'; + +import { FormattedMessage } from '@kbn/i18n/react'; + +export function StyleSettings({ layer, updateStyleDescriptor }) { + + const settingsEditor = layer.renderStyleEditor({ onStyleDescriptorChange: updateStyleDescriptor }); + + if (!settingsEditor) { + return null; + } + + return ( + + + + + +
+ +
+ + + + + + + {settingsEditor} + + + + + ); +} diff --git a/x-pack/plugins/maps/public/components/layer_panel/style_tabs/resources/style_tab.js b/x-pack/plugins/maps/public/components/layer_panel/style_tabs/resources/style_tab.js deleted file mode 100644 index 6a503ddaae75c..0000000000000 --- a/x-pack/plugins/maps/public/components/layer_panel/style_tabs/resources/style_tab.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * 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 React from 'react'; -import { - EuiTab -} from '@elastic/eui'; -import _ from 'lodash'; - -export function StyleTab(props) { - const { name, selected, onClick } = props; - return name && ( - { - const tabName = name; - return () => onClick(tabName); - })()} - isSelected={name === selected} - >{ name } - - ) || null; -} diff --git a/x-pack/plugins/maps/public/components/layer_panel/style_tabs/view.js b/x-pack/plugins/maps/public/components/layer_panel/style_tabs/view.js deleted file mode 100644 index 5aedcc02ecc1c..0000000000000 --- a/x-pack/plugins/maps/public/components/layer_panel/style_tabs/view.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 React from 'react'; - -import { - EuiTitle, - EuiPanel, - EuiSpacer, - EuiText -} from '@elastic/eui'; - -export function StyleTabs({ layer, updateStyle }) { - return layer.getSupportedStyles().map((Style, index) => { - let description; - if (Style.description) { - description = ( - -

{Style.description}

- - ); - } - - const currentStyle = layer.getCurrentStyle(); - const styleEditor = layer.renderStyleEditor(Style, { - handleStyleChange: (styleDescriptor) => { - updateStyle(styleDescriptor); - }, - style: (Style.canEdit(currentStyle)) ? currentStyle : null - }); - - if (!styleEditor) { - return null; - } - - return ( - -
{Style.getDisplayName()}
 - {description} - - {styleEditor} - - ); - }); -} diff --git a/x-pack/plugins/maps/public/components/layer_panel/view.js b/x-pack/plugins/maps/public/components/layer_panel/view.js index b0e59a0757c21..96f6c77215744 100644 --- a/x-pack/plugins/maps/public/components/layer_panel/view.js +++ b/x-pack/plugins/maps/public/components/layer_panel/view.js @@ -6,13 +6,13 @@ import React, { Fragment } from 'react'; -import { StyleTabs } from './style_tabs'; import { FilterEditor } from './filter_editor'; import { JoinEditor } from './join_editor'; import { FlyoutFooter } from './flyout_footer'; import { LayerErrors } from './layer_errors'; import { LayerSettings } from './layer_settings'; import { SourceSettings } from './source_settings'; +import { StyleSettings } from './style_settings'; import { EuiButtonIcon, EuiFlexItem, @@ -204,7 +204,7 @@ export class LayerPanel extends React.Component { {this._renderJoinSection()} - + diff --git a/x-pack/plugins/maps/public/components/layer_panel/view.test.js b/x-pack/plugins/maps/public/components/layer_panel/view.test.js index b81f870d4c298..cc50b477ec2f7 100644 --- a/x-pack/plugins/maps/public/components/layer_panel/view.test.js +++ b/x-pack/plugins/maps/public/components/layer_panel/view.test.js @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -jest.mock('./style_tabs', () => ({ - StyleTabs: () => { - return (
mockStyleTabs
); +jest.mock('./style_settings', () => ({ + StyleSettings: () => { + return (
mockStyleSettings
); } })); diff --git a/x-pack/plugins/maps/public/shared/layers/heatmap_layer.js b/x-pack/plugins/maps/public/shared/layers/heatmap_layer.js index fe93b9ffb689d..a971ef77de7ec 100644 --- a/x-pack/plugins/maps/public/shared/layers/heatmap_layer.js +++ b/x-pack/plugins/maps/public/shared/layers/heatmap_layer.js @@ -33,10 +33,6 @@ export class HeatmapLayer extends AbstractLayer { } } - getSupportedStyles() { - return [HeatmapStyle]; - } - getIndexPatternIds() { return this._source.getIndexPatternIds(); } diff --git a/x-pack/plugins/maps/public/shared/layers/layer.js b/x-pack/plugins/maps/public/shared/layers/layer.js index caafab8d20361..03b56247ac15a 100644 --- a/x-pack/plugins/maps/public/shared/layers/layer.js +++ b/x-pack/plugins/maps/public/shared/layers/layer.js @@ -157,10 +157,6 @@ export class AbstractLayer { }; } - getSupportedStyles() { - return []; - } - getCurrentStyle() { return this._style; } @@ -250,7 +246,6 @@ export class AbstractLayer { throw new Error('should implement Layer#getLayerTypeIconName'); } - async getBounds() { return { min_lon: -180, @@ -260,8 +255,8 @@ export class AbstractLayer { }; } - renderStyleEditor(Style, options) { - return Style.renderEditor(options); + renderStyleEditor({ onStyleDescriptorChange }) { + return this._style.renderEditor({ layer: this, onStyleDescriptorChange }); } getIndexPatternIds() { diff --git a/x-pack/plugins/maps/public/shared/layers/styles/abstract_style.js b/x-pack/plugins/maps/public/shared/layers/styles/abstract_style.js index cf863151bb3dc..94bb4dee88fb1 100644 --- a/x-pack/plugins/maps/public/shared/layers/styles/abstract_style.js +++ b/x-pack/plugins/maps/public/shared/layers/styles/abstract_style.js @@ -19,4 +19,8 @@ export class AbstractStyle { getDescriptor() { return this._descriptor; } + + renderEditor(/* { layer, onStyleDescriptorChange } */) { + return null; + } } diff --git a/x-pack/plugins/maps/public/shared/layers/styles/heatmap_style.js b/x-pack/plugins/maps/public/shared/layers/styles/heatmap_style.js index 675b38e3a44d1..2e41430779971 100644 --- a/x-pack/plugins/maps/public/shared/layers/styles/heatmap_style.js +++ b/x-pack/plugins/maps/public/shared/layers/styles/heatmap_style.js @@ -17,10 +17,6 @@ export class HeatmapStyle extends AbstractStyle { this._descriptor = HeatmapStyle.createDescriptor(); } - static canEdit(styleInstance) { - return styleInstance.constructor === HeatmapStyle; - } - static createDescriptor() { return { type: HeatmapStyle.type, @@ -33,10 +29,6 @@ export class HeatmapStyle extends AbstractStyle { }); } - static renderEditor() { - return null; - } - setMBPaintProperties({ mbMap, layerId, propertyName, resolution }) { let radius; if (resolution === GRID_RESOLUTION.COARSE) { diff --git a/x-pack/plugins/maps/public/shared/layers/styles/tile_style.js b/x-pack/plugins/maps/public/shared/layers/styles/tile_style.js index 20e8429e6e115..ede74aeb64cb3 100644 --- a/x-pack/plugins/maps/public/shared/layers/styles/tile_style.js +++ b/x-pack/plugins/maps/public/shared/layers/styles/tile_style.js @@ -16,10 +16,6 @@ export class TileStyle extends AbstractStyle { this._descriptor = TileStyle.createDescriptor(styleDescriptor.properties); } - static canEdit(styleInstance) { - return styleInstance.constructor === TileStyle; - } - static createDescriptor(properties = {}) { return { type: TileStyle.type, diff --git a/x-pack/plugins/maps/public/shared/layers/styles/vector_style.js b/x-pack/plugins/maps/public/shared/layers/styles/vector_style.js index c077ba24d0210..b76df81c48ba1 100644 --- a/x-pack/plugins/maps/public/shared/layers/styles/vector_style.js +++ b/x-pack/plugins/maps/public/shared/layers/styles/vector_style.js @@ -32,10 +32,6 @@ export class VectorStyle extends AbstractStyle { }; } - static canEdit(styleInstance) { - return styleInstance.constructor === VectorStyle; - } - static createDescriptor(properties = {}) { return { type: VectorStyle.type, @@ -55,13 +51,12 @@ export class VectorStyle extends AbstractStyle { static description = ''; - static renderEditor({ handleStyleChange, style, layer }) { - - const styleProperties = { ...style.getProperties() }; + renderEditor({ layer, onStyleDescriptorChange }) { + const styleProperties = { ...this.getProperties() }; const handlePropertyChange = (propertyName, settings) => { styleProperties[propertyName] = settings;//override single property, but preserve the rest const vectorStyleDescriptor = VectorStyle.createDescriptor(styleProperties); - handleStyleChange(vectorStyleDescriptor); + onStyleDescriptorChange(vectorStyleDescriptor); }; return ( diff --git a/x-pack/plugins/maps/public/shared/layers/vector_layer.js b/x-pack/plugins/maps/public/shared/layers/vector_layer.js index 1a6d260b59bd7..c3fa4f1ac5e5d 100644 --- a/x-pack/plugins/maps/public/shared/layers/vector_layer.js +++ b/x-pack/plugins/maps/public/shared/layers/vector_layer.js @@ -78,10 +78,6 @@ export class VectorLayer extends AbstractLayer { }); } - getSupportedStyles() { - return [VectorStyle]; - } - getIcon() { return this._style.getIcon(); } @@ -479,13 +475,6 @@ export class VectorLayer extends AbstractLayer { this._syncStylePropertiesWithMb(mbMap); } - renderStyleEditor(Style, options) { - return Style.renderEditor({ - layer: this, - ...options - }); - } - _getMbPointLayerId() { return this.getId() + '_circle'; }