[i18n] Translate missing labels in Home and Dashboard (#26958) (#27200)

* Add missing labels translations

* Update snapshot

* Fix issues

src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap

@@ -548,7 +548,11 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
                       />
                     </EuiLink>,
                     "listingLimitText": <strong>
-                      listingLimit
+                      <FormattedMessage
+                        defaultMessage="listingLimit"
+                        id="kbn.dashboard.listing.listingLimitExceededListingLimitTitle"
+                        values={Object {}}
+                      />
                     </strong>,
                     "listingLimitValue": 1,
                     "totalDashboards": 2,

src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -257,7 +257,10 @@ class DashboardListingUi extends React.Component {
                   listingLimitValue: this.props.listingLimit,
                   listingLimitText: (
                     <strong>
-                      listingLimit
+                      <FormattedMessage
+                        id="kbn.dashboard.listing.listingLimitExceededListingLimitTitle"
+                        defaultMessage="listingLimit"
+                      />
                     </strong>
                   ),
                   advancedSettingsLink: (

src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap

@@ -35,9 +35,8 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
       />
     </React.Fragment>
     <div>
-      <Introduction
+      <InjectIntl(IntroductionUI)
         description="tutorial used to drive jest tests"
-        isBeta={false}
         title="jest test tutorial"
       />
       <EuiSpacer
@@ -117,10 +116,9 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
       />
     </React.Fragment>
     <div>
-      <Introduction
+      <InjectIntl(IntroductionUI)
         description="tutorial used to drive jest tests"
         iconType="logoApache"
-        isBeta={false}
         title="jest test tutorial"
       />
       <EuiSpacer
@@ -210,10 +208,9 @@ exports[`should not render breadcrumbs when K7 1`] = `
     restrictWidth={false}
   >
     <div>
-      <Introduction
+      <InjectIntl(IntroductionUI)
         description="tutorial used to drive jest tests"
         iconType="logoApache"
-        isBeta={false}
         title="jest test tutorial"
       />
       <EuiSpacer
@@ -293,10 +290,9 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
       />
     </React.Fragment>
     <div>
-      <Introduction
+      <InjectIntl(IntroductionUI)
         description="tutorial used to drive jest tests"
         iconType="logoApache"
-        isBeta={false}
         title="jest test tutorial"
       />
       <EuiSpacer

src/legacy/core_plugins/kibana/public/home/components/tutorial/instruction_set.js

@@ -131,7 +131,12 @@ class InstructionSetUi extends React.Component {
       case StatusCheckStates.ERROR:
         return 'danger';
       default:
-        throw new Error(`Unexpected status check state ${statusCheckState}`);
+        throw new Error(this.props.intl.formatMessage({
+          id: 'kbn.home.tutorial.unexpectedStatusCheckStateErrorDescription',
+          defaultMessage: 'Unexpected status check state {statusCheckState}'
+        }, {
+          statusCheckState
+        }));
     }
   }
 

src/legacy/core_plugins/kibana/public/home/components/tutorial/introduction.js

@@ -31,9 +31,9 @@ import {
   EuiBetaBadge,
 } from '@elastic/eui';
 
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-export function Introduction({ description, previewUrl, title, exportedFieldsUrl, iconType, isBeta }) {
+function IntroductionUI({ description, previewUrl, title, exportedFieldsUrl, iconType, isBeta, intl }) {
   let img;
   if (previewUrl) {
     img = (
@@ -42,7 +42,10 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
         hasShadow
         allowFullScreen
         fullScreenIconColor="dark"
-        alt="screenshot of primary dashboard."
+        alt={intl.formatMessage({
+          id: 'kbn.home.tutorial.introduction.imageAltDescription',
+          defaultMessage: 'screenshot of primary dashboard.'
+        })}
         url={previewUrl}
       />
     );
@@ -75,7 +78,12 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
   let betaBadge;
   if (isBeta) {
     betaBadge = (
-      <EuiBetaBadge label="Beta" />
+      <EuiBetaBadge
+        label={intl.formatMessage({
+          id: 'kbn.home.tutorial.introduction.betaLabel',
+          defaultMessage: 'Beta'
+        })}
+      />
     );
   }
   return (
@@ -109,7 +117,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
   );
 }
 
-Introduction.propTypes = {
+IntroductionUI.propTypes = {
   description: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   previewUrl: PropTypes.string,
@@ -118,6 +126,8 @@ Introduction.propTypes = {
   isBeta: PropTypes.bool,
 };
 
-Introduction.defaultProps = {
+IntroductionUI.defaultProps = {
   isBeta: false
 };
+
+export const Introduction = injectI18n(IntroductionUI);

src/legacy/core_plugins/kibana/public/home/components/tutorial/introduction.test.js

@@ -18,12 +18,12 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { Introduction } from './introduction';
 
 test('render', () => {
-  const component = shallow(<Introduction
+  const component = shallowWithIntl(<Introduction.WrappedComponent
     description="this is a great tutorial about..."
     title="Great tutorial"
   />);
@@ -32,7 +32,7 @@ test('render', () => {
 
 describe('props', () => {
   test('iconType', () => {
-    const component = shallow(<Introduction
+    const component = shallowWithIntl(<Introduction.WrappedComponent
       description="this is a great tutorial about..."
       title="Great tutorial"
       iconType="logoElastic"
@@ -41,7 +41,7 @@ describe('props', () => {
   });
 
   test('exportedFieldsUrl', () => {
-    const component = shallow(<Introduction
+    const component = shallowWithIntl(<Introduction.WrappedComponent
       description="this is a great tutorial about..."
       title="Great tutorial"
       exportedFieldsUrl="exported_fields_url"
@@ -50,7 +50,7 @@ describe('props', () => {
   });
 
   test('previewUrl', () => {
-    const component = shallow(<Introduction
+    const component = shallowWithIntl(<Introduction.WrappedComponent
       description="this is a great tutorial about..."
       title="Great tutorial"
       previewUrl="preview_image_url"
@@ -59,7 +59,7 @@ describe('props', () => {
   });
 
   test('isBeta', () => {
-    const component = shallow(<Introduction
+    const component = shallowWithIntl(<Introduction.WrappedComponent
       description="this is a great tutorial about..."
       title="Great tutorial"
       isBeta={true}

src/legacy/core_plugins/kibana/public/home/components/tutorial/tutorial.js

@@ -125,7 +125,12 @@ class TutorialUi extends React.Component {
       case INSTRUCTIONS_TYPE.ON_PREM_ELASTIC_CLOUD:
         return this.state.tutorial.onPremElasticCloud;
       default:
-        throw new Error(`Unhandled instruction type ${this.state.visibleInstructions}`);
+        throw new Error(this.props.intl.formatMessage({
+          id: 'kbn.home.tutorial.unhandledInstructionTypeErrorDescription',
+          defaultMessage: 'Unhandled instruction type {visibleInstructions}'
+        }, {
+          visibleInstructions: this.state.visibleInstructions
+        }));
     }
   };
 

src/legacy/core_plugins/kibana/public/home/components/tutorial_directory.js

@@ -218,7 +218,7 @@ class TutorialDirectoryUi extends React.Component {
           <EuiTitle size="l">
             <h1>
               <FormattedMessage
-                id="kbn.home.tutorial.addDataTitle"
+                id="kbn.home.tutorial.addDataToKibanaTitle"
                 defaultMessage="Add Data to Kibana"
               />
             </h1>