[Maps] Surface data request errors (elastic#200860)

## Summary

This PR makes it to so data request errors are surfaced to users, as a
warning.

Closes: elastic#195294

x-pack/plugins/maps/public/classes/styles/vector/components/legend/style_error.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { DynamicStyleProperty } from '../../properties/dynamic_style_property';
+
+interface Props {
+  error: Error;
+  style: DynamicStyleProperty<object>;
+}
+
+export const StyleError = ({ error, style }: Props) => {
+  const [label, setLabel] = useState('');
+  const styleName = style.getDisplayStyleName();
+
+  useEffect(() => {
+    let canceled = false;
+    const getLabel = async () => {
+      const field = style.getField();
+      if (!field) {
+        return;
+      }
+
+      const fieldLabel = await field.getLabel();
+
+      if (canceled) {
+        return;
+      }
+
+      setLabel(fieldLabel);
+    };
+
+    getLabel();
+
+    return () => {
+      canceled = true;
+    };
+  }, [style]);
+
+  return (
+    <div>
+      <EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiToolTip position="top" title={styleName} content={label}>
+            <EuiText className="eui-textTruncate" size="xs" style={{ maxWidth: '180px' }}>
+              <small>
+                <strong>{label}</strong>
+              </small>
+            </EuiText>
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup direction="column" gutterSize="none">
+        <EuiCallOut
+          title={i18n.translate('xpack.maps.vectorStyleLegend.fetchStyleMetaDataError', {
+            defaultMessage: 'Unable to fetch style meta data',
+          })}
+          color="warning"
+          iconType="warning"
+        >
+          <p>{error.message}</p>
+        </EuiCallOut>
+      </EuiFlexGroup>
+    </div>
+  );
+};

x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx

@@ -8,6 +8,11 @@
 import React from 'react';
 import { EuiText } from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-theme';
+import { StyleError } from './style_error';
+import {
+  DynamicStyleProperty,
+  IDynamicStyleProperty,
+} from '../../properties/dynamic_style_property';
 import { FIELD_ORIGIN } from '../../../../../../common/constants';
 import { Mask } from '../../../../layers/vector_layer/mask';
 import { IStyleProperty } from '../../properties/style_property';
@@ -33,12 +38,22 @@ export function VectorStyleLegend({
   const legendRows = [];
 
   for (let i = 0; i < styles.length; i++) {
-    const row = styles[i].renderLegendDetailRow({
-      isLinesOnly,
-      isPointsOnly,
-      symbolId,
-      svg,
-    });
+    const styleMetaDataRequest = styles[i].isDynamic()
+      ? (styles[i] as IDynamicStyleProperty<object>).getStyleMetaDataRequest()
+      : undefined;
+
+    const error = styleMetaDataRequest?.getError();
+
+    const row = error ? (
+      <StyleError error={error} style={styles[i] as DynamicStyleProperty<object>} />
+    ) : (
+      styles[i].renderLegendDetailRow({
+        isLinesOnly,
+        isPointsOnly,
+        symbolId,
+        svg,
+      })
+    );
 
     legendRows.push(
       <div key={i} className="vectorStyleLegendSpacer">

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx

@@ -9,6 +9,7 @@ import _ from 'lodash';
 import React from 'react';
 import { FeatureCollection } from 'geojson';
 import type { FeatureIdentifier, Map as MbMap } from '@kbn/mapbox-gl';
+import { DataRequest } from '../../../util/data_request';
 import { AbstractStyleProperty, IStyleProperty } from './style_property';
 import { DEFAULT_SIGMA } from '../vector_style_defaults';
 import {
@@ -97,6 +98,7 @@ export interface IDynamicStyleProperty<T> extends IStyleProperty<T> {
     mbMap: MbMap,
     mbSourceId: string
   ): boolean;
+  getStyleMetaDataRequest(): DataRequest | undefined;
 }
 
 export class DynamicStyleProperty<T extends object>
@@ -122,6 +124,11 @@ export class DynamicStyleProperty<T extends object>
     this._getFieldFormatter = getFieldFormatter;
   }
 
+  getStyleMetaDataRequest() {
+    const dataRequestId = this._getStyleMetaDataRequestId(this.getFieldName());
+    return dataRequestId ? this._layer.getDataRequest(dataRequestId) : undefined;
+  }
+
   getValueSuggestions = async (query: string) => {
     return this._field === null
       ? []
@@ -147,12 +154,7 @@ export class DynamicStyleProperty<T extends object>
   }
 
   _getRangeFieldMetaFromStyleMetaRequest(): RangeFieldMeta | null {
-    const dataRequestId = this._getStyleMetaDataRequestId(this.getFieldName());
-    if (!dataRequestId) {
-      return null;
-    }
-
-    const styleMetaDataRequest = this._layer.getDataRequest(dataRequestId);
+    const styleMetaDataRequest = this.getStyleMetaDataRequest();
     if (!styleMetaDataRequest || !styleMetaDataRequest.hasData()) {
       return null;
     }
@@ -177,12 +179,7 @@ export class DynamicStyleProperty<T extends object>
       return null;
     }
 
-    const dataRequestId = this._getStyleMetaDataRequestId(this.getFieldName());
-    if (!dataRequestId) {
-      return null;
-    }
-
-    const styleMetaDataRequest = this._layer.getDataRequest(dataRequestId);
+    const styleMetaDataRequest = this.getStyleMetaDataRequest();
     if (!styleMetaDataRequest || !styleMetaDataRequest.hasData()) {
       return null;
     }
@@ -202,12 +199,7 @@ export class DynamicStyleProperty<T extends object>
   }
 
   _getCategoryFieldMetaFromStyleMetaRequest() {
-    const dataRequestId = this._getStyleMetaDataRequestId(this.getFieldName());
-    if (!dataRequestId) {
-      return [];
-    }
-
-    const styleMetaDataRequest = this._layer.getDataRequest(dataRequestId);
+    const styleMetaDataRequest = this.getStyleMetaDataRequest();
     if (!styleMetaDataRequest || !styleMetaDataRequest.hasData()) {
       return [];
     }

x-pack/plugins/maps/public/classes/util/data_request.tsx

@@ -54,6 +54,10 @@ export class DataRequest {
     return this._descriptor.dataRequestToken;
   }
 
+  getError(): Error | undefined {
+    return this._descriptor.error;
+  }
+
   renderError(): ReactNode {
     if (!this._descriptor.error) {
       return null;