[i18n] Translate xpack_main (elastic#28896)

* Translate x-pack main

* Update snapshot

* Update snapshot

* Resolve review comments

* Update snapshot

.i18nrc.json

@@ -26,6 +26,7 @@
     "xpack.licenseMgmt": "x-pack/plugins/license_management",
     "xpack.ml": "x-pack/plugins/ml",
     "xpack.logstash": "x-pack/plugins/logstash",
+    "xpack.main": "x-pack/plugins/xpack_main",
     "xpack.monitoring": "x-pack/plugins/monitoring",
     "xpack.remoteClusters": "x-pack/plugins/remote_clusters",
     "xpack.reporting": "x-pack/plugins/reporting",

x-pack/plugins/xpack_main/common/constants.js

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 /*
  * config options opt into telemetry
  * @type {string}
@@ -13,9 +15,12 @@ export const CONFIG_TELEMETRY = 'telemetry:optIn';
  * config description for opting into telemetry
  * @type {string}
  */
-export const CONFIG_TELEMETRY_DESC = (
-  'Help us improve the Elastic Stack by providing usage statistics for basic features. We will not share this data outside of Elastic.'
-);
+export const getConfigTelemetryDesc = () => {
+  return i18n.translate('xpack.main.telemetry.telemetryConfigDescription', {
+    defaultMessage:
+      'Help us improve the Elastic Stack by providing usage statistics for basic features. We will not share this data outside of Elastic.'
+  });
+};
 
 /**
  * The name of the Kibana System ID used to publish and look up Kibana stats through the Monitoring system.

x-pack/plugins/xpack_main/index.js

@@ -20,9 +20,10 @@ import {
 } from './server/routes/api/v1';
 import {
   CONFIG_TELEMETRY,
-  CONFIG_TELEMETRY_DESC,
+  getConfigTelemetryDesc,
 } from './common/constants';
 import mappings from './mappings.json';
+import { i18n } from '@kbn/i18n';
 
 export { callClusterFactory } from './server/lib/call_cluster_factory';
 
@@ -69,15 +70,22 @@ export const xpackMain = (kibana) => {
       managementSections: ['plugins/xpack_main/views/management'],
       uiSettingDefaults: {
         [CONFIG_TELEMETRY]: {
-          name: 'Telemetry opt-in',
-          description: CONFIG_TELEMETRY_DESC,
+          name: i18n.translate('xpack.main.telemetry.telemetryConfigTitle', {
+            defaultMessage: 'Telemetry opt-in'
+          }),
+          description: getConfigTelemetryDesc(),
           value: false,
           readonly: true,
         },
         [XPACK_DEFAULT_ADMIN_EMAIL_UI_SETTING]: {
-          name: 'Admin email',
+          name: i18n.translate('xpack.main.uiSettings.adminEmailTitle', {
+            defaultMessage: 'Admin email'
+          }),
           // TODO: change the description when email address is used for more things?
-          description: `Recipient email address for X-Pack admin operations, such as Cluster Alert email notifications from Monitoring.`,
+          description: i18n.translate('xpack.main.uiSettings.adminEmailDescription', {
+            defaultMessage:
+              'Recipient email address for X-Pack admin operations, such as Cluster Alert email notifications from Monitoring.'
+          }),
           type: 'string', // TODO: Any way of ensuring this is a valid email address?
           value: null
         }

x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/opt_in_details_component.test.js.snap

@@ -18,7 +18,11 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
         textTransform="none"
       >
         <h2>
-          Cluster statistics
+          <FormattedMessage
+            defaultMessage="Cluster statistics"
+            id="xpack.main.telemetry.callout.clusterStatisticsTitle"
+            values={Object {}}
+          />
         </h2>
       </EuiTitle>
       <EuiTextColor
@@ -29,7 +33,11 @@ exports[`OptInDetailsComponent renders as expected 1`] = `
           grow={true}
           size="m"
         >
-          This is an example of the basic cluster statistics that we’ll collect. It includes the number of indices, shards, and nodes. It also includes high-level usage statistics, such as whether monitoring is turned on.
+          <FormattedMessage
+            defaultMessage="This is an example of the basic cluster statistics that we'll collect. It includes the number of indices, shards, and nodes. It also includes high-level usage statistics, such as whether monitoring is turned on."
+            id="xpack.main.telemetry.callout.clusterStatisticsDescription"
+            values={Object {}}
+          />
         </EuiText>
       </EuiTextColor>
     </EuiFlyoutHeader>

x-pack/plugins/xpack_main/public/components/telemetry/__snapshots__/telemetry_form.test.js.snap

@@ -26,7 +26,11 @@ exports[`TelemetryForm renders as expected 1`] = `
             grow={false}
           >
             <h2>
-              Usage Data
+              <FormattedMessage
+                defaultMessage="Usage Data"
+                id="xpack.main.telemetry.usageDataTitle"
+                values={Object {}}
+              />
             </h2>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -50,7 +54,11 @@ exports[`TelemetryForm renders as expected 1`] = `
                   onClick={[Function]}
                   type="button"
                 >
-                  See an example of what we collect
+                  <FormattedMessage
+                    defaultMessage="See an example of what we collect"
+                    id="xpack.main.telemetry.seeExampleOfWhatWeCollectLinkText"
+                    values={Object {}}
+                  />
                 </EuiLink>
               </p>
               <p>
@@ -60,7 +68,11 @@ exports[`TelemetryForm renders as expected 1`] = `
                   target="_blank"
                   type="button"
                 >
-                  Read our usage data privacy statement
+                  <FormattedMessage
+                    defaultMessage="Read our usage data privacy statement"
+                    id="xpack.main.telemetry.readOurUsageDataPrivacyStatementLinkText"
+                    values={Object {}}
+                  />
                 </EuiLink>
               </p>
             </React.Fragment>,

x-pack/plugins/xpack_main/public/components/telemetry/opt_in_details_component.js

@@ -22,6 +22,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { FormattedMessage } from '@kbn/i18n/react';
+
 /**
  * React component for displaying the example data associated with the Telemetry opt-in banner.
  */
@@ -67,12 +69,19 @@ export class OptInExampleFlyout extends Component {
     if (data === null) {
       return (
         <EuiCallOut
-          title="Error loading cluster statistics"
+          title={<FormattedMessage
+            id="xpack.main.telemetry.callout.errorLoadingClusterStatisticsTitle"
+            defaultMessage="Error loading cluster statistics"
+          />}
           color="danger"
           iconType="cross"
         >
-          An unexpected error occured while attempting to fetch the cluster statistics. This can occur because Elasticsearch
-          failed, Kibana failed, or there is a network error. Check Kibana, then reload the page and try again.
+          <FormattedMessage
+            id="xpack.main.telemetry.callout.errorLoadingClusterStatisticsDescription"
+            defaultMessage="An unexpected error occured while attempting to fetch the cluster statistics.
+              This can occur because Elasticsearch failed, Kibana failed, or there is a network error.
+              Check Kibana, then reload the page and try again."
+          />
         </EuiCallOut>
       );
     }
@@ -94,13 +103,21 @@ export class OptInExampleFlyout extends Component {
         >
           <EuiFlyoutHeader>
             <EuiTitle>
-              <h2>Cluster statistics</h2>
+              <h2>
+                <FormattedMessage
+                  id="xpack.main.telemetry.callout.clusterStatisticsTitle"
+                  defaultMessage="Cluster statistics"
+                />
+              </h2>
             </EuiTitle>
             <EuiTextColor color="subdued">
               <EuiText>
-                This is an example of the basic cluster statistics that we&rsquo;ll collect.
-                It includes the number of indices, shards, and nodes.
-                It also includes high-level usage statistics, such as whether monitoring is turned on.
+                <FormattedMessage
+                  id="xpack.main.telemetry.callout.clusterStatisticsDescription"
+                  defaultMessage="This is an example of the basic cluster statistics that we'll collect.
+                  It includes the number of indices, shards, and nodes.
+                  It also includes high-level usage statistics, such as whether monitoring is turned on."
+                />
               </EuiText>
             </EuiTextColor>
           </EuiFlyoutHeader>

x-pack/plugins/xpack_main/public/components/telemetry/opt_in_details_component.test.js

@@ -4,11 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { OptInExampleFlyout } from './opt_in_details_component';
 
 describe('OptInDetailsComponent', () => {
   it('renders as expected', () => {
-    expect(shallow(<OptInExampleFlyout fetchTelemetry={jest.fn(async () => ({ data: [] }))} onClose={jest.fn()} />)).toMatchSnapshot();
+    expect(shallowWithIntl(
+      <OptInExampleFlyout fetchTelemetry={jest.fn(async () => ({ data: [] }))} onClose={jest.fn()} />)
+    ).toMatchSnapshot();
   });
 });

x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js

@@ -16,9 +16,10 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import { CONFIG_TELEMETRY_DESC, PRIVACY_STATEMENT_URL } from '../../../common/constants';
+import { getConfigTelemetryDesc, PRIVACY_STATEMENT_URL } from '../../../common/constants';
 import { OptInExampleFlyout } from './opt_in_details_component';
 import { Field } from 'ui/management';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];
 
@@ -78,7 +79,12 @@ export class TelemetryForm extends Component {
             <EuiText>
               <EuiFlexGroup alignItems="baseline">
                 <EuiFlexItem grow={false}>
-                  <h2>Usage Data</h2>
+                  <h2>
+                    <FormattedMessage
+                      id="xpack.main.telemetry.usageDataTitle"
+                      defaultMessage="Usage Data"
+                    />
+                  </h2>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiText>
@@ -110,19 +116,44 @@ export class TelemetryForm extends Component {
         color="primary"
         iconType="spacesApp"
         title={
-          <p>This setting applies to <strong>all of Kibana.</strong></p>
+          <p>
+            <FormattedMessage
+              id="xpack.main.telemetry.callout.appliesSettingTitle"
+              defaultMessage="This setting applies to {allOfKibanaText}"
+              values={{
+                allOfKibanaText: (
+                  <strong>
+                    <FormattedMessage
+                      id="xpack.main.telemetry.callout.appliesSettingTitle.allOfKibanaText"
+                      defaultMessage="all of Kibana."
+                    />
+                  </strong>
+                )
+              }}
+            />
+          </p>
         }
       />
     );
   }
 
   renderDescription = () => (
     <Fragment>
-      <p>{CONFIG_TELEMETRY_DESC}</p>
-      <p><EuiLink onClick={this.toggleExample}>See an example of what we collect</EuiLink></p>
+      <p>{getConfigTelemetryDesc()}</p>
+      <p>
+        <EuiLink onClick={this.toggleExample}>
+          <FormattedMessage
+            id="xpack.main.telemetry.seeExampleOfWhatWeCollectLinkText"
+            defaultMessage="See an example of what we collect"
+          />
+        </EuiLink>
+      </p>
       <p>
         <EuiLink href={PRIVACY_STATEMENT_URL} target="_blank">
-          Read our usage data privacy statement
+          <FormattedMessage
+            id="xpack.main.telemetry.readOurUsageDataPrivacyStatementLinkText"
+            defaultMessage="Read our usage data privacy statement"
+          />
         </EuiLink>
       </p>
     </Fragment>

x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.test.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { TelemetryForm } from './telemetry_form';
 import { TelemetryOptInProvider } from '../../services/telemetry_opt_in';
 
@@ -40,7 +40,7 @@ const buildTelemetryOptInProvider = () => {
 
 describe('TelemetryForm', () => {
   it('renders as expected', () => {
-    expect(shallow(
+    expect(shallowWithIntl(
       <TelemetryForm
         spacesEnabled={false}
         query={{ text: '' }}

x-pack/plugins/xpack_main/public/hacks/check_xpack_info_change.js

@@ -14,6 +14,7 @@ import { DebounceProvider } from 'ui/debounce';
 import { PathProvider } from 'plugins/xpack_main/services/path';
 import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
 import { XPackInfoSignatureProvider } from 'plugins/xpack_main/services/xpack_info_signature';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 const module = uiModules.get('xpack_main', []);
 
@@ -39,9 +40,26 @@ module.factory('checkXPackInfoChange', ($q, Private) => {
           <EuiCallOut
             iconType="help"
             color="warning"
-            title={`Your ${license.type} license is expired`}
+            title={<FormattedMessage
+              id="xpack.main.welcomeBanner.licenseIsExpiredTitle"
+              defaultMessage="Your {licenseType} license is expired"
+              values={{ licenseType: license.type }}
+            />}
           >
-            Contact your administrator or <a href={uploadLicensePath}>update your license</a> directly.
+            <FormattedMessage
+              id="xpack.main.welcomeBanner.licenseIsExpiredDescription"
+              defaultMessage="Contact your administrator or {updateYourLicenseLinkText} directly."
+              values={{
+                updateYourLicenseLinkText: (
+                  <a href={uploadLicensePath}>
+                    <FormattedMessage
+                      id="xpack.main.welcomeBanner.licenseIsExpiredDescription.updateYourLicenseLinkText"
+                      defaultMessage="update your license"
+                    />
+                  </a>
+                )
+              }}
+            />
           </EuiCallOut>
         ),
       });

x-pack/plugins/xpack_main/public/hacks/welcome_banner/click_banner.js

@@ -11,6 +11,7 @@ import {
   toastNotifications,
 } from 'ui/notify';
 import { EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 /**
  * Handle clicks from the user on the opt-in banner.
@@ -40,12 +41,25 @@ export async function clickBanner(
     _banners.remove(bannerId);
   } else {
     _toastNotifications.addDanger({
-      title: 'Telemetry Error',
+      title: (
+        <FormattedMessage
+          id="xpack.main.telemetry.telemetryErrorNotificationMessageTitle"
+          defaultMessage="Telemetry Error"
+        />
+      ),
       text: (
         <EuiText>
-          <p>Unable to save telemetry preference.</p>
+          <p>
+            <FormattedMessage
+              id="xpack.main.telemetry.telemetryErrorNotificationMessageDescription.unableToSaveTelemetryPreferenceText"
+              defaultMessage="Unable to save telemetry preference."
+            />
+          </p>
           <EuiText size="xs">
-            Check that Kibana and Elasticsearch are still running, then try again.
+            <FormattedMessage
+              id="xpack.main.telemetry.telemetryErrorNotificationMessageDescription.tryAgainText"
+              defaultMessage="Check that Kibana and Elasticsearch are still running, then try again."
+            />
           </EuiText>
         </EuiText>
       )