[Lens] rewrite warning messages with i18n (elastic#101314)

jloleysens · Jun 4, 2021 · e3198bc · e3198bc
1 parent d6164ae
commit e3198bc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx b/x-pack/plugins/lens/public/pie_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 { PaletteRegistry } from 'src/plugins/charts/public';
 import { Visualization, OperationMetadata, AccessorConfig } from '../types';
 import { toExpression, toPreviewExpression } from './to_expression';
@@ -265,10 +265,15 @@ export const getPieVisualization = ({
       }
     }
     return metricColumnsWithArrayValues.map((label) => (
-      <>
-        <strong>{label}</strong> contains array values. Your visualization may not render as
-        expected.
-      </>
+      <FormattedMessage
+        key={label}
+        id="xpack.lens.pie.arrayValues"
+        defaultMessage="{label} contains array values. Your visualization may not render as
+        expected."
+        values={{
+          label: <strong>{label}</strong>,
+        }}
+      />
     ));
   },
 

diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
@@ -929,12 +929,17 @@ describe('xy_visualization', () => {
       );
       expect(warningMessages).toHaveLength(1);
       expect(warningMessages && warningMessages[0]).toMatchInlineSnapshot(`
-        <React.Fragment>
-          <strong>
-            Label B
-          </strong>
-           contains array values. Your visualization may not render as expected.
-        </React.Fragment>
+        <FormattedMessage
+          defaultMessage="{label} contains array values. Your visualization may not render as expected."
+          id="xpack.lens.xyVisualization.arrayValues"
+          values={
+            Object {
+              "label": <strong>
+                Label B
+              </strong>,
+            }
+          }
+        />
       `);
     });
   });

diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { uniq } from 'lodash';
 import { render } from 'react-dom';
 import { Position } from '@elastic/charts';
-import { I18nProvider } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { PaletteRegistry } from 'src/plugins/charts/public';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
@@ -439,10 +439,15 @@ export const getXyVisualization = ({
       }
     }
     return accessorsWithArrayValues.map((label) => (
-      <>
-        <strong>{label}</strong> contains array values. Your visualization may not render as
-        expected.
-      </>
+      <FormattedMessage
+        key={label}
+        id="xpack.lens.xyVisualization.arrayValues"
+        defaultMessage="{label} contains array values. Your visualization may not render as
+        expected."
+        values={{
+          label: <strong>{label}</strong>,
+        }}
+      />
     ));
   },
 });