[Maps] Label style properties (elastic#52957)

* text styling

* label style editor UI

* wire up styles to mb

* allow string values

* remove console.log

* default getFields to provide ordinal fields for vector source

* fix vector_style jest test

* add label styles to docs

* fix prettier errors

* use index-pattern field formatter to format label

* rename LABEL to LABEL_TEXT

* review feedback

* fix problem with icons not displaying with labels

* fix functional tests

* fix canno read name of null error

* update jest expect

* fix eslint errors

* do not display label text in legend

* always show all label styling properties in editor

* review feedback

docs/maps/vector-style-properties.asciidoc

@@ -8,32 +8,52 @@ Point, polygon, and line features support different styling properties.
 [[point-style-properties]]
 ==== Point style properties
 
+You can add text labels to your Point features by configuring label style properties.
+
+[cols="2*"]
+|===
+|*Label*
+|Specifies label content.
+|*Label color*
+|The text color.
+|*Label size*
+|The size of the text font, in pixels.
+|===
+
 You can symbolize Point features as *Circle markers* or *Icons*.
 
 Use *Circle marker* to symbolize Points as circles.
 
-*Fill color*:: The fill color of the point features.
-
-*Border color*:: The border color of the point features.
-
-*Border width*:: The border width of the point features.
-
-*Symbol size*:: The radius of the symbol size, in pixels.
+[cols="2*"]
+|===
+|*Border color*
+|The border color of the point features.
+|*Border width*
+|The border width of the point features.
+|*Fill color*
+|The fill color of the point features.
+|*Symbol size*
+|The radius of the symbol size, in pixels.
+|===
 
 Use *Icon* to symbolize Points as icons.
 
-*Fill color*:: The fill color of the point features.
-
-*Border color*:: The border color of the point features.
-
-*Border width*:: The border width of the point features.
+[cols="2*"]
+|===
+|*Border color*
+|The border color of the point features.
+|*Border width*
+|The border width of the point features.
+|*Fill color*
+|The fill color of the point features.
+|*Symbol orientation*
+|The symbol orientation rotating the icon clockwise.
+|*Symbol size*
+|The radius of the symbol size, in pixels.
+|===
 
-*Symbol orientation*:: The symbol orientation rotating the icon clockwise.
-
-*Symbol size*:: The radius of the symbol size, in pixels.
-+
 Available icons
-+
+
 [role="screenshot"]
 image::maps/images/maki-icons.png[]
 
@@ -42,17 +62,25 @@ image::maps/images/maki-icons.png[]
 [[polygon-style-properties]]
 ==== Polygon style properties
 
-*Fill color*:: The fill color of the polygon features.
-
-*Border color*:: The border color of the polygon features.
-
-*Border width*:: The border width of the polygon features.
+[cols="2*"]
+|===
+|*Border color*
+|The border color of the polygon features.
+|*Border width*
+|The border width of the polygon features.
+|*Fill color*
+|The fill color of the polygon features.
+|===
 
 
 [float]
 [[line-style-properties]]
 ==== Line style properties
 
-*Border color*:: The color of the line features.
-
-*Border width*:: The width of the line features.
+[cols="2*"]
+|===
+|*Border color*
+|The color of the line features.
+|*Border width*
+|The width of the line features.
+|===

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

@@ -344,6 +344,10 @@ export class AbstractLayer {
     return [];
   }
 
+  async getFields() {
+    return [];
+  }
+
   syncVisibilityWithMb(mbMap, mbLayerId) {
     mbMap.setLayoutProperty(mbLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
   }

x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js

@@ -124,6 +124,24 @@ export class ESSearchSource extends AbstractESSource {
     }
   }
 
+  async getFields() {
+    try {
+      const indexPattern = await this.getIndexPattern();
+      return indexPattern.fields
+        .filter(field => {
+          // Ensure fielddata is enabled for field.
+          // Search does not request _source
+          return field.aggregatable;
+        })
+        .map(field => {
+          return this.createField({ fieldName: field.name });
+        });
+    } catch (error) {
+      // failed index-pattern retrieval will show up as error-message in the layer-toc-entry
+      return [];
+    }
+  }
+
   getFieldNames() {
     return [this._descriptor.geoField];
   }

x-pack/legacy/plugins/maps/public/layers/sources/vector_source.js

@@ -103,6 +103,10 @@ export class AbstractVectorSource extends AbstractSource {
     return [];
   }
 
+  async getFields() {
+    return [...(await this.getDateFields()), ...(await this.getNumberFields())];
+  }
+
   async getLeftJoinFields() {
     return [];
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_selection.js

@@ -12,7 +12,7 @@ import { FieldSelect, fieldShape } from '../field_select';
 import { ColorRampSelect } from './color_ramp_select';
 import { EuiSpacer } from '@elastic/eui';
 
-export function DynamicColorSelection({ ordinalFields, onChange, styleOptions }) {
+export function DynamicColorSelection({ fields, onChange, styleOptions }) {
   const onFieldChange = ({ field }) => {
     onChange({ ...styleOptions, field });
   };
@@ -32,7 +32,7 @@ export function DynamicColorSelection({ ordinalFields, onChange, styleOptions })
       />
       <EuiSpacer size="s" />
       <FieldSelect
-        fields={ordinalFields}
+        fields={fields}
         selectedFieldName={_.get(styleOptions, 'field.name')}
         onChange={onFieldChange}
         compressed
@@ -42,7 +42,7 @@ export function DynamicColorSelection({ ordinalFields, onChange, styleOptions })
 }
 
 DynamicColorSelection.propTypes = {
-  ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
+  fields: PropTypes.arrayOf(fieldShape).isRequired,
   styleOptions: dynamicColorShape.isRequired,
   onChange: PropTypes.func.isRequired,
 };

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js

@@ -13,7 +13,7 @@ import { StaticColorSelection } from './static_color_selection';
 export function VectorStyleColorEditor(props) {
   return (
     <StaticDynamicStyleRow
-      ordinalFields={props.ordinalFields}
+      fields={props.fields}
       styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       swatches={props.swatches}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js

@@ -30,6 +30,18 @@ export function getVectorStyleLabel(styleName) {
       return i18n.translate('xpack.maps.styles.vector.orientationLabel', {
         defaultMessage: 'Symbol orientation',
       });
+    case VECTOR_STYLES.LABEL_TEXT:
+      return i18n.translate('xpack.maps.styles.vector.labelLabel', {
+        defaultMessage: 'Label',
+      });
+    case VECTOR_STYLES.LABEL_COLOR:
+      return i18n.translate('xpack.maps.styles.vector.labelColorLabel', {
+        defaultMessage: 'Label color',
+      });
+    case VECTOR_STYLES.LABEL_SIZE:
+      return i18n.translate('xpack.maps.styles.vector.labelSizeLabel', {
+        defaultMessage: 'Label size',
+      });
     default:
       return styleName;
   }

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_selector.js

@@ -0,0 +1,24 @@
+/*
+ * 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 _ from 'lodash';
+import React from 'react';
+import { FieldSelect } from '../field_select';
+
+export function DynamicLabelSelector({ fields, styleOptions, onChange }) {
+  const onFieldChange = ({ field }) => {
+    onChange({ ...styleOptions, field });
+  };
+
+  return (
+    <FieldSelect
+      fields={fields}
+      selectedFieldName={_.get(styleOptions, 'field.name')}
+      onChange={onFieldChange}
+      compressed
+    />
+  );
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_selector.js

@@ -0,0 +1,28 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiFieldText } from '@elastic/eui';
+
+export function StaticLabelSelector({ onChange, styleOptions }) {
+  const onValueChange = event => {
+    onChange({ value: event.target.value });
+  };
+
+  return (
+    <EuiFieldText
+      placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {
+        defaultMessage: 'symbol label',
+      })}
+      value={styleOptions.value}
+      onChange={onValueChange}
+      aria-label={i18n.translate('xpack.maps.styles.staticLabel.valueAriaLabel', {
+        defaultMessage: 'symbol label',
+      })}
+    />
+  );
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/vector_style_label_editor.js

@@ -0,0 +1,21 @@
+/*
+ * 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 { StaticDynamicStyleRow } from '../static_dynamic_style_row';
+import { DynamicLabelSelector } from './dynamic_label_selector';
+import { StaticLabelSelector } from './static_label_selector';
+
+export function VectorStyleLabelEditor(props) {
+  return (
+    <StaticDynamicStyleRow
+      {...props}
+      DynamicSelector={DynamicLabelSelector}
+      StaticSelector={StaticLabelSelector}
+    />
+  );
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_selection.js

@@ -10,14 +10,14 @@ import PropTypes from 'prop-types';
 import { dynamicOrientationShape } from '../style_option_shapes';
 import { FieldSelect, fieldShape } from '../field_select';
 
-export function DynamicOrientationSelection({ ordinalFields, styleOptions, onChange }) {
+export function DynamicOrientationSelection({ fields, styleOptions, onChange }) {
   const onFieldChange = ({ field }) => {
     onChange({ ...styleOptions, field });
   };
 
   return (
     <FieldSelect
-      fields={ordinalFields}
+      fields={fields}
       selectedFieldName={_.get(styleOptions, 'field.name')}
       onChange={onFieldChange}
       compressed
@@ -26,7 +26,7 @@ export function DynamicOrientationSelection({ ordinalFields, styleOptions, onCha
 }
 
 DynamicOrientationSelection.propTypes = {
-  ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
+  fields: PropTypes.arrayOf(fieldShape).isRequired,
   styleOptions: dynamicOrientationShape.isRequired,
   onChange: PropTypes.func.isRequired,
 };

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js

@@ -13,7 +13,7 @@ import { StaticOrientationSelection } from './static_orientation_selection';
 export function OrientationEditor(props) {
   return (
     <StaticDynamicStyleRow
-      ordinalFields={props.ordinalFields}
+      fields={props.fields}
       styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       DynamicSelector={DynamicOrientationSelection}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_selection.js

@@ -12,7 +12,7 @@ import { FieldSelect, fieldShape } from '../field_select';
 import { SizeRangeSelector } from './size_range_selector';
 import { EuiSpacer } from '@elastic/eui';
 
-export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange }) {
+export function DynamicSizeSelection({ fields, styleOptions, onChange }) {
   const onFieldChange = ({ field }) => {
     onChange({ ...styleOptions, field });
   };
@@ -32,7 +32,7 @@ export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange })
       />
       <EuiSpacer size="s" />
       <FieldSelect
-        fields={ordinalFields}
+        fields={fields}
         selectedFieldName={_.get(styleOptions, 'field.name')}
         onChange={onFieldChange}
         compressed
@@ -42,7 +42,7 @@ export function DynamicSizeSelection({ ordinalFields, styleOptions, onChange })
 }
 
 DynamicSizeSelection.propTypes = {
-  ordinalFields: PropTypes.arrayOf(fieldShape).isRequired,
+  fields: PropTypes.arrayOf(fieldShape).isRequired,
   styleOptions: dynamicSizeShape.isRequired,
   onChange: PropTypes.func.isRequired,
 };

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js

@@ -13,7 +13,7 @@ import { StaticSizeSelection } from './static_size_selection';
 export function VectorStyleSizeEditor(props) {
   return (
     <StaticDynamicStyleRow
-      ordinalFields={props.ordinalFields}
+      fields={props.fields}
       styleProperty={props.styleProperty}
       handlePropertyChange={props.handlePropertyChange}
       DynamicSelector={DynamicSizeSelection}

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js

@@ -19,7 +19,7 @@ export class StaticDynamicStyleRow extends Component {
   prevDynamicStyleOptions = this.props.defaultDynamicStyleOptions;
 
   _canBeDynamic() {
-    return this.props.ordinalFields.length > 0;
+    return this.props.fields.length > 0;
   }
 
   _isDynamic() {
@@ -78,7 +78,7 @@ export class StaticDynamicStyleRow extends Component {
       return (
         <Fragment>
           <DynamicSelector
-            ordinalFields={this.props.ordinalFields}
+            fields={this.props.fields}
             onChange={this._onDynamicStyleChange}
             styleOptions={this._getStyleOptions()}
           />