From 4cb2f40ecef9f92416c3bb7683bb56b6c3c8e217 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 4 Jun 2021 12:36:50 +0200
Subject: [PATCH] show warning message for the array values

---
 .../heatmap_visualization/visualization.tsx   | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
index 104e7d3977714..54f9c70824831 100644
--- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { Ast } from '@kbn/interpreter/common';
 import { Position } from '@elastic/charts';
 import { PaletteRegistry } from '../../../../../src/plugins/charts/public';
@@ -386,4 +386,30 @@ export const getHeatmapVisualization = ({
 
     return errors.length ? errors : undefined;
   },
+
+  getWarningMessages(state, frame) {
+    if (!state?.layerId || !frame.activeData || !state.valueAccessor) {
+      return;
+    }
+
+    const rows = frame.activeData[state.layerId] && frame.activeData[state.layerId].rows;
+    if (!rows) {
+      return;
+    }
+
+    const hasArrayValues = rows.some((row) => Array.isArray(row[state.valueAccessor!]));
+
+    const datasource = frame.datasourceLayers[state.layerId];
+    const operation = datasource.getOperationForColumnId(state.valueAccessor);
+
+    return hasArrayValues
+      ? [
+          <FormattedMessage
+            id="xpack.lens.heatmapVisualization.arrayValuesWarningMessage"
+            defaultMessage="{label} contains array values. Your visualization may not render as expected."
+            values={{ label: <strong>{operation?.label}</strong> }}
+          />,
+        ]
+      : undefined;
+  },
 });