translating inspector (#27294) (#29080)

src/ui/public/inspector/inspector.tsx

@@ -18,11 +18,16 @@
  */
 import React from 'react';
 
+import { i18n } from '@kbn/i18n';
 import { FlyoutSession, openFlyout } from 'ui/flyout';
 import { Adapters } from './types';
 import { InspectorPanel } from './ui/inspector_panel';
 import { viewRegistry } from './view_registry';
 
+const closeButtonLabel = i18n.translate('common.ui.inspector.closeButton', {
+  defaultMessage: 'Close Inspector',
+});
+
 /**
  * Checks if a inspector panel could be shown based on the passed adapters.
  *
@@ -69,7 +74,7 @@ function open(adapters: Adapters, options: InspectorOptions = {}): InspectorSess
 
   return openFlyout(<InspectorPanel views={views} adapters={adapters} title={options.title} />, {
     'data-test-subj': 'inspectorPanel',
-    closeButtonAriaLabel: 'Close Inspector',
+    closeButtonAriaLabel: closeButtonLabel,
   });
 }
 

src/ui/public/inspector/ui/__snapshots__/inspector_panel.test.js.snap

@@ -10,6 +10,108 @@ exports[`InspectorPanel should render as expected 1`] = `
       },
     }
   }
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {
+        "date": Object {
+          "full": Object {
+            "day": "numeric",
+            "month": "long",
+            "weekday": "long",
+            "year": "numeric",
+          },
+          "long": Object {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric",
+          },
+          "medium": Object {
+            "day": "numeric",
+            "month": "short",
+            "year": "numeric",
+          },
+          "short": Object {
+            "day": "numeric",
+            "month": "numeric",
+            "year": "2-digit",
+          },
+        },
+        "number": Object {
+          "currency": Object {
+            "style": "currency",
+          },
+          "percent": Object {
+            "style": "percent",
+          },
+        },
+        "relative": Object {
+          "days": Object {
+            "units": "day",
+          },
+          "hours": Object {
+            "units": "hour",
+          },
+          "minutes": Object {
+            "units": "minute",
+          },
+          "months": Object {
+            "units": "month",
+          },
+          "seconds": Object {
+            "units": "second",
+          },
+          "years": Object {
+            "units": "year",
+          },
+        },
+        "time": Object {
+          "full": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "long": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "medium": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+          },
+          "short": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+          },
+        },
+      },
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": null,
+    }
+  }
   onClose={[Function]}
   title="Inspector"
   views={
@@ -121,8 +223,15 @@ exports[`InspectorPanel should render as expected 1`] = `
                       size="s"
                       type="button"
                     >
-                      View: 
-                      View 1
+                      <FormattedMessage
+                        defaultMessage="View: {viewName}"
+                        id="common.ui.inspector.view"
+                        values={
+                          Object {
+                            "viewName": "View 1",
+                          }
+                        }
+                      />
                     </EuiButtonEmpty>
                   }
                   closePopover={[Function]}
@@ -207,8 +316,17 @@ exports[`InspectorPanel should render as expected 1`] = `
                               <span
                                 className="euiButtonEmpty__text"
                               >
-                                View: 
-                                View 1
+                                <FormattedMessage
+                                  defaultMessage="View: {viewName}"
+                                  id="common.ui.inspector.view"
+                                  values={
+                                    Object {
+                                      "viewName": "View 1",
+                                    }
+                                  }
+                                >
+                                  View: View 1
+                                </FormattedMessage>
                               </span>
                             </span>
                           </button>

src/ui/public/inspector/ui/inspector_panel.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { i18n } from '@kbn/i18n';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -33,6 +34,10 @@ function hasAdaptersChanged(oldAdapters, newAdapters) {
     || Object.keys(oldAdapters).some(key => oldAdapters[key] !== newAdapters[key]);
 }
 
+const inspectorTitle = i18n.translate('common.ui.inspector.title', {
+  defaultMessage: 'Inspector',
+});
+
 class InspectorPanel extends Component {
 
   constructor(props) {
@@ -106,7 +111,7 @@ class InspectorPanel extends Component {
 }
 
 InspectorPanel.defaultProps = {
-  title: 'Inspector',
+  title: inspectorTitle,
 };
 
 InspectorPanel.propTypes = {

src/ui/public/inspector/ui/inspector_panel.test.js

@@ -18,8 +18,8 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
 import { InspectorPanel } from './inspector_panel';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 describe('InspectorPanel', () => {
 
@@ -59,7 +59,7 @@ describe('InspectorPanel', () => {
   });
 
   it('should render as expected', () => {
-    const component = mount(
+    const component = mountWithIntl(
       <InspectorPanel
         adapters={adapters}
         onClose={() => true}
@@ -70,7 +70,7 @@ describe('InspectorPanel', () => {
   });
 
   it('should not allow updating adapters', () => {
-    const component = mount(
+    const component = mountWithIntl(
       <InspectorPanel
         adapters={adapters}
         onClose={() => true}

src/ui/public/inspector/ui/inspector_view_chooser.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -72,7 +73,11 @@ class InspectorViewChooser extends Component {
         onClick={this.toggleSelector}
         data-test-subj="inspectorViewChooser"
       >
-        View: { this.props.selectedView.title }
+        <FormattedMessage
+          id="common.ui.inspector.view"
+          defaultMessage="View: {viewName}"
+          values={{ viewName: this.props.selectedView.title }}
+        />
       </EuiButtonEmpty>
     );
   }
@@ -83,7 +88,11 @@ class InspectorViewChooser extends Component {
         position="bottom"
         content={this.props.selectedView.help}
       >
-        <span>View: { this.props.selectedView.title }</span>
+        <FormattedMessage
+          id="common.ui.inspector.view"
+          defaultMessage="View: {viewName}"
+          values={{ viewName: this.props.selectedView.title }}
+        />
       </EuiToolTip>
     );
   }