[Maps] Localization (#30881)

Localize Maps-app UX with Kibana's i18n framework.
elastic · Mar 6, 2019 · 5e5a49a · 5e5a49a
1 parent e365f0b
commit 5e5a49a
Show file tree

Hide file tree

Showing 69 changed files with 1,217 additions and 424 deletions.
diff --git a/.i18nrc.json b/.i18nrc.json
@@ -31,6 +31,7 @@
     "xpack.infra": "x-pack/plugins/infra",
     "xpack.kueryAutocomplete": "x-pack/plugins/kuery_autocomplete",
     "xpack.licenseMgmt": "x-pack/plugins/license_management",
+    "xpack.maps": "x-pack/plugins/maps",
     "xpack.ml": "x-pack/plugins/ml",
     "xpack.logstash": "x-pack/plugins/logstash",
     "xpack.main": "x-pack/plugins/xpack_main",

diff --git a/x-pack/plugins/maps/common/constants.js b/x-pack/plugins/maps/common/constants.js
@@ -16,4 +16,8 @@ export const ZOOM_PRECISION = 2;
 
 export const DEFAULT_EMS_TILE_LAYER = 'road_map';
 
+export const APP_ID = 'maps';
+
+export const APP_ICON = 'gisApp';
+
 export const SOURCE_DATA_ID_ORIGIN = 'source';
diff --git a/x-pack/plugins/maps/common/i18n_getters.js b/x-pack/plugins/maps/common/i18n_getters.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export function getAppTitle() {
+  return i18n.translate('xpack.maps.appTitle', {
+    defaultMessage: 'Maps'
+  });
+}
+
+
+export function getDataSourceLabel() {
+  return i18n.translate('xpack.maps.source.dataSourceLabel', {
+    defaultMessage: 'Data source'
+  });
+}
+
+export function getUrlLabel() {
+  return i18n.translate('xpack.maps.source.urlLabel', {
+    defaultMessage: 'Url'
+  });
+}
diff --git a/x-pack/plugins/maps/index.js b/x-pack/plugins/maps/index.js
@@ -6,30 +6,35 @@
 
 import { resolve } from 'path';
 import { initRoutes } from './server/routes';
-import ecommerceSavedObjects from './server/sample_data/ecommerce_saved_objects.json';
-import fligthsSavedObjects from './server/sample_data/flights_saved_objects.json';
-import webLogsSavedObjects from './server/sample_data/web_logs_saved_objects.json';
+import { getEcommerceSavedObjects } from './server/sample_data/ecommerce_saved_objects';
+import { getFlightsSavedObjects } from './server/sample_data/flights_saved_objects.js';
+import { getWebLogsSavedObjects } from './server/sample_data/web_logs_saved_objects.js';
 import mappings from './mappings.json';
 import { checkLicense } from './check_license';
 import { migrations } from './migrations';
 import { watchStatusAndLicenseToInitialize } from
   '../../server/lib/watch_status_and_license_to_initialize';
 import { initTelemetryCollection } from './server/maps_telemetry';
+import { i18n } from '@kbn/i18n';
+import {  APP_ID, APP_ICON } from './common/constants';
+import { getAppTitle } from './common/i18n_getters';
 
 export function maps(kibana) {
 
   return new kibana.Plugin({
     require: ['kibana', 'elasticsearch', 'xpack_main', 'tile_map', 'task_manager'],
-    id: 'maps',
+    id: APP_ID,
     configPrefix: 'xpack.maps',
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       app: {
-        title: 'Maps',
-        description: 'Map application',
+        title: getAppTitle(),
+        description: i18n.translate('xpack.maps.appDescription', {
+          defaultMessage: 'Map application'
+        }),
         main: 'plugins/maps/index',
         icon: 'plugins/maps/icon.svg',
-        euiIconType: 'gisApp',
+        euiIconType: APP_ICON,
       },
       injectDefaultVars(server) {
         const serverConfig = server.config();
@@ -86,9 +91,9 @@ export function maps(kibana) {
         .feature(this.id)
         .registerLicenseCheckResultsGenerator(checkLicense);
 
-      server.addSavedObjectsToSampleDataset('ecommerce', ecommerceSavedObjects);
-      server.addSavedObjectsToSampleDataset('flights', fligthsSavedObjects);
-      server.addSavedObjectsToSampleDataset('logs', webLogsSavedObjects);
+      server.addSavedObjectsToSampleDataset('ecommerce', getEcommerceSavedObjects());
+      server.addSavedObjectsToSampleDataset('flights', getFlightsSavedObjects());
+      server.addSavedObjectsToSampleDataset('logs', getWebLogsSavedObjects());
       server.injectUiAppVars('maps', async () => {
         return await server.getInjectedUiAppVars('kibana');
       });

diff --git a/x-pack/plugins/maps/public/angular/map_controller.js b/x-pack/plugins/maps/public/angular/map_controller.js
@@ -6,7 +6,8 @@
 
 import chrome from 'ui/chrome';
 import React from 'react';
-import { I18nContext } from 'ui/i18n';
+import { I18nProvider } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
@@ -143,9 +144,9 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
     const root = document.getElementById(REACT_ANCHOR_DOM_ELEMENT_ID);
     render(
       <Provider store={store}>
-        <I18nContext>
+        <I18nProvider>
           <GisMap/>
-        </I18nContext>
+        </I18nProvider>
       </Provider>,
       root
     );
@@ -201,7 +202,9 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
 
   // TODO subscribe to store change and change when store updates title
   chrome.breadcrumbs.set([
-    { text: 'Maps', href: '#' },
+    { text: i18n.translate('xpack.maps.mapController.mapsBreadcrumbLabel', {
+      defaultMessage: 'Maps'
+    }), href: '#' },
     { text: $scope.map.title }
   ]);
 
@@ -216,7 +219,10 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
       docTitle.change(savedMap.title);
     } catch(err) {
       toastNotifications.addDanger({
-        title: `Error on saving '${savedMap.title}'`,
+        title: i18n.translate('xpack.maps.mapController.saveErrorMessage', {
+          defaultMessage: `Error on saving '{title}'`,
+          values: { title: savedMap.title }
+        }),
         text: err.message,
         'data-test-subj': 'saveMapError',
       });
@@ -225,7 +231,10 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
 
     if (id) {
       toastNotifications.addSuccess({
-        title: `Saved '${savedMap.title}'`,
+        title: i18n.translate('xpack.maps.mapController.saveSuccessMessage', {
+          defaultMessage: `Saved '{title}'`,
+          values: { title: savedMap.title }
+        }),
         'data-test-subj': 'saveMapSuccess',
       });
 
@@ -243,23 +252,35 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
   timefilter.disableAutoRefreshSelector();
   $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar
   $scope.topNavMenu = [{
-    key: 'full screen',
-    description: 'full screen',
+    key: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', {
+      defaultMessage: `full screen`
+    }),
+    description: i18n.translate('xpack.maps.mapController.fullScreenDescription', {
+      defaultMessage: `full screen`
+    }),
     testId: 'mapsFullScreenMode',
     run() {
       store.dispatch(enableFullScreen());
     }
   }, {
-    key: 'inspect',
-    description: 'Open Inspector',
+    key: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', {
+      defaultMessage: `inspect`
+    }),
+    description: i18n.translate('xpack.maps.mapController.openInspectorDescription', {
+      defaultMessage: `Open Inspector`
+    }),
     testId: 'openInspectorButton',
     run() {
       const inspectorAdapters = getInspectorAdapters(store.getState());
       Inspector.open(inspectorAdapters, {});
     }
   }, {
-    key: 'save',
-    description: 'Save map',
+    key: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', {
+      defaultMessage: `save`
+    }),
+    description: i18n.translate('xpack.maps.mapController.saveMapDescription', {
+      defaultMessage: `Save map`
+    }),
     testId: 'mapSaveButton',
     run: async () => {
       const onSave = ({ newTitle, newCopyOnSave, isTitleDuplicateConfirmed, onTitleDuplicate }) => {

diff --git a/x-pack/plugins/maps/public/components/layer_addpanel/view.js b/x-pack/plugins/maps/public/components/layer_addpanel/view.js
@@ -20,6 +20,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import _ from 'lodash';
 
 export class AddLayerPanel extends Component {
@@ -71,7 +72,10 @@ export class AddLayerPanel extends Component {
         }}
         fill
       >
-        Add layer
+        <FormattedMessage
+          id="xpack.maps.addLayerPanel.addLayerButtonLabel"
+          defaultMessage="Add layer"
+        />
       </EuiButton>
     );
   }
@@ -102,7 +106,12 @@ export class AddLayerPanel extends Component {
     return (
       <Fragment>
         <EuiTitle size="xs">
-          <h2>Choose data source</h2>
+          <h2>
+            <FormattedMessage
+              id="xpack.maps.addLayerPanel.chooseDataSourceTitle"
+              defaultMessage="Choose data source"
+            />
+          </h2>
         </EuiTitle>
         {this._renderSourceCards()}
       </Fragment>
@@ -130,7 +139,10 @@ export class AddLayerPanel extends Component {
           onClick={this._clearSource}
           iconType="arrowLeft"
         >
-          Change data source
+          <FormattedMessage
+            id="xpack.maps.addLayerPanel.changeDataSourceButtonLabel"
+            defaultMessage="Change data source"
+          />
         </EuiButtonEmpty>
         <EuiSpacer size="s" />
         <EuiPanel>
@@ -156,7 +168,12 @@ export class AddLayerPanel extends Component {
       >
         <EuiFlyoutHeader hasBorder className="mapLayerPanel__header">
           <EuiTitle size="s">
-            <h2>Add layer</h2>
+            <h2>
+              <FormattedMessage
+                id="xpack.maps.addLayerPanel.panelTitle"
+                defaultMessage="Add layer"
+              />
+            </h2>
           </EuiTitle>
         </EuiFlyoutHeader>
 
@@ -175,7 +192,10 @@ export class AddLayerPanel extends Component {
                 flush="left"
                 data-test-subj="layerAddCancelButton"
               >
-                Cancel
+                <FormattedMessage
+                  id="xpack.maps.addLayerPanel.cancelButtonLabel"
+                  defaultMessage="Cancel"
+                />
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/layer_panel/__snapshots__/view.test.js.snap
@@ -35,7 +35,11 @@ exports[`LayerPanel is rendered 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Fit
+          <FormattedMessage
+            defaultMessage="Fit"
+            id="xpack.maps.layerPanel.fitToBoundsButtonLabel"
+            values={Object {}}
+          />
         </EuiButtonIcon>
       </EuiFlexItem>
       <EuiFlexItem

diff --git a/x-pack/plugins/maps/public/components/layer_panel/flyout_footer/view.js b/x-pack/plugins/maps/public/components/layer_panel/flyout_footer/view.js
@@ -13,6 +13,8 @@ import {
   EuiSpacer,
   EuiButtonEmpty,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
 export const FlyoutFooter = ({ cancelLayerPanel, saveLayerEdits, removeLayer,
   hasStateChanged }) => {
   const removeBtn = (
@@ -23,19 +25,32 @@ export const FlyoutFooter = ({ cancelLayerPanel, saveLayerEdits, removeLayer,
         flush="right"
         data-test-subj="mapRemoveLayerButton"
       >
-        Remove layer
+        <FormattedMessage
+          id="xpack.maps.layerPanel.footer.removeLayerButtonLabel"
+          defaultMessage="Remove layer"
+        />
       </EuiButtonEmpty>
     </EuiFlexItem>
   );
 
+
+  const cancelButtonLabel =   hasStateChanged ? (<FormattedMessage
+    id="xpack.maps.layerPanel.footer.cancelButtonLabel"
+    defaultMessage="Cancel"
+  />) : (<FormattedMessage
+    id="xpack.maps.layerPanel.footer.closeButtonLabel"
+    defaultMessage="Close"
+  />);
+
+
   return (
     <EuiFlexGroup responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty
           onClick={cancelLayerPanel}
           flush="left"
         >
-          {hasStateChanged ? 'Cancel' : 'Close'}
+          {cancelButtonLabel}
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem>
@@ -49,7 +64,10 @@ export const FlyoutFooter = ({ cancelLayerPanel, saveLayerEdits, removeLayer,
           onClick={saveLayerEdits}
           fill
         >
-          Save &amp; close
+          <FormattedMessage
+            id="xpack.maps.layerPanel.footer.saveAndCloseButtonLabel"
+            defaultMessage="Save & close"
+          />
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/plugins/maps/public/components/layer_panel/join_editor/resources/join.js b/x-pack/plugins/maps/public/components/layer_panel/join_editor/resources/join.js
@@ -6,13 +6,12 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
-
 import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiButtonIcon,
 } from '@elastic/eui';
-
+import { i18n } from '@kbn/i18n';
 import { JoinExpression } from './join_expression';
 import { MetricsExpression } from './metrics_expression';
 
@@ -74,7 +73,10 @@ export class Join extends Component {
     } catch (err) {
       if (this._isMounted) {
         this.setState({
-          loadError: `Unable to find Index pattern ${indexPatternId}`
+          loadError: i18n.translate('xpack.maps.layerPanel.join.noIndexPatternErrorMessage', {
+            defaultMessage: `Unable to find Index pattern {indexPatternId}`,
+            values: { indexPatternId }
+          })
         });
       }
       return;
@@ -204,8 +206,12 @@ export class Join extends Component {
             className="mapJoinItem__delete"
             iconType="trash"
             color="danger"
-            aria-label="Delete join"
-            title="Delete join"
+            aria-label={i18n.translate('xpack.maps.layerPanel.join.deleteJoinAriaLabel', {
+              defaultMessage: 'Delete join'
+            })}
+            title={i18n.translate('xpack.maps.layerPanel.join.deleteJoinTitle', {
+              defaultMessage: 'Delete join'
+            })}
             onClick={onRemove}
           />
         </EuiFlexGroup>