[I18n] Translate Timelion (#23880)

* Add translations for timelion plugin

* Fix bugs

* Fix messages ids, resolve comments

* Update translations

* Refactor links messages

* Fix values bug

* Use template literals to avoid single quote escaping

.i18nrc.json

@@ -2,7 +2,7 @@
   "paths": {
     "common.ui": "src/ui",
     "console": "src/core_plugins/console",
-    "inputControl":"src/core_plugins/input_control_vis",
+    "inputControl": "src/core_plugins/input_control_vis",
     "kbn": "src/core_plugins/kibana",
     "kbnVislibVisTypes": "src/core_plugins/kbn_vislib_vis_types",
     "markdownVis": "src/core_plugins/markdown_vis",
@@ -12,6 +12,7 @@
     "regionMap": "src/core_plugins/region_map",
     "statusPage": "src/core_plugins/status_page",
     "tileMap": "src/core_plugins/tile_map",
+    "timelion": "src/core_plugins/timelion",
     "tagCloud": "src/core_plugins/tagcloud",
     "xpack.grokDebugger": "x-pack/plugins/grokdebugger",
     "xpack.idxMgmt": "x-pack/plugins/index_management",

src/core_plugins/timelion/index.js

@@ -103,7 +103,8 @@ export default function (kibana) {
           description: `<em>[experimental]</em> Your API key from www.quandl.com`,
           category: ['timelion'],
         }
-      }
+      },
+      translations: [],
     },
     init: require('./init.js'),
   });

src/core_plugins/timelion/init.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
 import processFunctionDefinition from './server/lib/process_function_definition';
 
@@ -33,7 +34,15 @@ export default function (server) {
   }
 
   function getFunction(name) {
-    if (!functions[name]) throw new Error ('No such function: ' + name);
+    if (!functions[name]) {
+      throw new Error(
+        i18n.translate('timelion.noFunctionErrorMessage', {
+          defaultMessage: 'No such function: {name}',
+          values: { name },
+        })
+      );
+    }
+
     return functions[name];
   }
 

src/core_plugins/timelion/public/app.js

@@ -91,6 +91,7 @@ app.controller('timelion', function (
   kbnUrl,
   Notifier,
   Private,
+  i18n,
 ) {
 
   // Keeping this at app scope allows us to keep the current page when the user
@@ -114,55 +115,86 @@ app.controller('timelion', function (
 
   $scope.topNavMenu = [{
     key: 'new',
-    description: 'New Sheet',
+    description: i18n('timelion.topNavMenu.newDescription', {
+      defaultMessage: 'New Sheet',
+    }),
     run: function () { kbnUrl.change('/'); },
     testId: 'timelionNewButton',
   }, {
     key: 'add',
-    description: 'Add a chart',
+    description: i18n('timelion.topNavMenu.addDescription', {
+      defaultMessage: 'Add a chart',
+    }),
     run: function () { $scope.newCell(); },
     testId: 'timelionAddChartButton',
   }, {
     key: 'save',
-    description: 'Save Sheet',
+    description: i18n('timelion.topNavMenu.saveDescription', {
+      defaultMessage: 'Save Sheet',
+    }),
     template: require('plugins/timelion/partials/save_sheet.html'),
     testId: 'timelionSaveButton',
   }, {
     key: 'delete',
-    description: 'Delete current sheet',
+    description: i18n('timelion.topNavMenu.deleteDescription', {
+      defaultMessage: 'Delete current sheet',
+    }),
     disableButton: function () {
       return !savedSheet.id;
     },
     run: function () {
       const title = savedSheet.title;
       function doDelete() {
         savedSheet.delete().then(() => {
-          toastNotifications.addSuccess(`Deleted '${title}'`);
+          toastNotifications.addSuccess(i18n(
+            'timelion.topNavMenu.delete.modal.successNotificationText',
+            {
+              defaultMessage: `Deleted '{title}'`,
+              values: { title },
+            }
+          ));
           kbnUrl.change('/');
         }).catch(error => fatalError(error, location));
       }
 
       const confirmModalOptions = {
         onConfirm: doDelete,
-        confirmButtonText: 'Delete',
-        title: `Delete Timelion sheet '${title}'?`
+        confirmButtonText: i18n('timelion.topNavMenu.delete.modal.confirmButtonLabel', {
+          defaultMessage: 'Delete',
+        }),
+        title: i18n('timelion.topNavMenu.delete.modalTitle', {
+          defaultMessage: `Delete Timelion sheet '{title}'?`,
+          values: { title }
+        }),
       };
-      confirmModal(`You can't recover deleted sheets.`, confirmModalOptions);
+
+      confirmModal(
+        i18n('timelion.topNavMenu.delete.modal.warningText', {
+          defaultMessage: `You can't recover deleted sheets.`,
+        }),
+        confirmModalOptions
+      );
     },
     testId: 'timelionDeleteButton',
   }, {
     key: 'open',
-    description: 'Open Sheet',
+    description: i18n('timelion.topNavMenu.openDescription', {
+      defaultMessage: 'Open Sheet',
+    }),
     template: require('plugins/timelion/partials/load_sheet.html'),
     testId: 'timelionOpenButton',
   }, {
     key: 'options',
-    description: 'Options',
+    description: i18n('timelion.topNavMenu.optionsDescription', {
+      defaultMessage: 'Options',
+    }),
     template: require('plugins/timelion/partials/sheet_options.html'),
     testId: 'timelionOptionsButton',
   }, {
     key: 'help',
-    description: 'Help',
+    description: i18n('timelion.topNavMenu.helpDescription', {
+      defaultMessage: 'Help',
+    }),
     template: '<timelion-help></timelion-help>',
     testId: 'timelionDocsButton',
   }];
@@ -289,7 +321,13 @@ app.controller('timelion', function (
     savedSheet.timelion_rows = $scope.state.rows;
     savedSheet.save().then(function (id) {
       if (id) {
-        toastNotifications.addSuccess(`Saved sheet '${savedSheet.title}'`);
+        toastNotifications.addSuccess(
+          i18n('timelion.saveSheet.successNotificationText', {
+            defaultMessage: `Saved sheet '{title}'`,
+            values: { title: savedSheet.title },
+          })
+        );
+
         if (savedSheet.id !== $routeParams.id) {
           kbnUrl.change('/{{id}}', { id: savedSheet.id });
         }
@@ -307,7 +345,12 @@ app.controller('timelion', function (
       savedExpression.visState.title = title;
       savedExpression.save().then(function (id) {
         if (id) {
-          toastNotifications.addSuccess(`Saved expression '${savedExpression.title}'`);
+          toastNotifications.addSuccess(
+            i18n('timelion.saveExpression.successNotificationText', {
+              defaultMessage: `Saved expression '{title}'`,
+              values: { title: savedExpression.title },
+            }),
+          );
         }
       });
     });

src/core_plugins/timelion/public/directives/cells/cells.html

@@ -21,28 +21,28 @@
       <button
         class="timCell__action"
         ng-click="removeCell($index)"
-        tooltip="Remove"
+        tooltip="{{ ::'timelion.cells.actions.removeTooltip' | i18n: { defaultMessage: 'Remove' } }}"
         tooltip-append-to-body="1"
-        aria-label="Remove chart"
+        aria-label="{{ ::'timelion.cells.actions.removeAriaLabel' | i18n: { defaultMessage: 'Remove chart' } }}"
       >
         <span class="fa fa-remove"></span>
       </button>
       <button
         class="timCell__action"
-        tooltip="Drag to reorder"
+        tooltip="{{ ::'timelion.cells.actions.reorderTooltip' | i18n: { defaultMessage: 'Drag to reorder' } }}"
         tooltip-append-to-body="1"
         sv-handle
-        aria-label="Drag to reorder"
+        aria-label="{{ ::'timelion.cells.actions.reorderAriaLabel' | i18n: { defaultMessage: 'Drag to reorder' } }}"
         tabindex="-1"
       >
         <span class="fa fa-arrows"></span>
       </button>
       <button
         class="timCell__action"
         ng-click="transient.fullscreen = true"
-        tooltip="Full screen"
+        tooltip="{{ ::'timelion.cells.actions.fullscreenTooltip' | i18n: { defaultMessage: 'Full screen' } }}"
         tooltip-append-to-body="1"
-        aria-label="Full screen chart"
+        aria-label="{{ ::'timelion.cells.actions.fullscreenAriaLabel' | i18n: { defaultMessage: 'Full screen chart' } }}"
       >
         <span class="fa fa-expand"></span>
       </button>

src/core_plugins/timelion/public/directives/chart/chart.js

@@ -16,12 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import panelRegistryProvider from '../../lib/panel_registry';
 
 require('ui/modules')
   .get('apps/timelion', [])
-  .directive('chart', function (Private) {
+  .directive('chart', function (Private, i18n) {
     return {
       restrict: 'A',
       scope: {
@@ -46,7 +45,12 @@ require('ui/modules')
           const panelSchema = panelRegistry.byName[seriesList.render.type];
 
           if (!panelSchema) {
-            $elem.text('No such panel type: ' + seriesList.render.type);
+            $elem.text(
+              i18n('timelion.chart.seriesList.noSchemaWarning', {
+                defaultMessage: 'No such panel type: {renderType}',
+                values: { renderType: seriesList.render.type },
+              })
+            );
             return;
           }
 

src/core_plugins/timelion/public/directives/fullscreen/fullscreen.html

@@ -4,9 +4,9 @@
     <button
       class="timCell__action"
       ng-click="transient.fullscreen = false"
-      tooltip="Exit full screen"
+      tooltip="{{ ::'timelion.fullscreen.exitTooltip' | i18n: { defaultMessage: 'Exit full screen' } }}"
       tooltip-append-to-body="1"
-      aria-label="Exit full screen"
+      aria-label="{{ ::'timelion.fullscreen.exitAriaLabel' | i18n: { defaultMessage: 'Exit full screen' } }}"
     >
       <span class="fa fa-compress"></span>
     </button>

src/core_plugins/timelion/public/directives/timelion_expression_input.html

@@ -13,7 +13,7 @@
     role="textbox"
     rows="{{ rows }}"
     class="timExpressionInput kuiTextArea fullWidth"
-    placeholder="Try a query with .es(*)"
+    placeholder="{{ ::'timelion.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {esQuery}', values: { esQuery: '.es(*)' } } }}"
     ng-model="sheet"
     ng-focus="onFocusInput()"
     ng-keydown="onKeyDownInput($event)"
@@ -22,7 +22,7 @@
     ng-mousedown="onMouseDownInput()"
     ng-mouseup="onMouseUpInput()"
     ng-click="onClickExpression()"
-    aria-label="Timelion expression"
+    aria-label="{{ ::'timelion.expressionInputAriaLabel' | i18n: { defaultMessage: 'Timelion expression' } }}"
     aria-multiline="false"
     aria-autocomplete="list"
     aria-controls="timelionSuggestionList"

src/core_plugins/timelion/public/directives/timelion_expression_suggestions/timelion_expression_suggestions.html

@@ -26,14 +26,27 @@
         <h4>
           <strong>.{{suggestion.name}}()</strong>
           <small id="timelionSuggestionDescription{{$index}}">
-            {{suggestion.help}}
-            {{suggestion.chainable ? '(Chainable)' : '(Data Source)'}}
+            <span
+              ng-if="suggestion.chainable"
+              i18n-id="timelion.expressionSuggestions.func.description.chainableText"
+              i18n-default-message="{help} (Chainable)"
+              i18n-values="{ help: suggestion.help }"
+            ></span>
+            <span
+              ng-if="!suggestion.chainable"
+              i18n-id="timelion.expressionSuggestions.func.description.dataSourceText"
+              i18n-default-message="{help} (Data Source)"
+              i18n-values="{ help: suggestion.help }"
+            ></span>
           </small>
         </h4>
 
         <div ng-show="suggestion.args.length > (suggestion.chainable ? 1: 0)">
           <div ng-show="suggestions.length > 1">
-            <strong>Arguments:</strong>
+            <strong
+              i18n-id="timelion.expressionSuggestions.arg.listTitle"
+              i18n-default-message="Arguments:"
+            ></strong>
             <span ng-repeat="arg in suggestion.args" ng-hide="$index < 1 && suggestion.chainable">
               <strong>{{arg.name}}</strong>=(<em>{{arg.types.join(' | ')}}</em>)
               <em ng-show="!$last">,</em>
@@ -43,9 +56,21 @@ <h4>
           <div class="timSuggestions__details" ng-show="suggestions.length === 1">
             <table class="table table-striped table-condensed table-bordered">
             <thead>
-              <th scope="col">Argument Name</th>
-              <th scope="col">Accepted Types</th>
-              <th scope="col">Information</th>
+              <th
+                scope="col"
+                i18n-id="timelion.expressionSuggestions.arg.nameTitle"
+                i18n-default-message="Argument Name"
+              ></th>
+              <th
+                scope="col"
+                i18n-id="timelion.expressionSuggestions.arg.typesTitle"
+                i18n-default-message="Accepted Types"
+              ></th>
+              <th
+                scope="col"
+                i18n-id="timelion.expressionSuggestions.arg.infoTitle"
+                i18n-default-message="Information"
+              ></th>
             </thead>
             <tr ng-repeat="arg in suggestion.args" ng-hide="$index < 1 && suggestion.chainable">
               <td>{{arg.name}}</td>