[Maps] refactor StyleTabs into StyleSettings (elastic#35893)

* [Maps] refactor StyleTabs into StyleSettings

* fix unit test

x-pack/plugins/maps/public/components/layer_panel/style_tabs/index.js → x-pack/plugins/maps/public/components/layer_panel/style_settings/index.js

@@ -5,22 +5,23 @@
  */
 
 import { connect } from 'react-redux';
-import { StyleTabs } from './view';
+import { StyleSettings } from './style_settings';
+import { getSelectedLayer } from '../../../selectors/map_selectors';
 import { updateLayerStyleForSelectedLayer } from '../../../actions/store_actions';
 
-function mapDispatchToProps(dispatch) {
+function mapStateToProps(state = {}) {
   return {
-    updateStyle: styleDescriptor => {
-      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 };

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 (
+    <Fragment>
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiTitle size="xs">
+              <h5>
+                <FormattedMessage
+                  id="xpack.maps.layerPanel.styleSettingsTitle"
+                  defaultMessage="Layer Style"
+                />
+              </h5>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="m"/>
+
+        {settingsEditor}
+      </EuiPanel>
+
+      <EuiSpacer size="s" />
+    </Fragment>
+  );
+}

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()}
 
-            <StyleTabs layer={selectedLayer}/>
+            <StyleSettings/>
 
           </div>
         </div>

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 (<div>mockStyleTabs</div>);
+jest.mock('./style_settings', () => ({
+  StyleSettings: () => {
+    return (<div>mockStyleSettings</div>);
   }
 }));
 

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();
   }

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() {

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;
+  }
 }

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) {

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,

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 (

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';
   }