- View full directory of Kibana plugins
+
- Add APM
+
}
/>
@@ -66,14 +99,17 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
- Add log data
+
}
/>
@@ -83,14 +119,17 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
- Add metric data
+
}
/>
@@ -100,14 +139,17 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
- Add security events
+
}
/>
@@ -123,11 +165,19 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
- Add Data to Kibana
+
+
- Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems.
+
@@ -143,26 +193,38 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
- Sample Data
+
- Load a data set and a Kibana dashboard
+
- Your Data
+
- Connect to your Elasticsearch index
+
@@ -172,9 +234,11 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
);
-}
+};
-AddData.propTypes = {
+AddDataUi.propTypes = {
apmUiEnabled: PropTypes.bool.isRequired,
isNewKibanaInstance: PropTypes.bool.isRequired,
};
+
+export const AddData = injectI18n(AddDataUi);
diff --git a/src/core_plugins/kibana/public/home/components/add_data.test.js b/src/core_plugins/kibana/public/home/components/add_data.test.js
index 3ed8dafe860a80..549990eb99ffa4 100644
--- a/src/core_plugins/kibana/public/home/components/add_data.test.js
+++ b/src/core_plugins/kibana/public/home/components/add_data.test.js
@@ -18,11 +18,11 @@
*/
import React from 'react';
-import { shallow } from 'enzyme';
import { AddData } from './add_data';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
test('render', () => {
- const component = shallow(
- Directory
+
- Visualize and Explore Data
+
+
@@ -167,7 +173,12 @@ export class Home extends Component {
- Manage and Administer the Elastic Stack
+
+
@@ -182,11 +193,19 @@ export class Home extends Component {
- Didn’t find what you were looking for?
+
+
- View full directory of Kibana plugins
+
diff --git a/src/core_plugins/kibana/public/home/components/home_app.js b/src/core_plugins/kibana/public/home/components/home_app.js
index d277fd542f70d7..e27356b06196df 100644
--- a/src/core_plugins/kibana/public/home/components/home_app.js
+++ b/src/core_plugins/kibana/public/home/components/home_app.js
@@ -32,6 +32,7 @@ import { getTutorial } from '../load_tutorials';
import { replaceTemplateStrings } from './tutorial/replace_template_strings';
import chrome from 'ui/chrome';
import { recentlyAccessedShape } from './recently_accessed';
+import { I18nProvider } from '@kbn/i18n/react';
export function HomeApp({
addBasePath,
@@ -73,39 +74,41 @@ export function HomeApp({
};
return (
-
-
-
-
+
+
+
-
-
-
-
+
+
+
+
+
+
+
);
}
diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.js b/src/core_plugins/kibana/public/home/components/recently_accessed.js
index b0dbfb888d0bf5..a14d494b0ef5e9 100644
--- a/src/core_plugins/kibana/public/home/components/recently_accessed.js
+++ b/src/core_plugins/kibana/public/home/components/recently_accessed.js
@@ -34,6 +34,8 @@ import {
EuiTitle,
} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
export const NUM_LONG_LINKS = 5;
export class RecentlyAccessed extends Component {
@@ -197,7 +199,10 @@ export class RecentlyAccessed extends Component {
- Recently viewed
+
diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.test.js b/src/core_plugins/kibana/public/home/components/recently_accessed.test.js
index c412664be696e8..8986586a0cf1ea 100644
--- a/src/core_plugins/kibana/public/home/components/recently_accessed.test.js
+++ b/src/core_plugins/kibana/public/home/components/recently_accessed.test.js
@@ -18,9 +18,10 @@
*/
import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
import { RecentlyAccessed, NUM_LONG_LINKS } from './recently_accessed';
import { findTestSubject } from '@elastic/eui/lib/test';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
const createRecentlyAccessed = (length) => {
const recentlyAccessed = [];
@@ -44,7 +45,7 @@ test('render', () => {
describe('more popover', () => {
test('should not be rendered when recently accessed list size is less than NUM_LONG_LINKS', () => {
- const component = mount(
@@ -69,7 +79,10 @@ export class SampleDataSetCard extends React.Component {
href={this.props.launchUrl}
data-test-subj={`launchSampleDataSet${this.props.id}`}
>
- View data
+
@@ -84,7 +97,16 @@ export class SampleDataSetCard extends React.Component {
onClick={this.install}
data-test-subj={`addSampleDataSet${this.props.id}`}
>
- {this.props.isProcessing ? 'Adding' : 'Add'}
+ {this.props.isProcessing
+ ?
@@ -96,13 +118,24 @@ export class SampleDataSetCard extends React.Component {
{`Unable to verify dataset status, error: ${this.props.statusMsg}`}}
+ content={
+
+
+ }
>
- {'Add'}
+
diff --git a/src/core_plugins/kibana/public/home/components/sample_data_set_cards.js b/src/core_plugins/kibana/public/home/components/sample_data_set_cards.js
index 4f50af96778764..6d0c25498f3d3d 100644
--- a/src/core_plugins/kibana/public/home/components/sample_data_set_cards.js
+++ b/src/core_plugins/kibana/public/home/components/sample_data_set_cards.js
@@ -39,6 +39,8 @@ import {
uninstallSampleDataSet
} from '../sample_data_sets';
+import { i18n } from '@kbn/i18n';
+
export class SampleDataSetCards extends React.Component {
constructor(props) {
@@ -66,7 +68,9 @@ export class SampleDataSetCards extends React.Component {
sampleDataSets = await listSampleDataSets();
} catch (fetchError) {
toastNotifications.addDanger({
- title: `Unable to load sample data sets list`,
+ title: i18n.translate('kbn.home.sampleDataSet.unableToLoadListErrorMessage', {
+ defaultMessage: 'Unable to load sample data sets list' }
+ ),
text: `${fetchError.message}`,
});
sampleDataSets = [];
@@ -109,7 +113,9 @@ export class SampleDataSetCards extends React.Component {
}));
}
toastNotifications.addDanger({
- title: `Unable to install sample data set: ${targetSampleDataSet.name}`,
+ title: i18n.translate('kbn.home.sampleDataSet.unableToInstallErrorMessage', {
+ defaultMessage: 'Unable to install sample data set: {name}', values: { name: targetSampleDataSet.name } }
+ ),
text: `${fetchError.message}`,
});
return;
@@ -125,7 +131,9 @@ export class SampleDataSetCards extends React.Component {
}),
}));
toastNotifications.addSuccess({
- title: `${targetSampleDataSet.name} installed`,
+ title: i18n.translate('kbn.home.sampleDataSet.installedLabel', {
+ defaultMessage: '{name} installed', values: { name: targetSampleDataSet.name } }
+ ),
['data-test-subj']: 'sampleDataSetInstallToast'
});
}
@@ -154,7 +162,9 @@ export class SampleDataSetCards extends React.Component {
}));
}
toastNotifications.addDanger({
- title: `Unable to uninstall sample data set: ${targetSampleDataSet.name}`,
+ title: i18n.translate('kbn.home.sampleDataSet.unableToUninstallErrorMessage', {
+ defaultMessage: 'Unable to uninstall sample data set: {name}', values: { name: targetSampleDataSet.name } }
+ ),
text: `${fetchError.message}`,
});
return;
@@ -170,7 +180,9 @@ export class SampleDataSetCards extends React.Component {
}),
}));
toastNotifications.addSuccess({
- title: `${targetSampleDataSet.name} uninstalled`,
+ title: i18n.translate('kbn.home.sampleDataSet.uninstalledLabel', {
+ defaultMessage: '{name} uninstalled', values: { name: targetSampleDataSet.name } }
+ ),
['data-test-subj']: 'sampleDataSetUninstallToast'
});
}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
index 3520cd93cbb8e5..e72aadd0bcae71 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/footer.test.js.snap
@@ -23,7 +23,11 @@ exports[`render 1`] = `
grow={true}
>
- When all steps are complete, you're ready to explore your data.
+
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
index 48e1bc15b6ea61..9ada357a7380dc 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -57,7 +57,11 @@ exports[`props exportedFieldsUrl 1`] = `
target="_blank"
type="button"
>
- View exported fields
+
- Request failed, Error: simulated bulkRequest error
+ Request failed, Error: {message}
@@ -221,12 +357,97 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
-
+
`;
exports[`bulkCreate should display success message when bulkCreate is successful 1`] = `
-
- 1 saved objects successfully added
+ {savedObjectsLength} saved objects successfully added
@@ -485,7 +706,7 @@ exports[`bulkCreate should display success message when bulkCreate is successful
-
+
`;
exports[`renders 1`] = `
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
index debe5319704b8c..84a98a3a7b7848 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -48,7 +48,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
hasShadow={false}
paddingSize="l"
>
-
-
-
@@ -38,7 +40,10 @@ export function Footer({ url, label }) {
- {`When all steps are complete, you're ready to explore your data.`}
+
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
index 07418f35ba883c..b8cf63c171dbb8 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
@@ -30,6 +30,8 @@ import {
EuiButton,
} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
export function Instruction({ commands, paramValues, textPost, textPre, replaceTemplateStrings }) {
let pre;
if (textPre) {
@@ -65,7 +67,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
size="s"
onClick={copy}
>
- Copy snippet
+
- Customize your code snippets
+
@@ -291,7 +310,7 @@ const statusCheckConfigShape = PropTypes.shape({
btnLabel: PropTypes.string,
});
-InstructionSet.propTypes = {
+InstructionSetUi.propTypes = {
title: PropTypes.string.isRequired,
instructionVariants: PropTypes.arrayOf(instructionVariantShape).isRequired,
statusCheckConfig: statusCheckConfigShape,
@@ -309,3 +328,5 @@ InstructionSet.propTypes = {
setParameter: PropTypes.func,
replaceTemplateStrings: PropTypes.func.isRequired,
};
+
+export const InstructionSet = injectI18n(InstructionSetUi);
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.test.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.test.js
index f3ce7770dff821..84ed073f277441 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.test.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.test.js
@@ -18,7 +18,7 @@
*/
import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import {
InstructionSet,
@@ -52,7 +52,7 @@ const instructionVariants = [
];
test('render', () => {
- const component = shallow( {}}
@@ -73,7 +73,7 @@ describe('statusCheckState', () => {
};
test('initial state - no check has been attempted', () => {
- const component = shallow( {}}
@@ -87,7 +87,7 @@ describe('statusCheckState', () => {
});
test('checking status', () => {
- const component = shallow( {}}
@@ -101,7 +101,7 @@ describe('statusCheckState', () => {
});
test('failed status check - error', () => {
- const component = shallow( {}}
@@ -115,7 +115,7 @@ describe('statusCheckState', () => {
});
test('failed status check - no data', () => {
- const component = shallow( {}}
@@ -129,7 +129,7 @@ describe('statusCheckState', () => {
});
test('successful status check', () => {
- const component = shallow( {}}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
index 1b3e06e35b2942..56bb11a5016783 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
@@ -31,6 +31,8 @@ import {
EuiBetaBadge,
} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
export function Introduction({ description, previewUrl, title, exportedFieldsUrl, iconType, isBeta }) {
let img;
if (previewUrl) {
@@ -55,7 +57,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
target="_blank"
rel="noopener noreferrer"
>
- View exported fields
+
@@ -155,7 +176,7 @@ export class SavedObjectsInstaller extends React.Component {
);
return {
- title: 'Load Kibana objects',
+ title: this.props.intl.formatMessage({ id: 'kbn.home.tutorial.savedObject.loadTitle', defaultMessage: 'Load Kibana objects' }),
status: this.state.isInstalled ? 'complete' : 'incomplete',
children: installStep,
key: 'installStep'
@@ -177,8 +198,10 @@ const savedObjectShape = PropTypes.shape({
attributes: PropTypes.object.isRequired,
});
-SavedObjectsInstaller.propTypes = {
+SavedObjectsInstallerUi.propTypes = {
bulkCreate: PropTypes.func.isRequired,
savedObjects: PropTypes.arrayOf(savedObjectShape).isRequired,
installMsg: PropTypes.string,
};
+
+export const SavedObjectsInstaller = injectI18n(SavedObjectsInstallerUi);
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/saved_objects_installer.test.js b/src/core_plugins/kibana/public/home/components/tutorial/saved_objects_installer.test.js
index 1c28831679a246..38a83424421ec7 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/saved_objects_installer.test.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/saved_objects_installer.test.js
@@ -18,13 +18,13 @@
*/
import React from 'react';
-import { shallow, mount } from 'enzyme';
import { findTestSubject } from '@elastic/eui/lib/test';
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
import { SavedObjectsInstaller } from './saved_objects_installer';
test('renders', () => {
- const component = shallow( {}}
savedObjects={[]}
/>);
@@ -43,7 +43,7 @@ describe('bulkCreate', () => {
savedObjects: [savedObject]
});
};
- const component = mount(
- Unable to find tutorial {this.props.tutorialId}
+
@@ -356,7 +365,7 @@ export class Tutorial extends React.Component {
}
}
-Tutorial.propTypes = {
+TutorialUi.propTypes = {
addBasePath: PropTypes.func.isRequired,
isCloudEnabled: PropTypes.bool.isRequired,
getTutorial: PropTypes.func.isRequired,
@@ -364,3 +373,5 @@ Tutorial.propTypes = {
tutorialId: PropTypes.string.isRequired,
bulkCreate: PropTypes.func.isRequired,
};
+
+export const Tutorial = injectI18n(TutorialUi);
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
index 040fd671fc0279..cf6745cf9445a0 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
@@ -18,8 +18,8 @@
*/
import React from 'react';
-import { shallow, mount } from 'enzyme';
import { findTestSubject } from '@elastic/eui/lib/test';
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
import {
Tutorial,
@@ -64,9 +64,8 @@ const replaceTemplateStrings = (text) => {
};
describe('isCloudEnabled is false', () => {
-
test('should render ON_PREM instructions with instruction toggle', () => {
- const component = shallow( {
const getBasicTutorial = () => {
return loadBasicTutorialPromise;
};
- const component = shallow( {
});
test('should display ON_PREM_ELASTIC_CLOUD instructions when toggle is clicked', () => {
- const component = mount( {
});
test('should render ELASTIC_CLOUD instructions when isCloudEnabled is true', () => {
- const component = shallow(
- Home
+
+
- Add Data to Kibana
+
@@ -206,7 +218,7 @@ export class TutorialDirectory extends React.Component {
}
}
-TutorialDirectory.propTypes = {
+TutorialDirectoryUi.propTypes = {
addBasePath: PropTypes.func.isRequired,
openTab: PropTypes.string,
isCloudEnabled: PropTypes.bool.isRequired,
@@ -214,3 +226,5 @@ TutorialDirectory.propTypes = {
setConfig: PropTypes.func.isRequired,
clearIndexPatternsCache: PropTypes.func.isRequired,
};
+
+export const TutorialDirectory = injectI18n(TutorialDirectoryUi);
diff --git a/src/core_plugins/kibana/public/home/components/welcome.js b/src/core_plugins/kibana/public/home/components/welcome.js
index 237a6de55507ef..c95a00323c367e 100644
--- a/src/core_plugins/kibana/public/home/components/welcome.js
+++ b/src/core_plugins/kibana/public/home/components/welcome.js
@@ -37,6 +37,8 @@ import {
EuiButtonEmpty,
} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
/**
* Shows a full-screen welcome page that gives helpful quick links to beginners.
*/
@@ -67,10 +69,14 @@ export class Welcome extends React.Component {
- Welcome to Kibana
+
+
- Your window into the Elastic Stack
+
+
- Try our sample data
+
- Explore on my own
+
}
diff --git a/src/core_plugins/kibana/public/home/load_tutorials.js b/src/core_plugins/kibana/public/home/load_tutorials.js
index 8894a0e78b8b8d..d6b264154d4248 100644
--- a/src/core_plugins/kibana/public/home/load_tutorials.js
+++ b/src/core_plugins/kibana/public/home/load_tutorials.js
@@ -19,6 +19,7 @@
import _ from 'lodash';
import chrome from 'ui/chrome';
+import { i18n } from '@kbn/i18n';
import { toastNotifications } from 'ui/notify';
const baseUrl = chrome.addBasePath('/api/kibana/home/tutorials');
@@ -38,14 +39,18 @@ async function loadTutorials() {
headers: headers,
});
if (response.status >= 300) {
- throw new Error(`Request failed with status code: ${response.status}`);
+ throw new Error(i18n.translate('kbn.home.loadTutorials.requestFailedErrorMessage', {
+ defaultMessage: 'Request failed with status code: {status}', values: { status: response.status } }
+ ));
}
tutorials = await response.json();
tutorialsLoaded = true;
} catch(err) {
toastNotifications.addDanger({
- title: 'Unable to load tutorials',
+ title: i18n.translate('kbn.home.loadTutorials.unableToLoadErrorMessage', {
+ defaultMessage: 'Unable to load tutorials' }
+ ),
text: err.message,
});
}
diff --git a/src/test_utils/public/enzyme_helpers.js b/src/test_utils/public/enzyme_helpers.js
index ca7618d38705fd..4bbaefe515f6f9 100644
--- a/src/test_utils/public/enzyme_helpers.js
+++ b/src/test_utils/public/enzyme_helpers.js
@@ -19,24 +19,57 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
import { intl } from './mocks/intl';
/**
- * Creates the wrapper instance with provided intl object into context
+ * Creates the wrapper instance using shallow with provided intl object into context
*
* @param node The React element or cheerio wrapper
* @param options properties to pass into shallow wrapper
* @return The wrapper instance around the rendered output with intl object in context
*/
export function shallowWithIntl(node, { context = {}, childContextTypes = {}, ...props } = {}) {
+ const clonedNode = cloneNode(node);
+ const options = getOptions(context, childContextTypes, props);
+
+ if (React.isValidElement(node)) {
+ return shallow(clonedNode, options);
+ }
+
+ return clonedNode.shallow(options);
+}
+
+/**
+ * Creates the wrapper instance using mount with provided intl object into context
+ *
+ * @param node The React element or cheerio wrapper
+ * @param options properties to pass into mount wrapper
+ * @return The wrapper instance around the rendered output with intl object in context
+ */
+export function mountWithIntl(node, { context = {}, childContextTypes = {}, ...props } = {}) {
+ const clonedNode = cloneNode(node);
+ const options = getOptions(context, childContextTypes, props);
+
+ if (React.isValidElement(node)) {
+ return mount(clonedNode, options);
+ }
+
+ return clonedNode.mount(options);
+}
+
+export { intl };
+
+function cloneNode(node) {
if (!node) {
throw new Error(`First argument should be cheerio object or React element, not ${node}`);
}
- const clonedNode = React.cloneElement(node, { intl });
+ return React.cloneElement(node, { intl });
+}
- const options = {
+function getOptions(context, childContextTypes, props) {
+ return {
context: {
...context,
intl,
@@ -47,12 +80,4 @@ export function shallowWithIntl(node, { context = {}, childContextTypes = {}, ..
},
...props,
};
-
- if (React.isValidElement(node)) {
- return shallow(clonedNode, options);
- }
-
- return clonedNode.shallow(options);
}
-
-export { intl };