[6.x] Translations for Tag Cloud (#24065) (#24125)

* Translations for Tag Cloud (#24065)

* Translate pie and vaslib_basic_options (#23761) (#24124)

Translate pie and vislib_basic_options

* [I18n] Add one-time binding to angularjs i18n (#23499) (#23965)

* Add one-time binding to angularjs i18n

* Add watcher for values property

* Watch values field only if it is provided

* Fix ci

* Translations for Tag Cloud (#24065)

Author: maryia-lapata

.i18nrc.json

@@ -7,6 +7,7 @@
     "markdownVis": "src/core_plugins/markdown_vis",
     "metricVis": "src/core_plugins/metric_vis",
     "statusPage": "src/core_plugins/status_page",
+    "tagCloud": "src/core_plugins/tagcloud",
     "xpack.idxMgmt": "x-pack/plugins/index_management"
   },
   "exclude": [

src/core_plugins/tagcloud/public/feedback_message.js

@@ -18,6 +18,7 @@
  */
 
 import React, { Component } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export class FeedbackMessage extends Component {
 
@@ -30,10 +31,16 @@ export class FeedbackMessage extends Component {
     return (
       <div className="tagcloud-notifications" >
         <div className="tagcloud-truncated-message" style={{ display: this.state.shouldShowTruncate ? 'block' : 'none' }}>
-          The number of tags has been truncated to avoid long draw times.
+          <FormattedMessage
+            id="tagCloud.feedbackMessage.truncatedTagsDescription"
+            defaultMessage="The number of tags has been truncated to avoid long draw times."
+          />
         </div>
         <div className="tagcloud-incomplete-message" style={{ display: this.state.shouldShowIncomplete ? 'block' : 'none' }}>
-          The container is too small to display the entire cloud. Tags might be cropped or omitted.
+          <FormattedMessage
+            id="tagCloud.feedbackMessage.tooSmallContainerDescription"
+            defaultMessage="The container is too small to display the entire cloud. Tags might be cropped or omitted."
+          />
         </div>
       </div>
     );

src/core_plugins/tagcloud/public/tag_cloud_vis.js

@@ -26,15 +26,17 @@ import { TagCloudVisualization } from './tag_cloud_visualization';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import { Status } from 'ui/vis/update_status';
 
-VisTypesRegistryProvider.register(function (Private) {
+VisTypesRegistryProvider.register(function (Private, i18n) {
 
   const VisFactory = Private(VisFactoryProvider);
 
   return VisFactory.createBaseVisualization({
     name: 'tagcloud',
-    title: 'Tag Cloud',
+    title: i18n('tagCloud.vis.tagCloudTitle', { defaultMessage: 'Tag Cloud' }),
     icon: 'visTagCloud',
-    description: 'A group of words, sized according to their importance',
+    description: i18n('tagCloud.vis.tagCloudDescription', {
+      defaultMessage: 'A group of words, sized according to their importance'
+    }),
     category: CATEGORY.OTHER,
     visConfig: {
       defaults: {
@@ -57,7 +59,7 @@ VisTypesRegistryProvider.register(function (Private) {
         {
           group: 'metrics',
           name: 'metric',
-          title: 'Tag Size',
+          title: i18n('tagCloud.vis.schemas.metricTitle', { defaultMessage: 'Tag Size' }),
           min: 1,
           max: 1,
           aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks', '!derivative', '!geo_bounds', '!geo_centroid'],
@@ -69,7 +71,7 @@ VisTypesRegistryProvider.register(function (Private) {
           group: 'buckets',
           name: 'segment',
           icon: 'fa fa-cloud',
-          title: 'Tags',
+          title: i18n('tagCloud.vis.schemas.segmentTitle', { defaultMessage: 'Tags' }),
           min: 1,
           max: 1,
           aggFilter: ['terms', 'significant_terms']

src/core_plugins/tagcloud/public/tag_cloud_vis_params.html

@@ -1,15 +1,15 @@
 <div class="kuiSideBarSection">
   <div class="form-group">
     <div class="form-group">
-      <label>Text Scale</label>
+      <label i18n-id="tagCloud.visParams.textScaleLabel" i18n-default-message="Text Scale"></label>
       <select class="form-control" ng-model="editorState.params.scale" ng-options="mode for mode in config.collections.scales"></select>
     </div>
     <div class="form-group">
-      <label>Orientations</label>
+      <label i18n-id="tagCloud.visParams.orientationsLabel" i18n-default-message="Orientations"></label>
       <select class="form-control" ng-model="editorState.params.orientation" ng-options="mode for mode in config.collections.orientations"></select>
     </div>
     <div class="form-group">
-      <label>Font Size</label>
+      <label i18n-id="tagCloud.visParams.fontSizeLabel" i18n-default-message="Font Size"></label>
       <div class="tag-cloud-fontsize-slider"></div>
       <div class="kuiBar">
         <div class="kuiBarSection">
@@ -19,10 +19,10 @@
             max="{{editorState.params.maxFontSize}}"
             class="kuiTextInput tag-cloud-fontsize-slider__input"
             ng-model="editorState.params.minFontSize"
-            aria-label="Minimum tag font size"
+            aria-label="{{ ::'tagCloud.visParams.minFontSizeAriaLabel' | i18n: { defaultMessage: 'Minimum tag font size' } }}"
             aria-describedby="tagCloudFontSliderMinUnit"
           >
-          <span id="tagCloudFontSliderMinUnit" aria-label="pixels">px</span>
+          <span id="tagCloudFontSliderMinUnit" aria-label="{{ ::'tagCloud.visParams.minPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
         </div>
         <div class="kuiBarSection">
           <input
@@ -31,18 +31,18 @@
             max="100"
             class="kuiTextInput tag-cloud-fontsize-slider__input"
             ng-model="editorState.params.maxFontSize"
-            aria-label="Maximum tag font size"
+            aria-label="{{ ::'tagCloud.visParams.maxFontSizeAriaLabel' | i18n: { defaultMessage: 'Maximum tag font size' } }}"
             aria-describedby="tagCloudFontSliderMaxUnit"
           >
-          <span id="tagCloudFontSliderMaxUnit" aria-label="pixels">px</span>
+          <span id="tagCloudFontSliderMaxUnit" aria-label="{{ ::'tagCloud.visParams.maxPixelsAriaLabel' | i18n: { defaultMessage: 'pixels' } }}">px</span>
         </div>
       </div>
     </div>
     <div>
       <label>
         <input type="checkbox" value="{{hideLabel}}" ng-model="editorState.params.showLabel" name="showLabel"
                ng-checked="editorState.params.showLabel">
-        Show Label
+        <span i18n-id="tagCloud.visParams.showLabelToggleLabel" i18n-default-message="Show Label"></span>
       </label>
     </div>
   </div>

src/core_plugins/tagcloud/public/tag_cloud_visualization.js

@@ -23,7 +23,7 @@ import { take } from 'rxjs/operators';
 import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
 
-
+import { I18nProvider } from '@kbn/i18n/react';
 import { Label } from './label';
 import { FeedbackMessage } from './feedback_message';
 
@@ -57,7 +57,7 @@ export class TagCloudVisualization {
     this._feedbackNode = document.createElement('div');
     this._containerNode.appendChild(this._feedbackNode);
     this._feedbackMessage = React.createRef();
-    render(<FeedbackMessage ref={this._feedbackMessage} />, this._feedbackNode);
+    render(<I18nProvider><FeedbackMessage ref={this._feedbackMessage} /></I18nProvider>, this._feedbackNode);
 
     this._labelNode = document.createElement('div');
     this._containerNode.appendChild(this._labelNode);