[Maps] fix unable to edit heatmap metric (#70606)

* [Maps] fix unable to edit heatmap metric

* add comment

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.js

@@ -10,6 +10,8 @@ import { esAggFieldsFactory } from '../../fields/es_agg_field';
 import { AGG_TYPE, COUNT_PROP_LABEL, FIELD_ORIGIN } from '../../../../common/constants';
 import { getSourceAggKey } from '../../../../common/get_agg_key';
 
+export const DEFAULT_METRIC = { type: AGG_TYPE.COUNT };
+
 export class AbstractESAggSource extends AbstractESSource {
   constructor(descriptor, inspectorAdapters) {
     super(descriptor, inspectorAdapters);
@@ -48,6 +50,7 @@ export class AbstractESAggSource extends AbstractESSource {
 
   getMetricFields() {
     const metrics = this._metricFields.filter((esAggField) => esAggField.isValid());
+    // Handle case where metrics is empty because older saved object state is empty array or there are no valid aggs.
     return metrics.length === 0
       ? esAggFieldsFactory({ type: AGG_TYPE.COUNT }, this, this.getOriginForField())
       : metrics;

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/es_geo_grid_source.js

@@ -18,7 +18,7 @@ import {
 } from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
-import { AbstractESAggSource } from '../es_agg_source';
+import { AbstractESAggSource, DEFAULT_METRIC } from '../es_agg_source';
 import { DataRequestAbortError } from '../../util/data_request';
 import { registerSource } from '../source_registry';
 import { makeESBbox } from '../../../elasticsearch_geo_utils';
@@ -42,7 +42,7 @@ export class ESGeoGridSource extends AbstractESAggSource {
       id: uuid(),
       indexPatternId,
       geoField,
-      metrics: metrics ? metrics : [],
+      metrics: metrics ? metrics : [DEFAULT_METRIC],
       requestType,
       resolution: resolution ? resolution : GRID_RESOLUTION.COARSE,
     };

x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/es_pew_pew_source.js

@@ -12,7 +12,7 @@ import { i18n } from '@kbn/i18n';
 import { SOURCE_TYPES, VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
 import { convertToLines } from './convert_to_lines';
-import { AbstractESAggSource } from '../es_agg_source';
+import { AbstractESAggSource, DEFAULT_METRIC } from '../es_agg_source';
 import { indexPatterns } from '../../../../../../../src/plugins/data/public';
 import { registerSource } from '../source_registry';
 
@@ -32,7 +32,7 @@ export class ESPewPewSource extends AbstractESAggSource {
       indexPatternId: indexPatternId,
       sourceGeoField,
       destGeoField,
-      metrics: metrics ? metrics : [],
+      metrics: metrics ? metrics : [DEFAULT_METRIC],
     };
   }
 

x-pack/plugins/maps/public/components/__snapshots__/metrics_editor.test.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should add default count metric when metrics is empty array 1`] = `
+<Fragment>
+  <div
+    className="mapMapLayerPanel__metrics"
+  >
+    <div
+      className="mapMetricEditorPanel__metricEditor"
+      key="0"
+    >
+      <MetricEditor
+        fields={Array []}
+        metric={
+          Object {
+            "type": "count",
+          }
+        }
+        metricsFilter={[Function]}
+        onChange={[Function]}
+      />
+    </div>
+  </div>
+  <EuiSpacer
+    size="xs"
+  />
+  <EuiTextAlign
+    textAlign="center"
+  >
+    <EuiButtonEmpty
+      iconType="plusInCircleFilled"
+      onClick={[Function]}
+      size="xs"
+    >
+      <FormattedMessage
+        defaultMessage="Add metric"
+        id="xpack.maps.metricsEditor.addMetricButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+  </EuiTextAlign>
+</Fragment>
+`;
+
+exports[`should render metrics editor 1`] = `
+<Fragment>
+  <div
+    className="mapMapLayerPanel__metrics"
+  >
+    <div
+      className="mapMetricEditorPanel__metricEditor"
+      key="0"
+    >
+      <MetricEditor
+        fields={Array []}
+        metric={
+          Object {
+            "field": "myField",
+            "type": "sum",
+          }
+        }
+        metricsFilter={[Function]}
+        onChange={[Function]}
+      />
+    </div>
+  </div>
+  <EuiSpacer
+    size="xs"
+  />
+  <EuiTextAlign
+    textAlign="center"
+  >
+    <EuiButtonEmpty
+      iconType="plusInCircleFilled"
+      onClick={[Function]}
+      size="xs"
+    >
+      <FormattedMessage
+        defaultMessage="Add metric"
+        id="xpack.maps.metricsEditor.addMetricButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+  </EuiTextAlign>
+</Fragment>
+`;

x-pack/plugins/maps/public/components/metrics_editor.js

@@ -10,11 +10,14 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButtonEmpty, EuiSpacer, EuiTextAlign } from '@elastic/eui';
 import { MetricEditor } from './metric_editor';
-import { AGG_TYPE } from '../../common/constants';
+import { DEFAULT_METRIC } from '../classes/sources/es_agg_source';
 
 export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, metricsFilter }) {
   function renderMetrics() {
-    return metrics.map((metric, index) => {
+    // There was a bug in 7.8 that initialized metrics to [].
+    // This check is needed to handle any saved objects created before the bug was patched.
+    const nonEmptyMetrics = metrics.length === 0 ? [DEFAULT_METRIC] : metrics;
+    return nonEmptyMetrics.map((metric, index) => {
       const onMetricChange = (metric) => {
         onChange([...metrics.slice(0, index), metric, ...metrics.slice(index + 1)]);
       };
@@ -100,6 +103,6 @@ MetricsEditor.propTypes = {
 };
 
 MetricsEditor.defaultProps = {
-  metrics: [{ type: AGG_TYPE.COUNT }],
+  metrics: [DEFAULT_METRIC],
   allowMultipleMetrics: true,
 };

x-pack/plugins/maps/public/components/metrics_editor.test.js

@@ -0,0 +1,33 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { MetricsEditor } from './metrics_editor';
+import { AGG_TYPE } from '../../common/constants';
+
+const defaultProps = {
+  metrics: [
+    {
+      type: AGG_TYPE.SUM,
+      field: 'myField',
+    },
+  ],
+  fields: [],
+  onChange: () => {},
+  allowMultipleMetrics: true,
+  metricsFilter: () => {},
+};
+
+test('should render metrics editor', async () => {
+  const component = shallow(<MetricsEditor {...defaultProps} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('should add default count metric when metrics is empty array', async () => {
+  const component = shallow(<MetricsEditor {...defaultProps} metrics={[]} />);
+  expect(component).toMatchSnapshot();
+});