Feature/translate canvas plugin src elements (#23755)

translate canvas canvas_plugin_src elements

x-pack/plugins/canvas/canvas_plugin_src/elements/area_chart/index.js

@@ -4,11 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 export const areaChart = () => {
   return {
     name: 'areaChart',
-    displayName: 'Area chart',
-    help: 'A line chart with a filled body',
+    displayName: i18n.translate('xpack.canvas.elements.areaChartDisplayName', {
+      defaultMessage: 'Area chart',
+    }),
+    help: i18n.translate('xpack.canvas.elements.areaChartHelpText', {
+      defaultMessage: 'A line chart with a filled body',
+    }),
     image: require('./header.png'),
     expression: `filters
   | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/bubble_chart/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const bubbleChart = () => ({
   name: 'bubbleChart',
-  displayName: 'Bubble chart',
-  help: 'A customizable bubble chart',
+  displayName: i18n.translate('xpack.canvas.elements.bubbleChartDisplayName', {
+    defaultMessage: 'Bubble chart',
+  }),
+  help: i18n.translate('xpack.canvas.elements.bubbleChartHelpText', {
+    defaultMessage: 'A customizable bubble chart',
+  }),
   width: 700,
   height: 300,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/debug/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const debug = () => ({
   name: 'debug',
-  displayName: 'Debug',
-  help: 'Just dumps the configuration of the element',
+  displayName: i18n.translate('xpack.canvas.elements.debugDisplayName', {
+    defaultMessage: 'Debug',
+  }),
+  help: i18n.translate('xpack.canvas.elements.debugHelpText', {
+    defaultMessage: 'Just dumps the configuration of the element',
+  }),
   image: header,
   expression: `demodata
 | render as=debug`,

x-pack/plugins/canvas/canvas_plugin_src/elements/donut/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const donut = () => ({
   name: 'donut',
-  displayName: 'Donut chart',
-  help: 'A customizable donut chart',
+  displayName: i18n.translate('xpack.canvas.elements.donutChartDisplayName', {
+    defaultMessage: 'Donut chart',
+  }),
+  help: i18n.translate('xpack.canvas.elements.donutChartHelpText', {
+    defaultMessage: 'A customizable donut chart',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/dropdown_filter/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const dropdownFilter = () => ({
   name: 'dropdown_filter',
-  displayName: 'Dropdown filter',
-  help: 'A dropdown from which you can select values for an "exactly" filter',
+  displayName: i18n.translate('xpack.canvas.elements.dropdownFilterDisplayName', {
+    defaultMessage: 'Dropdown filter',
+  }),
+  help: i18n.translate('xpack.canvas.elements.dropdownFilterHelpText', {
+    defaultMessage: 'A dropdown from which you can select values for an "exactly" filter',
+  }),
   image: header,
   height: 50,
   expression: `demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/horiz_bar_chart/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const horizontalBarChart = () => ({
   name: 'horizontalBarChart',
-  displayName: 'Horizontal bar chart',
-  help: 'A customizable horizontal bar chart',
+  displayName: i18n.translate('xpack.canvas.elements.horizontalBarChartDisplayName', {
+    defaultMessage: 'Horizontal bar chart',
+  }),
+  help: i18n.translate('xpack.canvas.elements.horizontalBarChartHelpText', {
+    defaultMessage: 'A customizable horizontal bar chart',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/horizontal_progress_bar/index.js

@@ -4,13 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const horizontalProgressBar = () => ({
   name: 'horizontalProgressBar',
-  displayName: 'Horizontal progress bar',
-  help: 'Displays progress as a portion of a horizontal bar',
+  displayName: i18n.translate('xpack.canvas.elements.horizontalProgressBarDisplayName', {
+    defaultMessage: 'Horizontal Progress Bar',
+  }),
+  help: i18n.translate('xpack.canvas.elements.horizontalProgressBarHelpText', {
+    defaultMessage: 'Displays progress as a portion of a horizontal bar',
+  }),
   width: 400,
   height: 30,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/horizontal_progress_pill/index.js

@@ -4,13 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const horizontalProgressPill = () => ({
   name: 'horizontalProgressPill',
-  displayName: 'Horizontal progress pill',
-  help: 'Displays progress as a portion of a horizontal pill',
+  displayName: i18n.translate('xpack.canvas.elements.horizontalProgressPillDisplayName', {
+    defaultMessage: 'Horizontal Progress Pill',
+  }),
+  help: i18n.translate('xpack.canvas.elements.horizontalProgressPillHelpText', {
+    defaultMessage: 'Displays progress as a portion of a horizontal pill',
+  }),
   width: 400,
   height: 30,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/image/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const image = () => ({
   name: 'image',
-  displayName: 'Image',
-  help: 'A static image',
+  displayName: i18n.translate('xpack.canvas.elements.imageDisplayName', {
+    defaultMessage: 'Image',
+  }),
+  help: i18n.translate('xpack.canvas.elements.imageHelpText', {
+    defaultMessage: 'A static image',
+  }),
   image: header,
   expression: `image dataurl=null mode="contain"
 | render`,

x-pack/plugins/canvas/canvas_plugin_src/elements/line_chart/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const lineChart = () => ({
   name: 'lineChart',
-  displayName: 'Line chart',
-  help: 'A customizable line chart',
+  displayName: i18n.translate('xpack.canvas.elements.lineChartDisplayName', {
+    defaultMessage: 'Line chart',
+  }),
+  help: i18n.translate('xpack.canvas.elements.lineChartHelpText', {
+    defaultMessage: 'A customizable line chart',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/markdown/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const markdown = () => ({
   name: 'markdown',
-  displayName: 'Markdown',
-  help: 'Markup from Markdown',
+  displayName: i18n.translate('xpack.canvas.elements.markdownDisplayName', {
+    defaultMessage: 'Markdown',
+  }),
+  help: i18n.translate('xpack.canvas.elements.markdownHelpText', {
+    defaultMessage: 'Markup from Markdown',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/metric/index.js

@@ -4,21 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const metric = () => ({
   name: 'metric',
-  displayName: 'Metric',
-  help: 'A number with a label',
+  displayName: i18n.translate('xpack.canvas.elements.metricDisplayName', {
+    defaultMessage: 'Metric',
+  }),
+  help: i18n.translate('xpack.canvas.elements.metricHelpText', {
+    defaultMessage: 'A number with a label',
+  }),
   width: 200,
   height: 100,
   image: header,
   expression: `filters
 | demodata
 | math "unique(country)"
-| metric "Countries" 
-  metricFont={font size=48 family="${openSans.value}" color="#000000" align="center" lHeight=48} 
+| metric "Countries"
+  metricFont={font size=48 family="${openSans.value}" color="#000000" align="center" lHeight=48}
   labelFont={font size=14 family="${openSans.value}" color="#000000" align="center"}
 | render`,
 });

x-pack/plugins/canvas/canvas_plugin_src/elements/pie/index.js

@@ -4,14 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const pie = () => ({
   name: 'pie',
-  displayName: 'Pie chart',
+  displayName: i18n.translate('xpack.canvas.elements.pieDisplayName', {
+    defaultMessage: 'Pie chart',
+  }),
   width: 300,
   height: 300,
-  help: 'A simple pie chart',
+  help: i18n.translate('xpack.canvas.elements.pieHelpText', {
+    defaultMessage: 'Pie chart',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/plot/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const plot = () => ({
   name: 'plot',
-  displayName: 'Coordinate plot',
-  help: 'Mixed line, bar or dot charts',
+  displayName: i18n.translate('xpack.canvas.elements.plotDisplayName', {
+    defaultMessage: 'Coordinate plot',
+  }),
+  help: i18n.translate('xpack.canvas.elements.plotHelpText', {
+    defaultMessage: 'Mixed line, bar or dot charts',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/progress_gauge/index.js

@@ -4,13 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const progressGauge = () => ({
   name: 'progressGauge',
-  displayName: 'Progress gauge',
-  help: 'Displays progress as a portion of a gauge',
+  displayName: i18n.translate('xpack.canvas.elements.progressGaugeDisplayName', {
+    defaultMessage: 'Progress Gauge',
+  }),
+  help: i18n.translate('xpack.canvas.elements.progressGaugeHelpText', {
+    defaultMessage: 'Displays progress as a portion of a gauge',
+  }),
   width: 200,
   height: 200,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/progress_semicircle/index.js

@@ -4,13 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const progressSemicircle = () => ({
   name: 'progressSemicircle',
-  displayName: 'Progress semicircle',
-  help: 'Displays progress as a portion of a semicircle',
+  displayName: i18n.translate('xpack.canvas.elements.progressSemicircleDisplayName', {
+    defaultMessage: 'Progress Semicircle',
+  }),
+  help: i18n.translate('xpack.canvas.elements.progressSemicircleHelpText', {
+    defaultMessage: 'Displays progress as a portion of a semicircle',
+  }),
   width: 200,
   height: 100,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/progress_wheel/index.js

@@ -4,13 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import { openSans } from '../../../common/lib/fonts';
 import header from './header.png';
 
 export const progressWheel = () => ({
   name: 'progressWheel',
-  displayName: 'Progress wheel',
-  help: 'Displays progress as a portion of a wheel',
+  displayName: i18n.translate('xpack.canvas.elements.progressWheelDisplayName', {
+    defaultMessage: 'Progress Wheel',
+  }),
+  help: i18n.translate('xpack.canvas.elements.progressWheelHelpText', {
+    defaultMessage: 'Displays progress as a portion of a wheel',
+  }),
   width: 200,
   height: 200,
   image: header,

x-pack/plugins/canvas/canvas_plugin_src/elements/repeatImage/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const repeatImage = () => ({
   name: 'repeatImage',
-  displayName: 'Image repeat',
-  help: 'Repeats an image N times',
+  displayName: i18n.translate('xpack.canvas.elements.repeatImageDisplayName', {
+    defaultMessage: 'Image repeat',
+  }),
+  help: i18n.translate('xpack.canvas.elements.repeatImageHelpText', {
+    defaultMessage: 'Repeats an image N times',
+  }),
   image: header,
   expression: `filters
 | demodata

x-pack/plugins/canvas/canvas_plugin_src/elements/revealImage/index.js

@@ -4,12 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import header from './header.png';
 
 export const revealImage = () => ({
   name: 'revealImage',
-  displayName: 'Image reveal',
-  help: 'Reveals a percentage of an image',
+  displayName: i18n.translate('xpack.canvas.elements.revealImageDisplayName', {
+    defaultMessage: 'Image reveal',
+  }),
+  help: i18n.translate('xpack.canvas.elements.revealImageHelpText', {
+    defaultMessage: 'Reveals a percentage of an image',
+  }),
   image: header,
   expression: `filters
 | demodata